Changeset 248893 in webkit

Timestamp:

Aug 19, 2019 11:09:34 PM (5 years ago)

Author:

Devin Rousso

Message:

Web Inspector: REGRESSION(r248682): Elements: Computed: go-to arrows in the Variables section are misaligned
​https://bugs.webkit.org/show_bug.cgi?id=200841

Reviewed by Joseph Pecoraro.

The Variables section uses a different CSS class since it's identifier changed in r248682.

• UserInterface/Views/ComputedStyleDetailsPanel.css:

(.sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables)): Added.
(.sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables) .property): Added.
(.sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables) .property .go-to-arrow): Added.
(.sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables) .property:not(:hover) .go-to-arrow): Added.
(.sidebar > .panel.details.css-style > .content > .computed .computed-style-properties): Deleted.
(.sidebar > .panel.details.css-style > .content > .computed .computed-style-properties .property .go-to-arrow): Deleted.
(.sidebar > .panel.details.css-style > .content > .computed .computed-style-properties .property:hover .go-to-arrow): Deleted.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/ComputedStyleDetailsPanel.css (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2019-08-19  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: REGRESSION(r248682): Elements: Computed: go-to arrows in the Variables section are misaligned
+        https://bugs.webkit.org/show_bug.cgi?id=200841
+
+        Reviewed by Joseph Pecoraro.
+
+        The Variables section uses a different CSS class since it's identifier changed in r248682.
+
+        * UserInterface/Views/ComputedStyleDetailsPanel.css:
+        (.sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables)): Added.
+        (.sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables) .property): Added.
+        (.sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables) .property .go-to-arrow): Added.
+        (.sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables) .property:not(:hover) .go-to-arrow): Added.
+        (.sidebar > .panel.details.css-style > .content > .computed .computed-style-properties): Deleted.
+        (.sidebar > .panel.details.css-style > .content > .computed .computed-style-properties .property .go-to-arrow): Deleted.
+        (.sidebar > .panel.details.css-style > .content > .computed .computed-style-properties .property:hover .go-to-arrow): Deleted.
+
 2019-08-19  Devin Rousso  <drousso@apple.com>
 

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

@@ -29 +29 @@
 }
 
-.sidebar > .panel.details.css-style > .content > .computed .computed-style-properties {
+.sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables) {
     --disclosure-button-size: 15px;
 }
 
-.sidebar > .panel.details.css-style > .content > .computed .computed-style-properties .property .go-to-arrow {
-    display: none;
+.sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables) .property {
+    position: relative;
+}
+
+.sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables) .property .go-to-arrow {
     position: absolute;
+    bottom: 0;
     width: var(--disclosure-button-size);
     height: var(--disclosure-button-size);
-    vertical-align: text-bottom;
 }
 
-.sidebar > .panel.details.css-style > .content > .computed .computed-style-properties .property:hover .go-to-arrow {
-    display: initial;
+.sidebar > .panel.details.css-style > .content > .computed .details-section:matches(.computed-style-properties, .computed-style-variables) .property:not(:hover) .go-to-arrow {
+    display: none;
 }