Web Inspector: Introduce --navigation-bar-height CSS variable
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 14 Jun 2016 21:42:35 +0000 (21:42 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 14 Jun 2016 21:42:35 +0000 (21:42 +0000)
https://bugs.webkit.org/show_bug.cgi?id=158752

Reviewed by Timothy Hatcher.

Abstract a commonly repeated height value (29px) into a variable.

* UserInterface/Views/CSSStyleDetailsSidebarPanel.css:
(.sidebar > .panel.details.css-style > .content.has-filter-bar):
* UserInterface/Views/DebuggerSidebarPanel.css:
(.sidebar > .panel.navigation.debugger > :matches(.content, .empty-content-placeholder)):
* UserInterface/Views/FilterBar.css:
(.filter-bar):
* UserInterface/Views/NavigationBar.css:
(.navigation-bar):
* UserInterface/Views/NavigationSidebarPanel.css:
(.sidebar > .panel.navigation > .content):
(.sidebar > .panel.navigation > .overflow-shadow.top):
* UserInterface/Views/NetworkSidebarPanel.css:
(.sidebar > .panel.navigation.network > .title-bar):
* UserInterface/Views/ResourceSidebarPanel.css:
(.sidebar > .panel.navigation.resource > :matches(.content, .empty-content-placeholder)):
* UserInterface/Views/SearchSidebarPanel.css:
(.sidebar > .panel.navigation.search > :matches(.content, .empty-content-placeholder)):
(.sidebar > .panel.navigation.search > .search-bar):
* UserInterface/Views/Sidebar.css:
(.sidebar.has-navigation-bar > .panel):
* UserInterface/Views/StorageSidebarPanel.css:
(.sidebar > .panel.navigation.storage > :matches(.content, .empty-content-placeholder)):
* UserInterface/Views/TimelineRecordingContentView.css:
(.content-view.timeline-recording > .content-browser .recording-progress):
* UserInterface/Views/Variables.css:
(:root):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@202064 268f45cc-cd09-0410-ab3c-d52691b4dbfc

13 files changed:
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/FilterBar.css
Source/WebInspectorUI/UserInterface/Views/NavigationBar.css
Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/Sidebar.css
Source/WebInspectorUI/UserInterface/Views/StorageSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css
Source/WebInspectorUI/UserInterface/Views/Variables.css

index 55130e3..bbfbb97 100644 (file)
@@ -1,3 +1,39 @@
+2016-06-14  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Introduce --navigation-bar-height CSS variable
+        https://bugs.webkit.org/show_bug.cgi?id=158752
+
+        Reviewed by Timothy Hatcher.
+
+        Abstract a commonly repeated height value (29px) into a variable.
+
+        * UserInterface/Views/CSSStyleDetailsSidebarPanel.css:
+        (.sidebar > .panel.details.css-style > .content.has-filter-bar):
+        * UserInterface/Views/DebuggerSidebarPanel.css:
+        (.sidebar > .panel.navigation.debugger > :matches(.content, .empty-content-placeholder)):
+        * UserInterface/Views/FilterBar.css:
+        (.filter-bar):
+        * UserInterface/Views/NavigationBar.css:
+        (.navigation-bar):
+        * UserInterface/Views/NavigationSidebarPanel.css:
+        (.sidebar > .panel.navigation > .content):
+        (.sidebar > .panel.navigation > .overflow-shadow.top):
+        * UserInterface/Views/NetworkSidebarPanel.css:
+        (.sidebar > .panel.navigation.network > .title-bar):
+        * UserInterface/Views/ResourceSidebarPanel.css:
+        (.sidebar > .panel.navigation.resource > :matches(.content, .empty-content-placeholder)):
+        * UserInterface/Views/SearchSidebarPanel.css:
+        (.sidebar > .panel.navigation.search > :matches(.content, .empty-content-placeholder)):
+        (.sidebar > .panel.navigation.search > .search-bar):
+        * UserInterface/Views/Sidebar.css:
+        (.sidebar.has-navigation-bar > .panel):
+        * UserInterface/Views/StorageSidebarPanel.css:
+        (.sidebar > .panel.navigation.storage > :matches(.content, .empty-content-placeholder)):
+        * UserInterface/Views/TimelineRecordingContentView.css:
+        (.content-view.timeline-recording > .content-browser .recording-progress):
+        * UserInterface/Views/Variables.css:
+        (:root):
+
 2016-06-14  Saam Barati  <sbarati@apple.com>
 
         Follow up to: Web Inspector: Call Trees view should have a 'Top Functions'-like mode
index 6e6643f..00d95db 100644 (file)
@@ -35,7 +35,7 @@
 }
 
 .sidebar > .panel.details.css-style > .content.has-filter-bar {
-    bottom: 28px;
+    bottom: calc(var(--navigation-bar-height) - 1px);
 }
 
 .sidebar > .panel.details.css-style > .content > .pseudo-classes {
index 944a0ba..b96c56b 100644 (file)
@@ -24,7 +24,7 @@
  */
 
 .sidebar > .panel.navigation.debugger > :matches(.content, .empty-content-placeholder) {
-    top: 29px;
+    top: var(--navigation-bar-height);
 }
 
 .sidebar > .panel.navigation.debugger > .navigation-bar {
index 3d444b4..b38d060 100644 (file)
@@ -26,7 +26,7 @@
 .filter-bar {
     display: flex;
 
-    height: 29px;
+    height: var(--navigation-bar-height);
 
     white-space: nowrap;
     overflow: hidden;
index 21add2e..f5d9c45 100644 (file)
@@ -30,7 +30,7 @@
 
     border-bottom: 1px solid var(--border-color);
 
-    height: 29px;
+    height: var(--navigation-bar-height);
 
     white-space: nowrap;
     overflow: hidden;
index da599bb..45da289 100644 (file)
@@ -24,7 +24,7 @@
  */
 
 .sidebar > .panel.navigation > .content {
-    bottom: 29px;
+    bottom: var(--navigation-bar-height);
 }
 
 .sidebar > .panel.navigation > .filter-bar {
@@ -49,7 +49,7 @@
 }
 
 .sidebar > .panel.navigation > .overflow-shadow.top {
-    top: 28px;
+    top: calc(var(--navigation-bar-height) - 1px);
     bottom: initial;
 }
 
index d9ee67b..2d9b4f7 100644 (file)
@@ -36,7 +36,7 @@
 
 .sidebar > .panel.navigation.network > .title-bar {
     position: absolute;
-    top: 29px;
+    top: var(--navigation-bar-height);
     left: 0;
     right: 0;
 
index d7481af..3109735 100644 (file)
@@ -24,7 +24,7 @@
  */
 
 .sidebar > .panel.navigation.resource > :matches(.content, .empty-content-placeholder) {
-    top: 29px;
+    top: var(--navigation-bar-height);
 }
 
 .sidebar > .panel.navigation.resource > .navigation-bar {
index e0e2b36..3212f21 100644 (file)
@@ -24,7 +24,7 @@
  */
 
 .sidebar > .panel.navigation.search > :matches(.content, .empty-content-placeholder) {
-    top: 28px;
+    top: calc(var(--navigation-bar-height) - 1px);
 }
 
 .sidebar > .panel.navigation.search > .search-bar {
@@ -35,7 +35,7 @@
 
     display: flex;
 
-    height: 28px;
+    height: calc(var(--navigation-bar-height) - 1px);
 
     white-space: nowrap;
     overflow: hidden;
index ccd9feb..400529b 100644 (file)
@@ -57,7 +57,7 @@
 }
 
 .sidebar.has-navigation-bar > .panel {
-    top: 29px;
+    top: var(--navigation-bar-height);
 }
 
 .sidebar > .panel.selected {
index 1e37bf2..d418a9f 100644 (file)
@@ -24,7 +24,7 @@
  */
 
 .sidebar > .panel.navigation.storage > :matches(.content, .empty-content-placeholder) {
-    top: 29px;
+    top: var(--navigation-bar-height);
 }
 
 .sidebar > .panel.navigation.storage > .navigation-bar {
index e20ecfb..e9da67f 100644 (file)
@@ -66,7 +66,7 @@
     position: absolute;
     left: 0;
     right: 0;
-    top: 29px;
+    top: var(--navigation-bar-height);
     bottom: 0;
     text-align: center;
     background-color: var(--panel-background-color-light);
index 19fef9c..57d899d 100644 (file)
@@ -75,6 +75,7 @@
 
     --toolbar-height: 36px;
     --tab-bar-height: 24px;
+    --navigation-bar-height: 29px;
 }
 
 body.window-inactive {