Computed Properties part 1

Computed Properties part 1

Where is the computed properties pane defined?

The computed style properties pane is defined in elements/ComputedStyleSidebarPane.js file.

The pane holds computed properties and computed "inherited" properties.

It's interesting that the inherited properties checkbox toggles the WebInspector.settings.showInheritedComputedStyleProperties setting. Making the inherited properties checkbox a devtools setting means that you can toggle inherited properties on, navigate to sources and back to elements and it's still on.

It's parent class is WebInspector.ElementsSidebarPane

WebInspector.ComputedStyleSidebarPane = function() {
    WebInspector.ElementsSidebarPane.call(this, WebInspector.UIString("Computed Style"));

    var inheritedCheckBox = WebInspector.SettingsUI.createSettingCheckbox(
      WebInspector.UIString("Show inherited properties"),
      WebInspector.settings.showInheritedComputedStyleProperties,
      true
    );

    WebInspector.settings.showInheritedComputedStyleProperties.addChangeListener(
      this._showInheritedComputedStyleChanged.bind(this)
    );

    this._propertiesContainer = this.bodyElement.createChild("div", "monospace");
}
functionality:
  • setNode
  • doUpdate
  • setHostingPane
  • setFilterBoxContainer
  • _onTraceProperty
  • _showInheritedComputedStyleChanged
  • _processColor
  • _innerRebuildUpdate
  • _isPropertyInherited
  • _updateFilter

How is the list of properties populated?

01 May 2015