Bug 82470 - Web Inspector: Export element.style to a CSS Rule
Summary: Web Inspector: Export element.style to a CSS Rule
Status: RESOLVED INVALID
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (Deprecated) (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Enhancement
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2012-03-28 08:19 PDT by Ian Moffitt
Modified: 2014-12-01 14:57 PST (History)
11 users (show)

See Also:


Attachments
Screen capture of referred location in web inspector (22.49 KB, image/png)
2012-03-28 08:19 PDT, Ian Moffitt
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Ian Moffitt 2012-03-28 08:19:32 PDT
Created attachment 134300 [details]
Screen capture of referred location in web inspector

I am in love with the Web Inspector. Currently I use it in Chrome, the latest release (17.0.963.83 m).

Often when I am writing out CSS for a new page, I will play with the styles in the web inspector to get it how I want it, then use the CSS view in the Resources tab (LOVE versioning, btw. Holy hell) to copy my entire stylesheet into the file and save it.

I'd love the ability to export the element.style "inline style editor" to a new CSS Rule.

So for example, if I had

element.style {
  position: absolute;
  top: 50px;
  left: 245px;
}

but I wanted it to be named #foobar, I could click something (the "+" seems like a prime location for me to expect this to happen if I click it) and it would copy those styles into a matched CSS rule and place it at the end of a stylesheet in the Resource view, so I can copy or save it out to an existing or new file.
Comment 1 Ian Moffitt 2012-03-28 10:47:28 PDT
I ended up finding later that clicking an element in the DOM view and hitting the "+" will create a unique selector, and the CSS is dumped into the page name under the Resources tab.

However, I still think it would be useful to transfer anything that is currently in the inline style area to the newly created selector, once the user clicks the "+".