Web Inspector: Fonts refactoring
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 30 Mar 2013 08:24:38 +0000 (08:24 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 30 Mar 2013 08:24:38 +0000 (08:24 +0000)
https://bugs.webkit.org/show_bug.cgi?id=113047

Patch by Alexei Filippov <alph@chromium.org> on 2013-03-30
Reviewed by Pavel Feldman.

Unify fonts usage across inspector.
Make inspector default font depend on platform.

Source/WebCore:

* inspector/front-end/breakpointsList.css:
* inspector/front-end/dataGrid.css:
(.data-grid):
(.data-grid table):
(.data-grid td):
(.data-grid th.sort-ascending > div::after):
(.data-grid th.sort-descending > div::after):
(.data-grid button):
* inspector/front-end/heapProfiler.css:
(.heap-snapshot-view .class-view-toolbar input.class-name-filter):
(.heap-snapshot-view .retainers-view-header):
* inspector/front-end/inspector.css:
(.toolbar-item):
(.toolbar-label):
(.console-message .bubble):
(.outline-disclosure > ol):
(.source-code):
(.scope-bar li):
(.sidebar-tree, .sidebar-tree .children):
(.sidebar-tree-section):
(li .status .bubble):
(.sidebar-tree-item.selected):
(.sidebar-tree-item .titles):
(.sidebar-tree-item .subtitle):
(.sidebar-tree-item.selected .subtitle):
(.source-frame-breakpoint-message):
(.soft-context-menu):
* inspector/front-end/inspectorCommon.css:
(body):
(.resources-divider-label):
* inspector/front-end/navigatorView.css:
(.navigator li):
(.navigator li.selected .selection):
(.navigator .base-navigator-tree-element-title):
* inspector/front-end/networkLogView.css:
(.network-log-grid.data-grid td):
(.network-log-grid.data-grid.small td):
(.network-log-grid.data-grid th):
(.network-log-grid.data-grid select):
(.network-graph-label):
(.network-timeline-grid .resources-divider-label):
(.network-log-grid.data-grid .network-summary-bar td):
* inspector/front-end/resourcesPanel.css:
(.resources.panel .sidebar li):
(.resources.panel .sidebar li.selected):
(.resources.panel .sidebar li.selected .selection):
* inspector/front-end/sidebarPane.css:
(.sidebar-pane > .body .info):
(.sidebar-pane-title):
(.sidebar-pane-toolbar):
(.sidebar-pane-subtitle):
* inspector/front-end/tabbedPane.css:
(.tabbed-pane-header-tab):
(.tabbed-pane-header-tab-close-button):
(select.tabbed-pane-header-tabs-drop-down-select):
* inspector/front-end/timelinePanel.css:
(.memory-counter-value):

Source/WebKit/chromium:

* src/js/devTools.css:
(body.platform-linux):
(body.platform-mac):
(body.platform-windows):

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

14 files changed:
Source/WebCore/ChangeLog
Source/WebCore/inspector/front-end/breakpointsList.css
Source/WebCore/inspector/front-end/dataGrid.css
Source/WebCore/inspector/front-end/heapProfiler.css
Source/WebCore/inspector/front-end/inspector.css
Source/WebCore/inspector/front-end/inspectorCommon.css
Source/WebCore/inspector/front-end/navigatorView.css
Source/WebCore/inspector/front-end/networkLogView.css
Source/WebCore/inspector/front-end/resourcesPanel.css
Source/WebCore/inspector/front-end/sidebarPane.css
Source/WebCore/inspector/front-end/tabbedPane.css
Source/WebCore/inspector/front-end/timelinePanel.css
Source/WebKit/chromium/ChangeLog
Source/WebKit/chromium/src/js/devTools.css

index 70a2b8f..9239dfa 100644 (file)
@@ -1,3 +1,71 @@
+2013-03-30  Alexei Filippov  <alph@chromium.org>
+
+        Web Inspector: Fonts refactoring
+        https://bugs.webkit.org/show_bug.cgi?id=113047
+
+        Reviewed by Pavel Feldman.
+
+        Unify fonts usage across inspector.
+        Make inspector default font depend on platform.
+
+        * inspector/front-end/breakpointsList.css:
+        * inspector/front-end/dataGrid.css:
+        (.data-grid):
+        (.data-grid table):
+        (.data-grid td):
+        (.data-grid th.sort-ascending > div::after):
+        (.data-grid th.sort-descending > div::after):
+        (.data-grid button):
+        * inspector/front-end/heapProfiler.css:
+        (.heap-snapshot-view .class-view-toolbar input.class-name-filter):
+        (.heap-snapshot-view .retainers-view-header):
+        * inspector/front-end/inspector.css:
+        (.toolbar-item):
+        (.toolbar-label):
+        (.console-message .bubble):
+        (.outline-disclosure > ol):
+        (.source-code):
+        (.scope-bar li):
+        (.sidebar-tree, .sidebar-tree .children):
+        (.sidebar-tree-section):
+        (li .status .bubble):
+        (.sidebar-tree-item.selected):
+        (.sidebar-tree-item .titles):
+        (.sidebar-tree-item .subtitle):
+        (.sidebar-tree-item.selected .subtitle):
+        (.source-frame-breakpoint-message):
+        (.soft-context-menu):
+        * inspector/front-end/inspectorCommon.css:
+        (body):
+        (.resources-divider-label):
+        * inspector/front-end/navigatorView.css:
+        (.navigator li):
+        (.navigator li.selected .selection):
+        (.navigator .base-navigator-tree-element-title):
+        * inspector/front-end/networkLogView.css:
+        (.network-log-grid.data-grid td):
+        (.network-log-grid.data-grid.small td):
+        (.network-log-grid.data-grid th):
+        (.network-log-grid.data-grid select):
+        (.network-graph-label):
+        (.network-timeline-grid .resources-divider-label):
+        (.network-log-grid.data-grid .network-summary-bar td):
+        * inspector/front-end/resourcesPanel.css:
+        (.resources.panel .sidebar li):
+        (.resources.panel .sidebar li.selected):
+        (.resources.panel .sidebar li.selected .selection):
+        * inspector/front-end/sidebarPane.css:
+        (.sidebar-pane > .body .info):
+        (.sidebar-pane-title):
+        (.sidebar-pane-toolbar):
+        (.sidebar-pane-subtitle):
+        * inspector/front-end/tabbedPane.css:
+        (.tabbed-pane-header-tab):
+        (.tabbed-pane-header-tab-close-button):
+        (select.tabbed-pane-header-tabs-drop-down-select):
+        * inspector/front-end/timelinePanel.css:
+        (.memory-counter-value):
+
 2013-03-29  Sheriff Bot  <webkit.review.bot@gmail.com>
 
         Unreviewed, rolling out r147263.
index 4fad510..61ea1eb 100644 (file)
@@ -96,9 +96,6 @@ li.breakpoint-hit .breakpoint-hit-marker {
 }
 
 .event-listener-breakpoints .event-category {
-    font-size: 11px;
-    font-weight: bold;
-    color: rgb(96, 96, 96);
     padding-top: 2px;
 }
 
@@ -108,7 +105,6 @@ li.breakpoint-hit .breakpoint-hit-marker {
 }
 
 .event-listener-breakpoints .checkbox-elem {
-    font-size: 10px;
     float: left;
     top: -2px;
     position: relative;
index 2cd2008..5a658b4 100644 (file)
@@ -1,6 +1,7 @@
 .data-grid {
     position: relative;
     border: 1px solid #aaa;
+    font-size: 11px;
 }
 
 .data-grid .highlight {
@@ -16,8 +17,6 @@
     border-spacing: 0;
     border-collapse: collapse;
     width: 100%;
-    font-size: 11px;
-    font-family: Lucida Grande, sans-serif;
 }
 
 .data-grid .data-container {
 .data-grid td {
     vertical-align: top;
     height: 16px; /* Keep in sync with .data-grid table.data @ -webkit-background-size */
-    line-height: 12px;
-    padding: 2px 4px;
+    line-height: 13px;
+    padding: 1px 4px;
     white-space: nowrap;
     overflow: hidden;
     border-right: 1px solid #aaa;
 
 .data-grid th.sort-ascending > div::after {
     position: absolute;
-    top: 0;
-    bottom: 0;
     right: 0;
     height: 12px;
     margin-bottom: auto;
 
 .data-grid th.sort-descending > div::after {
     position: absolute;
-    top: 0;
-    bottom: 0;
     right: 0;
     height: 8px;
     margin-bottom: auto;
 
 .data-grid button {
     line-height: 18px;
+    color: inherit;
 }
 
 body.inactive .data-grid th.sort-ascending, body.inactive .data-grid th.sort-descending {
index cd452bb..646ff27 100644 (file)
@@ -214,6 +214,7 @@ body.inactive .heap-snapshot-sidebar-tree-item.wait.selected .icon {
     width: 200px;
     height: 18px;
     font-size: 11px;
+    font-family: inherit;
     padding: 2px;
     margin: 2px 10px;
     background-color: white;
@@ -227,10 +228,6 @@ body.inactive .heap-snapshot-sidebar-tree-item.wait.selected .icon {
     background-position: right center, center;
     cursor: row-resize;
     height: 23px;
-    font: -webkit-small-control;
-    font-weight: bold;
-    color: rgb(48, 48, 48);
-    text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
     display: block;
     position: absolute;
     left: 0;
index 19b6ac8..f262824 100644 (file)
@@ -100,6 +100,9 @@ body.dock-to-bottom.inactive #toolbar {
     background-color: transparent;
     border-style: none;
     border-color: transparent;
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
 }
 
 body:not(.show-toolbar-icons) .toolbar-item {
@@ -163,15 +166,14 @@ body.dock-to-bottom .toolbar-item:active .toolbar-icon {
 }
 
 .toolbar-label {
-    line-height: 22px;
-    font-size: 11px;
-    font-family: Lucida Grande, sans-serif;
+    line-height: 23px;
     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
 }
 
 body.show-toolbar-icons .toolbar-label {
     line-height: 15px;
 }
+
 .toolbar-item.toggleable:active .toolbar-label {
     text-shadow: none;
 }
@@ -758,7 +760,6 @@ button.status-bar-item {
 
 .status-bar select.status-bar-item:active,
 .status-bar button.status-bar-item:active {
-    background-color: rgb(163,163,163);
     border-left: 1px solid rgb(120, 120, 120);
     border-right: 1px solid rgb(120, 120, 120);
 }
@@ -1046,7 +1047,6 @@ body.platform-linux .monospace, body.platform-linux .source-code {
     text-align: left;
     font-size: 11px;
     line-height: normal;
-    font-family: Helvetica, Arial, sans-serif;
     font-weight: bold;
     text-shadow: none;
     color: white;
@@ -1393,15 +1393,10 @@ iframe.panel.extension {
     background-color: white;
 }
 
-.outline-disclosure {
-    font-size: 11px;
-}
-
 .outline-disclosure > ol {
     position: relative;
     padding: 2px 6px !important;
     margin: 0;
-    color: black;
     cursor: default;
     min-width: 100%;
 }
@@ -1414,7 +1409,7 @@ iframe.panel.extension {
 
 .source-code {
     font-family: monospace;
-    font-size: 10px !important;
+    font-size: 11px !important;
     white-space: pre-wrap;
 }
 
@@ -1454,7 +1449,6 @@ iframe.panel.extension {
 }
 
 .outline-disclosure li.parent::before {
-    content: url(Images/treeRightTriangleBlack.png);
     float: left;
     width: 8px;
     height: 8px;
@@ -1897,7 +1891,6 @@ button.enable-toggle-status-bar-item.toggled-on .glyph {
     display: inline-block;
     margin: 0 2px;
     padding: 2px 6px;
-    font-size: 11px;
     line-height: 12px;
     font-weight: bold;
     color: rgb(46, 46, 46);
@@ -1979,7 +1972,6 @@ button.enable-toggle-status-bar-item.toggled-on .glyph {
     padding: 0;
     margin: 0;
     list-style: none;
-    font-size: 11px;
 }
 
 .sidebar-tree-section {
@@ -1989,7 +1981,6 @@ button.enable-toggle-status-bar-item.toggled-on .glyph {
     white-space: nowrap;
     margin-top: 1px;
     color: rgb(92, 110, 129);
-    font-weight: bold;
     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
 }
 
@@ -2121,7 +2112,6 @@ li .status .bubble {
     text-align: center;
     font-size: 11px;
     line-height: normal;
-    font-family: Helvetica, Arial, sans-serif;
     font-weight: bold;
     text-shadow: none;
     color: white;
@@ -2162,8 +2152,7 @@ body.inactive li.selected .status .bubble {
     color: white;
     border-top: 1px solid rgb(145, 160, 192);
     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(162, 177, 207)), to(rgb(120, 138, 177)));
-    text-shadow: rgba(0, 0, 0, 0.33) 0 1px 0;
-    font-weight: bold;
+    text-shadow: rgba(0, 0, 0, 0.33) 1px 1px 0;
     -webkit-background-origin: padding;
     -webkit-background-clip: padding;
 }
@@ -2181,7 +2170,7 @@ body.inactive .sidebar-tree-item.selected {
 .sidebar-tree-item .titles {
     position: relative;
     top: 5px;
-    line-height: 11px;
+    line-height: 12px;
     padding-bottom: 1px;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -2203,8 +2192,7 @@ body.inactive .sidebar-tree-item.selected {
 }
 
 .sidebar-tree-item .subtitle {
-    font-size: 9px;
-    color: rgba(0, 0, 0, 0.7);
+    font-size: 80%;
 }
 
 .sidebar-tree.small .sidebar-tree-item .subtitle, .sidebar-tree .children.small .sidebar-tree-item .subtitle, .sidebar-tree-item.small .subtitle {
@@ -2212,7 +2200,7 @@ body.inactive .sidebar-tree-item.selected {
 }
 
 .sidebar-tree-item.selected .subtitle {
-    color: rgba(255, 255, 255, 0.9);
+    color: white;
 }
 
 .bubble.debug, .console-debug-level .bubble {
@@ -2304,7 +2292,6 @@ body.inactive li.selected .bubble.search-matches {
 
 .source-frame-breakpoint-message {
     background-color: transparent;
-    font-family: Lucida Grande, sans-serif;
     font-weight: normal;
     font-size: 11px;
     text-align: left;
@@ -2409,7 +2396,6 @@ body.inactive li.selected .bubble.search-matches {
 
 .soft-context-menu {
     position: absolute;
-    font-family: 'Lucida Grande', 'Helvetica', 'sans-serif';
     border: 1px solid rgba(196, 196, 196, 0.9);
     border-top: 1px solid rgba(196, 196, 196, 0.5);
     border-bottom: 1px solid rgba(150, 150, 150, 0.9);
@@ -2515,7 +2501,6 @@ body.platform-mac .search-drawer-header input[type="checkbox"].search-config-che
 }
 
 .drawer-header-close-button {
-    font-family: Arial, monospace;
     padding: 3px 8px;
     font-size: 14px;
     color:rgb(80, 80, 80);
index a42c0ac..ea36db2 100644 (file)
@@ -11,7 +11,7 @@ body {
     right: 0;
     overflow: hidden;
     font-family: Lucida Grande, sans-serif;
-    font-size: 10px;
+    font-size: 11px;
     margin: 0;
     tab-size: 4;
     -webkit-user-select: none;
@@ -122,8 +122,7 @@ iframe.view {
     position: absolute;
     top: 4px;
     right: 3px;
-    font-size: 9px;
-    color: rgb(50%, 50%, 50%);
+    font-size: 80%;
     white-space: nowrap;
     pointer-events: none;
 }
index c0fdb41..a3f03e2 100644 (file)
@@ -58,7 +58,8 @@
 }
 
 .navigator li {
-    height: 17px;
+    height: 18px;
+    line-height: 17px;
     white-space: nowrap;
 }
 
@@ -67,7 +68,7 @@
 }
 
 .navigator li.selected .selection {
-    height: 17px;
+    height: 18px;
     background-color: rgb(180, 180, 180);
 }
 
@@ -98,7 +99,6 @@
     display: inline-block;
     position: relative;
     padding-left: 2px;
-    top: 1px;
 }
 
 .navigator .base-navigator-tree-element-title.editing {
index c6d10c4..df173d4 100644 (file)
 
 .network-log-grid.data-grid td {
     line-height: 17px;
-    height: 37px;
+    height: 41px;
     border-right: 1px solid rgb(210, 210, 210);
     vertical-align: middle;
 }
 
 .network-log-grid.data-grid.small td {
-    height: 17px;
+    height: 21px;
 }
 
 .network-log-grid.data-grid th {
     border-bottom: 1px solid rgb(64%, 64%, 64%);
     height: 30px;
-    font-weight: bold;
 }
 
 .network-log-grid.data-grid.small th {
@@ -54,7 +53,8 @@
     background-color: transparent;
     border: none;
     width: 100%;
-    font-weight: bold;
+    font-size: inherit;
+    color: inherit;
 }
 
 .network-log-grid.data-grid.small tr.offscreen {
@@ -74,7 +74,6 @@
 }
 
 .network-log-grid.data-grid tr:not(.filler) td.name-column {
-    font-weight: bold;
     cursor: pointer;
 }
 
     margin: auto -7px;
     height: 13px;
     line-height: 13px;
-    font-size: 9px;
+    font-size: 90%;
     color: rgba(0, 0, 0, 0.75);
     text-shadow: rgba(255, 255, 255, 0.25) 1px 0 0, rgba(255, 255, 255, 0.25) -1px 0 0, rgba(255, 255, 255, 0.333) 0 1px 0, rgba(255, 255, 255, 0.25) 0 -1px 0;
     z-index: 150;
     overflow: hidden;
     text-align: center;
-    font-weight: bold;
     opacity: 0;
     -webkit-transition: opacity 250ms ease-in-out;
 }
 
 .network-timeline-grid .resources-divider-label {
     top: 0;
-    margin-top: -4px;
-    color: black;
+    margin-top: -5px;
 }
 
 .network-timeline-grid .resources-dividers-label-bar .resources-divider {
     color: white;
     height: 20px !important;
     border: none;
-    font-weight: bold;
+    font-size: 110%;
     padding: 0 0 0 8px;
     white-space: pre;
     overflow : hidden;
index a95a5da..3641669 100644 (file)
 }
 
 .resources.panel .sidebar li {
-    height: 17px;
+    height: 18px;
     white-space: nowrap;
 }
 
 .resources.panel .sidebar li.selected {
     color: white;
-    text-shadow: rgba(0, 0, 0, 0.33) 0 1px 0;
-    font-weight: bold;
+    text-shadow: rgba(0, 0, 0, 0.33) 1px 1px 0;
 }
 
 .resources.panel .sidebar li.selected .selection {
     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(162, 177, 207)), to(rgb(120, 138, 177)));
     border-top: 1px solid #979797;
-    height: 17px;
+    height: 18px;
 }
 
 .resources.panel .sidebar :focus li.selected .selection {
index 85d518e..18adb61 100644 (file)
@@ -41,9 +41,9 @@
 .sidebar-pane > .body .info {
     text-align: center;
     font-style: italic;
-    font-size: 10px;
+    font-size: 90%;
     padding: 6px;
-    color: black;
+    color: #888;
 }
 
 .sidebar-pane > .body .placard + .info {
 
 .sidebar-pane-title {
     position: relative;
-    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(243, 243, 243)), color-stop(0.05, rgb(243, 243, 243)), color-stop(0.05, rgb(230, 230, 230)), to(rgb(209, 209, 209)));
+    background: rgb(230, 230, 230);
     height: 20px;
     padding: 0 5px;
     border-top: 1px solid rgb(189, 189, 189);
     border-bottom: 1px solid rgb(189, 189, 189);
-    font-weight: bold;
-    font-size: 12px;
     line-height: 18px;
-    color: rgb(110, 110, 110);
-    text-shadow: white 0 1px 0;
     -webkit-background-origin: padding;
     -webkit-background-clip: padding;
 }
 }
 
 .sidebar-pane-toolbar {
-    font-weight: bold;
-    font-size: 12px;
     line-height: 18px;
-    color: rgb(110, 110, 110);
-    text-shadow: white 0 1px 0;
     left: 0;
-    right: 0;
+    right: 4px;
     top: 0;
     height: 20px;
     position: absolute;
 .sidebar-pane-subtitle {
     position: absolute;
     right: 0;
-    font-weight: normal;
 }
 
 body.platform-windows .sidebar-pane-subtitle {
index ce04ee3..cf2903e 100644 (file)
 .tabbed-pane-header-tab {
     float: left;
     margin-top: 2px;
-    font-size: 11px;
-    font-weight: bold;
-    color: rgb(46, 46, 46);
-    background: transparent;
-    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
-    vertical-align: middle;
-    padding: 3px 4px 2px 4px;
+    padding: 2px 4px 2px 4px;
     height: 21px;
     border: 1px solid transparent;
     border-bottom: none;
+    line-height: 15px;
     
     white-space: nowrap;
     text-overflow: ellipsis;
     border-bottom: none;
 }
 
-.tabbed-pane-header .tabbed-pane-header-tab-title {
-    vertical-align: top;
-}
-
 .tabbed-pane-header-tab-close-button {
-    font-family: Arial, monospace;
     position: relative;
-    bottom: 1px;
+    bottom: 0;
     opacity: 0;
     padding-left: 3px;
     font-size: 14px;
     color: rgb(80, 80, 80);
+    line-height: 12px;
 }
 
 .tabbed-pane-header-tab:hover .tabbed-pane-header-tab-close-button {
@@ -164,4 +155,3 @@ select.tabbed-pane-header-tabs-drop-down-select {
     margin: 0;
     -webkit-appearance: none;
 }
\ No newline at end of file
index 9f3e9de..ace4654 100644 (file)
 }
 
 .timeline-tree-item .count {
-    font-family: Helvetica, Arial, sans-serif;
     font-weight: bold;
 }
 
 }
 
 .timeline-records-stats, .storage-application-cache-status, .storage-application-cache-connectivity {
-    font-size: 11px;
     text-shadow: white 0 1px 0;
 }
 
 }
 
 .memory-counter-sidebar-info {
-    font-size: 11px;
     margin: 10px;
 }
 
 
 .memory-counter-value {
     margin: 4px;
-    font-size: 11px;
 }
 
 #counter-values-bar {
index 7543fc4..88e5ec4 100644 (file)
@@ -1,3 +1,18 @@
+2013-03-30  Alexei Filippov  <alph@chromium.org>
+
+        Web Inspector: Fonts refactoring
+        https://bugs.webkit.org/show_bug.cgi?id=113047
+
+        Reviewed by Pavel Feldman.
+
+        Unify fonts usage across inspector.
+        Make inspector default font depend on platform.
+
+        * src/js/devTools.css:
+        (body.platform-linux):
+        (body.platform-mac):
+        (body.platform-windows):
+
 2013-03-29  Sheriff Bot  <webkit.review.bot@gmail.com>
 
         Unreviewed.  Rolled Chromium DEPS to r191432.  Requested by
index bb24de6..5f916a9 100644 (file)
@@ -12,6 +12,23 @@ body.dock-to-bottom.platform-mac #toolbar {
 
 /* Chrome theme overrides */
 
+body.platform-linux {
+  color: rgb(48, 57, 66);
+  font-family: Ubuntu, Arial, sans-serif;
+  font-size: 12px;
+}
+
+body.platform-mac {
+  color: rgb(48, 57, 66);
+  font-family: 'Lucida Grande', sans-serif;
+  font-size: 12px;
+}
+
+body.platform-windows {
+  font-family: 'Segoe UI', Tahoma, sans-serif;
+  font-size: 12px;
+}
+
 body.platform-windows #toolbar, body.platform-windows.inactive #toolbar {
     background-image: none;
 }