From c1b1407c9a58e21060e4d09593b02990f6456c25 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 21 Aug 2015 17:50:24 +0200 Subject: update to 41.0b2 --- arc-firefox-theme/chrome/browser/devtools/add.svg | 12 +- .../browser/devtools/animation-fast-track.svg | 9 + .../chrome/browser/devtools/animationinspector.css | 190 +++++++- .../chrome/browser/devtools/app-manager/add.svg | 9 +- .../chrome/browser/devtools/app-manager/error.svg | 10 +- .../browser/devtools/app-manager/index-icons.svg | 94 +--- .../chrome/browser/devtools/app-manager/plus.svg | 9 +- .../chrome/browser/devtools/app-manager/remove.svg | 7 +- .../chrome/browser/devtools/app-manager/rocket.svg | 28 +- .../browser/devtools/app-manager/warning.svg | 10 +- .../chrome/browser/devtools/common.css | 10 + .../chrome/browser/devtools/computedview.css | 8 +- .../chrome/browser/devtools/dark-theme.css | 24 +- .../browser/devtools/dock-bottom-maximize@2x.png | Bin 0 -> 1096 bytes .../browser/devtools/dock-bottom-minimize@2x.png | Bin 0 -> 1125 bytes .../chrome/browser/devtools/dropmarker.svg | 9 +- .../chrome/browser/devtools/filetype-dir-close.svg | 5 +- .../chrome/browser/devtools/filetype-dir-open.svg | 5 +- .../chrome/browser/devtools/filetype-globe.svg | 7 +- .../chrome/browser/devtools/filetype-store.svg | 13 +- .../chrome/browser/devtools/filter-swatch.svg | 19 +- .../chrome/browser/devtools/filters.svg | 4 + .../browser/devtools/floating-scrollbars.css | 4 +- .../chrome/browser/devtools/font-inspector.css | 3 + .../chrome/browser/devtools/itemArrow-dark-ltr.svg | 9 +- .../chrome/browser/devtools/itemArrow-dark-rtl.svg | 11 +- .../chrome/browser/devtools/itemArrow-ltr.svg | 9 +- .../chrome/browser/devtools/itemArrow-rtl.svg | 9 +- .../chrome/browser/devtools/layoutview.css | 317 +++++++++++++- .../chrome/browser/devtools/light-theme.css | 24 +- .../chrome/browser/devtools/netmonitor.css | 175 +++----- .../chrome/browser/devtools/performance-icons.svg | 83 ++-- .../chrome/browser/devtools/performance.css | 487 +++++++++++---------- .../chrome/browser/devtools/power.svg | 2 +- .../devtools/profiler-stopwatch-checked.svg | 29 +- .../chrome/browser/devtools/profiler-stopwatch.svg | 29 +- .../chrome/browser/devtools/profiler.css | 400 ----------------- .../chrome/browser/devtools/pseudo-class.svg | 29 ++ .../chrome/browser/devtools/ruleview.css | 52 ++- .../chrome/browser/devtools/search-clear-dark.svg | 14 +- .../browser/devtools/search-clear-failed.svg | 14 +- .../chrome/browser/devtools/search-clear-light.svg | 14 +- .../chrome/browser/devtools/timeline-filter.svg | 53 +-- .../browser/devtools/tool-debugger-paused.svg | 7 +- .../chrome/browser/devtools/tool-debugger.svg | 15 +- .../chrome/browser/devtools/tool-inspector.svg | 19 +- .../chrome/browser/devtools/tool-network.svg | 73 +-- .../chrome/browser/devtools/tool-options.svg | 7 +- .../browser/devtools/tool-profiler-active.svg | 29 +- .../chrome/browser/devtools/tool-profiler.svg | 29 +- .../chrome/browser/devtools/tool-scratchpad.svg | 13 +- .../chrome/browser/devtools/tool-shadereditor.svg | 26 ++ .../chrome/browser/devtools/tool-storage.svg | 15 +- .../chrome/browser/devtools/tool-styleeditor.svg | 13 +- .../chrome/browser/devtools/tool-webaudio.svg | 7 +- .../chrome/browser/devtools/tool-webconsole.svg | 7 +- .../chrome/browser/devtools/webconsole.css | 43 +- .../chrome/browser/devtools/webconsole.png | Bin 1943 -> 0 bytes .../chrome/browser/devtools/webconsole.svg | 101 +++++ .../chrome/browser/devtools/webconsole@2x.png | Bin 2633 -> 0 bytes .../chrome/browser/devtools/widgets.css | 4 - 61 files changed, 1441 insertions(+), 1216 deletions(-) create mode 100644 arc-firefox-theme/chrome/browser/devtools/animation-fast-track.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/dock-bottom-maximize@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/dock-bottom-minimize@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/devtools/profiler.css create mode 100644 arc-firefox-theme/chrome/browser/devtools/pseudo-class.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/tool-shadereditor.svg delete mode 100644 arc-firefox-theme/chrome/browser/devtools/webconsole.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/webconsole.svg delete mode 100644 arc-firefox-theme/chrome/browser/devtools/webconsole@2x.png (limited to 'arc-firefox-theme/chrome/browser/devtools') diff --git a/arc-firefox-theme/chrome/browser/devtools/add.svg b/arc-firefox-theme/chrome/browser/devtools/add.svg index af162e3..b8b93de 100644 --- a/arc-firefox-theme/chrome/browser/devtools/add.svg +++ b/arc-firefox-theme/chrome/browser/devtools/add.svg @@ -1,3 +1,9 @@ - - - + + + + + + + \ No newline at end of file diff --git a/arc-firefox-theme/chrome/browser/devtools/animation-fast-track.svg b/arc-firefox-theme/chrome/browser/devtools/animation-fast-track.svg new file mode 100644 index 0000000..ee84427 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/animation-fast-track.svg @@ -0,0 +1,9 @@ + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/animationinspector.css b/arc-firefox-theme/chrome/browser/devtools/animationinspector.css index 6cc0bdb..40efab7 100644 --- a/arc-firefox-theme/chrome/browser/devtools/animationinspector.css +++ b/arc-firefox-theme/chrome/browser/devtools/animationinspector.css @@ -1,3 +1,17 @@ +/* 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/. */ + +/* Animation-inspector specific theme variables */ + +.theme-dark { + --even-animation-timeline-background-color: rgba(255,255,255,0.03); +} + +.theme-light { + --even-animation-timeline-background-color: rgba(128,128,128,0.03); +} + html { height: 100%; } @@ -32,6 +46,13 @@ body { min-height: 20px; } +/* The main animations container */ + +#players { + height: calc(100% - 20px); + overflow: auto; +} + /* The error message, shown when an invalid/unanimated element is selected */ #error-message { @@ -44,12 +65,6 @@ body { display: none; } -/* The animation players container */ - -#players { - flex: 1; - overflow: auto; -} /* Element picker and toggle-all buttons */ @@ -99,6 +114,156 @@ body { } } +/* Animation timeline component */ + +.animation-timeline { + height: 100%; + overflow: hidden; + /* The timeline gets its background-image from a canvas element created in + /browser/devtools/animationinspector/utils.js drawGraphElementBackground + thanks to document.mozSetImageElement("time-graduations", canvas) + This is done so that the background can be built dynamically from script */ + background-image: -moz-element(#time-graduations); + background-repeat: repeat-y; + /* The animations are drawn 150px from the left edge so that animated nodes + can be displayed in a sidebar */ + background-position: 150px 0; + display: flex; + flex-direction: column; +} + +.animation-timeline .time-header { + margin-left: 150px; + height: 20px; + overflow: hidden; + position: relative; + border-bottom: 1px solid var(--theme-splitter-color); +} + +.animation-timeline .time-header .time-tick { + position: absolute; + top: 3px; +} + +.animation-timeline .animations { + width: 100%; + overflow-y: auto; + overflow-x: hidden; + margin: 0; + padding: 0; + list-style-type: none; +} + +/* Animation block widgets */ + +.animation-timeline .animation { + margin: 4px 0; + height: 20px; + position: relative; +} + +.animation-timeline .animation:nth-child(2n) { + background-color: var(--even-animation-timeline-background-color); +} + +.animation-timeline .animation .target { + width: 150px; + overflow: hidden; + height: 100%; +} + +.animation-timeline .animation-target { + background-color: transparent; +} + +.animation-timeline .animation .time-block { + position: absolute; + top: 0; + left: 150px; + right: 0; + height: 100%; +} + +/* Animation iterations */ + +.animation-timeline .animation .iterations { + position: relative; + height: 100%; + border: 1px solid var(--theme-highlight-lightorange); + box-sizing: border-box; + background: var(--theme-contrast-background); + /* Iterations are displayed with a repeating linear-gradient which size is + dynamically changed from JS */ + background-image: + linear-gradient(to right, + var(--theme-highlight-lightorange) 0, + var(--theme-highlight-lightorange) 1px, + transparent 1px, + transparent 2px); + background-repeat: repeat-x; + background-position: -1px 0; +} + +.animation-timeline .animation .iterations.infinite { + border-right-width: 0; +} + +.animation-timeline .animation .iterations.infinite::before, +.animation-timeline .animation .iterations.infinite::after { + content: ""; + position: absolute; + top: 0; + right: 0; + width: 0; + height: 0; + border-right: 4px solid var(--theme-body-background); + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; +} + +.animation-timeline .animation .iterations.infinite::after { + bottom: 0; + top: unset; +} + +.animation-timeline .animation .animation-title { + height: 1.5em; + width: 100%; + box-sizing: border-box; + overflow: hidden; +} + +.animation-timeline .animation .delay { + position: absolute; + top: 0; + height: 100%; + background-image: linear-gradient(to bottom, + transparent, + transparent 9px, + var(--theme-highlight-lightorange) 9px, + var(--theme-highlight-lightorange) 11px, + transparent 11px, + transparent); +} + +.animation-timeline .animation .delay::before { + position: absolute; + content: ""; + left: 0; + width: 2px; + height: 8px; + top: 50%; + margin-top: -4px; + background: var(--theme-highlight-lightorange); +} + +.animation-timeline .animation .name { + position: absolute; + z-index: 1; + padding: 2px; + white-space: nowrap; +} + /* Animation target node gutter, contains a preview of the dom node */ .animation-target { @@ -147,6 +312,17 @@ body { margin: 0 .5em; } +.animation-title .meta-data .compositor-icon { + display: none; + background-image: url("animation-fast-track.svg"); + background-repeat: no-repeat; + padding-left: 12px; + /* Make sure the icon is positioned above the timeline range input so that + its tooltip appears on hover */ + z-index: 1; + position: relative; +} + /* Timeline wiget */ .timeline { @@ -253,4 +429,4 @@ body { width: 50px; border-left: 1px solid var(--theme-splitter-color); background: var(--theme-toolbar-background); -} +} \ No newline at end of file diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg index f1b5594..4a8e12a 100644 --- a/arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg @@ -1,12 +1,7 @@ - - - - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg index 21261cd..7876e46 100644 --- a/arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg @@ -1,13 +1,7 @@ - - - - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/index-icons.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/index-icons.svg index b0a414d..3fea1e4 100644 --- a/arc-firefox-theme/chrome/browser/devtools/app-manager/index-icons.svg +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/index-icons.svg @@ -1,80 +1,18 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg index 10e8d2b..d21764e 100644 --- a/arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg @@ -1,12 +1,7 @@ - - - - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg index 3d36871..9b98e8f 100644 --- a/arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg @@ -1,10 +1,7 @@ - - - - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/rocket.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/rocket.svg index 95c42a4..a0cca5c 100644 --- a/arc-firefox-theme/chrome/browser/devtools/app-manager/rocket.svg +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/rocket.svg @@ -1,30 +1,12 @@ - - - + - - - - - - - - - - + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/warning.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/warning.svg index 89e7c6f..d26e2e6 100644 --- a/arc-firefox-theme/chrome/browser/devtools/app-manager/warning.svg +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/warning.svg @@ -1,13 +1,7 @@ - - - - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/common.css b/arc-firefox-theme/chrome/browser/devtools/common.css index 9cbb98d..0a655c7 100644 --- a/arc-firefox-theme/chrome/browser/devtools/common.css +++ b/arc-firefox-theme/chrome/browser/devtools/common.css @@ -9,6 +9,11 @@ font-size: 80%; } +/* Bottom-docked toolbox minimize transition */ +.devtools-toolbox-bottom-iframe { + transition: margin-bottom .1s; +} + /* Splitters */ .devtools-horizontal-splitter { -moz-appearance: none; @@ -35,6 +40,11 @@ cursor: e-resize; } +.devtools-horizontal-splitter.disabled, +.devtools-side-splitter.disabled { + pointer-events: none; +} + .devtools-toolbox-side-iframe { min-width: 465px; } diff --git a/arc-firefox-theme/chrome/browser/devtools/computedview.css b/arc-firefox-theme/chrome/browser/devtools/computedview.css index b920d7b..f8b0d62 100644 --- a/arc-firefox-theme/chrome/browser/devtools/computedview.css +++ b/arc-firefox-theme/chrome/browser/devtools/computedview.css @@ -153,7 +153,7 @@ body { #root .devtools-toolbar { width: 100%; - display: -moz-box; + display: flex; } .link { @@ -183,9 +183,9 @@ body { .computedview-colorswatch { border-radius: 50%; - width: 1em; - height: 1em; - vertical-align: text-top; + width: 0.9em; + height: 0.9em; + vertical-align: middle; -moz-margin-end: 5px; display: inline-block; position: relative; diff --git a/arc-firefox-theme/chrome/browser/devtools/dark-theme.css b/arc-firefox-theme/chrome/browser/devtools/dark-theme.css index 4068fb0..bfc0fa1 100644 --- a/arc-firefox-theme/chrome/browser/devtools/dark-theme.css +++ b/arc-firefox-theme/chrome/browser/devtools/dark-theme.css @@ -669,6 +669,7 @@ div.CodeMirror span.eval-text { .devtools-button { border: 0 solid var(--theme-splitter-color); background: var(--theme-toolbar-background); + color: var(--theme-body-color); margin: 0; padding: 0; min-width: 32px; @@ -719,6 +720,11 @@ div.CodeMirror span.eval-text { background-repeat: no-repeat; } +.devtools-button[disabled]::before, +.devtools-button:disabled::before { + opacity: 0.5; +} + @media (min-resolution: 1.25dppx) { .devtools-button::before { background-size: 32px; @@ -767,8 +773,8 @@ div.CodeMirror span.eval-text { /* Searchbox is a div container element for a search input element */ .devtools-searchbox { - display: -moz-box; - -moz-box-flex: 1; + display: flex; + flex: 1; position: relative; } @@ -1056,6 +1062,20 @@ div.CodeMirror span.eval-text { background-image: url("chrome://browser/skin/devtools/undock@2x.png"); } +#toolbox-dock-bottom-minimize { + /* Bug 1177463 - The minimize button is currently hidden until we agree on + the UI for it, and until bug 1173849 is fixed too. */ + display: none; +} + +#toolbox-dock-bottom-minimize > image { + background-image: url("chrome://browser/skin/devtools/dock-bottom-minimize@2x.png"); +} + +#toolbox-dock-bottom-minimize.minimized > image { + background-image: url("chrome://browser/skin/devtools/dock-bottom-maximize@2x.png"); +} + #toolbox-dock-window, #toolbox-dock-bottom, #toolbox-dock-side { diff --git a/arc-firefox-theme/chrome/browser/devtools/dock-bottom-maximize@2x.png b/arc-firefox-theme/chrome/browser/devtools/dock-bottom-maximize@2x.png new file mode 100644 index 0000000..feb4d78 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/dock-bottom-maximize@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/dock-bottom-minimize@2x.png b/arc-firefox-theme/chrome/browser/devtools/dock-bottom-minimize@2x.png new file mode 100644 index 0000000..a82983c Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/dock-bottom-minimize@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/dropmarker.svg b/arc-firefox-theme/chrome/browser/devtools/dropmarker.svg index 09b65c7..7592790 100644 --- a/arc-firefox-theme/chrome/browser/devtools/dropmarker.svg +++ b/arc-firefox-theme/chrome/browser/devtools/dropmarker.svg @@ -1,3 +1,6 @@ - - - \ No newline at end of file + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg index e8ff440..fa893f4 100644 --- a/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg +++ b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg @@ -1,4 +1,7 @@ - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/filetype-dir-open.svg b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-open.svg index fd8209d..1faebe4 100644 --- a/arc-firefox-theme/chrome/browser/devtools/filetype-dir-open.svg +++ b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-open.svg @@ -1,4 +1,7 @@ - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg b/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg index 809e098..bf1fe2d 100644 --- a/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg +++ b/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg @@ -1,3 +1,6 @@ - - + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg b/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg index 95be627..01d3625 100644 --- a/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg +++ b/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg @@ -1,7 +1,8 @@ - - - - - - + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/filter-swatch.svg b/arc-firefox-theme/chrome/browser/devtools/filter-swatch.svg index 37dcab4..1f63b4f 100644 --- a/arc-firefox-theme/chrome/browser/devtools/filter-swatch.svg +++ b/arc-firefox-theme/chrome/browser/devtools/filter-swatch.svg @@ -2,16 +2,11 @@ - - - - - - - - - - - - + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/filters.svg b/arc-firefox-theme/chrome/browser/devtools/filters.svg index 916028b..1f51d32 100644 --- a/arc-firefox-theme/chrome/browser/devtools/filters.svg +++ b/arc-firefox-theme/chrome/browser/devtools/filters.svg @@ -1,3 +1,7 @@ + + diff --git a/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css index ff70d64..934a38e 100644 --- a/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css +++ b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css @@ -9,8 +9,10 @@ scrollbar { padding: 2px; } +/* Scrollbar code will reset the margin to the correct side depending on + where layout actually puts the scrollbar */ scrollbar[orient="vertical"] { - -moz-margin-start: -10px; + margin-left: -10px; min-width: 10px; max-width: 10px; } diff --git a/arc-firefox-theme/chrome/browser/devtools/font-inspector.css b/arc-firefox-theme/chrome/browser/devtools/font-inspector.css index 30424df..2c4a365 100644 --- a/arc-firefox-theme/chrome/browser/devtools/font-inspector.css +++ b/arc-firefox-theme/chrome/browser/devtools/font-inspector.css @@ -3,6 +3,9 @@ } body { + display: flex; + flex-direction: column; + height: 100%; margin: 0; padding-bottom: 20px; } diff --git a/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-ltr.svg b/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-ltr.svg index 7bd7028..c2accab 100644 --- a/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-ltr.svg +++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-ltr.svg @@ -1,4 +1,7 @@ - - - + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-rtl.svg b/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-rtl.svg index 9315d9e..18d3702 100644 --- a/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-rtl.svg +++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-rtl.svg @@ -1,4 +1,7 @@ - - - - \ No newline at end of file + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/itemArrow-ltr.svg b/arc-firefox-theme/chrome/browser/devtools/itemArrow-ltr.svg index 93913c9..bca667a 100644 --- a/arc-firefox-theme/chrome/browser/devtools/itemArrow-ltr.svg +++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-ltr.svg @@ -1,4 +1,7 @@ - - - + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/itemArrow-rtl.svg b/arc-firefox-theme/chrome/browser/devtools/itemArrow-rtl.svg index e580b88..e83fa63 100755 --- a/arc-firefox-theme/chrome/browser/devtools/itemArrow-rtl.svg +++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-rtl.svg @@ -1,4 +1,7 @@ - - - + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/layoutview.css b/arc-firefox-theme/chrome/browser/devtools/layoutview.css index 8027a4c..642e89c 100644 --- a/arc-firefox-theme/chrome/browser/devtools/layoutview.css +++ b/arc-firefox-theme/chrome/browser/devtools/layoutview.css @@ -1,16 +1,67 @@ /* 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/. */ + * file, You can obtain one at http://mozilla.org/MPL/2.0/ */ .theme-sidebar { box-sizing: border-box; } +body { + /* The view will grow bigger as the window gets resized, until 400px */ + max-width: 400px; + margin: 0px auto; + padding: 0; + /* "Contain" the absolutely positioned #main element */ + position: relative; +} + +/* Header: contains the position and size of the element */ + +#header { + box-sizing: border-box; + width: 100%; + padding: 4px 14px; + display: -moz-box; + vertical-align: top; +} + +#header:-moz-dir(rtl) { + -moz-box-direction: reverse; +} + +#header > span { + display: -moz-box; +} + +#element-size { + -moz-box-flex: 1; +} + +#element-size:-moz-dir(rtl) { + -moz-box-pack: end; +} + +@media (max-height: 228px) { + #header { + padding-top: 0; + padding-bottom: 0; + margin-top: 10px; + margin-bottom: 8px; + } +} + +/* Main: contains the box-model regions */ + #main { + position: absolute; + box-sizing: border-box; + /* The regions are semi-transparent, so the white background is partly + visible */ background-color: white; - border-color: hsla(210,100%,85%,0.7); - border-style: dotted; color: var(--theme-selection-color); + /* Make sure there is some space between the window's edges and the regions */ + margin: 0 14px 10px 14px; + width: calc(100% - 2 * 14px); } .margin, @@ -18,43 +69,271 @@ color: var(--theme-highlight-blue); } +/* Regions are 3 nested elements with wide borders and outlines */ + #content { - background-color: #87ceeb; - border-color: hsl(210,100%,85%); - border-style: dotted; + height: 25px; } -#padding, -#margins { +#margins, +#borders, +#padding { border-color: hsla(210,100%,85%,0.2); + border-width: 25px; + border-style: solid; outline: dotted 1px hsl(210,100%,85%); } -#padding { - background-color: #6a5acd; +#margins { + /* This opacity applies to all of the regions, since they are nested */ + opacity: .8; } -#borders { - background-color: #444444; - border-style: dotted; - border-color: hsl(210,100%,85%); +/* Respond to window size change by changing the size of the regions */ + +@media (max-height: 228px) { + #content { + height: 18px; + } + + #margins, + #borders, + #padding { + border-width: 18px; + } } +/* Regions colors */ + #margins { - background-color: #edff64; - /* This opacity applies to all of the regions, since they are nested. */ - opacity: .8; + border-color: #edff64; +} + +#borders { + border-color: #444444; +} + +#padding { + border-color: #6a5acd; +} + +#content { + background-color: #87ceeb; +} + +/* Editable region sizes are contained in absolutely positioned

*/ + +#main > p { + position: absolute; + pointer-events: none; } +#main > p { + margin: 0; + text-align: center; +} + +#main > p > span { + vertical-align: middle; + pointer-events: auto; +} + +/* Coordinates for the region sizes */ + +.top, +.bottom { + width: calc(100% - 2px); + text-align: center; +} + +.padding.top { + top: 55px; +} + +.padding.bottom { + bottom: 57px; +} + +.border.top { + top: 30px; +} + +.border.bottom { + bottom: 31px; +} + +.margin.top { + top: 5px; +} + +.margin.bottom { + bottom: 6px; +} + +.size, +.margin.left, +.margin.right, +.border.left, +.border.right, +.padding.left, +.padding.right { + top: 22px; + line-height: 132px; +} + +.size { + width: calc(100% - 2px); +} + +.margin.right, +.margin.left, +.border.left, +.border.right, +.padding.right, +.padding.left { + width: 25px; +} + +.padding.left { + left: 52px; +} + +.padding.right { + right: 51px; +} + +.border.left { + left: 26px; +} + +.border.right { + right: 26px; +} + +.margin.right { + right: 0; +} + +.margin.left { + left: 0; +} + +.rotate.left:not(.editing) { + transform: rotate(-90deg); +} + +.rotate.right:not(.editing) { + transform: rotate(90deg); +} + +/* Coordinates should be different when the window is small, because we make + the regions smaller then */ + +@media (max-height: 228px) { + .padding.top { + top: 37px; + } + + .padding.bottom { + bottom: 38px; + } + + .border.top { + top: 19px; + } + + .border.bottom { + bottom: 20px; + } + + .margin.top { + top: 1px; + } + + .margin.bottom { + bottom: 2px; + } + + .size, + .margin.left, + .margin.right, + .border.left, + .border.right, + .padding.left, + .padding.right { + line-height: 80px; + } + + .margin.right, + .margin.left, + .border.left, + .border.right, + .padding.right, + .padding.left { + width: 21px; + } + + .padding.left { + left: 35px; + } + + .padding.right { + right: 35px; + } + + .border.left { + left: 16px; + } + + .border.right { + right: 17px; + } +} + +/* Legend, displayed inside regions */ + +.legend { + position: absolute; + margin: 5px 6px; + z-index: 1; +} + +.legend[data-box="margin"] { + color: var(--theme-highlight-blue); +} + +@media (max-height: 228px) { + .legend { + margin: 2px 6px; + } +} + +/* Editable fields */ + .editable { border: 1px dashed transparent; + -moz-user-select: text; } .editable:hover { - border-bottom-color: hsl(0,0%,50%); + border-bottom-color: hsl(0, 0%, 50%); } .styleinspector-propertyeditor { - border: 1px solid #CCC; + border: 1px solid #ccc; padding: 0; } + +/* Make sure the content size doesn't appear as editable like the other sizes */ + +.size > span { + cursor: default; +} + +/* Hide all values when the view is inactive */ + +body.inactive > #header > #element-position, +body.inactive > #header > #element-size, +body.inactive > #main > p { + visibility: hidden; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/light-theme.css b/arc-firefox-theme/chrome/browser/devtools/light-theme.css index ac6a511..ea8b1fe 100644 --- a/arc-firefox-theme/chrome/browser/devtools/light-theme.css +++ b/arc-firefox-theme/chrome/browser/devtools/light-theme.css @@ -667,6 +667,7 @@ div.CodeMirror span.eval-text { .devtools-button { border: 0 solid var(--theme-splitter-color); background: var(--theme-toolbar-background); + color: var(--theme-body-color); margin: 0; padding: 0; min-width: 32px; @@ -717,6 +718,11 @@ div.CodeMirror span.eval-text { background-repeat: no-repeat; } +.devtools-button[disabled]::before, +.devtools-button:disabled::before { + opacity: 0.5; +} + @media (min-resolution: 1.25dppx) { .devtools-button::before { background-size: 32px; @@ -765,8 +771,8 @@ div.CodeMirror span.eval-text { /* Searchbox is a div container element for a search input element */ .devtools-searchbox { - display: -moz-box; - -moz-box-flex: 1; + display: flex; + flex: 1; position: relative; } @@ -1054,6 +1060,20 @@ div.CodeMirror span.eval-text { background-image: url("chrome://browser/skin/devtools/undock@2x.png"); } +#toolbox-dock-bottom-minimize { + /* Bug 1177463 - The minimize button is currently hidden until we agree on + the UI for it, and until bug 1173849 is fixed too. */ + display: none; +} + +#toolbox-dock-bottom-minimize > image { + background-image: url("chrome://browser/skin/devtools/dock-bottom-minimize@2x.png"); +} + +#toolbox-dock-bottom-minimize.minimized > image { + background-image: url("chrome://browser/skin/devtools/dock-bottom-maximize@2x.png"); +} + #toolbox-dock-window, #toolbox-dock-bottom, #toolbox-dock-side { diff --git a/arc-firefox-theme/chrome/browser/devtools/netmonitor.css b/arc-firefox-theme/chrome/browser/devtools/netmonitor.css index 96ba494..92f2efc 100644 --- a/arc-firefox-theme/chrome/browser/devtools/netmonitor.css +++ b/arc-firefox-theme/chrome/browser/devtools/netmonitor.css @@ -7,6 +7,15 @@ * 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/. */ +:root.theme-dark { + --table-splitter-color: rgba(255,255,255,0.15); + --table-zebra-background: rgba(255,255,255,0.05); +} +:root.theme-light { + --table-splitter-color: rgba(0,0,0,0.15); + --table-zebra-background: rgba(0,0,0,0.05); +} + #requests-menu-empty-notice { margin: 0; padding: 12px; @@ -33,7 +42,6 @@ margin: 0; } - /* Network requests table */ #requests-menu-toolbar { @@ -49,26 +57,9 @@ padding: 3px; } -.theme-dark .requests-menu-header:not(:last-child), -.theme-dark .requests-menu-subitem:not(:last-child) { - -moz-border-end: 1px solid rgba(0,0,0,0.2); - box-shadow: 1px 0 0 rgba(128,128,128,0.15); -} - -.theme-dark .requests-menu-header:not(:last-child):-moz-locale-dir(rtl), -.theme-dark .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) { - box-shadow: -1px 0 0 rgba(128,128,128,0.15); -} - -.theme-light .requests-menu-header:not(:last-child), -.theme-light .requests-menu-subitem:not(:last-child) { - -moz-border-end: 1px solid rgba(128,128,128,0.25); - box-shadow: 1px 0 0 transparent; -} - -.theme-light .requests-menu-header:not(:last-child):-moz-locale-dir(rtl), -.theme-light .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) { - box-shadow: -1px 0 0 transparent; +.requests-menu-header:not(:last-child), +.requests-menu-subitem:not(:last-child) { + -moz-border-end: 1px solid var(--table-splitter-color); } .requests-menu-header-button { @@ -138,12 +129,8 @@ -moz-margin-end: 4px; } -.theme-dark .requests-menu-icon { - outline: 1px solid rgba(0,0,0,0.2); -} - -.theme-light .requests-menu-icon { - outline: 1px solid rgba(128,128,128,0.25); +.requests-menu-icon { + outline: 1px solid var(--table-splitter-color); } .requests-menu-file { @@ -164,10 +151,6 @@ -moz-image-region: rect(0px, 32px, 16px, 16px); } -.requests-security-state-icon:active { - -moz-image-region: rect(0px, 48px, 16px, 32px); -} - .security-state-insecure { list-style-image: url(chrome://browser/skin/identity-icons-generic.png); } @@ -219,80 +202,42 @@ label.requests-menu-status-code { -moz-margin-end: -3em !important; } -.theme-dark box.requests-menu-status:not([code]) { - background-color: rgba(95, 115, 135, 1); /* dark grey */ +box.requests-menu-status:not([code]) { + background-color: var(--theme-content-color2); } -.theme-light box.requests-menu-status:not([code]) { - background-color: rgba(143, 161, 178, 1); /* grey */ -} - -.theme-dark box.requests-menu-status[code="cached"] { - border: 2px solid rgba(95, 115, 135, 1); /* dark grey */ +box.requests-menu-status[code="cached"] { + border: 2px solid var(--theme-content-color2); background-color: transparent; } -.theme-light box.requests-menu-status[code="cached"] { - border: 2px solid rgba(143, 161, 178, 1); /* grey */ - background-color: transparent; -} - -.theme-dark box.requests-menu-status[code^="1"] { - background-color: rgba(70, 175, 227, 1); /* light blue */ -} - -.theme-light box.requests-menu-status[code^="1"] { - background-color: rgba(0, 136, 204, 1); /* light blue */ +box.requests-menu-status[code^="1"] { + background-color: var(---theme-highlight-blue); } -.theme-dark box.requests-menu-status[code^="2"] { - background-color: rgba(112, 191, 83, 1); /* green */ -} - -.theme-light box.requests-menu-status[code^="2"] { - background-color: rgba(44, 187, 15, 1); /* green */ +box.requests-menu-status[code^="2"] { + background-color: var(--theme-highlight-green); } /* 3xx are triangles */ -.theme-dark box.requests-menu-status[code^="3"] { - background-color: transparent; - width: 0; - height: 0; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 10px solid rgba(217, 155, 40, 1); /* light orange */ - border-radius: 0; -} - -.theme-light box.requests-menu-status[code^="3"] { +box.requests-menu-status[code^="3"] { background-color: transparent; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; - border-bottom: 10px solid rgba(217, 126, 0, 1); /* light orange */ + border-bottom: 10px solid var(--theme-highlight-lightorange); border-radius: 0; } /* 4xx and 5xx are squares - error codes */ -.theme-dark box.requests-menu-status[code^="4"] { - background-color: rgba(235, 83, 104, 1); /* red */ - border-radius: 0; /* squares */ -} - -.theme-light box.requests-menu-status[code^="4"] { - background-color: rgba(237, 38, 85, 1); /* red */ +box.requests-menu-status[code^="4"] { + background-color: var(--theme-highlight-red); border-radius: 0; /* squares */ } -.theme-dark box.requests-menu-status[code^="5"] { - background-color: rgba(223, 128, 255, 1); /* pink? */ - border-radius: 0; - transform: rotate(45deg); -} - -.theme-light box.requests-menu-status[code^="5"] { - background-color: rgba(184, 46, 229, 1); /* pink! */ +box.requests-menu-status[code^="5"] { + background-color: var(--theme-highlight-pink); border-radius: 0; transform: rotate(45deg); } @@ -433,17 +378,26 @@ label.requests-menu-status-code { } /* SideMenuWidget */ +#network-table .side-menu-widget-empty-text, +#network-table .side-menu-widget-container { + background-color: var(--theme-body-background); +} + +#network-table .side-menu-widget-item { + border-top-color: transparent; + border-bottom-color: transparent; +} .side-menu-widget-item-contents { padding: 0px; } -.theme-dark .side-menu-widget-item:not(.selected)[odd] { - background: rgba(255,255,255,0.05); +.side-menu-widget-item:not(.selected)[odd] { + background-color: var(--table-zebra-background); } -.theme-light .side-menu-widget-item:not(.selected)[odd] { - background: rgba(128,128,128,0.05); +.side-menu-widget-item:not(.selected):hover { + background-color: var(--theme-selection-background-semitransparent); } /* Network request details */ @@ -486,11 +440,18 @@ label.requests-menu-status-code { /* Network request details tabpanels */ +.tabpanel-content { + background-color: var(--theme-sidebar-background); +} + .theme-dark .tabpanel-content { - background-color: var(--theme-toolbar-background); color: var(--theme-selection-color); } +#headers-tabpanel { + background-color: var(--theme-toolbar-background); +} + /* Summary tabpanel */ .tabpanel-summary-container { @@ -628,16 +589,9 @@ label.requests-menu-status-code { /* Footer */ -.theme-dark #requests-menu-footer { - border-top: 1px solid rgba(0,0,0,0.2); - box-shadow: 0 1px 0 rgba(128,128,128,0.15) inset; - background-color: var(--theme-toolbar-background); -} - -.theme-light #requests-menu-footer { - border-top: 1px solid rgba(128,128,128,0.25); - box-shadow: 0 1px 0 transparent inset; +#requests-menu-footer { background-color: var(--theme-toolbar-background); + border-top: 1px solid var(--table-splitter-color); } .requests-menu-footer-button, @@ -664,14 +618,12 @@ label.requests-menu-status-code { .theme-dark .requests-menu-footer-spacer:not(:first-child), .theme-dark .requests-menu-footer-button:not(:first-child) { - -moz-border-start: 1px solid rgba(128,128,128,0.15); - box-shadow: -1px 0 0 rgba(0,0,0,0.2); + -moz-border-start: 1px solid var(--table-splitter-color); } .theme-light .requests-menu-footer-spacer:not(:first-child), .theme-light .requests-menu-footer-button:not(:first-child) { - -moz-border-start: 1px solid transparent; - box-shadow: -1px 0 0 rgba(128,128,128,0.25); + -moz-border-start: 1px solid var(--table-splitter-color); } .requests-menu-footer-button { @@ -683,22 +635,13 @@ label.requests-menu-status-code { background: rgba(0,0,0,0.10); } -.theme-dark .requests-menu-footer-button:hover:active { - background-color: rgba(29,79,115,0.4); /* Select Highlight Blue at 40% opacity */ -} - -.theme-light .requests-menu-footer-button:hover:active { - background-color: rgba(76,158,217,0.4); /* Select Highlight Blue at 40% opacity */ +.requests-menu-footer-button:hover:active { + background-color: var(--theme-selection-background-semitransparent); } -.theme-dark .requests-menu-footer-button:not(:active)[checked] { - background-color: rgba(29,79,115,1); /* Select Highlight Blue */ - color: rgba(245,247,250,1); /* Light foreground text */ -} - -.theme-light .requests-menu-footer-button:not(:active)[checked] { - background-color: rgba(76,158,217,1); /* Select Highlight Blue */ - color: rgba(245,247,250,1); /* Light foreground text */ +.requests-menu-footer-button:not(:active)[checked] { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); } .requests-menu-footer-label { @@ -778,7 +721,7 @@ label.requests-menu-status-code { } #network-statistics-charts { - background-color: var(--theme-toolbar-background); + background-color: var(--theme-sidebar-background); } #network-statistics-charts .pie-chart-container { diff --git a/arc-firefox-theme/chrome/browser/devtools/performance-icons.svg b/arc-firefox-theme/chrome/browser/devtools/performance-icons.svg index 3004e04..a115938 100644 --- a/arc-firefox-theme/chrome/browser/devtools/performance-icons.svg +++ b/arc-firefox-theme/chrome/browser/devtools/performance-icons.svg @@ -1,42 +1,45 @@ + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/performance.css b/arc-firefox-theme/chrome/browser/devtools/performance.css index 50c375c..1187fd8 100644 --- a/arc-firefox-theme/chrome/browser/devtools/performance.css +++ b/arc-firefox-theme/chrome/browser/devtools/performance.css @@ -10,6 +10,7 @@ /* CSS Variables specific to this panel that aren't defined by the themes */ .theme-dark { --cell-border-color: rgba(255,255,255,0.15); + --cell-border-color-light: rgba(255,255,255,0.1); --focus-cell-border-color: rgba(255,255,255,0.5); --row-alt-background-color: rgba(29,79,115,0.15); --row-hover-background-color: rgba(29,79,115,0.25); @@ -17,6 +18,7 @@ .theme-light { --cell-border-color: rgba(0,0,0,0.15); + --cell-border-color-light: rgba(0,0,0,0.1); --focus-cell-border-color: rgba(0,0,0,0.3); --row-alt-background-color: rgba(76,158,217,0.1); --row-hover-background-color: rgba(76,158,217,0.2); @@ -24,19 +26,10 @@ /* Toolbar */ -#performance-toolbar > tabs, -#performance-toolbar { - -moz-border-end-color: var(--theme-splitter-color); -} - #performance-toolbar-control-other { -moz-padding-end: 5px; } -#performance-toolbar-controls-detail-views > toolbarbutton { - min-width: 0; -} - #performance-toolbar-controls-detail-views .toolbarbutton-text { -moz-padding-start: 4px; -moz-padding-end: 8px; @@ -64,128 +57,142 @@ border-radius: 1px; } -/* Recording Notice */ +/* Details panel buttons */ -#performance-view .notice-container { - font-size: 120%; - background-color: var(--theme-toolbar-background); - color: var(--theme-body-color); - padding-bottom: 20vh; +#select-waterfall-view { + list-style-image: url(performance-icons.svg#details-waterfall); } -#performance-view .notice-container button { - min-width: 30px; - min-height: 28px; - margin: 0; +#select-js-calltree-view, +#select-memory-calltree-view { + list-style-image: url(performance-icons.svg#details-call-tree); } -#performance-view .notice-container vbox { - text-align: center; +#select-js-flamegraph-view, +#select-memory-flamegraph-view { + list-style-image: url(performance-icons.svg#details-flamegraph); } -.console-profile-command { - font-family: monospace; - margin: 3px 2px; +#select-optimizations-view { + list-style-image: url(profiler-stopwatch.svg); } -#performance-view .realtime-message { - opacity: 0.5; - display: block; +/* Recording buttons */ + +#main-record-button { + list-style-image: url(profiler-stopwatch.svg); } -#performance-view toolbarbutton.record-button { - padding: 5px; +#main-record-button[checked] { + list-style-image: url(profiler-stopwatch-checked.svg); } -#performance-view toolbarbutton.record-button[checked], -#performance-view toolbarbutton.record-button[checked] { - color: var(--theme-selection-color); - background: var(--theme-selection-background); +#main-record-button .button-icon { + margin: 0; } -#performance-view .realtime-disabled-message, -#performance-view .realtime-disabled-on-e10s-message { +#main-record-button .button-text { display: none; - /* This label does not want to wrap naturally (based on some combination of - it's parents and flex). Quick and dirty way to force it to wrap -> don't - let it get bigger than half the screen size */ - max-width: 60vw; } -#performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message { - display: block; - opacity: 0.5; +.notice-container .record-button { + padding: 5px !important; +} +.notice-container .record-button[checked], +.notice-container .record-button[checked] { + color: var(--theme-selection-color) !important; + background: var(--theme-selection-background) !important; } -#performance-view[e10s="unsupported"] .realtime-disabled-message { - display: block; + +.record-button[locked] { + pointer-events: none; opacity: 0.5; } -#details-pane-container .buffer-status-message, -#details-pane-container .buffer-status-message-full { - display: none; -} +/* Sidebar & recording items */ -#details-pane-container[buffer-status="in-progress"] .buffer-status-message { - display: block; - opacity: 0.5; +.recording-item { + padding: 4px; } -#details-pane-container[buffer-status="full"] .buffer-status-message { - display: block; - color: var(--theme-highlight-red); - font-weight: bold; - opacity: 1; +.recording-item-title { + font-size: 110%; } -#details-pane-container[buffer-status="full"] .buffer-status-message-full { - display: block; +.recording-item-footer { + padding-top: 4px; + font-size: 90%; } -/* Overview Panel */ +.recording-item-save { + text-decoration: underline; + cursor: pointer; +} -#main-record-button { - list-style-image: url(profiler-stopwatch.svg); +.recording-item-duration, +.recording-item-save { + color: var(--theme-body-color-alt); } -#main-record-button[checked] { - list-style-image: url(profiler-stopwatch-checked.svg); +#recordings-list .selected label { + /* Text inside a selected item should not be custom colored. */ + color: inherit !important; } -#main-record-button[locked] { - pointer-events: none; +/* Recording notices */ + +.notice-container { + font-size: 120%; + background-color: var(--theme-toolbar-background); + color: var(--theme-body-color); + padding-bottom: 20vh; } -#main-record-button .button-icon { - margin: 0; +.console-profile-command { + font-family: monospace; + margin: 3px 2px; } -#main-record-button .button-text { +.realtime-disabled-message, +.realtime-disabled-on-e10s-message { display: none; } -/* Details Panel */ +#performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message { + display: initial; + opacity: 0.5; -#select-waterfall-view { - list-style-image: url(performance-icons.svg#details-waterfall); +} +#performance-view[e10s="unsupported"] .realtime-disabled-message { + display: initial; + opacity: 0.5; } -#select-js-calltree-view, -#select-memory-calltree-view { - list-style-image: url(performance-icons.svg#details-call-tree); +.buffer-status-message, +.buffer-status-message-full { + display: none; } -#select-js-flamegraph-view, -#select-memory-flamegraph-view { - list-style-image: url(performance-icons.svg#details-flamegraph); +#details-pane-container[buffer-status="in-progress"] .buffer-status-message { + display: initial; + opacity: 0.5; +} + +#details-pane-container[buffer-status="full"] .buffer-status-message { + display: initial; + color: var(--theme-highlight-red); + font-weight: bold; + opacity: 1; +} + +#details-pane-container[buffer-status="full"] .buffer-status-message-full { + display: initial; } /* Profile call tree */ .call-tree-cells-container { - /* Hack: force hardware acceleration */ - transform: translateZ(1px); overflow: auto; } @@ -257,7 +264,7 @@ background-color: var(--theme-tab-toolbar-background); } -.call-tree-item:last-child:not(:focus) { +.call-tree-item:last-child { border-bottom: 1px solid var(--cell-border-color); } @@ -273,7 +280,7 @@ background-color: var(--theme-selection-background); } -.call-tree-item:focus label { +.call-tree-item:focus description { color: var(--theme-selection-color) !important; } @@ -320,119 +327,131 @@ color: var(--theme-content-color2); } -.call-tree-zoom { - -moz-appearance: none; - background-color: transparent; - background-position: center; - background-repeat: no-repeat; - background-size: 11px; - min-width: 11px; - -moz-margin-start: 8px !important; - cursor: zoom-in; - opacity: 0; +.call-tree-category { + transform: scale(0.75); + transform-origin: center right; } -.theme-dark .call-tree-zoom { - background-image: url(magnifying-glass.png); -} +/** + * Waterfall ticks header + */ -.theme-light .call-tree-zoom { - background-image: url(magnifying-glass-light.png); +.waterfall-header-ticks { + overflow: hidden; } -@media (min-resolution: 1.25dppx) { - .theme-dark .call-tree-zoom { - background-image: url(magnifying-glass@2x.png); - } - - .theme-light .call-tree-zoom { - background-image: url(magnifying-glass-light@2x.png); - } +.waterfall-header-name { + padding: 2px 4px; + font-size: 90%; } -.call-tree-item:hover .call-tree-zoom { - transition: opacity 0.3s ease-in; - opacity: 1; +.waterfall-header-tick { + width: 100px; + font-size: 9px; + transform-origin: left center; + color: var(--theme-body-color); } -.call-tree-item:hover .call-tree-zoom:hover { - opacity: 0; +.waterfall-header-tick:not(:first-child) { + -moz-margin-start: -100px !important; /* Don't affect layout. */ } -.call-tree-category { - transform: scale(0.75); - transform-origin: center right; +.waterfall-background-ticks { + /* Background created on a in js. */ + /* @see browser/devtools/timeline/widgets/waterfall.js */ + background-image: -moz-element(#waterfall-background); + background-repeat: repeat-y; + background-position: -1px center; } /** - * Details Waterfall Styles + * Markers waterfall breakdown */ -.waterfall-list-contents { - /* Hack: force hardware acceleration */ - transform: translateZ(1px); +#waterfall-breakdown { overflow-x: hidden; overflow-y: auto; } -.waterfall-header-contents { - overflow-x: hidden; +.theme-light .waterfall-tree-item:not([level="0"]) { + background-image: repeating-linear-gradient( + -45deg, + transparent 0px, + transparent 2px, + rgba(0,0,0,0.025) 2px, + rgba(0,0,0,0.025) 4px + ); } -.waterfall-background-ticks { - /* Background created on a in js. */ - /* @see browser/devtools/timeline/widgets/waterfall.js */ - background-image: -moz-element(#waterfall-background); - background-repeat: repeat-y; - background-position: -1px center; +.theme-dark .waterfall-tree-item:not([level="0"]) { + background-image: repeating-linear-gradient( + -45deg, + transparent 0px, + transparent 2px, + rgba(255,255,255,0.05) 2px, + rgba(255,255,255,0.05) 4px + ); } -.waterfall-marker-container[is-spacer] { - pointer-events: none; +.theme-light .waterfall-tree-item[expandable] .waterfall-marker-bullet, +.theme-light .waterfall-tree-item[expandable] .waterfall-marker-bar { + background-image: repeating-linear-gradient( + -45deg, + transparent 0px, + transparent 5px, + rgba(255,255,255,0.35) 5px, + rgba(255,255,255,0.35) 10px + ); } -.theme-dark .waterfall-marker-container:not([is-spacer]):nth-child(2n) { - background-color: rgba(255,255,255,0.03); +.theme-dark .waterfall-tree-item[expandable] .waterfall-marker-bullet, +.theme-dark .waterfall-tree-item[expandable] .waterfall-marker-bar { + background-image: repeating-linear-gradient( + -45deg, + transparent 0px, + transparent 5px, + rgba(0,0,0,0.35) 5px, + rgba(0,0,0,0.35) 10px + ); } -.theme-light .waterfall-marker-container:not([is-spacer]):nth-child(2n) { - background-color: rgba(128,128,128,0.03); +.waterfall-tree-item[expanded], +.waterfall-tree-item:not([level="0"]) + .waterfall-tree-item[level="0"] { + box-shadow: 0 -1px var(--cell-border-color-light); } -.theme-dark .waterfall-marker-container:hover { - background-color: rgba(255,255,255,0.1) !important; +.waterfall-tree-item:nth-child(2n) > .waterfall-marker { + background-color: var(--row-alt-background-color); } -.theme-light .waterfall-marker-container:hover { - background-color: rgba(128,128,128,0.1) !important; +.waterfall-tree-item:hover { + background-color: var(--row-hover-background-color); } -.waterfall-marker-item { - overflow: hidden; +.waterfall-tree-item:last-child { + border-bottom: 1px solid var(--cell-border-color); } -.waterfall-sidebar { - -moz-border-end: 1px solid var(--theme-splitter-color); +.waterfall-tree-item:focus { + background-color: var(--theme-selection-background); } -.waterfall-marker-container:hover > .waterfall-sidebar { - background-color: transparent; +.waterfall-tree-item:focus description { + color: var(--theme-selection-color) !important; } -.waterfall-header-name { - padding: 2px 4px; - font-size: 90%; -} +/** + * Marker left sidebar + */ -.waterfall-header-tick { - width: 100px; - font-size: 9px; - transform-origin: left center; - color: var(--theme-body-color); +.waterfall-sidebar { + -moz-border-end: 1px solid var(--cell-border-color); } -.waterfall-header-tick:not(:first-child) { - -moz-margin-start: -100px !important; /* Don't affect layout. */ +.waterfall-tree-item > .waterfall-sidebar:hover, +.waterfall-tree-item:hover > .waterfall-sidebar, +.waterfall-tree-item:focus > .waterfall-sidebar { + background: transparent; } .waterfall-marker-bullet { @@ -448,18 +467,30 @@ padding-bottom: 1px !important; } +/** + * Marker timebar + */ + +.waterfall-marker { + overflow: hidden; +} + .waterfall-marker-bar { height: 9px; transform-origin: left center; border-radius: 1px; } -.waterfall-marker-container.selected > .waterfall-sidebar, -.waterfall-marker-container.selected > .waterfall-marker-item { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); +.waterfall-marker > .theme-twisty { + /* Don't affect layout. */ + width: 14px; + -moz-margin-end: -14px; } +/** + * Marker details view + */ + #waterfall-details { -moz-padding-start: 8px; -moz-padding-end: 8px; @@ -468,12 +499,33 @@ min-width: 50px; } +#waterfall-details > * { + padding-top: 3px; +} + .marker-details-bullet { width: 8px; height: 8px; border-radius: 1px; } +.marker-details-labelname { + -moz-padding-end: 4px; +} + +.marker-details-type { + font-size: 1.2em; + font-weight: bold; +} + +.marker-details-duration { + font-weight: bold; +} + +/** + * Marker colors + */ + menuitem.marker-color-graphs-purple:before, .marker-color-graphs-purple { background-color: var(--theme-graphs-purple); @@ -499,53 +551,6 @@ menuitem.marker-color-graphs-blue:before, background-color: var(--theme-graphs-blue); } -#waterfall-details > * { - padding-top: 3px; -} - -.marker-details-labelname { - -moz-padding-end: 4px; -} - -.marker-details-type { - font-size: 1.2em; - font-weight: bold; -} - -.marker-details-duration { - font-weight: bold; -} - -/* Recording items */ - -.recording-item { - padding: 4px; -} - -.recording-item-title { - font-size: 110%; -} - -.recording-item-footer { - padding-top: 4px; - font-size: 90%; -} - -.recording-item-save { - text-decoration: underline; - cursor: pointer; -} - -.recording-item-duration, -.recording-item-save { - color: var(--theme-body-color-alt); -} - -#recordings-list .selected label { - /* Text inside a selected item should not be custom colored. */ - color: inherit !important; -} - /** * JIT View */ @@ -640,33 +645,59 @@ menuitem.marker-color-graphs-blue:before, cursor: pointer; } -#jit-optimizations-view .opt-icon::before { +.opt-icon::before { content: ""; - background-image: url(chrome://browser/skin/devtools/webconsole.png); + background-image: url(chrome://browser/skin/devtools/webconsole.svg); background-repeat: no-repeat; - background-size: 48px 40px; - margin: 5px 6px 0 0; - width: 8px; - height: 8px; - max-height: 8px; + background-size: 72px 60px; + /* show grey "i" bubble by default */ + background-position: -36px -36px; + width: 12px; + height: 12px; display: inline-block; + + max-height: 12px; +} + +#jit-optimizations-view .opt-icon::before { + margin: 5px 6px 0 0; +} +description.opt-icon { + margin: 0px 0px 0px 0px; +} +description.opt-icon::before { + margin: 1px 4px 0px 0px; +} +.theme-light .opt-icon::before { + background-image: url(chrome://browser/skin/devtools/webconsole.svg#light-icons); +} +.opt-icon[severity=warning]::before { + background-position: -24px -24px; +} +.opt-icon[type=linkable]::before { + cursor: pointer; } -#jit-optimizations-view .opt-icon[severity=warning]::before { - background-position: -16px -16px; +ul.frames-list { + list-style-type: none; + padding: 0px; + margin: 0px; } -@media (min-resolution: 1.25dppx) { - #jit-optimizations-view .opt-icon::before { - background-image: url(chrome://browser/skin/devtools/webconsole@2x.png); - } +ul.frames-list li { + cursor: pointer; +} + +ul.frames-list li.selected { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); } /** * Configurable Options * - * Elements can be tagged with a class and visibility is controlled via a preference being - * applied or removed. + * Elements can be tagged with a class and visibility is controlled via a + * preference being applied or removed. */ /** @@ -674,21 +705,21 @@ menuitem.marker-color-graphs-blue:before, */ menuitem.experimental-option::before { content: ""; - background-image: url(chrome://browser/skin/devtools/webconsole.png); + background-image: url(chrome://browser/skin/devtools/webconsole.svg); background-repeat: no-repeat; - background-size: 48px 40px; - margin: 2px 5px 0 0; - width: 8px; - height: 8px; - max-height: 8px; + background-size: 72px 60px; + width: 12px; + height: 12px; display: inline-block; - background-position: -16px -16px; + + background-position: -24px -24px; + margin: 2px 5px 0 0; + max-height: 12px; } -@media (min-resolution: 1.25dppx) { - menuitem.experimental-option::before { - background-image: url(chrome://browser/skin/devtools/webconsole@2x.png); - } +.theme-light menuitem.experimental-option::before { + background-image: url(chrome://browser/skin/devtools/webconsole.svg#light-icons); } + #performance-options-menupopup:not(.experimental-enabled) .experimental-option, #performance-options-menupopup:not(.experimental-enabled) .experimental-option::before { display: none; diff --git a/arc-firefox-theme/chrome/browser/devtools/power.svg b/arc-firefox-theme/chrome/browser/devtools/power.svg index f675e30..d3a3284 100644 --- a/arc-firefox-theme/chrome/browser/devtools/power.svg +++ b/arc-firefox-theme/chrome/browser/devtools/power.svg @@ -10,5 +10,5 @@ The above copyright notice and this permission notice shall be included in all c The software is provided “as is”, without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software. --> - + diff --git a/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch-checked.svg b/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch-checked.svg index f682354..abe68dc 100644 --- a/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch-checked.svg +++ b/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch-checked.svg @@ -1,14 +1,17 @@ - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch.svg b/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch.svg index e9fe8f9..690fc7d 100644 --- a/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch.svg +++ b/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch.svg @@ -1,14 +1,17 @@ - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/profiler.css b/arc-firefox-theme/chrome/browser/devtools/profiler.css deleted file mode 100644 index 8f127cd..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/profiler.css +++ /dev/null @@ -1,400 +0,0 @@ -/* 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/. */ - -/* vim:set ts=2 sw=2 sts=2 et: */ -/* 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/. */ - -/* CSS Variables specific to this panel that aren't defined by the themes */ -.theme-dark { - --cell-border-color: rgba(255,255,255,0.15); - --focus-cell-border-color: rgba(0,0,0,0.3); - --row-alt-background-color: rgba(29,79,115,0.15); - --row-hover-background-color: rgba(29,79,115,0.25); - --tab-hover-background-color: rgba(0,0,0,0.3); -} - -.theme-light { - --cell-border-color: rgba(0,0,0,0.15); - --focus-cell-border-color: rgba(255,255,255,0.5); - --row-alt-background-color: rgba(76,158,217,0.1); - --row-hover-background-color: rgba(76,158,217,0.2); - --tab-hover-background-color: rgba(255,255,255,0.8); -} - -/* Reload and waiting notices */ - -.notice-container { - margin-top: -50vh; - font-size: 120%; - background-color: var(--theme-toolbar-background); - color: var(--theme-body-color-alt); -} - -#empty-notice button, -#recording-notice button { - min-width: 30px; - min-height: 28px; - margin: 0; - list-style-image: url(profiler-stopwatch.svg); -} - -#empty-notice button[checked], -#recording-notice button[checked] { - list-style-image: url(profiler-stopwatch-checked.svg); -} - -#empty-notice button .button-text, -#recording-notice button .button-text { - display: none; -} - -.theme-dark #loading-notice { - font-size: 250%; - color: rgba(255,255,255,0.2); -} - -.theme-light #loading-notice { - font-size: 250%; - color: rgba(0,0,0,0.2); -} - -/* Recordings pane */ - -#recordings-pane > tabs, -#recordings-pane .devtools-toolbar { - -moz-border-end-width: 1px; -} - -#recordings-pane > tabs, -#recordings-pane .devtools-toolbar { - -moz-border-end-color: var(--theme-splitter-color); -} - -#record-button { - list-style-image: url(profiler-stopwatch.svg); -} - -#record-button[checked] { - list-style-image: url(profiler-stopwatch-checked.svg); -} - -#record-button[locked] { - pointer-events: none; -} - -/* Recording items */ - -.recording-item { - padding: 4px; -} - -.recording-item-title { - font-size: 110%; -} - -.recording-item-footer { - padding-top: 4px; - font-size: 90%; -} - -.recording-item-save { - text-decoration: underline; - cursor: pointer; -} - -.recording-item-duration, -.recording-item-save { - color: var(--theme-body-color-alt); -} - -#recordings-list .selected label { - /* Text inside a selected item should not be custom colored. */ - color: inherit !important; -} - -/* Profile pane */ - -#profile-content tabs { - -moz-box-align: stretch; - height: 24px; - font: inherit; -} - -#profile-content tab { - -moz-box-flex: 0; - background-color: transparent; - border: none; - border-radius: 0; - padding: 0; - text-shadow: none; - transition-duration: 0.25s; - transition-timing-function: ease-in-out; - transition-property: opacity, transform; -} - -#profile-content tab { - color: var(--theme-body-color); -} - -#profile-content tab:not([selected]) { - cursor: pointer; -} - -#profile-content tab[covered] { - opacity: 0; - transform: translateY(100%); -} - -#profile-content tab { - -moz-appearance: none; - -moz-border-end: 1px solid var(--theme-splitter-color); -} - -#profile-content tab:hover { - background-color: var(--tab-hover-background-color); -} - -#profile-content tab[selected] { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -#profile-content tabpanel { - -moz-box-orient: vertical; - transform: translateZ(1px); /* Make sure the tabpanel appears above the tab */ -} - -#profile-newtab-button { - -moz-appearance: none; - background-color: transparent; - background-position: 4px 2px; - background-size: 54px 20px; - min-width: 26px; - margin: 0; - border: none; - cursor: pointer; -} - -.theme-dark #profile-newtab-button { - background-color: rgba(112,191,83,0.2); -} - -.theme-light #profile-newtab-button { - background-color: rgba(44,187,15,0.2); -} - -.theme-dark #profile-newtab-button { - background-image: url(newtab-inverted.png); -} - -.theme-light #profile-newtab-button { - background-image: url(newtab.png); -} - -@media (min-resolution: 1.25dppx) { - .theme-dark #profile-newtab-button { - background-image: url(newtab-inverted@2x.png); - } - - .theme-light #profile-newtab-button { - background-image: url(newtab@2x.png); - } -} - -#profile-newtab-button:hover { - background-position: 40px 2px; -} - -#profile-newtab-button:hover:active { - background-position: 22px 2px; -} - -/* Profile call tree */ - -.call-tree-headers-container { - border-top: 1px solid var(--theme-splitter-color); -} - -.call-tree-cells-container { - /* Hack: force hardware acceleration */ - transform: translateZ(1px); - overflow: auto; -} - -.call-tree-cells-container[categories-hidden] .call-tree-category { - display: none; -} - -.call-tree-header[type="duration"], -.call-tree-cell[type="duration"], -.call-tree-header[type="self-duration"], -.call-tree-cell[type="self-duration"] { - width: 9em; -} - -.call-tree-header[type="percentage"], -.call-tree-cell[type="percentage"], -.call-tree-header[type="self-percentage"], -.call-tree-cell[type="self-percentage"] { - width: 6em; -} - -.call-tree-header[type="samples"], -.call-tree-cell[type="samples"] { - width: 5em; -} - -.call-tree-header[type="function"], -.call-tree-cell[type="function"] { - -moz-box-flex: 1; -} - -.call-tree-header, -.call-tree-cell { - -moz-box-align: center; - overflow: hidden; - padding: 1px 4px; - color: var(--theme-body-color); -} - -.call-tree-header:not(:last-child), -.call-tree-cell:not(:last-child) { - -moz-border-end-width: 1px; - -moz-border-end-style: solid; -} - -.call-tree-header, -.call-tree-cell { - -moz-border-end-color: var(--cell-border-color); -} - -.call-tree-header:not(:last-child) { - text-align: center; -} - -.call-tree-cell:not(:last-child) { - text-align: end; -} - -.call-tree-header { - background-color: var(--theme-tab-toolbar-background); -} - -.call-tree-item:last-child:not(:focus) { - border-bottom: 1px solid var(--cell-border-color); -} - -.call-tree-item:nth-child(2n) { - background-color: var(--row-alt-background-color); -} - -.call-tree-item:hover { - background-color: var(--row-hover-background-color); -} - -.call-tree-item:focus { - background-color: var(--theme-selection-background); -} - -.call-tree-item:focus label { - color: var(--theme-selection-color) !important; -} - -.call-tree-item:focus .call-tree-cell { - -moz-border-end-color: var(--focus-cell-border-color); -} - -.call-tree-item:not([origin="content"]) .call-tree-name, -.call-tree-item:not([origin="content"]) .call-tree-url, -.call-tree-item:not([origin="content"]) .call-tree-line, -.call-tree-item:not([origin="content"]) .call-tree-column { - /* Style chrome and non-JS nodes differently. */ - opacity: 0.6; -} - -.call-tree-url { - -moz-margin-start: 4px !important; - cursor: pointer; -} - -.call-tree-url:hover { - text-decoration: underline; -} - -.call-tree-url { - color: var(--theme-highlight-blue); -} - -.call-tree-line { - color: var(--theme-highlight-orange); -} - -.call-tree-column { - color: var(--theme-highlight-orange); - opacity: 0.6; -} - -.call-tree-host { - -moz-margin-start: 8px !important; - font-size: 90%; - color: var(--theme-content-color2); -} - -.call-tree-name[value=""], -.call-tree-url[value=""], -.call-tree-line[value=""], -.call-tree-column[value=""], -.call-tree-host[value=""] { - display: none; -} - -.call-tree-zoom { - -moz-appearance: none; - background-color: transparent; - background-position: center; - background-repeat: no-repeat; - background-size: 11px; - min-width: 11px; - -moz-margin-start: 8px !important; - cursor: zoom-in; - opacity: 0; -} - -.theme-dark .call-tree-zoom { - background-image: url(magnifying-glass.png); -} - -.theme-light .call-tree-zoom { - background-image: url(magnifying-glass-light.png); -} - -@media (min-resolution: 1.25dppx) { - .theme-dark .call-tree-zoom { - background-image: url(magnifying-glass@2x.png); - } - - .theme-light .call-tree-zoom { - background-image: url(magnifying-glass-light@2x.png); - } -} - -.call-tree-item:hover .call-tree-zoom { - transition: opacity 0.3s ease-in; - opacity: 1; -} - -.call-tree-item:hover .call-tree-zoom:hover { - opacity: 0; -} - -.call-tree-category { - transform: scale(0.75); - transform-origin: center right; -} - -#profile-content tab label { - margin-bottom: 4px; -} diff --git a/arc-firefox-theme/chrome/browser/devtools/pseudo-class.svg b/arc-firefox-theme/chrome/browser/devtools/pseudo-class.svg new file mode 100644 index 0000000..830d5fa --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/pseudo-class.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/ruleview.css b/arc-firefox-theme/chrome/browser/devtools/ruleview.css index 8c2e3d1..c38224c 100644 --- a/arc-firefox-theme/chrome/browser/devtools/ruleview.css +++ b/arc-firefox-theme/chrome/browser/devtools/ruleview.css @@ -16,15 +16,15 @@ } .ruleview-rule-source { - -moz-padding-start: 5px; text-align: end; float: right; -moz-user-select: none; + margin-bottom: 2px; } -.ruleview-rule-source, .ruleview-rule-source > label { cursor: pointer; + margin: 0; } .ruleview-rule-source[unselectable], @@ -57,7 +57,11 @@ padding: 2px 4px; } -/* User agent styles are not editable, display them differently */ +/** + * Display rules that don't match the current selected element and uneditable + * user agent styles differently + */ +.ruleview-rule[unmatched=true], .ruleview-rule[uneditable=true] { background: var(--theme-tab-toolbar-background); } @@ -158,9 +162,9 @@ .ruleview-swatch { cursor: pointer; border-radius: 50%; - width: 1em; - height: 1em; - vertical-align: text-top; + width: 0.9em; + height: 0.9em; + vertical-align: middle; -moz-margin-end: 5px; display: inline-block; position: relative; @@ -262,3 +266,39 @@ .ruleview-selectorhighlighter.highlighted { background-position: -16px 0; } + +#ruleview-add-rule-button::before { + background-image: url("chrome://browser/skin/devtools/add.svg"); + background-size: cover; +} + +#pseudo-class-panel-toggle::before { + background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class"); + background-size: cover; +} +#pseudo-class-panel-toggle[checked]::before { + background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class-checked"); + filter: none !important; +} + +/** + * These buttons are using opacity instead of background color to indicate + * the state + */ +#ruleview-add-rule-button, +#pseudo-class-panel-toggle { + opacity: 0.8; +} + +#ruleview-add-rule-button:not([disabled]):hover, +#pseudo-class-panel-toggle:hover, +#pseudo-class-panel-toggle[checked] { + opacity: 1; +} + +#ruleview-add-rule-button, +#pseudo-class-panel-toggle, +#pseudo-class-panel-toggle:hover, +#pseudo-class-panel-toggle[checked]::before { + background-color: transparent !important; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/search-clear-dark.svg b/arc-firefox-theme/chrome/browser/devtools/search-clear-dark.svg index 77779e8..422a7ce 100644 --- a/arc-firefox-theme/chrome/browser/devtools/search-clear-dark.svg +++ b/arc-firefox-theme/chrome/browser/devtools/search-clear-dark.svg @@ -2,20 +2,14 @@ - + - - - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/search-clear-failed.svg b/arc-firefox-theme/chrome/browser/devtools/search-clear-failed.svg index fc65d21..a8f9fd8 100644 --- a/arc-firefox-theme/chrome/browser/devtools/search-clear-failed.svg +++ b/arc-firefox-theme/chrome/browser/devtools/search-clear-failed.svg @@ -2,20 +2,14 @@ - + - - - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/search-clear-light.svg b/arc-firefox-theme/chrome/browser/devtools/search-clear-light.svg index 205b744..066ef44 100644 --- a/arc-firefox-theme/chrome/browser/devtools/search-clear-light.svg +++ b/arc-firefox-theme/chrome/browser/devtools/search-clear-light.svg @@ -2,20 +2,14 @@ - + - - - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/timeline-filter.svg b/arc-firefox-theme/chrome/browser/devtools/timeline-filter.svg index e050d20..1919e2c 100644 --- a/arc-firefox-theme/chrome/browser/devtools/timeline-filter.svg +++ b/arc-firefox-theme/chrome/browser/devtools/timeline-filter.svg @@ -2,36 +2,25 @@ - - - - - - - - + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-debugger-paused.svg b/arc-firefox-theme/chrome/browser/devtools/tool-debugger-paused.svg index ae294f6..998f21b 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-debugger-paused.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-debugger-paused.svg @@ -1,3 +1,6 @@ - - + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-debugger.svg b/arc-firefox-theme/chrome/browser/devtools/tool-debugger.svg index 128e6e8..655d482 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-debugger.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-debugger.svg @@ -1,7 +1,10 @@ - - - - - - + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-inspector.svg b/arc-firefox-theme/chrome/browser/devtools/tool-inspector.svg index 5a8cbb8..45ec67f 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-inspector.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-inspector.svg @@ -1,9 +1,12 @@ - - - - - - - - + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-network.svg b/arc-firefox-theme/chrome/browser/devtools/tool-network.svg index bec394d..8e232d6 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-network.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-network.svg @@ -1,36 +1,39 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-options.svg b/arc-firefox-theme/chrome/browser/devtools/tool-options.svg index 62a6d75..2885ef9 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-options.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-options.svg @@ -1,3 +1,6 @@ - - + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-profiler-active.svg b/arc-firefox-theme/chrome/browser/devtools/tool-profiler-active.svg index eff1673..0882cca 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-profiler-active.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-profiler-active.svg @@ -1,14 +1,17 @@ - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-profiler.svg b/arc-firefox-theme/chrome/browser/devtools/tool-profiler.svg index d8e1bdd..8441af3 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-profiler.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-profiler.svg @@ -1,14 +1,17 @@ - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-scratchpad.svg b/arc-firefox-theme/chrome/browser/devtools/tool-scratchpad.svg index ad2133a..c1e8e08 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-scratchpad.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-scratchpad.svg @@ -1,6 +1,9 @@ - - - - - + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-shadereditor.svg b/arc-firefox-theme/chrome/browser/devtools/tool-shadereditor.svg new file mode 100644 index 0000000..e4e239a --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/tool-shadereditor.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-storage.svg b/arc-firefox-theme/chrome/browser/devtools/tool-storage.svg index 7f5013b..8c2c291 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-storage.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-storage.svg @@ -1,7 +1,10 @@ - - - - - - + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-styleeditor.svg b/arc-firefox-theme/chrome/browser/devtools/tool-styleeditor.svg index ac1f5c7..e123f45 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-styleeditor.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-styleeditor.svg @@ -1,6 +1,9 @@ - - - - - + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-webaudio.svg b/arc-firefox-theme/chrome/browser/devtools/tool-webaudio.svg index 59d9d90..cd317de 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-webaudio.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-webaudio.svg @@ -1,3 +1,6 @@ - + + - \ No newline at end of file + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-webconsole.svg b/arc-firefox-theme/chrome/browser/devtools/tool-webconsole.svg index 0739e82..f62307d 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-webconsole.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-webconsole.svg @@ -1,3 +1,6 @@ - - + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole.css b/arc-firefox-theme/chrome/browser/devtools/webconsole.css index 7b89259..d875c23 100644 --- a/arc-firefox-theme/chrome/browser/devtools/webconsole.css +++ b/arc-firefox-theme/chrome/browser/devtools/webconsole.css @@ -27,10 +27,11 @@ a { box-sizing: border-box; } +.message > .prefix, .message > .timestamp { flex: none; color: GrayText; - margin: 4px 6px 0 0; + margin: 3px 6px 0 0; } .message > .indent { @@ -47,19 +48,17 @@ a { .message > .icon::before { content: ""; - background-image: url(chrome://browser/skin/devtools/webconsole.png); - background-position: 8px 8px; + background-image: url(chrome://browser/skin/devtools/webconsole.svg); + background-position: 12px 12px; background-repeat: no-repeat; - background-size: 48px 40px; - width: 8px; - height: 8px; + background-size: 72px 60px; + width: 12px; + height: 12px; display: inline-block; } -@media (min-resolution: 1.25dppx) { - .message > .icon::before { - background-image: url(chrome://browser/skin/devtools/webconsole@2x.png); - } +.theme-light .message > .icon::before { + background-image: url(chrome://browser/skin/devtools/webconsole.svg#light-icons); } .message > .message-body-wrapper { @@ -231,7 +230,7 @@ a { } .message[category=network][severity=error] > .icon::before { - background-position: -8px 0; + background-position: -12px 0; } .message[category=network] > .message-body { @@ -288,11 +287,11 @@ a { } .message[category=cssparser][severity=error] > .icon::before { - background-position: -8px -8px; + background-position: -12px -12px; } .message[category=cssparser][severity=warn] > .icon::before { - background-position: -16px -8px; + background-position: -24px -12px; } /* JS styles */ @@ -306,11 +305,11 @@ a { } .message[category=exception][severity=error] > .icon::before { - background-position: -8px -16px; + background-position: -12px -24px; } .message[category=exception][severity=warn] > .icon::before { - background-position: -16px -16px; + background-position: -24px -24px; } /* Web Developer styles */ @@ -325,15 +324,15 @@ a { .message[category=console][severity=error] > .icon::before, .message[category=output][severity=error] > .icon::before { - background-position: -8px -24px; + background-position: -12px -36px; } .message[category=console][severity=warn] > .icon::before { - background-position: -16px -24px; + background-position: -24px -36px; } .message[category=console][severity=info] > .icon::before { - background-position: -24px -24px; + background-position: -36px -36px; } /* Input and output styles */ @@ -343,11 +342,11 @@ a { } .message[category=input] > .icon::before { - background-position: -32px -24px; + background-position: -48px -36px; } .message[category=output] > .icon::before { - background-position: -40px -24px; + background-position: -60px -36px; } /* JSTerm Styles */ @@ -414,11 +413,11 @@ a { } .message[category=security][severity=error] > .icon::before { - background-position: -8px -32px; + background-position: -12px -48px; } .message[category=security][severity=warn] > .icon::before { - background-position: -16px -32px; + background-position: -24px -48px; } .navigation-marker { diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole.png b/arc-firefox-theme/chrome/browser/devtools/webconsole.png deleted file mode 100644 index 8aee790..0000000 Binary files a/arc-firefox-theme/chrome/browser/devtools/webconsole.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole.svg b/arc-firefox-theme/chrome/browser/devtools/webconsole.svg new file mode 100644 index 0000000..6c21e54 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/webconsole.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole@2x.png b/arc-firefox-theme/chrome/browser/devtools/webconsole@2x.png deleted file mode 100644 index 2d5e97f..0000000 Binary files a/arc-firefox-theme/chrome/browser/devtools/webconsole@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/devtools/widgets.css b/arc-firefox-theme/chrome/browser/devtools/widgets.css index 0ef2f9f..17a96ad 100644 --- a/arc-firefox-theme/chrome/browser/devtools/widgets.css +++ b/arc-firefox-theme/chrome/browser/devtools/widgets.css @@ -1018,10 +1018,6 @@ /* Bar graph widget */ -.bar-graph-widget-canvas { - background: #f7f7f7; -} - .bar-graph-widget-legend { position: absolute; top: 4px; -- cgit v1.2.3