No subject
Mon Sep 28 12:00:37 PDT 2015
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):</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceDebugUncaughtExceptionReportercss">trunk/Source/WebInspectorUI/UserInterface/Debug/UncaughtExceptionReporter.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsBoxModelDetailsSectionRowcss">trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCompletionSuggestionsViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDashboardContainerViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDataGridcss">trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDetailsSectioncss">trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsFindBannercss">trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsMaincss">trunk/Source/WebInspectorUI/UserInterface/Views/Main.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsPopovercss">trunk/Source/WebInspectorUI/UserInterface/Views/Popover.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsResizercss">trunk/Source/WebInspectorUI/UserInterface/Views/Resizer.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewcss">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVariablescss">trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleSelectorSectioncss">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.css</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (193912 => 193913)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,3 +1,49 @@
</span><ins>+2015-12-10 Nikita Vasilyev <nvasilyev at 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):
+
</ins><span class="cx"> 2015-12-09 Matt Baker <mattbaker at apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: when a marked-dirty subview is attached to a parent View, dirtyDescendantsCount gets out of sync
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceDebugUncaughtExceptionReportercss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Debug/UncaughtExceptionReporter.css (193912 => 193913)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -29,7 +29,7 @@
</span><span class="cx"> right: 0;
</span><span class="cx"> top: 0;
</span><span class="cx"> bottom: 0;
</span><del>- z-index: 10000;
</del><ins>+ z-index: var(--z-index-uncaught-exception-sheet);
</ins><span class="cx"> background-color: hsl(0, 0%, 96%);
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsBoxModelDetailsSectionRowcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css (193912 => 193913)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -92,7 +92,7 @@
</span><span class="cx">
</span><span class="cx"> .details-section .row.box-model .editing {
</span><span class="cx"> position: relative;
</span><del>- z-index: 100;
</del><ins>+ z-index: 2;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .details-section .row.box-model :matches(.content span, .top, .right, .bottom, .left) {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCompletionSuggestionsViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css (193912 => 193913)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -30,7 +30,7 @@
</span><span class="cx"> background-color: hsla(0, 0%, 100%, 0.9);
</span><span class="cx"> border-radius: 5px;
</span><span class="cx">
</span><del>- z-index: 100;
</del><ins>+ z-index: var(--z-index-tooltip);
</ins><span class="cx">
</span><span class="cx"> margin-top: -1px;
</span><span class="cx"> margin-left: -10px;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDashboardContainerViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css (193912 => 193913)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -130,7 +130,7 @@
</span><span class="cx"> padding: 4px 0;
</span><span class="cx"> opacity: 0.6;
</span><span class="cx">
</span><del>- z-index: 1000;
</del><ins>+ z-index: 2;
</ins><span class="cx"> background-repeat: no-repeat;
</span><span class="cx"> background-size: 8px;
</span><span class="cx"> background-image: url(../Images/UpDownArrows.svg);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDataGridcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css (193912 => 193913)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -301,5 +301,5 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .data-grid .resizer {
</span><del>- z-index: 500;
</del><ins>+ z-index: var(--z-index-resizer);
</ins><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDetailsSectioncss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css (193912 => 193913)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -60,7 +60,7 @@
</span><span class="cx"> padding: 4px 5px 4px 0;
</span><span class="cx">
</span><span class="cx"> /* Ensure the headers are displayed above scrollbars. */
</span><del>- z-index: 200;
</del><ins>+ z-index: var(--z-index-header);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .details-section > .header > .options > .navigation-bar {
</span><span class="lines">@@ -80,7 +80,7 @@
</span><span class="cx"> background-color: hsl(0, 0%, 100%);
</span><span class="cx">
</span><span class="cx"> /* Ensure these headers are displayed below the parent header but above scrollbars. */
</span><del>- z-index: 100;
</del><ins>+ z-index: var(--z-index-header);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .details-section .details-section:not(.collapsed) > .header {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsFindBannercss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/FindBanner.css (193912 => 193913)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -41,7 +41,7 @@
</span><span class="cx"> transition-duration: 200ms;
</span><span class="cx"> transition-timing-function: ease-in;
</span><span class="cx">
</span><del>- z-index: 500;
</del><ins>+ z-index: var(--z-index-header);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> body.window-inactive .find-banner {
</span><span class="lines">@@ -180,7 +180,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .find-banner > button.segmented:active {
</span><del>- z-index: 100;
</del><ins>+ z-index: var(--z-index-header);
</ins><span class="cx"> position: relative;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsMaincss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Main.css (193912 => 193913)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -78,7 +78,7 @@
</span><span class="cx"> #docked-resizer {
</span><span class="cx"> display: none;
</span><span class="cx">
</span><del>- z-index: 100;
</del><ins>+ z-index: var(--z-index-resizer);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> body.docked #docked-resizer {
</span><span class="lines">@@ -201,7 +201,7 @@
</span><span class="cx">
</span><span class="cx"> .message-text-view {
</span><span class="cx"> display: flex;
</span><del>- z-index: 1000;
</del><ins>+ z-index: var(--z-index-popover);
</ins><span class="cx">
</span><span class="cx"> position: absolute;
</span><span class="cx"> top: 0;
</span><span class="lines">@@ -322,7 +322,7 @@
</span><span class="cx">
</span><span class="cx"> .bouncy-highlight {
</span><span class="cx"> position: absolute;
</span><del>- z-index: 100;
</del><ins>+ z-index: var(--z-index-highlight);
</ins><span class="cx">
</span><span class="cx"> 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;
</span><span class="cx"> text-shadow: white 0 0 2px;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsPopovercss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Popover.css (193912 => 193913)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -29,7 +29,7 @@
</span><span class="cx"> min-height: 20px;
</span><span class="cx"> box-sizing: border-box;
</span><span class="cx"> pointer-events: none;
</span><del>- z-index: 100;
</del><ins>+ z-index: var(--z-index-popover);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .popover.arrow-up {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsResizercss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Resizer.css (193912 => 193913)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -25,7 +25,7 @@
</span><span class="cx">
</span><span class="cx"> .resizer {
</span><span class="cx"> position: absolute;
</span><del>- z-index: 1000;
</del><ins>+ z-index: var(--z-index-resizer);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .resizer.vertical-rule {
</span><span class="lines">@@ -52,5 +52,5 @@
</span><span class="cx"> right: 0;
</span><span class="cx">
</span><span class="cx"> opacity: 0;
</span><del>- z-index: 1;
</del><ins>+ z-index: var(--z-index-glass-pane-for-drag);
</ins><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineOverviewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css (193912 => 193913)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -34,7 +34,7 @@
</span><span class="cx"> opacity: 0;
</span><span class="cx">
</span><span class="cx"> /* Allows the horizontal scroll bar to be interacted with. */
</span><del>- z-index: 1000;
</del><ins>+ z-index: calc(var(--z-index-resizer) + 1);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .timeline-overview:hover > .scroll-container {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVariablescss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (193912 => 193913)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -24,6 +24,14 @@
</span><span class="cx"> */
</span><span class="cx">
</span><span class="cx"> :root {
</span><ins>+ --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;
+
</ins><span class="cx"> --console-secondary-text-color: hsla(0, 0%, 0%, 0.33);
</span><span class="cx">
</span><span class="cx"> --syntax-highlight-number-color: hsl(248, 100%, 40%);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleSelectorSectioncss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.css (193912 => 193913)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -108,7 +108,7 @@
</span><span class="cx"> border-color: hsl(0, 0%, 70%);
</span><span class="cx"> border-style: solid;
</span><span class="cx"> border-width: 1px 0;
</span><del>- z-index: 100;
</del><ins>+ z-index: var(--z-index-header);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider > :matches(.disclosure-button, .icon) {
</span></span></pre>
</div>
</div>
</body>
</html>
More information about the webkit-changes
mailing list