Ability to copy HTML and applied CSS in HTML panel

firebug / firebug

Web Development Evolved - The Firebug you have known and loved

http://getfirebug.com/

1.35k stars 343 forks source link

Ability to copy HTML and applied CSS in HTML panel #2505

Open fbugissues opened 9 years ago

fbugissues commented 9 years ago

Originally reported on Google Code with ID 2366

sometimes I find that I want to 'extract' a chunk of generated HTML in the
current state of an ajax application so that I can use it somewhere else
(i.e: to play a bit with static HTML-based tests).

In the HTML tab I can very easily extract the corresponding HTML by
navigating to (or inspecting) the parent of the given HTML element and then
"Copy HTML" (and paste somewhere else).  It would be great if I could also
do "Copy CSS" and get all the CSS text for the applied node and
descendents, so that I can paste it in a stylesheet along with the exracted
HTML to reproduce the current visual appearence of the ajax application I'm
extracting from

Reported by jcerruti on 2009-10-07 18:01:06

fbugissues commented 9 years ago

Reported by collins.mike on 2009-10-07 18:05:38

Status changed: Triaged
Labels added: Type-Enhancement, html, css

fbugissues commented 9 years ago

just FYI, "Owner" in fbug means you are implementing it...

A test case would be awesome, so we could know that the copy was successful according
to at least one important user.

Reported by johnjbarton@johnjbarton.com on 2009-10-08 04:17:09

Labels added: 1.5, Test-case-needed

fbugissues commented 9 years ago

I figured I would volunteer to implement it unless someone else really wanted to.  It
doesn't seem like it would be very difficult to implement.

Not sure what you mean by a test case, FBTest? Or just a simple page with some HTML
and CSS that you want to copy?

Reported by collins.mike on 2009-10-08 18:03:58

fbugissues commented 9 years ago

Bonus points for FBTest, but for the present purpose just a simple page that allows
us to all agree on what should/did happen.

Reported by johnjbarton@johnjbarton.com on 2009-10-08 18:07:27

fbugissues commented 9 years ago

I created a test case for this at http://getfirebug.com/tests/issues/2366/issue2505.html.

One thing to mention here:
When you use the copied CSS for testing purposes you might not always get what you
expected. E.g. if a parent element of the one you copied uses -moz-transform to transform
the element, the contained elements will also be affected, though the CSS is not applied
to them. So the one you copied isn't transformed when you paste it to a separate file.

Mike, if you still plan to work on this, feel free to do so.

Sebastian

Reported by sebastianzartner@gmx.de on 2012-01-19 07:31:57

Labels added: Test-case-in-suite
Labels removed: Test-case-needed

fbugissues commented 9 years ago

Issue 5463 is a duplicate of this one containing some more discussion.
Mike, I removed you as owner because I assume you won't start working on this.

Sebastian

Reported by sebastianzartner@gmx.de on 2012-04-02 05:33:35

fbugissues commented 9 years ago

Reported by sebastianzartner on 2012-08-01 13:22:49

Labels added: style
Labels removed: css

fbugissues commented 9 years ago

Reported by sebastianzartner on 2013-03-23 14:35:22

fbugissues commented 9 years ago

Reported by sebastianzartner on 2013-04-12 08:16:29

fbugissues commented 9 years ago

On issue 5463 a link was posted to a Chrome DevTools extension called SnappySnippet[1],
which seems to do this.
I've sent an email to the author of the extension asking whether he'd like to port
to Firebug.

Sebastian

[1] https://chrome.google.com/webstore/detail/snappysnippet/blfngdefapoapkcdibbdkigpeaffgcil

Reported by sebastianzartner on 2014-08-20 13:26:37

fbugissues commented 9 years ago

Issue 5463 has been merged into this issue.

Reported by sebastianzartner on 2014-08-20 13:27:37

fbugissues commented 9 years ago

Note that IE9 has this feature built in to the devtools: http://stackoverflow.com/a/14664803/3829

Reported by dmnd@desmondbrand.com on 2014-09-03 01:32:19