Title: [274268] trunk/Source/WebInspectorUI
- Revision
- 274268
- Author
- nvasil...@apple.com
- Date
- 2021-03-10 23:28:47 -0800 (Wed, 10 Mar 2021)
Log Message
Web Inspector: Add checkbox to toggle all grid overlays
https://bugs.webkit.org/show_bug.cgi?id=221924
<rdar://problem/74365101>
Reviewed by BJ Burg.
* UserInterface/Controllers/OverlayManager.js:
Drive-by: remove unused getter.
* UserInterface/Views/CSSGridSection.css:
(.css-grid-section .toggle-all):
* UserInterface/Views/CSSGridSection.js:
(WI.CSSGridSection):
(WI.CSSGridSection.prototype.initialLayout):
(WI.CSSGridSection.prototype._handleToggleAllCheckboxChanged):
(WI.CSSGridSection.prototype.layout):
Drive-by: replace `Array.prototype.includes`, which runs at O(n) time, with `isGridOverlayVisible`,
which checks a Map instead.
(WI.CSSGridSection.prototype._handleGridOverlayStateChanged):
(WI.CSSGridSection.prototype._updateToggleAllCheckbox):
Optimization: minimize number of Map lookups when when at least one overlay is visible and at least one is hidden.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (274267 => 274268)
--- trunk/Source/WebInspectorUI/ChangeLog 2021-03-11 05:59:44 UTC (rev 274267)
+++ trunk/Source/WebInspectorUI/ChangeLog 2021-03-11 07:28:47 UTC (rev 274268)
@@ -1,5 +1,31 @@
2021-03-10 Nikita Vasilyev <nvasil...@apple.com>
+ Web Inspector: Add checkbox to toggle all grid overlays
+ https://bugs.webkit.org/show_bug.cgi?id=221924
+ <rdar://problem/74365101>
+
+ Reviewed by BJ Burg.
+
+ * UserInterface/Controllers/OverlayManager.js:
+ Drive-by: remove unused getter.
+
+ * UserInterface/Views/CSSGridSection.css:
+ (.css-grid-section .toggle-all):
+ * UserInterface/Views/CSSGridSection.js:
+ (WI.CSSGridSection):
+ (WI.CSSGridSection.prototype.initialLayout):
+ (WI.CSSGridSection.prototype._handleToggleAllCheckboxChanged):
+
+ (WI.CSSGridSection.prototype.layout):
+ Drive-by: replace `Array.prototype.includes`, which runs at O(n) time, with `isGridOverlayVisible`,
+ which checks a Map instead.
+
+ (WI.CSSGridSection.prototype._handleGridOverlayStateChanged):
+ (WI.CSSGridSection.prototype._updateToggleAllCheckbox):
+ Optimization: minimize number of Map lookups when when at least one overlay is visible and at least one is hidden.
+
+2021-03-10 Nikita Vasilyev <nvasil...@apple.com>
+
Web Inspector: Syntax highlighting for JSX is incorrect
https://bugs.webkit.org/show_bug.cgi?id=217613
<rdar://problem/70210975>
Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/OverlayManager.js (274267 => 274268)
--- trunk/Source/WebInspectorUI/UserInterface/Controllers/OverlayManager.js 2021-03-11 05:59:44 UTC (rev 274267)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/OverlayManager.js 2021-03-11 07:28:47 UTC (rev 274268)
@@ -44,11 +44,6 @@
// Public
- get nodesWithGridOverlay()
- {
- return Array.from(this._gridOverlayForNodeMap.keys());
- }
-
showGridOverlay(domNode, {color} = {})
{
console.assert(!domNode.destroyed, domNode);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.css (274267 => 274268)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.css 2021-03-11 05:59:44 UTC (rev 274267)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.css 2021-03-11 07:28:47 UTC (rev 274268)
@@ -62,3 +62,7 @@
font-weight: 500;
color: var(--text-color)
}
+
+.css-grid-section .toggle-all {
+ margin-inline-end: 7px;
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js (274267 => 274268)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js 2021-03-11 05:59:44 UTC (rev 274267)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js 2021-03-11 07:28:47 UTC (rev 274268)
@@ -35,6 +35,8 @@
this._gridNodeSet = new Set;
this._checkboxElementByNodeMap = new WeakMap;
+ this._toggleAllCheckboxElement = null;
+ this._suppressUpdateToggleAllCheckbox = false;
}
// Public
@@ -78,12 +80,31 @@
let listHeading = this.element.appendChild(document.createElement("h2"));
listHeading.classList.add("heading");
- listHeading.textContent = WI.UIString("Grid Overlays", "Page Overlays @ Layout Sidebar Section Header", "Heading for list of grid nodes");
+ let label = listHeading.createChild("label");
+ this._toggleAllCheckboxElement = label.createChild("input", "toggle-all");
+ this._toggleAllCheckboxElement.type = "checkbox";
+ this._toggleAllCheckboxElement.addEventListener("change", this._handleToggleAllCheckboxChanged.bind(this));
+
+ label.append(WI.UIString("Grid Overlays", "Page Overlays @ Layout Sidebar Section Header", "Heading for list of grid nodes"));
+
this._listElement = this.element.appendChild(document.createElement("ul"));
this._listElement.classList.add("node-overlay-list");
}
+ _handleToggleAllCheckboxChanged(event)
+ {
+ let isChecked = event.target.checked;
+ this._suppressUpdateToggleAllCheckbox = true;
+ for (let domNode of this._gridNodeSet) {
+ if (isChecked)
+ WI.overlayManager.showGridOverlay(domNode);
+ else
+ WI.overlayManager.hideGridOverlay(domNode);
+ }
+ this._suppressUpdateToggleAllCheckbox = false;
+ }
+
layout()
{
super.layout();
@@ -90,8 +111,6 @@
this._listElement.removeChildren();
- let nodesWithGridOverlay = WI.overlayManager.nodesWithGridOverlay;
-
for (let domNode of this._gridNodeSet) {
let itemElement = this._listElement.appendChild(document.createElement("li"));
let itemContainerElement = itemElement.appendChild(document.createElement("span"));
@@ -100,7 +119,7 @@
let labelElement = itemContainerElement.appendChild(document.createElement("label"));
let checkboxElement = labelElement.appendChild(document.createElement("input"));
checkboxElement.type = "checkbox";
- checkboxElement.checked = nodesWithGridOverlay.includes(domNode);
+ checkboxElement.checked = WI.overlayManager.isGridOverlayVisible(domNode);
const nodeDisplayName = labelElement.appendChild(document.createElement("span"));
nodeDisplayName.classList.add("node-display-name");
@@ -136,6 +155,8 @@
buttonElement.title = WI.repeatedUIString.revealInDOMTree();
WI.bindInteractionsForNodeToElement(domNode, buttonElement);
}
+
+ this._updateToggleAllCheckbox();
}
// Private
@@ -147,5 +168,33 @@
return;
checkboxElement.checked = event.type === WI.OverlayManager.Event.GridOverlayShown;
+ this._updateToggleAllCheckbox();
}
+
+ _updateToggleAllCheckbox()
+ {
+ if (this._suppressUpdateToggleAllCheckbox)
+ return;
+
+ let hasVisible = false;
+ let hasHidden = false;
+ for (let domNode of this._gridNodeSet) {
+ let isVisible = WI.overlayManager.isGridOverlayVisible(domNode);
+ if (isVisible)
+ hasVisible = true;
+ else
+ hasHidden = true;
+
+ // Exit early as soon as the partial state is determined.
+ if (hasVisible && hasHidden)
+ break;
+ }
+
+ if (hasVisible && hasHidden)
+ this._toggleAllCheckboxElement.indeterminate = true;
+ else {
+ this._toggleAllCheckboxElement.indeterminate = false;
+ this._toggleAllCheckboxElement.checked = hasVisible;
+ }
+ }
};
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
