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

Computed Properties part 1

Where is the computed properties pane defined?

functionality:

How is the list of properties populated?