Open Bug 785399 Opened 12 years ago Updated 2 years ago

[inspector] Copy HTML *AND* CSS

Categories

(DevTools :: Inspector, defect, P3)

Product:
DevTools
Component:
Inspector
Type:
defect

Tracking

(Not tracked)

People

(Reporter: groovecoder, Unassigned)

Details

In addition to "Copy Inner HTML" and "Copy Outer HTML" it would be great to have a "Copy HTML and CSS" which copies the HTML and all the applicable CSS.

Use-case is when I want to debug an HTML and CSS issue and I want to quickly share the HTML and CSS with someone online.

Note: it should include the CSS applicable to all sub-elements as well since many HTML & CSS issues involve page-flow and positioning.
> Copy HTML
> Copy HTML and CSS

or
> Copy HTML
> Copy CSS

?
OS: Mac OS X → All
Hardware: x86 → All
Version: 15 Branch → Trunk
(In reply to Paul Rouget [:paul] from comment #1)
I read it as the equivalent of:
"Generate minimal test case of html with <style>, into the clipboard"
Yeah, that's the use-case. So "Copy HTML and CSS" is the most succinct option.
We could use the to-come scoped style element.
Summary: Copy HTML *AND* CSS → [inspector] Copy HTML *AND* CSS
The "minimal test case of html with style" is very interesting but I think we should also have a "copy CSS" option in the menu that copies into the clipboard the CSS for just that selected node. It's possible today to do this by copy/pasting from the rule-view panel but it's not obvious to everyone (I think people tend to think that doing it from there will also copy "Inherited from..." headers and stylesheet links).
(In reply to Patrick Brosset [:pbrosset] [:patrick] from comment #5)
> The "minimal test case of html with style" is very interesting but I think
> we should also have a "copy CSS" option in the menu that copies into the
> clipboard the CSS for just that selected node.

I agree. Though please report a new bug for that.

Note that there exists an extension for the Chrome DevTools called SnappySnippet[1], which does exactly that.

(In reply to Paul Rouget [:paul] from comment #4)
> We could use the to-come scoped style element.

The scoped <style> element is available since Firefox 21.

Though it's not that easy, because you need to copy all CSS rules applying to the selected node's subtree including rules applying to ancestor elements. Also selectors won't match the nodes of the subtree anymore. And there are more things to consider.
The author of SnappySnippet summarized the problems he was facing at Stack Overflow[2].

Sebastian

[1] https://chrome.google.com/webstore/detail/snappysnippet/blfngdefapoapkcdibbdkigpeaffgcil
[2] http://stackoverflow.com/a/18928130
Filter on CLIMBING SHOES
Priority: -- → P3
Interested to solve this bug , appreciate it , if some one could help me ! please guide me
(In reply to arjunakumar92 from comment #8)
> Interested to solve this bug , appreciate it , if some one could help me !
> please guide me
This is a rather hard bug, for several reasons:

- It would require some new UI in the inspector to trigger the action. I don't know if "copy HTML & CSS" context menu item is the right way to do this, or if we'd need something else. In any case, adding more UI isn't straightforward because there are already so many menus, buttons, etc... all over the place.
@Helen: where do you think a feature like this could live? Context menu? Inspector toolbar? Separate (add-on?) panel?

- Extracting a part of the DOM to an isolated test case is hard when it comes to CSS. See comment 6 and especially the link to the stackoverflow answer.

Having said this, it's a very interesting feature, and if you feel up for it, please go ahead. I'm just mentioning that it's hard because I see you're new to bugzilla, so I assume you're new to the devtools code base too, and this isn't really a good first bug at all (you can find easy and/or mentored bugs here: http://firefox-dev.tools/ ).

However, the hard part for this bug isn't really about the integration into devtools, but rather how we want the CSS/HTML code extraction to be done. The solution taken by SnappySnippet works, but it basically breaks all the CSS rules structure/selectors. Maybe there's a better way worth exploring?
Flags: needinfo?(hholmes)
I think this bug might be a candidate for the backlog. I'm going to ni? Sole to get a better idea if people are actively requesting this feature; in this bug, at least, it seems like we're all Mozillians, so it might be helpful to get some external validation when it comes to prioritizing it (especially since it seems like getting it to work correctly would be technically challenging).

Sole, what do you think of having an option in the Inspector for "Copy HTML and copy CSS"? This would copy the relevant line of HTML and its relevant CSS selectors.

Patrick is right that additional UI should have good reason behind it. On first thought, I think that the context menu makes the most sense for a feature like this if we decide to go ahead with it (other similar options are in the "Copy" submenu).
Flags: needinfo?(hholmes) → needinfo?(sole)
(In reply to Helen V. Holmes (:helenvholmes) (:✨)(pls ni?) from comment #10)
> I think this bug might be a candidate for the backlog. I'm going to ni? Sole
> to get a better idea if people are actively requesting this feature; in this
> bug, at least, it seems like we're all Mozillians, so it might be helpful to
> get some external validation when it comes to prioritizing it (especially
> since it seems like getting it to work correctly would be technically
> challenging).

For what it's worth, I remember this being requested several times for Firebug. There's also a related issue:
https://github.com/firebug/firebug/issues/2505

Sebastian
I think this is the first time I see this being requested. I could see its usage though, but it seems like "a thing developers trying to replicate a bug" would need. Which would explain that it's a thing Firebug users would request since "normal users" do not install Firebug.

I'd also think that perhaps you want to keep this "hidden" or maybe just enabled in developer edition or similar? I mean, this is very niche and the UI is already cluttered. Sometimes I right click and then get so many options I forget what I wanted to do.
Flags: needinfo?(sole)
(In reply to Soledad Penades [:sole] [:spenades] from comment #12)
> I think this is the first time I see this being requested. I could see its
> usage though, but it seems like "a thing developers trying to replicate a
> bug" would need.

Yes, as comment #0 says:
> Use-case is when I want to debug an HTML and CSS issue and I want to quickly share the HTML and CSS with someone online.

> Which would explain that it's a thing Firebug users would
> request since "normal users" do not install Firebug.

I expect "normal users" also not to use the DevTools.

> I'd also think that perhaps you want to keep this "hidden" or maybe just
> enabled in developer edition or similar? I mean, this is very niche and the
> UI is already cluttered. Sometimes I right click and then get so many
> options I forget what I wanted to do.

I don't think it is a niche feature. It would not only serve web developers to track down layout issues of their websites, but also help to create reduced test cases for Gecko layout issues. Therefore, it would also directly benefit Mozilla.

As the Inspector context menu got tightened up lately and the copy functionality moved into a submenu, I see no problems to add a new item for this under the 'Copy' submenu.

Sebastian
Well, let me rephrase: "it is the first time a developer reaches out to me, my team or any other communication channel I have supervised or have been directly involved in, and asks for this super mega hyper specific feature".

When I mean "normal users" I mean "normal web developers" AKA "normal DevTools users". You'd be surprised that most "devtools users" don't really need most of the features in DevTools let alone Firebug.

I understand where you come from; as developers we all have our own features that we love and think are the best idea ever and totally doable, but that doesn't mean that everyone else cares about them or that it's even worth working on them. Specially if:

a) the resources we have available are very constrained and 
b) as Patrick said in comment #9 this isn't a trivial bug *at all*, and
c) there are way more important bugs that would have way more impact by way of helping more "normal DevTools users" than those that want to build a test case (which do use codepen and jsfiddle and similar anyway to try and actually determine what is broken)
Since :sebo first mentioned it over a year ago, we've made big strides towards implementing Web Extensions. 

Maybe the best way forward is to update the SnappySnippet Chrome extension[1] to be Firefox-compatible?

[1] https://chrome.google.com/webstore/detail/snappysnippet/blfngdefapoapkcdibbdkigpeaffgcil
(In reply to Luke Crouch [:groovecoder] from comment #15)
> Since :sebo first mentioned it over a year ago, we've made big strides
> towards implementing Web Extensions. 
> 
> Maybe the best way forward is to update the SnappySnippet Chrome
> extension[1] to be Firefox-compatible?
> 
> [1]
> https://chrome.google.com/webstore/detail/snappysnippet/
> blfngdefapoapkcdibbdkigpeaffgcil
Yes, an extension would be well suited for this feature.
(In reply to Patrick Brosset <:pbro> from comment #16)
> (In reply to Luke Crouch [:groovecoder] from comment #15)
> > Since :sebo first mentioned it over a year ago, we've made big strides
> > towards implementing Web Extensions. 
> > 
> > Maybe the best way forward is to update the SnappySnippet Chrome
> > extension[1] to be Firefox-compatible?
> > 
> > [1]
> > https://chrome.google.com/webstore/detail/snappysnippet/
> > blfngdefapoapkcdibbdkigpeaffgcil
> Yes, an extension would be well suited for this feature.
Agreed.
(In reply to Soledad Penades [:sole] [:spenades] from comment #14)
> When I mean "normal users" I mean "normal web developers" AKA "normal
> DevTools users". You'd be surprised that most "devtools users" don't really
> need most of the features in DevTools let alone Firebug.

I know, many of the DevTools features are very niche.

> I understand where you come from; as developers we all have our own features
> that we love and think are the best idea ever and totally doable, but that
> doesn't mean that everyone else cares about them or that it's even worth
> working on them.

I was rather writing as a Firebug developer here that really got that request quite often. That may also be because of the Firebug Working Group asking for proper test cases for the reported bugs, but I also heard several people wanting to track their layout issues down that way.

> Specially if:
> 
> a) the resources we have available are very constrained and 
> b) as Patrick said in comment #9 this isn't a trivial bug *at all*, and
> c) there are way more important bugs that would have way more impact by way
> of helping more "normal DevTools users" than those that want to build a test
> case (which do use codepen and jsfiddle and similar anyway to try and
> actually determine what is broken)

I totally agree that other features have higher priorities than this one. I just wanted to clarify that the number of users, which would use such a tool, is probably not as small as one might think, even when you personally didn't get that request before.

(In reply to Helen V. Holmes (:helenvholmes) (:✨)(pls ni?) from comment #17)
> (In reply to Patrick Brosset <:pbro> from comment #16)
> > (In reply to Luke Crouch [:groovecoder] from comment #15)
> > > Since :sebo first mentioned it over a year ago, we've made big strides
> > > towards implementing Web Extensions. 
> > > 
> > > Maybe the best way forward is to update the SnappySnippet Chrome
> > > extension[1] to be Firefox-compatible?
> > > 
> > > [1]
> > > https://chrome.google.com/webstore/detail/snappysnippet/
> > > blfngdefapoapkcdibbdkigpeaffgcil
> > Yes, an extension would be well suited for this feature.
> Agreed.

I've already asked the author of SnappySnippet about this two years ago. His answer was:

> I'd love to help! I'm planning on modularizing SnappySnippet code a bit
> more in the near future. This should ease the porting process. All 
> 'interesting parts' (processing bunch of nasty getComputedStyle's and 
> innerHTML's to a nice CSS+HTML output) will be modules/libraries that 
> can be easily used e.g. in a npm module or firefox/firebug extension.
> When this is done it would be just a matter of adding UI to get it 
> running. I can't give you any estimates on when this will be ready 
> though, this is just a pet project and ATM I'm working on something else.

But yeah, porting SnappySnippet to Firefox is probably the easiest way to get that feature.

Sebastian
Product: Firefox → DevTools
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.