Log Message
Web Inspector: Update toolbar styles https://bugs.webkit.org/show_bug.cgi?id=145419
Also, use hairline borders (1 phisical pixel) on retina (DPI >= 2). Reviewed by Timothy Hatcher. * UserInterface/Views/ButtonToolbarItem.css: (.toolbar .item.button): Deleted. (.toolbar.icon-and-label-vertical .item.button): Deleted. (.toolbar.icon-and-label-horizontal .item.button): Deleted. (.toolbar .item.button > .glyph): Deleted. (.toolbar.small-size .item.button > .glyph): Deleted. * UserInterface/Views/DashboardContainerView.css: (.toolbar .dashboard-container): Deleted. (.toolbar.collapsed .dashboard-container): Deleted. (.toolbar.small-size:matches(.icon-only, .icon-and-label-vertical, .icon-and-label-horizontal) .dashboard-container): Deleted. (.toolbar .dashboard.slide-out-down): Deleted. (.toolbar .dashboard.slide-in-up): Deleted. * UserInterface/Views/Toolbar.css: (.toolbar .search-bar > input[type="search"]): (.toolbar .search-bar > input[type="search"]::-webkit-textfield-decoration-container): (body:not(.unknown-mac) .toolbar .dashboard-container): (body:not(.unknown-mac) .toolbar .search-bar > input[type="search"]): (body:not(.unknown-mac) .toolbar .search-bar > input[type="search"]:focus): (body:not(.unknown-mac) .toolbar .item.button:active): (body.window-inactive:not(.unknown-mac) .toolbar .dashboard-container): (body.unknown-mac .toolbar .dashboard-container): (body.unknown-mac .toolbar .search-bar > input[type="search"]): (body.unknown-mac .toolbar .search-bar > input[type="search"]:focus): (@media (-webkit-min-device-pixel-ratio: 2)): (body.unknown-mac .toolbar .item.button:active): (body.unknown-mac.window-inactive .toolbar .dashboard-container):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (184977 => 184978)
--- trunk/Source/WebInspectorUI/ChangeLog 2015-05-29 04:47:39 UTC (rev 184977)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-05-29 04:50:59 UTC (rev 184978)
@@ -1,3 +1,39 @@
+2015-05-28 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: Update toolbar styles
+ https://bugs.webkit.org/show_bug.cgi?id=145419
+
+ Also, use hairline borders (1 phisical pixel) on retina (DPI >= 2).
+
+ Reviewed by Timothy Hatcher.
+
+ * UserInterface/Views/ButtonToolbarItem.css:
+ (.toolbar .item.button): Deleted.
+ (.toolbar.icon-and-label-vertical .item.button): Deleted.
+ (.toolbar.icon-and-label-horizontal .item.button): Deleted.
+ (.toolbar .item.button > .glyph): Deleted.
+ (.toolbar.small-size .item.button > .glyph): Deleted.
+ * UserInterface/Views/DashboardContainerView.css:
+ (.toolbar .dashboard-container): Deleted.
+ (.toolbar.collapsed .dashboard-container): Deleted.
+ (.toolbar.small-size:matches(.icon-only, .icon-and-label-vertical, .icon-and-label-horizontal) .dashboard-container): Deleted.
+ (.toolbar .dashboard.slide-out-down): Deleted.
+ (.toolbar .dashboard.slide-in-up): Deleted.
+ * UserInterface/Views/Toolbar.css:
+ (.toolbar .search-bar > input[type="search"]):
+ (.toolbar .search-bar > input[type="search"]::-webkit-textfield-decoration-container):
+ (body:not(.unknown-mac) .toolbar .dashboard-container):
+ (body:not(.unknown-mac) .toolbar .search-bar > input[type="search"]):
+ (body:not(.unknown-mac) .toolbar .search-bar > input[type="search"]:focus):
+ (body:not(.unknown-mac) .toolbar .item.button:active):
+ (body.window-inactive:not(.unknown-mac) .toolbar .dashboard-container):
+ (body.unknown-mac .toolbar .dashboard-container):
+ (body.unknown-mac .toolbar .search-bar > input[type="search"]):
+ (body.unknown-mac .toolbar .search-bar > input[type="search"]:focus):
+ (@media (-webkit-min-device-pixel-ratio: 2)):
+ (body.unknown-mac .toolbar .item.button:active):
+ (body.unknown-mac.window-inactive .toolbar .dashboard-container):
+
2015-05-28 Devin Rousso <drou...@apple.com>
Web Inspector: Jump from a computed style to the rule it came from
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.css (184977 => 184978)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.css 2015-05-29 04:47:39 UTC (rev 184977)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.css 2015-05-29 04:50:59 UTC (rev 184978)
@@ -27,30 +27,10 @@
align-items: center;
justify-content: center;
- border-radius: 4px;
- background-color: rgb(252, 252, 252);
-
- border: 1px solid transparent;
- border-top-color: white;
-
- box-shadow: rgba(0, 0, 0, 0.15) 0 1px 0;
-
margin: 4px;
-
padding: 0 10px;
}
-.toolbar .item.button:active {
- border-top-color: rgb(241, 241, 241);
- background-color: rgb(228, 228, 228);
-}
-
-body.window-inactive .toolbar .item.button {
- border: 1px solid rgb(220, 220, 220);
- background-color: rgb(246, 246, 246);
- box-shadow: none;
-}
-
.toolbar.icon-and-label-vertical .item.button {
flex-direction: column;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css (184977 => 184978)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css 2015-05-29 04:47:39 UTC (rev 184977)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css 2015-05-29 04:50:59 UTC (rev 184978)
@@ -25,26 +25,13 @@
.toolbar .dashboard-container {
position: relative;
-
width: 36vw;
border-radius: 4px;
- background-color: rgb(252, 252, 252);
-
- border: 1px solid transparent;
- border-top-color: white;
-
- box-shadow: rgba(0, 0, 0, 0.15) 0 1px 0;
-
margin: 4px;
overflow: hidden;
}
-body.window-inactive .toolbar .dashboard-container {
- border: 1px solid rgb(220, 220, 220);
- background-color: rgb(246, 246, 246);
- box-shadow: none;
-}
.toolbar.collapsed .dashboard-container {
width: 175px;
@@ -81,11 +68,6 @@
-webkit-animation-duration: 0.4s;
}
-body.window-inactive .toolbar .dashboard {
- background-color: rgb(246, 246, 246);
- box-shadow: none;
-}
-
.toolbar .dashboard.visible {
z-index: 1; /* Establish a stacking context. */
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.css (184977 => 184978)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.css 2015-05-29 04:47:39 UTC (rev 184977)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.css 2015-05-29 04:50:59 UTC (rev 184978)
@@ -105,33 +105,96 @@
.toolbar .search-bar > input[type="search"] {
width: 100%;
-
font-size: 12px;
+ background-clip: initial;
+ margin: 4px;
+}
- border-radius: 4px;
- background-color: rgb(252, 252, 252) !important;
+.toolbar .search-bar > input[type="search"]::-webkit-textfield-decoration-container {
+ margin-left: 4px;
+}
+body:not(.unknown-mac) .toolbar .item.button,
+body:not(.unknown-mac) .toolbar .search-bar > input[type="search"],
+body:not(.unknown-mac) .toolbar .dashboard-container {
+ background-color: hsl(0, 0%, 99%);
border: 1px solid transparent;
- border-top-color: white;
+ border-top-color: hsl(0, 0%, 100%);
+ box-shadow: hsla(0, 0%, 0%, 0.15) 0 1px 0;
+ border-radius: 4px;
+}
- background-clip: initial;
+body:not(.unknown-mac) .toolbar .search-bar > input[type="search"] {
+ box-shadow: hsla(0, 0%, 0%, 0.3) 0 1px 1px -1px, 0 0 0 7px hsla(211, 96%, 48%, 0);
+ transition: box-shadow .25s cubic-bezier(0.165, 0.840, 0.440, 1) /* easeOutQuart */;
+}
- margin: 4px;
+body:not(.unknown-mac) .toolbar .search-bar > input[type="search"]:focus {
+ box-shadow: hsla(0, 0%, 0%, 0.15) 0 1px 0, 0 0 0 3px hsla(211, 96%, 48%, 0.4);
+}
- box-shadow: rgba(0, 0, 0, 0.15) 0 1px 0, 0 0 0 7px hsla(211, 96%, 48%, 0);
+body:not(.unknown-mac) .toolbar .item.button:active {
+ border-top-color: hsl(0, 0%, 94%);
+ background-color: hsl(0, 0%, 89%);
+}
+
+body.window-inactive:not(.unknown-mac) .toolbar .item.button,
+body.window-inactive:not(.unknown-mac) .toolbar .search-bar > input[type="search"],
+body.window-inactive:not(.unknown-mac) .toolbar .dashboard-container {
+ border: 1px solid hsl(0, 0%, 86%);
+ background-color: hsl(0, 0%, 96%);
+ box-shadow: none;
+}
+
+body.unknown-mac .toolbar .item.button,
+body.unknown-mac .toolbar .search-bar > input[type="search"],
+body.unknown-mac .toolbar .dashboard-container {
+ background-image: linear-gradient(hsl(0, 0%, 99%), hsl(0, 0%, 94%));
+ box-shadow: hsla(0, 0%, 0%, 0.3) 0 1px 1px -1px;
+
+ border-radius: 4px;
+ border: 1px solid hsl(0, 1%, 82%);
+ border-top-color: hsl(0, 0%, 83%);
+ border-bottom-color: hsl(0, 0%, 76%);
+}
+
+body.unknown-mac .toolbar .search-bar > input[type="search"] {
+ box-shadow: hsla(0, 0%, 0%, 0.3) 0 1px 1px -1px, 0 0 0 7px hsla(211, 96%, 48%, 0);
transition: box-shadow .25s cubic-bezier(0.165, 0.840, 0.440, 1) /* easeOutQuart */;
}
-.toolbar .search-bar > input[type="search"]:focus {
- box-shadow: rgba(0, 0, 0, 0.15) 0 1px 0, 0 0 0 3px hsla(211, 96%, 48%, 0.4);
+body.unknown-mac .toolbar .search-bar > input[type="search"]:focus {
+ box-shadow: hsla(0, 0%, 0%, 0.15) 0 1px 0, 0 0 0 3px hsla(211, 96%, 48%, 0.4);
}
-.toolbar .search-bar > input[type="search"]::-webkit-textfield-decoration-container {
- margin-left: 4px;
+@media (-webkit-min-device-pixel-ratio: 2) {
+ body.unknown-mac .toolbar .item.button,
+ body.unknown-mac .toolbar .search-bar > input[type="search"],
+ body.unknown-mac .toolbar .dashboard-container {
+ border: 0.5px solid hsl(0, 0%, 78%);
+ border-top-color: hsl(0, 0%, 80%);
+ border-bottom-color: hsl(0, 0%, 65%);
+ }
}
-body.window-inactive .toolbar .search-bar > input[type="search"] {
- border: 1px solid rgb(220, 220, 220);
- background-color: rgb(246, 246, 246);
- box-shadow: none;
+body.unknown-mac .toolbar .item.button:active {
+ background-image: linear-gradient(hsl(0, 0%, 89%), hsl(0, 0%, 86%));
+ box-shadow: hsla(0, 0%, 0%, 0.3) 0 1px 1px -1px, inset 0 1px 1px -1px white;
}
+
+body.unknown-mac.window-inactive .toolbar .item.button,
+body.unknown-mac.window-inactive .toolbar .search-bar > input[type="search"],
+body.unknown-mac.window-inactive .toolbar .dashboard-container {
+ opacity: 0.65;
+ border-color: hsla(0, 0%, 0%, 0.15);
+ background-color: transparent;
+ background-image: none;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2) {
+ body.unknown-mac.window-inactive .toolbar .item.button,
+ body.unknown-mac.window-inactive .toolbar .search-bar > input[type="search"],
+ body.unknown-mac.window-inactive .toolbar .dashboard-container {
+ box-shadow: inset 0 0 1px 0 hsla(0, 0%, 0%, 0.1);
+ }
+}
_______________________________________________ webkit-changes mailing list webkit-changes@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-changes
