Bug 68452 – Web Inspector: Feature request: onCSSSetProperty/onCSSRemoveProperty API

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

[Nikita Vasilyev]

I love how Web Inspector allows me to save CSS changes. Unfortunately, it doesn't work when:

  * CSS on a web page is not the same as on file system. For instance, a stylesheet on a webpage is a concatenation of few stylesheets.
  * SASS, Less CSS, Stylus is used

Would be nice, if Inspector had methods like Firebug has:

    onCSSSetProperty(style, propName, propValue, propPriority, prevValue, prevPriority, rule, baseText)
    onCSSRemoveProperty(style, propName, prevValue, prevPriority, rule, baseText)

Example of usage: http://code.google.com/p/css-x-fire/source/browse/trunk/cssxfire/src/content/overlay.js#39

It would make possible to build tools (by enthusiasts like me!) to solve these problems.

[Nikita Vasilyev]

At Yandex, we include just one stylesheet on the page. We have few hundreds of stylesheets; it's would be too slow to include all of them on the page. So we concatenate them on the server. My plan is to extend onCSSSetProperty/onCSSRemoveProperty methods to send some kind of CSS patch object to the server:

{
  action: 'change',
  url: 'http://foo.dev/all.css',
  selectorIndex: 15,
  selectorText: '.foo .bar',
  change: {
    name: 'color',
    value: 'blue',
    prevValue: 'green',
    important: false,
    prevImportant: true
  }
}

Example that includes media rules:

{
  action: 'change',
  url: 'http://foo.dev/all.css',
  selectorIndex: 42,
  selectorText: '@media screen',
  change: {
    selectorIndex: 2,
    selectorText: '.foo .bar',
    change: {
      name: 'color',
      value: 'blue',
      prevValue: 'green',
      important: false,
      prevImportant: true
    }
  }
}


On the server I run Node.js with CSSOM (https://github.com/NV/CSSOM). I find CSS file that I need and apply the CSS patch.

[Pavel Feldman]

>> At Yandex, we include just one stylesheet on the page. We have few hundreds of stylesheets; it's would be too slow to include all of them on the page. So we concatenate them on the server.

Pretty much everybody concatenates / minifies the scripts/styles. However, most frameworks support "development" mode where raw (non-concatenated) scripts/styles are served for the sake of better debugging.

>> My plan is to extend onCSSSetProperty/onCSSRemoveProperty methods to send some kind of CSS patch object to the server:

I am not sure I follow the "extend onCSSSetProperty/onCSSRemoveProperty" since we don't have such signals as is.

FYI: caseq@ is currently working on the extension API that allows tracking changes to resources. Once it is ready, you will be able to analyse changes in the concatenated script and map changes back to the original files.

[Andrey Kosyakov]

(In reply to comment #2)

> FYI: caseq@ is currently working on the extension API that allows tracking changes to resources. Once it is ready, you will be able to analyse changes in the concatenated script and map changes back to the original files.

This is already available, though the interface is highly experimental and hence, potentially, volatile. See the test for reference (you're probably interested in webInspector.inspectedWindow.onResourceContentCommitted):

http://trac.webkit.org/browser/trunk/LayoutTests/inspector/extensions/extensions-resources.html

[Nikita Vasilyev]

(In reply to comment #2)
> >> At Yandex, we include just one stylesheet on the page. We have few hundreds of stylesheets; it's would be too slow to include all of them on the page. So we concatenate them on the server.
> 
> Pretty much everybody concatenates / minifies the scripts/styles. However, most frameworks support "development" mode where raw (non-concatenated) scripts/styles are served for the sake of better debugging.

Few hundreds of CSS files are too much even for development mode.

> >> My plan is to extend onCSSSetProperty/onCSSRemoveProperty methods to send some kind of CSS patch object to the server:
> 
> I am not sure I follow the "extend onCSSSetProperty/onCSSRemoveProperty" since we don't have such signals as is.

I would extend it if Inspector had something like this.


(In reply to comment #3)
> This is already available, though the interface is highly experimental and hence, potentially, volatile. See the test for reference (you're probably interested in webInspector.inspectedWindow.onResourceContentCommitted):
> 
> http://trac.webkit.org/browser/trunk/LayoutTests/inspector/extensions/extensions-resources.html

How can I use this API? Is it designed for Chrome and/or Safari extensions?

[Andrey Kosyakov]

(In reply to comment #4)
> 
> How can I use this API? Is it designed for Chrome and/or Safari extensions?

Yes, though presently this is only available for chrome:

http://code.google.com/chrome/extensions/trunk/experimental.devtools.html

[Nikita Vasilyev]

onResourceContentCommitted seems to work well. I don't event have to parse CSS files on the server side. It's a bit of overhead sending all new file rather than just diff, but I can live with it.

Thanks for the response!