Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-01 22:55:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1049020 - Update TableWidget headers to match new design. r=bgrins

Browse Source
This commit is contained in:
Tim Nguyen 2015-12-13 13:32:00 +01:00
parent 9be9178338
commit b863d5232e
4 changed files with 34 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
devtools/client/shared/widgets/TableWidget.js
View File

@ -475,7 +475,7 @@ function Column(table, id, header) {
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) {

13
devtools/client/themes/images/sort-arrows.svg
View File

@ -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>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 409 B

After

Width:  |  Height:  |  Size: 493 B

9
devtools/client/themes/netmonitor.css
View File

@ -83,19 +83,14 @@
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,

44
devtools/client/themes/widgets.css
View File

@ -1209,46 +1209,44 @@
}
/* 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:not([sorted]):hover {
background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1));
}
.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[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] {
background-image: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15));
.table-widget-column-header[sorted]:-moz-locale-dir(rtl) {
background-position: 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=ascending] {
background-image: url("chrome://devtools/skin/images/sort-arrows.svg#ascending");
}
.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=descending] {
background-image: url("chrome://devtools/skin/images/sort-arrows.svg#descending");
}
/* Cells */
@ -1264,6 +1262,10 @@
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);
}