- Revision
- 195432
- Author
- commit-qu...@webkit.org
- Date
- 2016-01-21 18:06:49 -0800 (Thu, 21 Jan 2016)
Log Message
Web Inspector: Add toggle-able list of classes for each element
https://bugs.webkit.org/show_bug.cgi?id=152678
Patch by Devin Rousso <dcrousso+web...@gmail.com> on 2016-01-21
Reviewed by Timothy Hatcher.
Adds a button to the CSS sidebar that, when toggled, displays a section
directly above it containing all the classes for the selected node that,
when toggled, adds or removes the class from the node.
* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Protocol/RemoteObject.js:
(WebInspector.RemoteObject.prototype.callFunction.mycallback):
(WebInspector.RemoteObject.prototype.callFunction):
Add extra handling of arguments to allow nicer looking calls by other classes.
* UserInterface/Views/CSSStyleDetailsSidebarPanel.css:
Changed next-sibling selector (+) to general-sibling selector (~).
(.sidebar > .panel.details.css-style > .content ~ :matches(.options-container, .class-list-container)):
(.sidebar > .panel.details.css-style > .content:not(.supports-new-rule, .has-filter-bar) ~ :matches(.options-container, .class-list-container)):
(.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle):
(.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle.selected):
(.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle:not(.selected):hover):
(.sidebar > .panel.details.css-style > .content ~ .class-list-container):
(.sidebar > .panel.details.css-style > .content ~ .class-list-container[hidden]):
(.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class):
(.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > input[type="checkbox"]):
(.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .add-class-icon):
(.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .class-name-input):
(.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class:not(.active) > .class-name-input):
(.sidebar > .panel.details.css-style > .content ~ .class-list-container > *:matches(.new-class, .class-toggle)):
* UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
(WebInspector.CSSStyleDetailsSidebarPanel):
Also changed the few instances of "var" to "let".
(WebInspector.CSSStyleDetailsSidebarPanel.prototype.refresh):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype.addEventListeners):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._handleNodeAttributeModified):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._handleNodeAttributeRemoved):
Adds listeners to the DOMNode specifically listening for changes to the
class attribute and repopulates the class toggle list if fired.
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._classToggleButtonClicked):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._addClassContainerClicked):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._addClassInputKeyPressed):
If the Enter key is pressed, add a new class equal to the input value.
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._addClassInputBlur):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._populateClassToggles):
Loops through all the classes, including previously removed ones, for the
selected node and creates a toggle for each.
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._createToggleForClassName.classNameToggleChanged):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._createToggleForClassName):
Creates a toggle element for the given className and adds it to the container.
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._toggleClass.resolvedNode.toggleClass):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._toggleClass.resolvedNode):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._toggleClass):
Uses the Element.classList to toggle the given className on the selected node.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (195431 => 195432)
--- trunk/Source/WebInspectorUI/ChangeLog 2016-01-22 02:05:28 UTC (rev 195431)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-01-22 02:06:49 UTC (rev 195432)
@@ -1,3 +1,68 @@
+2016-01-21 Devin Rousso <dcrousso+web...@gmail.com>
+
+ Web Inspector: Add toggle-able list of classes for each element
+ https://bugs.webkit.org/show_bug.cgi?id=152678
+
+ Reviewed by Timothy Hatcher.
+
+ Adds a button to the CSS sidebar that, when toggled, displays a section
+ directly above it containing all the classes for the selected node that,
+ when toggled, adds or removes the class from the node.
+
+ * Localizations/en.lproj/localizedStrings.js:
+
+ * UserInterface/Protocol/RemoteObject.js:
+ (WebInspector.RemoteObject.prototype.callFunction.mycallback):
+ (WebInspector.RemoteObject.prototype.callFunction):
+ Add extra handling of arguments to allow nicer looking calls by other classes.
+
+ * UserInterface/Views/CSSStyleDetailsSidebarPanel.css:
+ Changed next-sibling selector (+) to general-sibling selector (~).
+
+ (.sidebar > .panel.details.css-style > .content ~ :matches(.options-container, .class-list-container)):
+ (.sidebar > .panel.details.css-style > .content:not(.supports-new-rule, .has-filter-bar) ~ :matches(.options-container, .class-list-container)):
+ (.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle):
+ (.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle.selected):
+ (.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle:not(.selected):hover):
+ (.sidebar > .panel.details.css-style > .content ~ .class-list-container):
+ (.sidebar > .panel.details.css-style > .content ~ .class-list-container[hidden]):
+ (.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class):
+ (.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > input[type="checkbox"]):
+ (.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .add-class-icon):
+ (.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .class-name-input):
+ (.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class:not(.active) > .class-name-input):
+ (.sidebar > .panel.details.css-style > .content ~ .class-list-container > *:matches(.new-class, .class-toggle)):
+
+ * UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
+ (WebInspector.CSSStyleDetailsSidebarPanel):
+ Also changed the few instances of "var" to "let".
+
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype.refresh):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype.addEventListeners):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._handleNodeAttributeModified):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._handleNodeAttributeRemoved):
+ Adds listeners to the DOMNode specifically listening for changes to the
+ class attribute and repopulates the class toggle list if fired.
+
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._classToggleButtonClicked):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._addClassContainerClicked):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._addClassInputKeyPressed):
+ If the Enter key is pressed, add a new class equal to the input value.
+
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._addClassInputBlur):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._populateClassToggles):
+ Loops through all the classes, including previously removed ones, for the
+ selected node and creates a toggle for each.
+
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._createToggleForClassName.classNameToggleChanged):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._createToggleForClassName):
+ Creates a toggle element for the given className and adds it to the container.
+
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._toggleClass.resolvedNode.toggleClass):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._toggleClass.resolvedNode):
+ (WebInspector.CSSStyleDetailsSidebarPanel.prototype._toggleClass):
+ Uses the Element.classList to toggle the given className on the selected node.
+
2016-01-20 Saam barati <sbar...@apple.com>
Web Inspector: Hook the sampling profiler into the Timelines UI
Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (195431 => 195432)
--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-01-22 02:05:28 UTC (rev 195431)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-01-22 02:06:49 UTC (rev 195432)
@@ -53,6 +53,7 @@
localizedStrings["Add New"] = "Add New";
localizedStrings["Add New Probe _expression_"] = "Add New Probe _expression_";
localizedStrings["Add New Watch _expression_"] = "Add New Watch _expression_";
+localizedStrings["Add a Class"] = "Add a Class";
localizedStrings["Add new breakpoint action after this action"] = "Add new breakpoint action after this action";
localizedStrings["Add probe _expression_"] = "Add probe _expression_";
localizedStrings["Add watch _expression_"] = "Add watch _expression_";
@@ -116,6 +117,7 @@
localizedStrings["Checked"] = "Checked";
localizedStrings["Child Layers"] = "Child Layers";
localizedStrings["Children"] = "Children";
+localizedStrings["Classes"] = "Classes";
localizedStrings["Clear"] = "Clear";
localizedStrings["Clear Log"] = "Clear Log";
localizedStrings["Clear Log on Navigation"] = "Clear Log on Navigation";
@@ -266,6 +268,7 @@
localizedStrings["Encoded"] = "Encoded";
localizedStrings["Encoding"] = "Encoding";
localizedStrings["End Capturing"] = "End Capturing";
+localizedStrings["Enter Class Name"] = "Enter Class Name";
localizedStrings["Enter a Gradient"] = "Enter a Gradient";
localizedStrings["Enter a URL"] = "Enter a URL";
localizedStrings["Enter a name."] = "Enter a name.";
@@ -647,6 +650,7 @@
localizedStrings["Timer Removed"] = "Timer Removed";
localizedStrings["Timestamp \u2014 %s"] = "Timestamp \u2014 %s";
localizedStrings["Timing"] = "Timing";
+localizedStrings["Toggle Classes"] = "Toggle Classes";
localizedStrings["Top"] = "Top";
localizedStrings["Total Time"] = "Total Time";
localizedStrings["Total number of resources, click to show the Resources tab"] = "Total number of resources, click to show the Resources tab";
Modified: trunk/Source/WebInspectorUI/UserInterface/Protocol/RemoteObject.js (195431 => 195432)
--- trunk/Source/WebInspectorUI/UserInterface/Protocol/RemoteObject.js 2016-01-22 02:05:28 UTC (rev 195431)
+++ trunk/Source/WebInspectorUI/UserInterface/Protocol/RemoteObject.js 2016-01-22 02:06:49 UTC (rev 195432)
@@ -416,13 +416,15 @@
function mycallback(error, result, wasThrown)
{
result = result ? WebInspector.RemoteObject.fromPayload(result) : null;
- callback(error, result, wasThrown);
+
+ if (callback && typeof callback === "function")
+ callback(error, result, wasThrown);
}
if (args)
args = args.map(WebInspector.RemoteObject.createCallArgument);
- RuntimeAgent.callFunctionOn(this._objectId, appendWebInspectorSourceURL(functionDeclaration.toString()), args, true, undefined, generatePreview, mycallback);
+ RuntimeAgent.callFunctionOn(this._objectId, appendWebInspectorSourceURL(functionDeclaration.toString()), args, true, undefined, !!generatePreview, mycallback);
}
callFunctionJSON(functionDeclaration, args, callback)
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css (195431 => 195432)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css 2016-01-22 02:05:28 UTC (rev 195431)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css 2016-01-22 02:06:49 UTC (rev 195432)
@@ -65,22 +65,25 @@
white-space: nowrap;
}
-.sidebar > .panel.details.css-style > .content + .options-container {
+.sidebar > .panel.details.css-style > .content ~ :matches(.options-container, .class-list-container) {
display: flex;
align-items: center;
position: absolute;
- bottom: 0;
width: 100%;
- height: 29px;
background-color: white;
border-top: 1px solid hsl(0, 0%, 70%);
}
-.sidebar > .panel.details.css-style > .content:not(.supports-new-rule, .has-filter-bar) + .options-container {
+.sidebar > .panel.details.css-style > .content ~ .options-container {
+ bottom: 0;
+ height: 30px;
+}
+
+.sidebar > .panel.details.css-style > .content:not(.supports-new-rule, .has-filter-bar) ~ :matches(.options-container, .class-list-container) {
display: none;
}
-.sidebar > .panel.details.css-style > .content + .options-container > .new-rule {
+.sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule {
width: 15px;
min-width: 15px;
height: 15px;
@@ -89,16 +92,77 @@
opacity: 0.7;
}
-.sidebar > .panel.details.css-style > .content + .options-container > .filter-bar {
+.sidebar > .panel.details.css-style > .content ~ .options-container > .filter-bar {
width: -webkit-fill-available;
background-color: transparent;
}
-.sidebar > .panel.details.css-style > .content:not(.supports-new-rule) + .options-container > .new-rule,
-.sidebar > .panel.details.css-style > .content:not(.has-filter-bar) + .options-container > .filter-bar {
+.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle {
+ margin: 0 5px 1px 0;
+ padding: 2px 4px 3px;
+ background: none;
+ border: none;
+ border-radius: 3px;
+ -webkit-appearance: none;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle.selected {
+ color: white;
+ background-color: hsl(212, 92%, 54%);
+}
+
+.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle:not(.selected):hover {
+ color: white;
+ background-color: hsla(212, 92%, 54%, 0.5);
+}
+
+.sidebar > .panel.details.css-style > .content:not(.supports-new-rule) ~ .options-container > .new-rule,
+.sidebar > .panel.details.css-style > .content:not(.has-filter-bar) ~ .options-container > .filter-bar {
display: none;
}
+.sidebar > .panel.details.css-style > .content ~ .class-list-container {
+ flex-wrap: wrap;
+ bottom: 30px;
+ max-height: 65px;
+ padding: 3px 2px;
+ overflow-y: scroll;
+}
+
+/* FIXME: <https://webkit.org/b/152674> Elements with the "hidden" attribute still show up if "display: flex;" */
+.sidebar > .panel.details.css-style > .content ~ .class-list-container[hidden] {
+ display: none;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class {
+ display: flex;
+ align-items: center;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > input[type="checkbox"] {
+ pointer-events: none;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .add-class-icon {
+ width: 12px;
+ height: 12px;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .class-name-input {
+ width: 100px;
+ height: 18px;
+ margin: 0 0 0 2px;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class.active > .add-class-icon,
+.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class:not(.active) > .class-name-input {
+ display: none;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .class-list-container > *:matches(.new-class, .class-toggle) {
+ margin: 1px 3px;
+}
+
.sidebar > .panel.details.css-style > .content.filter-in-progress .filter-matching {
display: inline;
background-color: hsla(53, 83%, 53%, 0.5);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js (195431 => 195432)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js 2016-01-22 02:05:28 UTC (rev 195431)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js 2016-01-22 02:06:49 UTC (rev 195432)
@@ -37,15 +37,15 @@
this._forcedPseudoClassContainer = document.createElement("div");
this._forcedPseudoClassContainer.className = "pseudo-classes";
- var groupElement = null;
+ let groupElement = null;
WebInspector.CSSStyleManager.ForceablePseudoClasses.forEach(function(pseudoClass) {
// We don't localize the label since it is a CSS pseudo-class from the CSS standard.
- var label = pseudoClass.capitalize();
+ let label = pseudoClass.capitalize();
- var labelElement = document.createElement("label");
+ let labelElement = document.createElement("label");
- var checkboxElement = document.createElement("input");
+ let checkboxElement = document.createElement("input");
checkboxElement.addEventListener("change", this._forcedPseudoClassCheckboxChanged.bind(this, pseudoClass));
checkboxElement.type = "checkbox";
@@ -87,24 +87,43 @@
this._navigationItem = new WebInspector.ScopeRadioButtonNavigationItem(this._identifier, this._displayName, this._panelNavigationInfo, selectedPanel.navigationInfo);
this._navigationItem.addEventListener(WebInspector.ScopeRadioButtonNavigationItem.Event.SelectedItemChanged, this._handleSelectedItemChanged, this);
- var optionsContainer = document.createElement("div");
- optionsContainer.classList.add("options-container");
+ let optionsContainer = this.element.createChild("div", "options-container");
- var newRuleButton = document.createElement("img");
- newRuleButton.classList.add("new-rule");
+ let newRuleButton = optionsContainer.createChild("img", "new-rule");
newRuleButton.title = WebInspector.UIString("New Rule");
newRuleButton.addEventListener("click", this._newRuleButtonClicked.bind(this));
- optionsContainer.appendChild(newRuleButton);
this._filterBar = new WebInspector.FilterBar;
this._filterBar.placeholder = WebInspector.UIString("Filter Styles");
this._filterBar.addEventListener(WebInspector.FilterBar.Event.FilterDidChange, this._filterDidChange, this);
optionsContainer.appendChild(this._filterBar.element);
+ this._classToggleButton = optionsContainer.createChild("button", "toggle-class-toggle");
+ this._classToggleButton.textContent = WebInspector.UIString("Classes");
+ this._classToggleButton.title = WebInspector.UIString("Toggle Classes");
+ this._classToggleButton.addEventListener("click", this._classToggleButtonClicked.bind(this));
+
+ this._classListContainer = this.element.createChild("div", "class-list-container");
+ this._classListContainer.hidden = true;
+
+ this._addClassContainer = this._classListContainer.createChild("div", "new-class");
+ this._addClassContainer.title = WebInspector.UIString("Add a Class");
+ this._addClassContainer.addEventListener("click", this._addClassContainerClicked.bind(this));
+
+ let addClassCheckbox = this._addClassContainer.createChild("input");
+ addClassCheckbox.type = "checkbox";
+ addClassCheckbox.checked = true;
+
+ let addClassIcon = useSVGSymbol("Images/Plus13.svg", "add-class-icon");
+ this._addClassContainer.appendChild(addClassIcon);
+
+ this._addClassInput = this._addClassContainer.createChild("input", "class-name-input");
+ this._addClassInput.setAttribute("placeholder", WebInspector.UIString("Enter Class Name"));
+ this._addClassInput.addEventListener("keypress", this._addClassInputKeyPressed.bind(this));
+ this._addClassInput.addEventListener("blur", this._addClassInputBlur.bind(this));
+
WebInspector.cssStyleManager.addEventListener(WebInspector.CSSStyleManager.Event.StyleSheetAdded, this.refresh, this);
WebInspector.cssStyleManager.addEventListener(WebInspector.CSSStyleManager.Event.StyleSheetRemoved, this.refresh, this);
-
- this.element.appendChild(optionsContainer);
}
// Public
@@ -116,18 +135,21 @@
refresh()
{
- var domNode = this.domNode;
+ let domNode = this.domNode;
if (!domNode)
return;
this.contentView.element.scrollTop = this._initialScrollOffset;
- for (var panel of this._panels) {
+ for (let panel of this._panels) {
panel.element._savedScrollTop = undefined;
panel.markAsNeedsRefresh(domNode);
}
this._updatePseudoClassCheckboxes();
+
+ if (!this._classListContainer.hidden)
+ this._populateClassToggles();
}
visibilityDidChange()
@@ -168,16 +190,18 @@
addEventListeners()
{
- var effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
+ let effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
if (!effectiveDOMNode)
return;
effectiveDOMNode.addEventListener(WebInspector.DOMNode.Event.EnabledPseudoClassesChanged, this._updatePseudoClassCheckboxes, this);
+ effectiveDOMNode.addEventListener(WebInspector.DOMNode.Event.AttributeModified, this._handleNodeAttributeModified, this);
+ effectiveDOMNode.addEventListener(WebInspector.DOMNode.Event.AttributeRemoved, this._handleNodeAttributeRemoved, this);
}
removeEventListeners()
{
- var effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
+ let effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
if (!effectiveDOMNode)
return;
@@ -201,9 +225,8 @@
_panelMatchingIdentifier(identifier)
{
- var selectedPanel
-
- for (var panel of this._panels) {
+ let selectedPanel = null;
+ for (let panel of this._panels) {
if (panel.navigationInfo.identifier !== identifier)
continue;
@@ -216,8 +239,8 @@
_handleSelectedItemChanged()
{
- var selectedIdentifier = this._navigationItem.selectedItemIdentifier;
- var selectedPanel = this._panelMatchingIdentifier(selectedIdentifier);
+ let selectedIdentifier = this._navigationItem.selectedItemIdentifier;
+ let selectedPanel = this._panelMatchingIdentifier(selectedIdentifier);
this._switchPanels(selectedPanel);
}
@@ -258,7 +281,7 @@
if (!this.domNode)
return;
- var effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
+ let effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
effectiveDOMNode.setPseudoClassEnabled(pseudoClass, event.target.checked);
}
@@ -268,22 +291,162 @@
if (!this.domNode)
return;
- var effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
+ let effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
- var enabledPseudoClasses = effectiveDOMNode.enabledPseudoClasses;
+ let enabledPseudoClasses = effectiveDOMNode.enabledPseudoClasses;
- for (var pseudoClass in this._forcedPseudoClassCheckboxes) {
- var checkboxElement = this._forcedPseudoClassCheckboxes[pseudoClass];
+ for (let pseudoClass in this._forcedPseudoClassCheckboxes) {
+ let checkboxElement = this._forcedPseudoClassCheckboxes[pseudoClass];
checkboxElement.checked = enabledPseudoClasses.includes(pseudoClass);
}
}
+ _handleNodeAttributeModified(event)
+ {
+ if (event && event.data && event.data.name === "class")
+ this._populateClassToggles();
+ }
+
+ _handleNodeAttributeRemoved(event)
+ {
+ if (event && event.data && event.data.name === "class")
+ this._populateClassToggles();
+ }
+
+
_newRuleButtonClicked()
{
if (this._selectedPanel && typeof this._selectedPanel.newRuleButtonClicked === "function")
this._selectedPanel.newRuleButtonClicked();
}
+ _classToggleButtonClicked(event)
+ {
+ this._classToggleButton.classList.toggle("selected");
+ this._classListContainer.hidden = !this._classListContainer.hidden;
+ if (this._classListContainer.hidden)
+ return;
+
+ this._populateClassToggles();
+ }
+
+ _addClassContainerClicked(event)
+ {
+ this._addClassContainer.classList.add("active");
+ this._addClassInput.focus();
+ }
+
+ _addClassInputKeyPressed(event)
+ {
+ if (event.keyCode !== WebInspector.KeyboardShortcut.Key.Enter.keyCode)
+ return;
+
+ this._addClassInput.blur();
+ }
+
+ _addClassInputBlur(event)
+ {
+ this._toggleClass.call(this, this._addClassInput.value, true);
+ this._addClassContainer.classList.remove("active");
+ this._addClassInput.value = null;
+ }
+
+ _populateClassToggles()
+ {
+ this._classListContainer.removeChildren();
+ this._classListContainer.appendChild(this._addClassContainer);
+
+ let classes = this.domNode.getAttribute("class");
+ let classToggledMap = this.domNode[WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesSymbol];
+ if (!classToggledMap)
+ classToggledMap = this.domNode[WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesSymbol] = new Map;
+
+ if (classes && classes.length) {
+ for (let className of classes.split(/\s+/))
+ classToggledMap.set(className, true);
+ }
+
+ for (let [className, toggled] of classToggledMap) {
+ if ((toggled && !classes.includes(className)) || (!toggled && classes.includes(className))) {
+ toggled = !toggled;
+ classToggledMap.set(className, toggled);
+ }
+
+ this._createToggleForClassName(className);
+ }
+ }
+
+ _createToggleForClassName(className)
+ {
+ if (!className || !className.length)
+ return;
+
+ let classToggledMap = this.domNode[WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesSymbol];
+ if (!classToggledMap)
+ return;
+
+ if (!classToggledMap.has(className))
+ classToggledMap.set(className, true);
+
+ let toggled = classToggledMap.get(className);
+
+ let classNameContainer = document.createElement("div");
+ classNameContainer.classList.add("class-toggle");
+
+ let classNameToggle = classNameContainer.createChild("input");
+ classNameToggle.type = "checkbox";
+ classNameToggle.checked = toggled;
+
+ let classNameTitle = classNameContainer.createChild("span");
+ classNameTitle.textContent = className;
+
+ function classNameToggleChanged(event) {
+ this._toggleClass.call(this, className, classNameToggle.checked);
+ classToggledMap.set(className, classNameToggle.checked);
+ }
+
+ classNameToggle.addEventListener("click", classNameToggleChanged.bind(this));
+ classNameTitle.addEventListener("click", (event) => {
+ classNameToggle.checked = !classNameToggle.checked;
+ classNameToggleChanged.call(this);
+ });
+
+ this._classListContainer.appendChild(classNameContainer);
+ }
+
+ _toggleClass(className, flag)
+ {
+ if (!className || !className.length)
+ return;
+
+ let effectiveNode = this.domNode;
+ if (effectiveNode && effectiveNode.isPseudoElement())
+ effectiveNode = effectiveNode.parentNode;
+
+ console.assert(effectiveNode);
+ if (!effectiveNode)
+ return;
+
+ if (effectiveNode.nodeType() !== Node.ELEMENT_NODE)
+ return;
+
+ function resolvedNode(object)
+ {
+ if (!object)
+ return;
+
+ function toggleClass(className, flag)
+ {
+ this.classList.toggle(className, flag);
+ }
+
+ object.callFunction(toggleClass, [className, flag]);
+ object.release();
+ }
+
+ WebInspector.RemoteObject.resolveNode(effectiveNode, "", resolvedNode);
+ }
+
_filterDidChange()
{
this.contentView.element.classList.toggle(WebInspector.CSSStyleDetailsSidebarPanel.FilterInProgressClassName, this._filterBar.hasActiveFilters());
@@ -299,3 +462,4 @@
WebInspector.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName = "filter-section-non-matching";
WebInspector.CSSStyleDetailsSidebarPanel.NoFilterMatchInPropertyClassName = "filter-property-non-matching";
+WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesSymbol = Symbol("css-style-details-sidebar-panel-toggled-classes-symbol");
