Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (193912 => 193913)
--- trunk/Source/WebInspectorUI/ChangeLog 2015-12-10 18:03:52 UTC (rev 193912)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-12-10 18:14:16 UTC (rev 193913)
@@ -1,3 +1,49 @@
+2015-12-10 Nikita Vasilyev <[email protected]>
+
+ 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 <[email protected]>
Web Inspector: when a marked-dirty subview is attached to a parent View, dirtyDescendantsCount gets out of sync
Modified: trunk/Source/WebInspectorUI/UserInterface/Debug/UncaughtExceptionReporter.css (193912 => 193913)
--- trunk/Source/WebInspectorUI/UserInterface/Debug/UncaughtExceptionReporter.css 2015-12-10 18:03:52 UTC (rev 193912)
+++ trunk/Source/WebInspectorUI/UserInterface/Debug/UncaughtExceptionReporter.css 2015-12-10 18:14:16 UTC (rev 193913)
@@ -29,7 +29,7 @@
right: 0;
top: 0;
bottom: 0;
- z-index: 10000;
+ z-index: var(--z-index-uncaught-exception-sheet);
background-color: hsl(0, 0%, 96%);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css (193912 => 193913)
--- trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css 2015-12-10 18:03:52 UTC (rev 193912)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css 2015-12-10 18:14:16 UTC (rev 193913)
@@ -92,7 +92,7 @@
.details-section .row.box-model .editing {
position: relative;
- z-index: 100;
+ z-index: 2;
}
.details-section .row.box-model :matches(.content span, .top, .right, .bottom, .left) {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css (193912 => 193913)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css 2015-12-10 18:03:52 UTC (rev 193912)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css 2015-12-10 18:14:16 UTC (rev 193913)
@@ -30,7 +30,7 @@
background-color: hsla(0, 0%, 100%, 0.9);
border-radius: 5px;
- z-index: 100;
+ z-index: var(--z-index-tooltip);
margin-top: -1px;
margin-left: -10px;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css (193912 => 193913)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css 2015-12-10 18:03:52 UTC (rev 193912)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css 2015-12-10 18:14:16 UTC (rev 193913)
@@ -130,7 +130,7 @@
padding: 4px 0;
opacity: 0.6;
- z-index: 1000;
+ z-index: 2;
background-repeat: no-repeat;
background-size: 8px;
background-image: url(../Images/UpDownArrows.svg);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css (193912 => 193913)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css 2015-12-10 18:03:52 UTC (rev 193912)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css 2015-12-10 18:14:16 UTC (rev 193913)
@@ -301,5 +301,5 @@
}
.data-grid .resizer {
- z-index: 500;
+ z-index: var(--z-index-resizer);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css (193912 => 193913)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css 2015-12-10 18:03:52 UTC (rev 193912)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css 2015-12-10 18:14:16 UTC (rev 193913)
@@ -60,7 +60,7 @@
padding: 4px 5px 4px 0;
/* Ensure the headers are displayed above scrollbars. */
- z-index: 200;
+ z-index: var(--z-index-header);
}
.details-section > .header > .options > .navigation-bar {
@@ -80,7 +80,7 @@
background-color: hsl(0, 0%, 100%);
/* Ensure these headers are displayed below the parent header but above scrollbars. */
- z-index: 100;
+ z-index: var(--z-index-header);
}
.details-section .details-section:not(.collapsed) > .header {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.css (193912 => 193913)
--- trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.css 2015-12-10 18:03:52 UTC (rev 193912)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.css 2015-12-10 18:14:16 UTC (rev 193913)
@@ -41,7 +41,7 @@
transition-duration: 200ms;
transition-timing-function: ease-in;
- z-index: 500;
+ z-index: var(--z-index-header);
}
body.window-inactive .find-banner {
@@ -180,7 +180,7 @@
}
.find-banner > button.segmented:active {
- z-index: 100;
+ z-index: var(--z-index-header);
position: relative;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Main.css (193912 => 193913)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Main.css 2015-12-10 18:03:52 UTC (rev 193912)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Main.css 2015-12-10 18:14:16 UTC (rev 193913)
@@ -78,7 +78,7 @@
#docked-resizer {
display: none;
- z-index: 100;
+ z-index: var(--z-index-resizer);
}
body.docked #docked-resizer {
@@ -201,7 +201,7 @@
.message-text-view {
display: flex;
- z-index: 1000;
+ z-index: var(--z-index-popover);
position: absolute;
top: 0;
@@ -322,7 +322,7 @@
.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;
text-shadow: white 0 0 2px;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Popover.css (193912 => 193913)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Popover.css 2015-12-10 18:03:52 UTC (rev 193912)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Popover.css 2015-12-10 18:14:16 UTC (rev 193913)
@@ -29,7 +29,7 @@
min-height: 20px;
box-sizing: border-box;
pointer-events: none;
- z-index: 100;
+ z-index: var(--z-index-popover);
}
.popover.arrow-up {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Resizer.css (193912 => 193913)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Resizer.css 2015-12-10 18:03:52 UTC (rev 193912)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Resizer.css 2015-12-10 18:14:16 UTC (rev 193913)
@@ -25,7 +25,7 @@
.resizer {
position: absolute;
- z-index: 1000;
+ z-index: var(--z-index-resizer);
}
.resizer.vertical-rule {
@@ -52,5 +52,5 @@
right: 0;
opacity: 0;
- z-index: 1;
+ z-index: var(--z-index-glass-pane-for-drag);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css (193912 => 193913)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css 2015-12-10 18:03:52 UTC (rev 193912)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css 2015-12-10 18:14:16 UTC (rev 193913)
@@ -34,7 +34,7 @@
opacity: 0;
/* Allows the horizontal scroll bar to be interacted with. */
- z-index: 1000;
+ z-index: calc(var(--z-index-resizer) + 1);
}
.timeline-overview:hover > .scroll-container {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (193912 => 193913)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2015-12-10 18:03:52 UTC (rev 193912)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2015-12-10 18:14:16 UTC (rev 193913)
@@ -24,6 +24,14 @@
*/
: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);
--syntax-highlight-number-color: hsl(248, 100%, 40%);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.css (193912 => 193913)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.css 2015-12-10 18:03:52 UTC (rev 193912)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.css 2015-12-10 18:14:16 UTC (rev 193913)
@@ -108,7 +108,7 @@
border-color: hsl(0, 0%, 70%);
border-style: solid;
border-width: 1px 0;
- z-index: 100;
+ z-index: var(--z-index-header);
}
.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider > :matches(.disclosure-button, .icon) {
