Bug 1049020 - Update TableWidget headers to match new design. r=bgrins
authorTim Nguyen <ntim.bugs@gmail.com>
Sun, 13 Dec 2015 13:32:00 +0100
changeset 276726 335f67b728a4ad1ac67539409b6157cf06b53100
parent 276725 5fb09b81583111d48b827401905be0291a888094
child 276727 548a5523e43cd4859309cf69e4c8f3886d6cabf0
push id69273
push usercbook@mozilla.com
push dateThu, 17 Dec 2015 11:03:52 +0000
treeherdermozilla-inbound@565d7ae436ba [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1049020
milestone46.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1049020 - Update TableWidget headers to match new design. r=bgrins
devtools/client/shared/widgets/TableWidget.js
devtools/client/themes/images/sort-arrows.svg
devtools/client/themes/netmonitor.css
devtools/client/themes/widgets.css
--- a/devtools/client/shared/widgets/TableWidget.js
+++ b/devtools/client/shared/widgets/TableWidget.js
@@ -470,17 +470,17 @@ function Column(table, id, header) {
   this.tbody.appendChild(this.splitter);
 
   this.column = this.document.createElementNS(HTML_NS, "div");
   this.column.id = id;
   this.column.className = "table-widget-column";
   this.wrapper.appendChild(this.column);
 
   this.header = this.document.createElementNS(XUL_NS, "label");
-  this.header.className = "plain devtools-toolbar table-widget-column-header";
+  this.header.className = "devtools-toolbar table-widget-column-header";
   this.header.setAttribute("value", header);
   this.column.appendChild(this.header);
   if (table.headersContextMenu) {
     this.header.setAttribute("context", table.headersContextMenu);
   }
   this.toggleColumn = this.toggleColumn.bind(this);
   this.table.on(EVENTS.HEADER_CONTEXT_MENU, this.toggleColumn);
 
--- a/devtools/client/themes/images/sort-arrows.svg
+++ b/devtools/client/themes/images/sort-arrows.svg
@@ -1,9 +1,12 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" width="22" height="11">
-  <g fill="#edf0f1" fill-opacity="0.8">
-    <polygon points="3,5 5.5,8 8,5"/>
-    <polygon points="14,7 16.5,4 19,7"/>
-  </g>
+<svg xmlns="http://www.w3.org/2000/svg" width="7" height="4" fill="#edf0f1" fill-opacity="0.8">
+  <style>
+    polygon:not(:target) {
+      display: none;
+    }
+  </style>
+  <polygon points="0,4 3.5,0 7,4" id="ascending"/>
+  <polygon points="0,0 3.5,4 7,0" id="descending"/>
 </svg>
--- a/devtools/client/themes/netmonitor.css
+++ b/devtools/client/themes/netmonitor.css
@@ -78,29 +78,24 @@
 #requests-menu-waterfall-image {
   display: -moz-box;
   height: 4px;
   margin-inline-end: 6px;
   -moz-box-ordinal-group: 2;
   width: 7px;
 }
 
-.requests-menu-header-button[sorted] > .button-box > .button-icon,
-.requests-menu-header-button[sorted] #requests-menu-waterfall-image {
-  list-style-image: url('chrome://devtools/skin/images/sort-arrows.svg');
-}
-
 .requests-menu-header-button[sorted=ascending] > .button-box > .button-icon,
 .requests-menu-header-button[sorted=ascending] #requests-menu-waterfall-image {
-  -moz-image-region: rect(4px, 19px, 7px, 14px);
+  list-style-image: url("chrome://devtools/skin/images/sort-arrows.svg#ascending");
 }
 
 .requests-menu-header-button[sorted=descending] > .button-box > .button-icon,
 .requests-menu-header-button[sorted=descending] #requests-menu-waterfall-image {
-  -moz-image-region: rect(5px, 8px, 8px, 3px);
+  list-style-image: url("chrome://devtools/skin/images/sort-arrows.svg#descending");
 }
 
 .requests-menu-header-button > .button-box > .button-text,
 #requests-menu-waterfall-label-wrapper {
   -moz-box-flex: 1;
 }
 
 .requests-menu-header-button[sorted],
--- a/devtools/client/themes/widgets.css
+++ b/devtools/client/themes/widgets.css
@@ -1204,71 +1204,73 @@
 /* Column Headers */
 
 .table-widget-column-header,
 .table-widget-cell {
   -moz-border-end: 1px solid var(--table-splitter-color) !important;
 }
 
 /* Table widget column header colors are taken from netmonitor.inc.css to match
-   the look of both the tables. This needs to be updated along with netmonitor
-   header colors in bug 951714 */
+   the look of both the tables. */
 
 .table-widget-column-header {
-  background: rgba(0,0,0,0);
   position: sticky;
   top: 0;
   width: 100%;
+  margin: 0;
   padding: 5px 0 0 !important;
   color: inherit;
   text-align: center;
   font-weight: inherit !important;
-  transition: background-color 0.1s ease-in-out;
+  border-bottom-width: 0 !important;
+  border-image: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%) 1 1;
+  background-repeat: no-repeat;
 }
 
-.table-widget-column-header:hover {
-  background-image: linear-gradient(rgba(0,0,0,0.10), rgba(0,0,0,0.10));
-}
-
-.table-widget-column-header:hover:active {
-  background-image: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25));
+.table-widget-column-header:not([sorted]):hover {
+  background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1));
 }
 
-.table-widget-column-header:not(:active)[sorted] {
-  background-image: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15));
+.table-widget-column-header[sorted] {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+  border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
+  box-shadow: -0.5px 0px 0px 0.5px var(--theme-splitter-color);
+  background-position: right 6px center;
 }
 
-.table-widget-column-header:not(:active)[sorted=ascending] {
-  background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)),
-                    linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15));
-  background-size: 100% 1px, auto;
-  background-repeat: no-repeat, repeat;
+.table-widget-column-header[sorted]:-moz-locale-dir(rtl) {
+  background-position: 6px center;
 }
 
-.table-widget-column-header:not(:active)[sorted=descending] {
-  background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)),
-                    linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15));
-  background-size: 100% 1px, auto;
-  background-repeat: no-repeat, repeat;
-  background-position: bottom;
+.table-widget-column-header[sorted=ascending] {
+  background-image: url("chrome://devtools/skin/images/sort-arrows.svg#ascending");
+}
+
+.table-widget-column-header[sorted=descending] {
+  background-image: url("chrome://devtools/skin/images/sort-arrows.svg#descending");
 }
 
 /* Cells */
 
 .table-widget-cell {
   width: 100%;
   padding: 3px 4px;
   background-clip: padding-box;
   min-width: 100px;
   -moz-user-focus: normal;
   margin-bottom: -1px !important;
   border-bottom: 1px solid transparent;
   color: var(--theme-body-color);
 }
 
+.table-widget-column-header + .table-widget-cell {
+  border-top: 1px solid var(--theme-splitter-color);
+}
+
 .table-widget-cell:last-child {
   border-bottom: 1px solid var(--table-splitter-color);
 }
 
 :root:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
 .table-widget-cell:not(.theme-selected)[odd] {
   background: var(--table-zebra-background);
 }