Bug 82470 – Web Inspector: Export element.style to a CSS Rule

• Status: RESOLVED
• Resolution: INVALID
• Component: Web Inspector (Deprecated)

[Ian Moffitt]

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.

[Ian Moffitt]

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 "+".