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