Closed Bug 1424863 Opened 7 years ago Closed 5 years ago

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

Categories

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

Product:
DevTools
Component:
Inspector: Rules
Version:
57 Branch
Type:
defect

Tracking

(firefox76 fixed)

Status:
RESOLVED FIXED
Milestone:
Firefox 76
Tracking Flags:
Tracking Status
firefox76 --- fixed

People

(Reporter: lachlan, Assigned: sankalp.sans, Mentored)

References

Details

Attachments

(1 file)

Bug 1424863 - Copying CSS Rules from the Devtools Inspector inserts empty lines between rules r=rcaliman
(deleted), text/x-phabricator-request
Details
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; ```
Component: Untriaged → Developer Tools: CSS Rules Inspector
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/
Mentor: pbrosset
Status: UNCONFIRMED → NEW
Ever confirmed: true
Priority: -- → P2
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?
Product: Firefox → DevTools

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

Assignee: nobody → paarmita1998
Status: NEW → ASSIGNED

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

Flags: needinfo?(paarmita1998)

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

Status: ASSIGNED → RESOLVED
Closed: 6 years ago
Resolution: --- → WORKSFORME

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.

(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?

@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.

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.

Flags: needinfo?(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

Flags: needinfo?(yoni)

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.

Status: RESOLVED → REOPENED
Resolution: WORKSFORME → ---

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.

Flags: needinfo?(paarmita1998)

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.

Flags: needinfo?(gl)
Assignee: paarmita1998 → nobody
Flags: needinfo?(gl)

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?

(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/

Assignee: nobody → sankalp.sans
Mentor: pbrosset → rcaliman

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.

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

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

Status: REOPENED → RESOLVED
Closed: 6 years ago → 5 years ago
status-firefox76: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 76

How do I get this fix?

(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.

QA Whiteboard: [qa-76b-p2]

Hi

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

Hi

In Firefox 78 copy not working :( OS Windows 10

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.

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: