Jason Laster
PostsNotes

Chrome DevTools - How are computed properties populated?

Chrome(10y ago)

#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");
};
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?