Changeset 274157 in webkit

Timestamp:

Mar 9, 2021 10:32:07 AM (17 months ago)

Author:

Razvan Caliman

Message:

Web Inspector: Jump from Layout panel to grid container element
​https://bugs.webkit.org/show_bug.cgi?id=222429
<rdar://problem/74751801>

Reviewed by Devin Rousso.

Add a button to inspect a CSS grid overlay's corresponding element.
Remove the similar functionality from the overloaded label.

• UserInterface/Views/CSSGridSection.css:

(.css-grid-section .node-display-name,):
(.css-grid-section .node-overlay-list-item-container :is(.go-to-arrow, .inline-swatch)):
(.css-grid-section .node-overlay-list-item-container:not(:hover) .go-to-arrow):

• UserInterface/Views/CSSGridSection.js:

(WI.CSSGridSection.prototype.layout):

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/CSSGridSection.css (modified) (2 diffs)
• UserInterface/Views/CSSGridSection.js (modified) (2 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2021-03-09  Razvan Caliman  <rcaliman@apple.com>
+
+        Web Inspector: Jump from Layout panel to grid container element
+        https://bugs.webkit.org/show_bug.cgi?id=222429
+        <rdar://problem/74751801>
+
+        Reviewed by Devin Rousso.
+
+        Add a button to inspect a CSS grid overlay's corresponding element.
+        Remove the similar functionality from the overloaded label.
+
+        * UserInterface/Views/CSSGridSection.css:
+        (.css-grid-section .node-display-name,):
+        (.css-grid-section .node-overlay-list-item-container :is(.go-to-arrow, .inline-swatch)):
+        (.css-grid-section .node-overlay-list-item-container:not(:hover) .go-to-arrow):
+        * UserInterface/Views/CSSGridSection.js:
+        (WI.CSSGridSection.prototype.layout):
+
 2021-03-09  Razvan Caliman  <rcaliman@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.css

@@ -24 +24 @@
  */
 
-.css-grid-section .node-link,
+.css-grid-section .node-display-name,
 .css-grid-section .editor-group > .editor > label {
     margin-inline: 5px;
-    text-decoration: none;
 }
 
@@ -49 +48 @@
 }
 
-.css-grid-section .node-overlay-list-item-container .inline-swatch {
+.css-grid-section .node-overlay-list-item-container :is(.go-to-arrow, .inline-swatch) {
     flex-shrink: 0;
+}
+
+.css-grid-section .node-overlay-list-item-container:not(:hover) .go-to-arrow {
+    opacity: 0;
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/CSSGridSection.js

@@ -102 +102 @@
             checkboxElement.type = "checkbox";
             checkboxElement.checked = nodesWithGridOverlay.includes(domNode);
-            labelElement.appendChild(WI.linkifyNodeReference(domNode));
+
+            const nodeDisplayName = labelElement.appendChild(document.createElement("span"));
+            nodeDisplayName.classList.add("node-display-name");
+            nodeDisplayName.textContent = domNode.displayName;
 
             this._checkboxElementByNodeMap.set(domNode, checkboxElement);
@@ -129 +132 @@
                 WI.overlayManager.setGridColorForNode(domNode, gridColor);
             }, swatch);
+
+            let buttonElement = itemContainerElement.appendChild(WI.createGoToArrowButton());
+            buttonElement.title = WI.repeatedUIString.revealInDOMTree();
+            WI.bindInteractionsForNodeToElement(domNode, buttonElement);
         }
     }