Changeset 193913 in webkit

Timestamp:

Dec 10, 2015 10:14:16 AM (8 years ago)

Author:

Nikita Vasilyev

Message:

Web Inspector: [Meta] Unify z-index values in Inspector's CSS
​https://bugs.webkit.org/show_bug.cgi?id=151978

Introduce CSS variables for z-index due to recurring issues with incorrectly overlapping elements.

From now on, all z-index values >= 64 must be defined as variables.
Values below 64 must not.

Reviewed by Timothy Hatcher.

• UserInterface/Views/Variables.css:

(:root):
Introduce z-index variables.

• UserInterface/Debug/UncaughtExceptionReporter.css:

(.sheet-container):

• UserInterface/Views/BoxModelDetailsSectionRow.css:

(.details-section .row.box-model .editing):

• UserInterface/Views/CompletionSuggestionsView.css:

(.completion-suggestions):

• UserInterface/Views/DashboardContainerView.css:

(.dashboard-container .advance-arrow):

• UserInterface/Views/DataGrid.css:

(.data-grid .resizer):

• UserInterface/Views/DetailsSection.css:

(.details-section > .header):
(.details-section .details-section > .header):

• UserInterface/Views/FindBanner.css:

(.find-banner):
(.find-banner > button.segmented:active):

• UserInterface/Views/Main.css:

(#docked-resizer):
(.message-text-view):
(.bouncy-highlight):

• UserInterface/Views/Popover.css:

(.popover):

• UserInterface/Views/Resizer.css:

(.resizer):
(.glass-pane-for-drag):

• UserInterface/Views/TimelineOverview.css:

(.timeline-overview > .scroll-container):

• UserInterface/Views/VisualStyleSelectorSection.css:

(.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider):

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Debug/UncaughtExceptionReporter.css (modified) (1 diff)
• UserInterface/Views/BoxModelDetailsSectionRow.css (modified) (1 diff)
• UserInterface/Views/CompletionSuggestionsView.css (modified) (1 diff)
• UserInterface/Views/DashboardContainerView.css (modified) (1 diff)
• UserInterface/Views/DataGrid.css (modified) (1 diff)
• UserInterface/Views/DetailsSection.css (modified) (2 diffs)
• UserInterface/Views/FindBanner.css (modified) (2 diffs)
• UserInterface/Views/Main.css (modified) (3 diffs)
• UserInterface/Views/Popover.css (modified) (1 diff)
• UserInterface/Views/Resizer.css (modified) (2 diffs)
• UserInterface/Views/TimelineOverview.css (modified) (1 diff)
• UserInterface/Views/Variables.css (modified) (1 diff)
• UserInterface/Views/VisualStyleSelectorSection.css (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2015-12-10  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: [Meta] Unify z-index values in Inspector's CSS
+        https://bugs.webkit.org/show_bug.cgi?id=151978
+
+        Introduce CSS variables for z-index due to recurring issues with incorrectly overlapping elements.
+
+        From now on, all z-index values >= 64 must be defined as variables.
+        Values below 64 must not.
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Views/Variables.css:
+        (:root):
+        Introduce z-index variables.
+
+        * UserInterface/Debug/UncaughtExceptionReporter.css:
+        (.sheet-container):
+        * UserInterface/Views/BoxModelDetailsSectionRow.css:
+        (.details-section .row.box-model .editing):
+        * UserInterface/Views/CompletionSuggestionsView.css:
+        (.completion-suggestions):
+        * UserInterface/Views/DashboardContainerView.css:
+        (.dashboard-container .advance-arrow):
+        * UserInterface/Views/DataGrid.css:
+        (.data-grid .resizer):
+        * UserInterface/Views/DetailsSection.css:
+        (.details-section > .header):
+        (.details-section .details-section > .header):
+        * UserInterface/Views/FindBanner.css:
+        (.find-banner):
+        (.find-banner > button.segmented:active):
+        * UserInterface/Views/Main.css:
+        (#docked-resizer):
+        (.message-text-view):
+        (.bouncy-highlight):
+        * UserInterface/Views/Popover.css:
+        (.popover):
+        * UserInterface/Views/Resizer.css:
+        (.resizer):
+        (.glass-pane-for-drag):
+        * UserInterface/Views/TimelineOverview.css:
+        (.timeline-overview > .scroll-container):
+        * UserInterface/Views/VisualStyleSelectorSection.css:
+        (.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider):
+
 2015-12-09  Matt Baker  <mattbaker@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Debug/UncaughtExceptionReporter.css

@@ -30 +30 @@
     top: 0;
     bottom: 0;
-    z-index: 10000;
+    z-index: var(--z-index-uncaught-exception-sheet);
     background-color: hsl(0, 0%, 96%);
 }

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

@@ -93 +93 @@
 .details-section .row.box-model .editing {
     position: relative;
-    z-index: 100;
+    z-index: 2;
 }
 

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

@@ -31 +31 @@
     border-radius: 5px;
 
-    z-index: 100;
+    z-index: var(--z-index-tooltip);
 
     margin-top: -1px;

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

@@ -131 +131 @@
     opacity: 0.6;
 
-    z-index: 1000;
+    z-index: 2;
     background-repeat: no-repeat;
     background-size: 8px;

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

@@ -302 +302 @@
 
 .data-grid .resizer {
-    z-index: 500;
-}
+    z-index: var(--z-index-resizer);
+}

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

@@ -61 +61 @@
 
     /* Ensure the headers are displayed above scrollbars. */
-    z-index: 200;
+    z-index: var(--z-index-header);
 }
 
@@ -81 +81 @@
 
     /* Ensure these headers are displayed below the parent header but above scrollbars. */
-    z-index: 100;
+    z-index: var(--z-index-header);
 }
 

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

@@ -42 +42 @@
     transition-timing-function: ease-in;
 
-    z-index: 500;
+    z-index: var(--z-index-header);
 }
 
@@ -181 +181 @@
 
 .find-banner > button.segmented:active {
-    z-index: 100;
+    z-index: var(--z-index-header);
     position: relative;
 }

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

@@ -79 +79 @@
     display: none;
 
-    z-index: 100;
+    z-index: var(--z-index-resizer);
 }
 
@@ -202 +202 @@
 .message-text-view {
     display: flex;
-    z-index: 1000;
+    z-index: var(--z-index-popover);
 
     position: absolute;
@@ -323 +323 @@
 .bouncy-highlight {
     position: absolute;
-    z-index: 100;
+    z-index: var(--z-index-highlight);
 
     box-shadow: inset hsl(50, 91%, 76%) 0 -1px 0, hsl(52, 56%, 60%) 0 1px 1px, hsla(0, 0%, 0%, 0.33) 0 1px 2px 1px;

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

@@ -30 +30 @@
     box-sizing: border-box;
     pointer-events: none;
-    z-index: 100;
+    z-index: var(--z-index-popover);
 }
 

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

@@ -26 +26 @@
 .resizer {
     position: absolute;
-    z-index: 1000;
+    z-index: var(--z-index-resizer);
 }
 
@@ -53 +53 @@
 
     opacity: 0;
-    z-index: 1;
+    z-index: var(--z-index-glass-pane-for-drag);
 }

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

@@ -35 +35 @@
 
  /* Allows the horizontal scroll bar to be interacted with. */
-    z-index: 1000;
+    z-index: calc(var(--z-index-resizer) + 1);
 }
 

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

@@ -25 +25 @@
 
 :root {
+    --z-index-highlight: 64;
+    --z-index-header: 128;
+    --z-index-resizer: 256;
+    --z-index-tooltip: 512;
+    --z-index-popover: 1024;
+    --z-index-glass-pane-for-drag: 2048;
+    --z-index-uncaught-exception-sheet: 4096;
+
     --console-secondary-text-color: hsla(0, 0%, 0%, 0.33);
 

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

@@ -109 +109 @@
     border-style: solid;
     border-width: 1px 0;
-    z-index: 100;
+    z-index: var(--z-index-header);
 }