1424863 - Copying CSS Rules from the Devtools Inspector inserts empty lines between rules

Status: RESOLVED FIXED

(DevTools :: Inspector: Rules, defect, P2)

Description

[Lachlan Heywood]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20171128222554

Steps to reproduce:

Inspect element, highlight multiple css rules, paste css rules.


Actual results:

Resulting paste ends up with empty lines between rules like so:

```
  font-weight: bold;
  
  font-size: 14px;
  
  line-height: 22px;
```


Expected results:

Should paste with no empty lines, like this:

```
  font-weight: bold;
  font-size: 14px;
  line-height: 22px;
```

Comment 1

[Patrick Brosset <:pbro>]

Good catch, thank you for filing.
For info, if you right-click anywhere inside the rule, you will find useful context menu items, one of them actually lets you copy the whole rule, and formats it correctly.

That being said, we should still fix this.

Just to be very clear, let me rephrase the steps to reproduce:

- Inspect any element that has CSS rules applied,
- in the Rules view, select the whole text with your mouse,
- hit ctrl+c to copy that text,
- paste it in a text editor.

As lachlan said, each property is separated by an empty line. And it's frustrating having to delete them one by one.

I think the fix should be somewhere in this function: https://searchfox.org/mozilla-central/rev/062e1cf551f5bf3f0af33671b818f75a55ac497b/devtools/client/inspector/rules/rules.js#454-475

I have not investigated what the problem is exactly, but debugging with the browser toolbox would be helpful: https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox

Also, if you want to fix this and it's your first DevTools bug, welcome! And take a look at http://docs.firefox-dev.tools/

Comment 2

[Lachlan Heywood]

I've actually just tried to recreate this issue and I'm unable to do so. Looking at the lines that Patrick just suggested, it looks like nothing has changed for a while so I'm unsure as to what was causing the double line-spacing. This line specifically removes any double newlines: https://searchfox.org/mozilla-central/rev/062e1cf551f5bf3f0af33671b818f75a55ac497b/devtools/client/inspector/rules/rules.js#468

Potentially, something within the markup was not being hidden entirely (perhaps the overwritten rules `li`) that caused the copied lines to include some extra whitespace characters which would prevent L468 from removing double newlines. L468 also only removes double newlines, not triple or more. Had there been 3 newlines in the copied text at any point, this would still only know it down to 2.

Is anyone able to confirm on v58?

Comment 4

[Paarmita Bhargava]

Hey, I can give this issue a try. Can you please assign it to me?

Comment 5

[Razvan Caliman [:rcaliman]]

I can't reproduce this in Firefox 68.0a1 (2019-03-18).
Is there a reduced test case where this still occurs?

Comment 6

[Lachlan Heywood]

I can't reproduce this either. It seems to have been fixed between v57 and v58.

Comment 7

[yoni]

I'm sorry, I just reproduced it today with 66.0.1 (64-bit)

This only happens when I ctrl + C - if I right click and copy, it does not happen.

Comment 8

[Lachlan Heywood]

(In reply to yoni from comment #7)

I'm sorry, I just reproduced it today with 66.0.1 (64-bit)

This only happens when I ctrl + C - if I right click and copy, it does not happen.

It doesn't happen for me with macOS Mojave on v66.0.1 when using keyboard shortcut, edit menu or right click option.

@yoni, Are you able to provide more details about how you reproduce the issue?

Comment 9

[yoni]

@Lachlan, would be happy to provide details but unsure what you'd need & what I could provide without exposing private site info.

I'm on Windows 10, latest updated FF.

Comment 10

[Lachlan Heywood]

What are the steps to reproduce the issue? Is it a local development environment? Does it happen on any other sites?

Without more information, there's no way to reproduce the issue which means it cannot be debugged and resolved.

Comment 11

[yoni]

The site is not a local environment - it is a server. It happens very randomly but as fortune would have it today when you closed the issue I was suffering the same issue.

I copy and paste from a site using Ctrl C after selecting the CSS rules, pasting into Sublime Text 3 (also on Windows) and it inserts spaces. For example:

Use mouse to select these rules and press Ctrl C: https://s.put.re/37De7gQb.png

Pasted into ST3 using Ctrl V: https://s.put.re/kuyNp655.png

If I have selected those and right clicked Copy, pasting it into ST3 looks like this: https://s.put.re/XRW577NL.png

Comment 12

[Lachlan Heywood]

I think I can replicate this issue though need someone to confirm.

When I highlight only a few rules and copy/paste them, the extra newlines appear.

If the selection includes any part of the opening or closing line of the rule, the newlines do get pasted.

Here's a video to demonstrate.

Comment 13

[yoni]

Nice video Lachlan, thanks for doing that.

You've identified there another related bug - the fact that on some selects, you have a tab indentation on all lines after the first. Another annoying mini bug.

Comment 14

[Paarmita Bhargava]

Hey Gabriel,
Can you please assign this task for other contributors as I have a lot more issues to work on and will look on this one if nobody else takes it.
Thanks in advance.

Comment 15

[sankalp.sans]

Hi folks, I'd be happy to take up this issue. I actively want this fixed (recently switched all my dev from Chrome to Firefox, and realized this to be a pain point)

@Gabriel could you assign this to me?

Comment 16

[Razvan Caliman [:rcaliman]]

(In reply to sankalp.sans from comment #15)

Hi folks, I'd be happy to take up this issue. I actively want this fixed (recently switched all my dev from Chrome to Firefox, and realized this to be a pain point)

@Gabriel could you assign this to me?

Hi!

You're welcome to fix this. I've assigned it to you.

There's a duplicate bug 1619894 which mentions the unwanted line breaks occur only after the Computed panel is visible at least once. That unexpected interaction is a good place to start looking for the root cause.

Copied over the steps to reproduce:

1. Open the inspector.
2. Make sure to set the 3rd pane to "computed"
3. Highlight text in the rules view and copy it to clipboard
4. Paste the copied text into an editor.

The StyleInspectorMenu is where the copying action is done: https://searchfox.org/mozilla-central/source/devtools/client/inspector/shared/style-inspector-menu.js

If you haven't done so already, check out this resource on getting the code and getting started: https://docs.firefox-dev.tools/

Comment 18

[sankalp.sans]

Attachment: Bug 1424863 - Copying CSS Rules from the Devtools Inspector inserts empty lines between rules r=rcaliman

Comment 19

[sankalp.sans]

Thanks, Razvan.

That information was incredibly helpful. The docs are also beautifully navigable.

This is my first contribution to the project, and I was able to get up and running in no time!

In fact I was able to prepare the patch over this weekend too.

https://phabricator.services.mozilla.com/D66899

Please do let me know if this is okay.

I've tested it with a couple of scenarios, and the behavior is nominal in each one of those.

Comment 20

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f0436db3d379
Copying CSS Rules from the Devtools Inspector inserts empty lines between rules r=rcaliman

Comment 21

[Arthur Iakab [arthur_iakab]]

https://hg.mozilla.org/mozilla-central/rev/f0436db3d379

Comment 22

[legoduke]

How do I get this fix?

Comment 23

[Razvan Caliman [:rcaliman]]

(In reply to legoduke from comment #22)

How do I get this fix?

If you really need it immediately, you can download Firefox Nightly and use it right away.
Otherwise, this fix will carry over to Firefox Beta and Firefox Developer Edition in about 2 weeks and then to Firefox Release in about 6 weeks.

Comment 24

[sergiy.pavlenko]

Hi

In Firefox Nightly ( version 77 ) copy in inspector not working. And in version 75 not working too.
OS Windows 10.

Comment 25

[sergiy.pavlenko]

Hi

In Firefox 78 copy not working :( OS Windows 10

Comment 26

[mjgruta]

Using Ctrl+C when copying part of the CSS is not working for me on Windows 10 - FF 83.0 (64-bit). This works fine on my MAC computer.
Copying including the selector works fine.
I need to do right click then Copy to make it work.