Changeset 213739 in webkit

Timestamp:

Mar 10, 2017 4:59:39 PM (7 years ago)

Author:

commit-queue@webkit.org

Message:

Web Inspector: popover with compositing reasons in Layers sidebar has hard to read layout
​https://bugs.webkit.org/show_bug.cgi?id=167081

Patch by Devin Rousso <Devin Rousso> on 2017-03-10
Reviewed by Brian Burg.

• UserInterface/Views/LayerTreeDetailsSidebarPanel.css:

(.layer-tree-popover):
(.layer-tree-popover p):
(.layer-tree-popover ul):
(body[dir=ltr] .layer-tree-popover ul):
(body[dir=rtl] .layer-tree-popover ul):
Show list-item-style and make the <p> element stand out more (larger and bold).

Location:

trunk/Source/WebInspectorUI

Files:

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

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2017-03-10  Devin Rousso  <dcrousso+webkit@gmail.com>
+
+        Web Inspector: popover with compositing reasons in Layers sidebar has hard to read layout
+        https://bugs.webkit.org/show_bug.cgi?id=167081
+
+        Reviewed by Brian Burg.
+
+        * UserInterface/Views/LayerTreeDetailsSidebarPanel.css:
+        (.layer-tree-popover):
+        (.layer-tree-popover p):
+        (.layer-tree-popover ul):
+        (body[dir=ltr] .layer-tree-popover ul):
+        (body[dir=rtl] .layer-tree-popover ul):
+        Show `list-item-style` and make the <p> element stand out more (larger and bold).
+
 2017-03-10  Devin Rousso  <dcrousso+webkit@gmail.com>
 

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

@@ -82 +82 @@
 
 .layer-tree-popover {
+    max-width: 300px;
     padding: 5px;
 }
@@ -87 +88 @@
 .layer-tree-popover p {
     margin: 0;
+    font-size: 1.1em;
+    font-weight: bold;
 }
 
 .layer-tree-popover ul {
-    list-style-type: none;
-    margin: 10px 0 0 0;
-    padding-left: 10px;
+    margin: 10px 0 0;
+    padding: 0;
+
+    --layer-tree-popover-ul-margin-start: 1em;
+    --layer-tree-popover-ul-padding-start: 1em;
+}
+
+body[dir=ltr] .layer-tree-popover ul {
+    margin-left: var(--layer-tree-popover-ul-margin-start);
+    padding-left: var(--layer-tree-popover-ul-padding-start);
+}
+
+body[dir=rtl] .layer-tree-popover ul {
+    margin-right: var(--layer-tree-popover-ul-margin-start);
+    padding-right: var(--layer-tree-popover-ul-padding-start);
 }