Web Inspector: Sync button look and feel with Xcode updates.
authorjonowells@apple.com <jonowells@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 31 Jul 2014 21:00:45 +0000 (21:00 +0000)
committerjonowells@apple.com <jonowells@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 31 Jul 2014 21:00:45 +0000 (21:00 +0000)
https://bugs.webkit.org/show_bug.cgi?id=135445

Reviewed by Timothy Hatcher.

Update styles to match recent changes to Xcode text-only
buttons, the navigation bar, and search fields. Include
older style rules for older Mac platforms.

* UserInterface/Views/ButtonNavigationItem.css:
(.navigation-bar .item.button.text-only):
(body.mac-platform.legacy .navigation-bar .item.button.text-only):
* UserInterface/Views/CSSStyleDetailsSidebarPanel.css:
(.sidebar > .panel.details.css-style > .navigation-bar):
(.sidebar > .panel.details.css-style > .content):
(body.mac-platform.legacy .sidebar > .panel.details.css-style > .content):
* UserInterface/Views/DebuggerSidebarPanel.css:
(.sidebar > .panel.navigation.debugger > .content):
(body.mac-platform.legacy .sidebar > .panel.navigation.debugger > .content):
* UserInterface/Views/DividerNavigationItem.css:
(.navigation-bar .item.divider):
(body.mac-platform.legacy .navigation-bar .item.divider):
* UserInterface/Views/FilterBar.css:
(.filter-bar):
(body.mac-platform.legacy .filter-bar):
(.filter-bar > input[type="search"]):
(body.mac-platform.legacy .filter-bar > input[type="search"]):
* UserInterface/Views/LogContentView.css:
(.search-bar.log-search-bar > input[type="search"]):
(@media reader):
(.log-search-bar > input): Deleted.
* UserInterface/Views/Main.css:
(#split-content-browser > .navigation-bar):
(body.mac-platform.legacy #split-content-browser > .navigation-bar):
* UserInterface/Views/NavigationBar.css:
(.navigation-bar):
(body.mac-platform.legacy .navigation-bar):
(.navigation-bar .item):
(body.mac-platform.legacy .navigation-bar .item):
* UserInterface/Views/NavigationSidebarPanel.css:
(.sidebar > .panel.navigation > .content):
(body.mac-platform.legacy .sidebar > .panel.navigation > .content):
* UserInterface/Views/QuickConsole.css:
(.quick-console):
(body.mac-platform.legacy .quick-console):
* UserInterface/Views/RadioButtonNavigationItem.css:
(.navigation-bar .item.radio.button.text-only:hover):
(body.mac-platform.legacy .navigation-bar .item.radio.button.text-only:hover):
(.navigation-bar .item.radio.button.text-only.selected):
(body.mac-platform.legacy .navigation-bar .item.radio.button.text-only.selected):
(.navigation-bar .item.radio.button.text-only:active):
(.navigation-bar .item.radio.button.text-only.selected:active):
(body.mac-platform.legacy .navigation-bar .item.radio.button.text-only.selected:active):
* UserInterface/Views/ResourceSidebarPanel.css:
(.sidebar > .panel.navigation.resource > .empty-content-placeholder):
(body.mac-platform.legacy .sidebar > .panel.navigation.resource > .empty-content-placeholder):
(.sidebar > .panel.navigation.resource > .search-bar):
(body.mac-platform.legacy .sidebar > .panel.navigation.resource > .search-bar):
(.sidebar > .panel.navigation.resource > .search-bar > input[type="search"]):
(body.mac-platform.legacy .sidebar > .panel.navigation.resource > .search-bar > input[type="search"]):
* UserInterface/Views/ScopeBar.css:
(.scope-bar > li):
(body.mac-platform.legacy .scope-bar > li):
(.scope-bar > li:hover):
(body.mac-platform.legacy .scope-bar > li:hover):
(.scope-bar > li.selected):
(.scope-bar > li:active):
(body.mac-platform.legacy .scope-bar > li:active):
(.scope-bar > li.selected:active):
(body.mac-platform.legacy .scope-bar > li.selected:active):
* UserInterface/Views/SearchBar.css:
(.search-bar > input[type="search"]):
(body.mac-platform.legacy .search-bar > input[type="search"]):
Update styles and apply older styles to legacy Mac platforms.

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

15 files changed:
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css
Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/DividerNavigationItem.css
Source/WebInspectorUI/UserInterface/Views/FilterBar.css
Source/WebInspectorUI/UserInterface/Views/LogContentView.css
Source/WebInspectorUI/UserInterface/Views/Main.css
Source/WebInspectorUI/UserInterface/Views/NavigationBar.css
Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/QuickConsole.css
Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.css
Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/ScopeBar.css
Source/WebInspectorUI/UserInterface/Views/SearchBar.css

index d4f9ba7..06292d7 100644 (file)
@@ -1,3 +1,80 @@
+2014-07-31  Jonathan Wells  <jonowells@apple.com>
+
+        Web Inspector: Sync button look and feel with Xcode updates.
+        https://bugs.webkit.org/show_bug.cgi?id=135445
+
+        Reviewed by Timothy Hatcher.
+
+        Update styles to match recent changes to Xcode text-only
+        buttons, the navigation bar, and search fields. Include
+        older style rules for older Mac platforms.
+
+        * UserInterface/Views/ButtonNavigationItem.css:
+        (.navigation-bar .item.button.text-only):
+        (body.mac-platform.legacy .navigation-bar .item.button.text-only):
+        * UserInterface/Views/CSSStyleDetailsSidebarPanel.css:
+        (.sidebar > .panel.details.css-style > .navigation-bar):
+        (.sidebar > .panel.details.css-style > .content):
+        (body.mac-platform.legacy .sidebar > .panel.details.css-style > .content):
+        * UserInterface/Views/DebuggerSidebarPanel.css:
+        (.sidebar > .panel.navigation.debugger > .content):
+        (body.mac-platform.legacy .sidebar > .panel.navigation.debugger > .content):
+        * UserInterface/Views/DividerNavigationItem.css:
+        (.navigation-bar .item.divider):
+        (body.mac-platform.legacy .navigation-bar .item.divider):
+        * UserInterface/Views/FilterBar.css:
+        (.filter-bar):
+        (body.mac-platform.legacy .filter-bar):
+        (.filter-bar > input[type="search"]):
+        (body.mac-platform.legacy .filter-bar > input[type="search"]):
+        * UserInterface/Views/LogContentView.css:
+        (.search-bar.log-search-bar > input[type="search"]):
+        (@media reader):
+        (.log-search-bar > input): Deleted.
+        * UserInterface/Views/Main.css:
+        (#split-content-browser > .navigation-bar):
+        (body.mac-platform.legacy #split-content-browser > .navigation-bar):
+        * UserInterface/Views/NavigationBar.css:
+        (.navigation-bar):
+        (body.mac-platform.legacy .navigation-bar):
+        (.navigation-bar .item):
+        (body.mac-platform.legacy .navigation-bar .item):
+        * UserInterface/Views/NavigationSidebarPanel.css:
+        (.sidebar > .panel.navigation > .content):
+        (body.mac-platform.legacy .sidebar > .panel.navigation > .content):
+        * UserInterface/Views/QuickConsole.css:
+        (.quick-console):
+        (body.mac-platform.legacy .quick-console):
+        * UserInterface/Views/RadioButtonNavigationItem.css:
+        (.navigation-bar .item.radio.button.text-only:hover):
+        (body.mac-platform.legacy .navigation-bar .item.radio.button.text-only:hover):
+        (.navigation-bar .item.radio.button.text-only.selected):
+        (body.mac-platform.legacy .navigation-bar .item.radio.button.text-only.selected):
+        (.navigation-bar .item.radio.button.text-only:active):
+        (.navigation-bar .item.radio.button.text-only.selected:active):
+        (body.mac-platform.legacy .navigation-bar .item.radio.button.text-only.selected:active):
+        * UserInterface/Views/ResourceSidebarPanel.css:
+        (.sidebar > .panel.navigation.resource > .empty-content-placeholder):
+        (body.mac-platform.legacy .sidebar > .panel.navigation.resource > .empty-content-placeholder):
+        (.sidebar > .panel.navigation.resource > .search-bar):
+        (body.mac-platform.legacy .sidebar > .panel.navigation.resource > .search-bar):
+        (.sidebar > .panel.navigation.resource > .search-bar > input[type="search"]):
+        (body.mac-platform.legacy .sidebar > .panel.navigation.resource > .search-bar > input[type="search"]):
+        * UserInterface/Views/ScopeBar.css:
+        (.scope-bar > li):
+        (body.mac-platform.legacy .scope-bar > li):
+        (.scope-bar > li:hover):
+        (body.mac-platform.legacy .scope-bar > li:hover):
+        (.scope-bar > li.selected):
+        (.scope-bar > li:active):
+        (body.mac-platform.legacy .scope-bar > li:active):
+        (.scope-bar > li.selected:active):
+        (body.mac-platform.legacy .scope-bar > li.selected:active):
+        * UserInterface/Views/SearchBar.css:
+        (.search-bar > input[type="search"]):
+        (body.mac-platform.legacy .search-bar > input[type="search"]):
+        Update styles and apply older styles to legacy Mac platforms.
+
 2014-07-31  Brian J. Burg  <burg@cs.washington.edu>
 
         Web Inspector: MessageDispatcher should not synchronously dispatch all backend messages
index 3999645..aff1f86 100644 (file)
 
 .navigation-bar .item.button.text-only {
     width: auto;
+    padding: 1px 8px 3px;
+    margin: 0 2px;
+
+    line-height: 11px;
+    color: rgb(46, 46, 46);
+    border: 1px solid transparent;
+    border-radius: 3px;
+    text-align: center;
+    height: auto;
+
+    -webkit-justify-content: center;
+}
+
+body.mac-platform.legacy .navigation-bar .item.button.text-only {
     padding: 0 10px;
+    margin: 0;
 
     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
     line-height: 20px;
-
-    -webkit-justify-content: center;
+    border: none;
+    text-align: inherit;
+    height: 28px;
 }
 
 .navigation-bar .item.button > .glyph {
index 76df3a3..44dac71 100644 (file)
     top: 0;
     left: 0;
     right: 0;
+    -webkit-align-content: center;
 }
 
 .sidebar > .panel.details.css-style > .content {
     position: absolute;
-    top: 22px;
+    top: 29px;
     left: 0;
     right: 0;
     bottom: 0;
     overflow-x: hidden;
 }
 
+body.mac-platform.legacy .sidebar > .panel.details.css-style > .content {
+    top: 22px;
+}
+
 .sidebar > .panel.details.css-style > .content > .pseudo-classes {
     padding: 10px;
     border-bottom: 1px solid rgb(153, 153, 153);
index c3c9424..3c50ed3 100644 (file)
  */
 
 .sidebar > .panel.navigation.debugger > .content {
+    top: 29px;
+}
+
+body.mac-platform.legacy .sidebar > .panel.navigation.debugger > .content {
     top: 22px;
 }
 
index 5c2cc8e..8015c97 100644 (file)
     width: 1px;
 
     background-image: linear-gradient(rgb(190, 190, 190), rgb(190, 190, 190));
-    background-size: 100% 13px;
+    background-size: 100% 16px;
     background-repeat: no-repeat;
     background-position: center;
 }
+
+body.mac-platform.legacy .navigation-bar .item.divider {
+    background-size: 100% 13px;
+}
index ab61ce9..9719f11 100644 (file)
 .filter-bar {
     display: -webkit-flex;
 
-    height: 21px;
+    height: 26px;
 
     white-space: nowrap;
     overflow: hidden;
 }
 
+body.mac-platform.legacy .filter-bar {
+    height: 21px;
+}
+
 .filter-bar > input[type="search"] {
     display: -webkit-flex;
     -webkit-flex: 1;
 
     -webkit-appearance: none;
 
-    border: 1px solid rgba(0, 0, 0, 0.35);
+    border: 1px solid rgba(0, 0, 0, 0.25);
     border-radius: 3px;
     background-color: rgba(255, 255, 255, 0.2);
     box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0;
     background-clip: padding-box;
 
-    height: 19px;
-
-    transition: background-color 200ms ease-in-out;
+    height: 22px;
 }
 
 body.mac-platform.legacy .filter-bar > input[type="search"] {
+    border: 1px solid rgba(0, 0, 0, 0.35);
     border-radius: 10px;
+
+    height: 19px;
+    transition: background-color 200ms ease-in-out;
 }
 
 .filter-bar > input[type="search"]::-webkit-input-placeholder {
index 2161cb6..49c9d83 100644 (file)
     display: none;
 }
 
-.log-search-bar > input {
+.search-bar.log-search-bar > input[type="search"] {
     width: 150px;
+    border: 1px solid rgba(0, 0, 0, 0.35);
 }
 
 .search-in-progress .console-item.filtered-out-by-search {
 
 /* @media reader currently blocked by: http://webkit.org/b/118096 */
 @media reader {
-    .console-user-command::before, 
+    .console-user-command::before,
     .console-messages:focus .console-item.selected .console-user-command::before,
     .console-user-command-result.console-log-level::before,
     .console-messages:focus .console-item.selected .console-user-command-result.console-log-level::before {
index 7a53ad5..7b602f8 100644 (file)
@@ -141,6 +141,10 @@ body.docked.right #navigation-sidebar.collapsed > .resizer {
 #split-content-browser > .navigation-bar {
     cursor: row-resize;
 
+    background-color: rgb(242, 242, 242);
+}
+
+body.mac-platform.legacy #split-content-browser > .navigation-bar {
     background-image: linear-gradient(to bottom, rgb(248, 248, 248), rgb(226, 226, 226));
 }
 
index 082de70..cb2dff9 100644 (file)
@@ -31,7 +31,7 @@
     box-shadow: inset rgba(255, 255, 255, 0.2) 0 1px 0;
     border-bottom: 1px solid rgb(179, 179, 179);
 
-    height: 22px;
+    height: 29px;
 
     white-space: nowrap;
     overflow: hidden;
     outline: none;
 }
 
+body.mac-platform.legacy .navigation-bar {
+    height: 22px;
+}
+
 .navigation-bar .item {
     display: -webkit-flex;
     -webkit-align-items: center;
     -webkit-flex-wrap: wrap;
 
-    height: 21px;
+    height: 28px;
     outline: none;
 }
+
+body.mac-platform.legacy .navigation-bar .item {
+    height: 21px;
+}
index 916a40b..b934b2c 100644 (file)
     top: 0;
     left: 0;
     right: 0;
-    bottom: 22px;
+    bottom: 28px;
 
     overflow-x: hidden;
     overflow-y: auto;
 }
 
+body.mac-platform.legacy .sidebar > .panel.navigation > .content {
+    bottom: 22px;
+}
+
 .sidebar > .panel.navigation > .filter-bar {
     position: absolute;
     bottom: 0;
index 7fec399..67c2463 100644 (file)
@@ -31,6 +31,7 @@
 
     background-color: white;
     border-top: 1px solid rgb(190, 190, 190);
+    padding: 3px 0;
 
     outline: none;
     overflow: hidden;
     font-size: 11px;
 }
 
+body.mac-platform.legacy .quick-console {
+    padding: 0;
+}
+
 .quick-console.showing-log {
     border-top-color: rgb(240, 240, 240);
 }
index 2219990..13b36ce 100644 (file)
     width: 24px;
 }
 
+.navigation-bar .item.radio.button.text-only:hover {
+    color: white;
+    background-color: rgba(34, 131, 246, 0.5);
+}
+
+body.mac-platform.legacy .navigation-bar .item.radio.button.text-only:hover {
+    color: rgb(0, 0, 0);
+    background-color: transparent;
+}
+
 .navigation-bar .item.radio.button.text-only.selected {
-    color: rgb(52, 141, 220);
-    font-weight: bold;
+    color: white;
+    background-color: rgba(34, 131, 246, 1);
 }
 
 body.mac-platform.legacy .navigation-bar .item.radio.button.text-only.selected {
     color: rgb(0, 0, 0);
+    font-weight: bold;
 
     background-repeat: no-repeat;
+    background-color: transparent;
     background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.09) 12%, rgba(0, 0, 0, 0.06) 12%, transparent), linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent),
         linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent);
     background-size: 100% 100%, 1px 100%, 1px 100%;
     background-position: left top, left top, right top;
 }
+
+.navigation-bar .item.radio.button.text-only:active {
+    color: white;
+    background-color: rgba(34, 131, 246, 0.55);
+}
+
+.navigation-bar .item.radio.button.text-only.selected:active {
+    background-color: rgba(31, 105, 238, 1);
+}
+
+body.mac-platform.legacy .navigation-bar .item.radio.button.text-only:active,
+body.mac-platform.legacy .navigation-bar .item.radio.button.text-only.selected:active {
+    color: rgb(0, 0, 0);
+    background-color: transparent;
+}
index 2bf08c1..0c44972 100644 (file)
 
 .sidebar > .panel.navigation.resource > .content,
 .sidebar > .panel.navigation.resource > .empty-content-placeholder {
+    top: 28px;
+}
+
+body.mac-platform.legacy .sidebar > .panel.navigation.resource > .content,
+body.mac-platform.legacy .sidebar > .panel.navigation.resource > .empty-content-placeholder {
     top: 21px;
 }
 
 
     box-shadow: inset rgba(255, 255, 255, 0.2) 0 1px 0;
 
-    height: 21px;
+    height: 27px;
 
     white-space: nowrap;
     overflow: hidden;
 }
 
+body.mac-platform.legacy .sidebar > .panel.navigation.resource > .search-bar {
+    height: 21px;
+}
+
 .sidebar > .panel.navigation.resource > .search-bar > input[type="search"] {
     display: -webkit-flex;
     -webkit-flex: 1;
 
+    margin: 3px 6px;
+    padding-left: 4px;
+}
+
+body.mac-platform.legacy .sidebar > .panel.navigation.resource > .search-bar > input[type="search"] {
     margin: 1px 6px;
+    padding-left: 0;
 }
index 3c70547..0398c34 100644 (file)
 .scope-bar > li {
     display: inline-block;
     margin: 0 2px;
-    padding: 0 8px 3px;
+    padding: 1px 8px 3px;
     font-size: 11px;
     line-height: 11px;
     color: rgb(46, 46, 46);
     background-color: transparent;
     border: 1px solid transparent;
-    border-radius: 9px;
+    border-radius: 3px;
     text-align: center;
-
-    transition: 200ms ease-in-out;
-    transition-property: background-color, border-color;
 }
 
 body.mac-platform.legacy .scope-bar > li {
     font-weight: bold;
+    padding: 0 8px 3px;
+    border-radius: 9px;
+
+    transition: 200ms ease-in-out;
+    transition-property: background-color, border-color;
 }
 
 .scope-bar > li.selected,
@@ -54,13 +56,19 @@ body.mac-platform.legacy .scope-bar > li {
 }
 
 .scope-bar > li:hover {
+    color: white;
+    background-color: rgba(34, 131, 246, 0.5);
+}
+
+body.mac-platform.legacy .scope-bar > li:hover {
+    color: inherit;
     border-color: rgba(0, 0, 0, 0.15);
+    background-color: transparent;
 }
 
 .scope-bar > li.selected {
-    color: rgb(52, 141, 220);
-    border-color: rgba(52, 141, 220, 1);
-    font-weight: bold;
+    color: white;
+    background-color: rgba(34, 131, 246, 1);
 }
 
 body.mac-platform.legacy .scope-bar > li.selected {
@@ -70,6 +78,20 @@ body.mac-platform.legacy .scope-bar > li.selected {
 }
 
 .scope-bar > li:active {
+    color: white;
+    background-color: rgba(34, 131, 246, 0.55);
+}
+
+body.mac-platform.legacy .scope-bar > li:active {
+    color: inherit;
     background-color: rgba(0, 0, 0, 0.16);
     border-color: rgba(0, 0, 0, 0.40);
 }
+
+.scope-bar > li.selected:active {
+    background-color: rgba(31, 105, 238, 1);
+}
+
+body.mac-platform.legacy .scope-bar > li.selected:active {
+    background-color: rgba(0, 0, 0, 0.16);
+}
index 1605ee4..f9ff008 100644 (file)
 
     -webkit-appearance: none;
 
-    border: 1px solid rgba(0, 0, 0, 0.35);
+    border: 1px solid rgba(0, 0, 0, 0.25);
     border-radius: 3px;
     background-color: rgba(255, 255, 255, 0.2);
-    box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0;
     background-clip: padding-box;
 
-    height: 19px;
-
-    transition: background-color 200ms ease-in-out;
+    height: 22px;
 }
 
 body.mac-platform.legacy .search-bar > input[type="search"] {
+    border: 1px solid rgba(0, 0, 0, 0.35);
     border-radius: 10px;
+    box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0;
+    height: 19px;
+    transition: background-color 200ms ease-in-out;
 }
 
 .search-bar > input[type="search"]::-webkit-input-placeholder {