From 3ae0c90209c4aeacc3f8a7958e943361097a272d Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Wed, 21 Oct 2015 21:18:30 +0200 Subject: add support for Firefox 38 esr --- arc-firefox-theme/chrome/browser/devtools/add.svg | 9 - .../browser/devtools/animation-fast-track.svg | 9 - .../chrome/browser/devtools/animationinspector.css | 253 +-------- .../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/canvasdebugger.css | 19 +- .../chrome/browser/devtools/command-rulers.png | Bin 1281 -> 0 bytes .../chrome/browser/devtools/command-rulers@2x.png | Bin 1369 -> 0 bytes .../chrome/browser/devtools/commandline.css | 46 +- .../chrome/browser/devtools/common.css | 44 +- .../chrome/browser/devtools/computedview.css | 15 +- .../chrome/browser/devtools/dark-theme.css | 234 +++----- .../chrome/browser/devtools/debugger.css | 44 +- .../browser/devtools/dock-bottom-maximize@2x.png | Bin 1096 -> 0 bytes .../browser/devtools/dock-bottom-minimize@2x.png | Bin 1125 -> 0 bytes .../chrome/browser/devtools/dropmarker.svg | 9 +- .../chrome/browser/devtools/fast-forward.png | Bin 1260 -> 0 bytes .../chrome/browser/devtools/fast-forward@2x.png | Bin 1621 -> 0 bytes .../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 | 12 - .../chrome/browser/devtools/filters.svg | 26 +- .../browser/devtools/floating-scrollbars.css | 4 +- .../chrome/browser/devtools/font-inspector.css | 3 - .../chrome/browser/devtools/inspector.css | 38 -- .../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 | 319 +---------- .../chrome/browser/devtools/light-theme.css | 226 ++------ .../chrome/browser/devtools/netmonitor.css | 210 +++---- .../chrome/browser/devtools/performance-icons.svg | 83 ++- .../chrome/browser/devtools/performance.css | 601 ++++++--------------- .../chrome/browser/devtools/power.svg | 2 +- .../devtools/profiler-stopwatch-checked.svg | 29 +- .../chrome/browser/devtools/profiler-stopwatch.svg | 29 +- .../chrome/browser/devtools/profiler.css | 402 ++++++++++++++ .../chrome/browser/devtools/promisedebugger.css | 3 - .../chrome/browser/devtools/pseudo-class.svg | 29 - .../chrome/browser/devtools/rewind.png | Bin 1269 -> 0 bytes .../chrome/browser/devtools/rewind@2x.png | Bin 1650 -> 0 bytes .../chrome/browser/devtools/ruleview.css | 124 +---- .../chrome/browser/devtools/scratchpad.css | 4 + .../chrome/browser/devtools/search-clear-dark.svg | 15 - .../browser/devtools/search-clear-failed.svg | 15 - .../chrome/browser/devtools/search-clear-light.svg | 15 - .../chrome/browser/devtools/shadereditor.css | 6 +- .../chrome/browser/devtools/splitview.css | 17 + .../chrome/browser/devtools/storage.css | 4 +- .../chrome/browser/devtools/styleeditor.css | 2 +- .../chrome/browser/devtools/timeline-filter.svg | 53 +- .../chrome/browser/devtools/timeline.css | 250 +++++++++ .../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 | 17 - .../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/webaudioeditor.css | 6 +- .../chrome/browser/devtools/webconsole.css | 48 +- .../chrome/browser/devtools/webconsole.png | Bin 0 -> 1943 bytes .../chrome/browser/devtools/webconsole.svg | 101 ---- .../chrome/browser/devtools/webconsole@2x.png | Bin 0 -> 2633 bytes .../chrome/browser/devtools/widgets.css | 238 ++++---- 79 files changed, 1707 insertions(+), 2372 deletions(-) delete mode 100644 arc-firefox-theme/chrome/browser/devtools/add.svg delete mode 100644 arc-firefox-theme/chrome/browser/devtools/animation-fast-track.svg delete mode 100644 arc-firefox-theme/chrome/browser/devtools/command-rulers.png delete mode 100644 arc-firefox-theme/chrome/browser/devtools/command-rulers@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/devtools/dock-bottom-maximize@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/devtools/dock-bottom-minimize@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/devtools/fast-forward.png delete mode 100644 arc-firefox-theme/chrome/browser/devtools/fast-forward@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/devtools/filter-swatch.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/profiler.css delete mode 100644 arc-firefox-theme/chrome/browser/devtools/promisedebugger.css delete mode 100644 arc-firefox-theme/chrome/browser/devtools/pseudo-class.svg delete mode 100644 arc-firefox-theme/chrome/browser/devtools/rewind.png delete mode 100644 arc-firefox-theme/chrome/browser/devtools/rewind@2x.png delete mode 100644 arc-firefox-theme/chrome/browser/devtools/search-clear-dark.svg delete mode 100644 arc-firefox-theme/chrome/browser/devtools/search-clear-failed.svg delete mode 100644 arc-firefox-theme/chrome/browser/devtools/search-clear-light.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/timeline.css delete mode 100644 arc-firefox-theme/chrome/browser/devtools/tool-profiler-active.svg delete mode 100644 arc-firefox-theme/chrome/browser/devtools/tool-shadereditor.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/webconsole.png delete mode 100644 arc-firefox-theme/chrome/browser/devtools/webconsole.svg create 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 deleted file mode 100644 index b8b93de..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/add.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - \ 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 deleted file mode 100644 index ee84427..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/animation-fast-track.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/devtools/animationinspector.css b/arc-firefox-theme/chrome/browser/devtools/animationinspector.css index 40efab7..c632d91 100644 --- a/arc-firefox-theme/chrome/browser/devtools/animationinspector.css +++ b/arc-firefox-theme/chrome/browser/devtools/animationinspector.css @@ -1,17 +1,3 @@ -/* 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%; } @@ -42,17 +28,10 @@ body { } #toggle-all { - border-width: 0 0 0 1px; + border-width: 0px 1px; 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 { @@ -65,6 +44,12 @@ body { display: none; } +/* The animation players container */ + +#players { + flex: 1; + overflow: auto; +} /* Element picker and toggle-all buttons */ @@ -99,7 +84,7 @@ body { background-image: url("debugger-play.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #element-picker::before { background-image: url("chrome://browser/skin/devtools/command-pick@2x.png"); background-size: 64px; @@ -114,184 +99,11 @@ 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; -} +/* Disabled playerWidget when the animation has ended */ -.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 { - background-color: var(--theme-toolbar-background); - padding: 1px 4px; - box-sizing: border-box; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.animation-target .attribute-name { - padding-left: 4px; -} - -.animation-target .node-selector { - background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0; - padding-left: 16px; - margin-right: 5px; - cursor: pointer; -} - -.animation-target .node-selector:hover { - background-position: -32px 0; -} - -.animation-target .node-selector:active { - background-position: -16px 0; +.finished { + pointer-events: none; + opacity: .5; } /* Animation title gutter, contains the name, duration, iteration */ @@ -312,17 +124,6 @@ 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 { @@ -334,6 +135,7 @@ body { } .timeline .playback-controls { + width: 50px; display: flex; flex-direction: row; } @@ -345,6 +147,8 @@ body { border-width: 0 1px 0 0; } +/* Play/pause button */ + .timeline .toggle::before { background-image: url(debugger-pause.png); } @@ -354,15 +158,7 @@ body { background-image: url(debugger-play.png); } -.timeline .ff::before { - background-image: url(fast-forward.png); -} - -.timeline .rw::before { - background-image: url(rewind.png); -} - -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .timeline .toggle::before { background-image: url(debugger-pause@2x.png); } @@ -371,21 +167,6 @@ body { .finished .timeline .toggle::before { background-image: url(debugger-play@2x.png); } - - .timeline .ff::before { - background-image: url(fast-forward@2x.png); - } - - .timeline .rw::before { - background-image: url(rewind@2x.png); - } -} - -.timeline .rate { - -moz-appearance: none; - text-align: center; - color: var(--theme-body-color); - border-right: 1px solid var(--theme-splitter-color); } /* Slider (input type range) container */ @@ -429,4 +210,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 4a8e12a..f1b5594 100644 --- a/arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg @@ -1,7 +1,12 @@ + - - + + + 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 7876e46..21261cd 100644 --- a/arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg @@ -1,7 +1,13 @@ + - - + + + 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 3fea1e4..b0a414d 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,18 +1,80 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 d21764e..10e8d2b 100644 --- a/arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg @@ -1,7 +1,12 @@ + - - + + + 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 9b98e8f..3d36871 100644 --- a/arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg @@ -1,7 +1,10 @@ + - - + + + 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 a0cca5c..95c42a4 100644 --- a/arc-firefox-theme/chrome/browser/devtools/app-manager/rocket.svg +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/rocket.svg @@ -1,12 +1,30 @@ + - + + - - - - + + + + + + + + + + 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 d26e2e6..89e7c6f 100644 --- a/arc-firefox-theme/chrome/browser/devtools/app-manager/warning.svg +++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/warning.svg @@ -1,7 +1,13 @@ + - - + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css b/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css index a749260..24b191c 100644 --- a/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css +++ b/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css @@ -1,3 +1,7 @@ +/* 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/. */ + /* 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/. */ @@ -7,6 +11,7 @@ .notice-container { margin-top: -50vh; + font-size: 120%; background-color: var(--theme-toolbar-background); color: var(--theme-body-color-alt); } @@ -22,8 +27,14 @@ display: none; } -#waiting-notice { - font-size: 110%; +.theme-dark #import-notice { + font-size: 250%; + color: rgba(255,255,255,0.2); +} + +.theme-light #import-notice { + font-size: 250%; + color: rgba(0,0,0,0.2); } /* Snapshots pane */ @@ -138,7 +149,7 @@ list-style-image: url(debugger-step-out.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #resume { list-style-image: url(debugger-play@2x.png); -moz-image-region: rect(0px,64px,32px,32px); @@ -243,7 +254,7 @@ background-size: 12px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .selected .call-item-gutter { background-image: url("editor-debug-location@2x.png"); } diff --git a/arc-firefox-theme/chrome/browser/devtools/command-rulers.png b/arc-firefox-theme/chrome/browser/devtools/command-rulers.png deleted file mode 100644 index ae7c705..0000000 Binary files a/arc-firefox-theme/chrome/browser/devtools/command-rulers.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/devtools/command-rulers@2x.png b/arc-firefox-theme/chrome/browser/devtools/command-rulers@2x.png deleted file mode 100644 index 8378959..0000000 Binary files a/arc-firefox-theme/chrome/browser/devtools/command-rulers@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/devtools/commandline.css b/arc-firefox-theme/chrome/browser/devtools/commandline.css index 7666eed..06d7512 100644 --- a/arc-firefox-theme/chrome/browser/devtools/commandline.css +++ b/arc-firefox-theme/chrome/browser/devtools/commandline.css @@ -2,36 +2,18 @@ * 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/. */ - -/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS. - We are copy/pasting variables from light-theme and dark-theme, - since they aren't loaded in this context (within commandlineoutput.xhtml - and commandlinetooltip.xhtml). */ -:root[devtoolstheme="light"] { - --gcli-background-color: #ebeced; /* --theme-tab-toolbar-background */ - --gcli-input-focused-background: #f7f7f7; /* --theme-sidebar-background */ - --gcli-input-color: #18191a; /* --theme-body-color */ - --gcli-border-color: #aaaaaa; /* --theme-splitter-color */ -} - -:root[devtoolstheme="dark"] { - --gcli-background-color: #343c45; /* --theme-toolbar-background */ - --gcli-input-focused-background: #252c33; /* --theme-tab-toolbar-background */ - --gcli-input-color: #b6babf; /* --theme-body-color-alt */ - --gcli-border-color: black; /* --theme-splitter-color */ -} - .gcli-body { margin: 0; font: message-box; - color: var(--gcli-input-color); + color: hsl(210,30%,85%); } #gcli-output-root, #gcli-tooltip-root { - border: 1px solid var(--gcli-border-color); + border: 1px solid hsl(206,37%,4%); + box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset; + background-image: linear-gradient(hsla(209,18%,18%,0.9), hsl(209,23%,18%)); border-radius: 3px; - background-color: var(--gcli-background-color); } #gcli-output-root { @@ -50,9 +32,9 @@ margin-left: 8px; width: 20px; height: 10px; - border-left: 1px solid var(--gcli-border-color); - border-right: 1px solid var(--gcli-border-color); - background-color: var(--gcli-background-color); + border-left: 1px solid hsl(206,37%,4%); + border-right: 1px solid hsl(206,37%,4%); + background-color: hsl(209,23%,18%); } .gcli-tt-description, @@ -65,7 +47,7 @@ line-height: 1.2em; border-top: none; border-bottom: none; - color: var(--gcli-input-color); + color: hsl(210,30%,85%); } .gcli-row-out p, @@ -83,7 +65,7 @@ .gcli-row-out th, .gcli-row-out strong, .gcli-row-out pre { - color: var(--gcli-input-color); + color: hsl(210,30%,95%); } .gcli-row-out pre { @@ -101,13 +83,13 @@ font-weight: normal; font-size: 90%; border-radius: 3px; - background-color: var(--gcli-background-color); - border: 1px solid var(--gcli-border-color); + background-color: hsl(209,23%,18%); + border: 1px solid hsl(206,37%,4%); } .gcli-out-shortcut:before, .gcli-help-synopsis:before { - color: var(--gcli-input-color); + color: hsl(210,30%,85%); -moz-padding-end: 2px; } @@ -135,12 +117,12 @@ .gcli-menu-desc { -moz-padding-end: 8px; - color: var(--gcli-input-color); + color: hsl(210,30%,75%); } .gcli-menu-name:hover, .gcli-menu-desc:hover { - background-color: var(--gcli-input-focused-background); + background-color: hsla(0,0%,0%,.3); } .gcli-menu-highlight, diff --git a/arc-firefox-theme/chrome/browser/devtools/common.css b/arc-firefox-theme/chrome/browser/devtools/common.css index 0a655c7..0686832 100644 --- a/arc-firefox-theme/chrome/browser/devtools/common.css +++ b/arc-firefox-theme/chrome/browser/devtools/common.css @@ -1,19 +1,13 @@ :root { font: message-box; - --monospace-font-family: monospace; } .devtools-monospace { - font-family: var(--monospace-font-family); + font-family: monospace; font-size: 80%; } -/* Bottom-docked toolbox minimize transition */ -.devtools-toolbox-bottom-iframe { - transition: margin-bottom .1s; -} - /* Splitters */ .devtools-horizontal-splitter { -moz-appearance: none; @@ -40,11 +34,6 @@ cursor: e-resize; } -.devtools-horizontal-splitter.disabled, -.devtools-side-splitter.disabled { - pointer-events: none; -} - .devtools-toolbox-side-iframe { min-width: 465px; } @@ -241,34 +230,3 @@ background-color: transparent; border: none; } - -/* links to source code, like displaying `myfile.js:45` */ - -.devtools-source-link { - font-family: var(--monospace-font-family); - color: var(--theme-highlight-blue); - cursor: pointer; - white-space: nowrap; - display: flex; - text-decoration: none; - font-size: 11px; - width: 12em; /* probably should be changed for each tool */ -} - -.devtools-source-link:hover { - text-decoration: underline; -} - -.devtools-source-link > .filename { - text-overflow: ellipsis; - text-align: end; - overflow: hidden; - margin: 2px 0px; - cursor: pointer; -} - -.devtools-source-link > .line-number { - flex: none; - margin: 2px 0px; - cursor: pointer; -} diff --git a/arc-firefox-theme/chrome/browser/devtools/computedview.css b/arc-firefox-theme/chrome/browser/devtools/computedview.css index f770681..463fc91 100644 --- a/arc-firefox-theme/chrome/browser/devtools/computedview.css +++ b/arc-firefox-theme/chrome/browser/devtools/computedview.css @@ -61,7 +61,7 @@ body { background-size: 5px 8px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .property-value, .other-property-value { background-image: url(arrow-e@2x.png); } @@ -124,6 +124,11 @@ body { border-bottom-width: 1px; } +/* This rule is necessary because Templater.jsm breaks LTR TDs in RTL docs */ +.rule-text { + direction: ltr; +} + .matched { text-decoration: line-through; } @@ -148,7 +153,7 @@ body { #root .devtools-toolbar { width: 100%; - display: flex; + border-bottom-width: 0; } .link { @@ -178,9 +183,9 @@ body { .computedview-colorswatch { border-radius: 50%; - width: 0.9em; - height: 0.9em; - vertical-align: middle; + width: 1em; + height: 1em; + vertical-align: text-top; -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 53a868f..1f90b49 100644 --- a/arc-firefox-theme/chrome/browser/devtools/dark-theme.css +++ b/arc-firefox-theme/chrome/browser/devtools/dark-theme.css @@ -3,9 +3,8 @@ * 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/. */ -/* Colors are taken from: - * https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors. - * Changes should be kept in sync with commandline.css and commandline.inc.css. +/* According to: + * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17 */ :root { --theme-body-background: #14171a; @@ -15,33 +14,25 @@ --theme-tab-toolbar-background: #252c33; --theme-toolbar-background: #343c45; --theme-selection-background: #1d4f73; - --theme-selection-background-semitransparent: rgba(29, 79, 115, .5); --theme-selection-color: #f5f7fa; + --theme-selection-background-semitransparent: rgba(29, 79, 115, .5); --theme-splitter-color: black; - --theme-comment: #757873; + --theme-comment: #5c6773; - --theme-body-color: #8fa1b2; + --theme-body-color: #a9bacb; --theme-body-color-alt: #b6babf; --theme-content-color1: #a9bacb; --theme-content-color2: #8fa1b2; - --theme-content-color3: #5f7387; + --theme-content-color3: #667380; - --theme-highlight-green: #70bf53; - --theme-highlight-blue: #46afe3; + --theme-highlight-green: #5c9966; + --theme-highlight-blue: #3689b2; --theme-highlight-bluegrey: #5e88b0; - --theme-highlight-purple: #6b7abb; - --theme-highlight-lightorange: #d99b28; - --theme-highlight-orange: #d96629; - --theme-highlight-red: #eb5368; - --theme-highlight-pink: #df80ff; - - /* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */ - --theme-graphs-green: #70bf53; - --theme-graphs-blue: #46afe3; - --theme-graphs-purple: #df80ff; - --theme-graphs-yellow: #d99b28; - --theme-graphs-red: #eb5368; - --theme-graphs-grey: #757873; + --theme-highlight-purple: #6270b2; + --theme-highlight-lightorange: #a18650; + --theme-highlight-orange: #b26b47; + --theme-highlight-red: #bf5656; + --theme-highlight-pink: #a673bf; } .theme-body { @@ -138,7 +129,7 @@ .cm-s-mozilla .cm-unused-line { text-decoration: line-through; - text-decoration-color: #0072ab; + text-decoration-color: #5f88b0; } .cm-s-mozilla .cm-executed-line { @@ -212,8 +203,9 @@ color: black; } -.ruleview-swatch, -.computedview-colorswatch { +.ruleview-colorswatch, +.computedview-colorswatch, +.ruleview-bezierswatch { box-shadow: 0 0 0 1px #818181; } @@ -334,7 +326,7 @@ div.CodeMirror span.eval-text { background-position: -42px 0; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .theme-twisty, .theme-checkbox { background-image: url("chrome://browser/skin/devtools/controls@2x.png"); } @@ -372,7 +364,7 @@ div.CodeMirror span.eval-text { margin-left: -4px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .theme-tooltip-panel .panel-arrow[side="top"], .theme-tooltip-panel .panel-arrow[side="bottom"] { list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark@2x.png"); @@ -412,24 +404,10 @@ div.CodeMirror span.eval-text { -/* CSS Variables specific to the devtools toolbar that aren't defined by the themes */ -.theme-light { - --searchbox-background-color: #ffee99; - --searchbox-border-color: #ffbf00; - --searcbox-no-match-background-color: #ffe5e5; - --searcbox-no-match-border-color: #e52e2e; -} - -.theme-dark { - --searchbox-background-color: #4d4222; - --searchbox-border-color: #d99f2b; - --searcbox-no-match-background-color: #402325; - --searcbox-no-match-border-color: #cc3d3d; -} - /* Toolbars */ .devtools-toolbar, -.devtools-sidebar-tabs tabs { +.devtools-sidebar-tabs tabs, +.devtools-sidebar-alltabs { -moz-appearance: none; padding: 0; border-width: 0; @@ -447,12 +425,10 @@ div.CodeMirror span.eval-text { .devtools-toolbar checkbox { margin: 0 2px; padding: 0; - line-height: -moz-block-height; } .devtools-toolbar checkbox .checkbox-check { margin: 0; padding: 0; - vertical-align: bottom; } .devtools-toolbar checkbox .checkbox-label-box { border: none !important; /* overrides .checkbox-label-box from checkbox.css */ @@ -669,7 +645,6 @@ 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; @@ -720,12 +695,7 @@ 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) { +@media (min-resolution: 2dppx) { .devtools-button::before { background-size: 32px; } @@ -748,7 +718,7 @@ div.CodeMirror span.eval-text { margin-bottom: 1px; padding: 0; -moz-padding-start: 22px; - -moz-padding-end: 4px; + -moz-padding-end: 12px; background-position: 8px center; background-size: 11px 11px; background-repeat: no-repeat; @@ -763,95 +733,28 @@ div.CodeMirror span.eval-text { background-image: url(magnifying-glass-light.png); } -.devtools-searchinput:-moz-locale-dir(rtl) { - background-position: calc(100% - 8px) center; -} - -.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon { - visibility: hidden; -} - -/* Searchbox is a div container element for a search input element */ -.devtools-searchbox { - display: flex; - flex: 1; - position: relative; -} +@media (min-resolution: 2dppx) { + .theme-dark .devtools-searchinput { + background-image: url(magnifying-glass@2x.png); + } -.devtools-rule-searchbox { - -moz-box-flex: 1; - padding-right: 23px; - width: 100%; - font: inherit; + .theme-light .devtools-searchinput { + background-image: url(magnifying-glass-light@2x.png); + } } -.devtools-rule-searchbox[filled] { - background-color: var(--searchbox-background-color); - border-color: var(--searchbox-border-color); +.devtools-searchinput:-moz-locale-dir(rtl) { + background-position: calc(100% - 8px) center; } -.devtools-style-searchbox-no-match { - background-color: var(--searcbox-no-match-background-color) !important; - border-color: var(--searcbox-no-match-border-color) !important; +.devtools-searchinput > .textbox-input-box > .textbox-search-icons { + display: none; } .devtools-no-search-result { border-color: var(--theme-highlight-red) !important; } -.devtools-searchinput-clear { - position: absolute; - top: 3.5px; - right: 7px; - padding: 0; - border: 0; - width: 16px; - height: 16px; - background-position: 0 0; - background-repeat: no-repeat; - background-color: transparent; -} - -.theme-dark .devtools-searchinput-clear { - background-image: url("chrome://browser/skin/devtools/search-clear-dark.svg"); -} - -.theme-light .devtools-searchinput-clear { - background-image: url("chrome://browser/skin/devtools/search-clear-light.svg"); -} - -.devtools-style-searchbox-no-match + .devtools-searchinput-clear { - background-image: url("chrome://browser/skin/devtools/search-clear-failed.svg") !important; -} - -.devtools-searchinput-clear:hover { - background-position: -16px 0; -} - -.theme-dark .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear { - list-style-image: url("chrome://browser/skin/devtools/search-clear-dark.svg"); - -moz-image-region: rect(0, 16px, 16px, 0); -} - -.theme-light .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear { - list-style-image: url("chrome://browser/skin/devtools/search-clear-light.svg"); - -moz-image-region: rect(0, 16px, 16px, 0); -} - -.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover { - -moz-image-region: rect(0, 32px, 16px, 16px); -} - -@media (min-resolution: 1.25dppx) { - .theme-dark .devtools-searchinput { - background-image: url(magnifying-glass@2x.png); - } - - .theme-light .devtools-searchinput { - background-image: url(magnifying-glass-light@2x.png); - } -} - /* Close button */ .devtools-closebutton { @@ -913,17 +816,13 @@ div.CodeMirror span.eval-text { } .devtools-sidebar-alltabs { - -moz-appearance: none; - height: 24px; - line-height: 24px; - padding: 0 4px; margin: 0; border-width: 0 0 1px 0; -moz-border-start-width: 1px; border-style: solid; } -.devtools-sidebar-alltabs .toolbarbutton-icon { +.devtools-sidebar-alltabs dropmarker { display: none; } @@ -953,57 +852,73 @@ div.CodeMirror span.eval-text { text-shadow: none; } -.devtools-sidebar-tabs tabs > tab { - border-image: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%) 1 1; -} - -.devtools-sidebar-tabs tabs > tab[selected], -.devtools-sidebar-tabs tabs > tab[selected] + tab { - border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1; -} - .devtools-sidebar-tabs tabs > tab:first-child { -moz-border-start-width: 0; } +.theme-dark .devtools-sidebar-tabs tabs > tab { + border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; +} + .theme-dark .devtools-sidebar-tabs tabs > tab:hover { background: hsla(206,37%,4%,.2); + border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; } .theme-dark .devtools-sidebar-tabs tabs > tab:hover:active { background: hsla(206,37%,4%,.4); + border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab { + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; } .theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { background: hsla(206,37%,4%,.2); + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; } .theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active { background: hsla(206,37%,4%,.4); + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; } .theme-dark .devtools-sidebar-tabs tabs > tab[selected], .theme-dark .devtools-sidebar-tabs tabs > tab[selected]:hover:active { color: var(--theme-selection-color); background: #1d4f73; + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; +} + +.theme-light .devtools-sidebar-tabs tabs > tab { + border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; } .theme-light .devtools-sidebar-tabs tabs > tab:hover { background: #ddd; + border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; } .theme-light .devtools-sidebar-tabs tabs > tab:hover:active { background: #ddd; + border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; +} + +.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab { + border-image: linear-gradient(#aaa, #aaa); } .theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { background: #ddd; + border-image: linear-gradient(#aaa, #aaa); } .theme-light .devtools-sidebar-tabs tabs > tab[selected], .theme-light .devtools-sidebar-tabs tabs > tab[selected]:hover:active { color: var(--theme-selection-color); background: #4c9ed9; + border-image: linear-gradient(#aaa, #aaa); } /* Toolbox - moved from toolbox.css. @@ -1046,20 +961,6 @@ 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 { @@ -1168,11 +1069,7 @@ div.CodeMirror span.eval-text { background-image: url("chrome://browser/skin/devtools/command-eyedropper.png"); } -#command-button-rulers > image { - background-image: url("chrome://browser/skin/devtools/command-rulers.png"); -} - -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #command-button-paintflashing > image { background-image: url("chrome://browser/skin/devtools/command-paintflashing@2x.png"); } @@ -1208,10 +1105,6 @@ div.CodeMirror span.eval-text { #command-button-eyedropper > image { background-image: url("chrome://browser/skin/devtools/command-eyedropper@2x.png"); } - - #command-button-rulers > image { - background-image: url("chrome://browser/skin/devtools/command-rulers@2x.png"); - } } /* Tabs */ @@ -1281,12 +1174,9 @@ div.CodeMirror span.eval-text { background-color: rgba(170,170,170,.4); } -.devtools-tab:not([selected])[highlighted] { - box-shadow: 0 2px 0 var(--theme-highlight-green) inset; -} - .theme-dark .devtools-tab:not([selected])[highlighted] { background-color: hsla(99,100%,14%,.2); + box-shadow: 0 2px 0 #7bc107 inset; } .theme-light .devtools-tab:not([selected])[highlighted] { diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger.css b/arc-firefox-theme/chrome/browser/devtools/debugger.css index 97eb3b0..39df7a9 100644 --- a/arc-firefox-theme/chrome/browser/devtools/debugger.css +++ b/arc-firefox-theme/chrome/browser/devtools/debugger.css @@ -1,3 +1,7 @@ +/* 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 @@ -45,16 +49,6 @@ margin: 2px; } -.dbg-breakpoint-condition-thrown-message { - display: none; - color: var(--theme-highlight-red); -} - -.dbg-breakpoint.dbg-breakpoint-condition-thrown .dbg-breakpoint-condition-thrown-message { - display: block; - -moz-padding-start: 0; -} - /* Sources toolbar */ #sources-toolbar > .devtools-toolbarbutton, @@ -66,7 +60,7 @@ list-style-image: url(debugger-blackbox.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #black-box { list-style-image: url(debugger-blackbox@2x.png); } @@ -76,7 +70,7 @@ list-style-image: url(debugger-prettyprint.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #pretty-print { list-style-image: url(debugger-prettyprint@2x.png); } @@ -86,16 +80,12 @@ list-style-image: url(debugger-toggleBreakpoints.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #toggle-breakpoints { list-style-image: url(debugger-toggleBreakpoints@2x.png); } } -#toggle-promise-debugger { - /* TODO Bug 1186119: Add a toggle promise debugger image */ -} - #sources-toolbar .devtools-toolbarbutton:not([label]) { -moz-image-region: rect(0px,16px,16px,0px); } @@ -104,7 +94,7 @@ -moz-image-region: rect(0px,32px,16px,16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #sources-toolbar .devtools-toolbarbutton:not([label]) { -moz-image-region: rect(0px,32px,32px,0px); } @@ -138,7 +128,7 @@ -moz-margin-end: 5px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #black-boxed-message-button > .button-box > .button-icon { background-image: url(debugger-blackbox@2x.png); } @@ -226,7 +216,7 @@ -moz-image-region: rect(0px,32px,16px,16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #trace { list-style-image: url(tracer-icon@2x.png); -moz-image-region: rect(0px,32px,32px,0px); @@ -328,7 +318,7 @@ margin: 2px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .dbg-expression-arrow { background-image: url(commandline-icon@2x.png); } @@ -564,7 +554,7 @@ list-style-image: url(debugger-play.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #resume { list-style-image: url(debugger-pause@2x.png); -moz-image-region: rect(0px,32px,32px,0px); @@ -576,12 +566,12 @@ } } -#debugger-controls toolbarbutton { +#resume ~ toolbarbutton { transition: opacity 0.15s ease-in-out; } -#debugger-controls toolbarbutton[disabled] { - opacity: .5; +#resume:not([checked]) ~ toolbarbutton { + opacity: 0.5; } #step-over { @@ -596,7 +586,7 @@ list-style-image: url(debugger-step-out.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #step-over { list-style-image: url(debugger-step-over@2x.png); } @@ -626,7 +616,7 @@ -moz-image-region: rect(0px,32px,16px,16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #instruments-pane-toggle { list-style-image: url(debugger-collapse@2x.png); -moz-image-region: rect(0px,32px,32px,0px); 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 deleted file mode 100644 index feb4d78..0000000 Binary files a/arc-firefox-theme/chrome/browser/devtools/dock-bottom-maximize@2x.png and /dev/null 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 deleted file mode 100644 index a82983c..0000000 Binary files a/arc-firefox-theme/chrome/browser/devtools/dock-bottom-minimize@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/devtools/dropmarker.svg b/arc-firefox-theme/chrome/browser/devtools/dropmarker.svg index 7592790..09b65c7 100644 --- a/arc-firefox-theme/chrome/browser/devtools/dropmarker.svg +++ b/arc-firefox-theme/chrome/browser/devtools/dropmarker.svg @@ -1,6 +1,3 @@ - - - - + + + \ No newline at end of file diff --git a/arc-firefox-theme/chrome/browser/devtools/fast-forward.png b/arc-firefox-theme/chrome/browser/devtools/fast-forward.png deleted file mode 100644 index f2c6c52..0000000 Binary files a/arc-firefox-theme/chrome/browser/devtools/fast-forward.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/devtools/fast-forward@2x.png b/arc-firefox-theme/chrome/browser/devtools/fast-forward@2x.png deleted file mode 100644 index 4c3cf88..0000000 Binary files a/arc-firefox-theme/chrome/browser/devtools/fast-forward@2x.png and /dev/null differ 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 ae6f221..e8ff440 100644 --- a/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg +++ b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg @@ -1,7 +1,4 @@ - - + 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 c7fafc2..fd8209d 100644 --- a/arc-firefox-theme/chrome/browser/devtools/filetype-dir-open.svg +++ b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-open.svg @@ -1,7 +1,4 @@ - - + diff --git a/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg b/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg index a5580b4..809e098 100644 --- a/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg +++ b/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg @@ -1,6 +1,3 @@ - - - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg b/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg index c85c560..95be627 100644 --- a/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg +++ b/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg @@ -1,8 +1,7 @@ - - - - - + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/filter-swatch.svg b/arc-firefox-theme/chrome/browser/devtools/filter-swatch.svg deleted file mode 100644 index 1f63b4f..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/filter-swatch.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/devtools/filters.svg b/arc-firefox-theme/chrome/browser/devtools/filters.svg index 700fdbf..916028b 100644 --- a/arc-firefox-theme/chrome/browser/devtools/filters.svg +++ b/arc-firefox-theme/chrome/browser/devtools/filters.svg @@ -1,16 +1,18 @@ - - - - - - - - - + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css index 934a38e..ff70d64 100644 --- a/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css +++ b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css @@ -9,10 +9,8 @@ scrollbar { padding: 2px; } -/* Scrollbar code will reset the margin to the correct side depending on - where layout actually puts the scrollbar */ scrollbar[orient="vertical"] { - margin-left: -10px; + -moz-margin-start: -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 2c4a365..30424df 100644 --- a/arc-firefox-theme/chrome/browser/devtools/font-inspector.css +++ b/arc-firefox-theme/chrome/browser/devtools/font-inspector.css @@ -3,9 +3,6 @@ } body { - display: flex; - flex-direction: column; - height: 100%; margin: 0; padding-bottom: 20px; } diff --git a/arc-firefox-theme/chrome/browser/devtools/inspector.css b/arc-firefox-theme/chrome/browser/devtools/inspector.css index cab78e7..2d80e76 100644 --- a/arc-firefox-theme/chrome/browser/devtools/inspector.css +++ b/arc-firefox-theme/chrome/browser/devtools/inspector.css @@ -26,44 +26,6 @@ max-width: 200px !important; } -/* Expand/collapse panel toolbar button */ - -#inspector-pane-toggle { - background: none; - box-shadow: none; - border: none; - list-style-image: url(debugger-collapse.png); - -moz-image-region: rect(0px,16px,16px,0px); -} - -#inspector-pane-toggle > .toolbarbutton-icon { - width: 16px; - height: 16px; -} - -#inspector-pane-toggle[pane-collapsed] { - list-style-image: url(debugger-expand.png); -} - -#inspector-pane-toggle:active { - -moz-image-region: rect(0px,32px,16px,16px); -} - -@media (min-resolution: 1.25dppx) { - #inspector-pane-toggle { - list-style-image: url(debugger-collapse@2x.png); - -moz-image-region: rect(0px,32px,32px,0px); - } - - #inspector-pane-toggle[pane-collapsed] { - list-style-image: url(debugger-expand@2x.png); - } - - #inspector-pane-toggle:active { - -moz-image-region: rect(0px,64px,32px,32px); - } -} - /* Tooltip: Events */ #devtools-tooltip-events-container { 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 c2accab..7bd7028 100644 --- a/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-ltr.svg +++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-ltr.svg @@ -1,7 +1,4 @@ - - - - + + + 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 18d3702..9315d9e 100644 --- a/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-rtl.svg +++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-rtl.svg @@ -1,7 +1,4 @@ - - - - - + + + + \ 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 bca667a..93913c9 100644 --- a/arc-firefox-theme/chrome/browser/devtools/itemArrow-ltr.svg +++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-ltr.svg @@ -1,7 +1,4 @@ - - - - + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/itemArrow-rtl.svg b/arc-firefox-theme/chrome/browser/devtools/itemArrow-rtl.svg index e83fa63..e580b88 100755 --- a/arc-firefox-theme/chrome/browser/devtools/itemArrow-rtl.svg +++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-rtl.svg @@ -1,7 +1,4 @@ - - - - + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/layoutview.css b/arc-firefox-theme/chrome/browser/devtools/layoutview.css index 642e89c..3e0ca8b 100644 --- a/arc-firefox-theme/chrome/browser/devtools/layoutview.css +++ b/arc-firefox-theme/chrome/browser/devtools/layoutview.css @@ -1,67 +1,16 @@ /* 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, @@ -69,271 +18,43 @@ body { color: var(--theme-highlight-blue); } -/* Regions are 3 nested elements with wide borders and outlines */ - #content { - height: 25px; + background-color: #87ceeb; + border-color: hsl(210,100%,85%); + border-style: dotted; } -#margins, -#borders, -#padding { +#padding, +#margins { border-color: hsla(210,100%,85%,0.2); - border-width: 25px; - border-style: solid; outline: dotted 1px hsl(210,100%,85%); } -#margins { - /* This opacity applies to all of the regions, since they are nested */ - opacity: .8; -} - -/* 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 { - 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; + background-color: #6a5acd; } -.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); +#borders { + background-color: #444444; + border-style: dotted; + border-color: hsl(210,100%,85%); } -@media (max-height: 228px) { - .legend { - margin: 2px 6px; - } +#margins { + background-color: #edff64; + /* This opacity applies to all of the regions, since they are nested. */ + opacity: .8; } -/* Editable fields */ - .editable { - border: 1px dashed transparent; - -moz-user-select: text; + border-bottom: 1px dashed transparent; } .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 92515ff..b13e682 100644 --- a/arc-firefox-theme/chrome/browser/devtools/light-theme.css +++ b/arc-firefox-theme/chrome/browser/devtools/light-theme.css @@ -3,9 +3,8 @@ * 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/. */ -/* Colors are taken from: - * https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors. - * Changes should be kept in sync with commandline.css and commandline.inc.css. +/* According to: + * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17 */ :root { --theme-body-background: #fcfcfc; @@ -15,10 +14,10 @@ --theme-tab-toolbar-background: #ebeced; --theme-toolbar-background: #f0f1f2; --theme-selection-background: #4c9ed9; - --theme-selection-background-semitransparent: rgba(76, 158, 217, .23); --theme-selection-color: #f5f7fa; + --theme-selection-background-semitransparent: rgba(76, 158, 217, .23); --theme-splitter-color: #aaaaaa; - --theme-comment: #757873; + --theme-comment: hsl(90,2%,46%); --theme-body-color: #18191a; --theme-body-color-alt: #585959; @@ -26,22 +25,14 @@ --theme-content-color2: #8fa1b2; --theme-content-color3: #667380; - --theme-highlight-green: #2cbb0f; - --theme-highlight-blue: #0088cc; - --theme-highlight-bluegrey: #0072ab; + --theme-highlight-green: hsl(72,100%,27%); + --theme-highlight-blue: hsl(208,56%,40%); + --theme-highlight-bluegrey: hsl(208,81%,21%); --theme-highlight-purple: #5b5fff; - --theme-highlight-lightorange: #d97e00; - --theme-highlight-orange: #f13c00; - --theme-highlight-red: #ed2655; + --theme-highlight-lightorange: #a18650; + --theme-highlight-orange: hsl(24,85%,39%); + --theme-highlight-red: #bf5656; --theme-highlight-pink: #b82ee5; - - /* Colors used in Graphs, like performance tools. Similar colors to Chrome's timeline. */ - --theme-graphs-green: #85d175; - --theme-graphs-blue: #83b7f6; - --theme-graphs-purple: #b693eb; - --theme-graphs-yellow: #efc052; - --theme-graphs-red: #e57180; - --theme-graphs-grey: #cccccc; } .theme-body { @@ -211,8 +202,9 @@ border-color: var(--theme-splitter-color); } -.ruleview-swatch, -.computedview-colorswatch { +.ruleview-colorswatch, +.computedview-colorswatch, +.ruleview-bezierswatch { box-shadow: 0 0 0 1px #c4c4c4; } @@ -343,7 +335,7 @@ div.CodeMirror span.eval-text { background-position: -14px 0; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .theme-twisty, .theme-checkbox { background-image: url("chrome://browser/skin/devtools/controls@2x.png"); } @@ -381,7 +373,7 @@ div.CodeMirror span.eval-text { margin-left: -4px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .theme-tooltip-panel .panel-arrow[side="top"], .theme-tooltip-panel .panel-arrow[side="bottom"] { list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-light@2x.png"); @@ -410,24 +402,10 @@ div.CodeMirror span.eval-text { -/* CSS Variables specific to the devtools toolbar that aren't defined by the themes */ -.theme-light { - --searchbox-background-color: #ffee99; - --searchbox-border-color: #ffbf00; - --searcbox-no-match-background-color: #ffe5e5; - --searcbox-no-match-border-color: #e52e2e; -} - -.theme-dark { - --searchbox-background-color: #4d4222; - --searchbox-border-color: #d99f2b; - --searcbox-no-match-background-color: #402325; - --searcbox-no-match-border-color: #cc3d3d; -} - /* Toolbars */ .devtools-toolbar, -.devtools-sidebar-tabs tabs { +.devtools-sidebar-tabs tabs, +.devtools-sidebar-alltabs { -moz-appearance: none; padding: 0; border-width: 0; @@ -445,12 +423,10 @@ div.CodeMirror span.eval-text { .devtools-toolbar checkbox { margin: 0 2px; padding: 0; - line-height: -moz-block-height; } .devtools-toolbar checkbox .checkbox-check { margin: 0; padding: 0; - vertical-align: bottom; } .devtools-toolbar checkbox .checkbox-label-box { border: none !important; /* overrides .checkbox-label-box from checkbox.css */ @@ -667,7 +643,6 @@ 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; @@ -718,12 +693,7 @@ 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) { +@media (min-resolution: 2dppx) { .devtools-button::before { background-size: 32px; } @@ -746,7 +716,7 @@ div.CodeMirror span.eval-text { margin-bottom: 1px; padding: 0; -moz-padding-start: 22px; - -moz-padding-end: 4px; + -moz-padding-end: 12px; background-position: 8px center; background-size: 11px 11px; background-repeat: no-repeat; @@ -761,95 +731,28 @@ div.CodeMirror span.eval-text { background-image: url(magnifying-glass-light.png); } -.devtools-searchinput:-moz-locale-dir(rtl) { - background-position: calc(100% - 8px) center; -} - -.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon { - visibility: hidden; -} - -/* Searchbox is a div container element for a search input element */ -.devtools-searchbox { - display: flex; - flex: 1; - position: relative; -} +@media (min-resolution: 2dppx) { + .theme-dark .devtools-searchinput { + background-image: url(magnifying-glass@2x.png); + } -.devtools-rule-searchbox { - -moz-box-flex: 1; - padding-right: 23px; - width: 100%; - font: inherit; + .theme-light .devtools-searchinput { + background-image: url(magnifying-glass-light@2x.png); + } } -.devtools-rule-searchbox[filled] { - background-color: var(--searchbox-background-color); - border-color: var(--searchbox-border-color); +.devtools-searchinput:-moz-locale-dir(rtl) { + background-position: calc(100% - 8px) center; } -.devtools-style-searchbox-no-match { - background-color: var(--searcbox-no-match-background-color) !important; - border-color: var(--searcbox-no-match-border-color) !important; +.devtools-searchinput > .textbox-input-box > .textbox-search-icons { + display: none; } .devtools-no-search-result { border-color: var(--theme-highlight-red) !important; } -.devtools-searchinput-clear { - position: absolute; - top: 3.5px; - right: 7px; - padding: 0; - border: 0; - width: 16px; - height: 16px; - background-position: 0 0; - background-repeat: no-repeat; - background-color: transparent; -} - -.theme-dark .devtools-searchinput-clear { - background-image: url("chrome://browser/skin/devtools/search-clear-dark.svg"); -} - -.theme-light .devtools-searchinput-clear { - background-image: url("chrome://browser/skin/devtools/search-clear-light.svg"); -} - -.devtools-style-searchbox-no-match + .devtools-searchinput-clear { - background-image: url("chrome://browser/skin/devtools/search-clear-failed.svg") !important; -} - -.devtools-searchinput-clear:hover { - background-position: -16px 0; -} - -.theme-dark .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear { - list-style-image: url("chrome://browser/skin/devtools/search-clear-dark.svg"); - -moz-image-region: rect(0, 16px, 16px, 0); -} - -.theme-light .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear { - list-style-image: url("chrome://browser/skin/devtools/search-clear-light.svg"); - -moz-image-region: rect(0, 16px, 16px, 0); -} - -.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover { - -moz-image-region: rect(0, 32px, 16px, 16px); -} - -@media (min-resolution: 1.25dppx) { - .theme-dark .devtools-searchinput { - background-image: url(magnifying-glass@2x.png); - } - - .theme-light .devtools-searchinput { - background-image: url(magnifying-glass-light@2x.png); - } -} - /* Close button */ .devtools-closebutton { @@ -911,17 +814,13 @@ div.CodeMirror span.eval-text { } .devtools-sidebar-alltabs { - -moz-appearance: none; - height: 24px; - line-height: 24px; - padding: 0 4px; margin: 0; border-width: 0 0 1px 0; -moz-border-start-width: 1px; border-style: solid; } -.devtools-sidebar-alltabs .toolbarbutton-icon { +.devtools-sidebar-alltabs dropmarker { display: none; } @@ -951,57 +850,73 @@ div.CodeMirror span.eval-text { text-shadow: none; } -.devtools-sidebar-tabs tabs > tab { - border-image: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%) 1 1; -} - -.devtools-sidebar-tabs tabs > tab[selected], -.devtools-sidebar-tabs tabs > tab[selected] + tab { - border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1; -} - .devtools-sidebar-tabs tabs > tab:first-child { -moz-border-start-width: 0; } +.theme-dark .devtools-sidebar-tabs tabs > tab { + border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; +} + .theme-dark .devtools-sidebar-tabs tabs > tab:hover { background: hsla(206,37%,4%,.2); + border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; } .theme-dark .devtools-sidebar-tabs tabs > tab:hover:active { background: hsla(206,37%,4%,.4); + border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1; +} + +.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab { + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; } .theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { background: hsla(206,37%,4%,.2); + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; } .theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active { background: hsla(206,37%,4%,.4); + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; } .theme-dark .devtools-sidebar-tabs tabs > tab[selected], .theme-dark .devtools-sidebar-tabs tabs > tab[selected]:hover:active { color: var(--theme-selection-color); background: #1d4f73; + border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1; +} + +.theme-light .devtools-sidebar-tabs tabs > tab { + border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; } .theme-light .devtools-sidebar-tabs tabs > tab:hover { background: #ddd; + border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; } .theme-light .devtools-sidebar-tabs tabs > tab:hover:active { background: #ddd; + border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1; +} + +.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab { + border-image: linear-gradient(#aaa, #aaa); } .theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab:hover { background: #ddd; + border-image: linear-gradient(#aaa, #aaa); } .theme-light .devtools-sidebar-tabs tabs > tab[selected], .theme-light .devtools-sidebar-tabs tabs > tab[selected]:hover:active { color: var(--theme-selection-color); background: #4c9ed9; + border-image: linear-gradient(#aaa, #aaa); } /* Toolbox - moved from toolbox.css. @@ -1044,20 +959,6 @@ 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 { @@ -1166,11 +1067,7 @@ div.CodeMirror span.eval-text { background-image: url("chrome://browser/skin/devtools/command-eyedropper.png"); } -#command-button-rulers > image { - background-image: url("chrome://browser/skin/devtools/command-rulers.png"); -} - -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #command-button-paintflashing > image { background-image: url("chrome://browser/skin/devtools/command-paintflashing@2x.png"); } @@ -1206,10 +1103,6 @@ div.CodeMirror span.eval-text { #command-button-eyedropper > image { background-image: url("chrome://browser/skin/devtools/command-eyedropper@2x.png"); } - - #command-button-rulers > image { - background-image: url("chrome://browser/skin/devtools/command-rulers@2x.png"); - } } /* Tabs */ @@ -1279,12 +1172,9 @@ div.CodeMirror span.eval-text { background-color: rgba(170,170,170,.4); } -.devtools-tab:not([selected])[highlighted] { - box-shadow: 0 2px 0 var(--theme-highlight-green) inset; -} - .theme-dark .devtools-tab:not([selected])[highlighted] { background-color: hsla(99,100%,14%,.2); + box-shadow: 0 2px 0 #7bc107 inset; } .theme-light .devtools-tab:not([selected])[highlighted] { diff --git a/arc-firefox-theme/chrome/browser/devtools/netmonitor.css b/arc-firefox-theme/chrome/browser/devtools/netmonitor.css index 9448a39..1724759 100644 --- a/arc-firefox-theme/chrome/browser/devtools/netmonitor.css +++ b/arc-firefox-theme/chrome/browser/devtools/netmonitor.css @@ -7,15 +7,6 @@ * 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; @@ -42,6 +33,7 @@ margin: 0; } + /* Network requests table */ #requests-menu-toolbar { @@ -57,9 +49,26 @@ padding: 3px; } -.requests-menu-header:not(:last-child), -.requests-menu-subitem:not(:last-child) { - -moz-border-end: 1px solid var(--table-splitter-color); +.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-button { @@ -129,8 +138,12 @@ -moz-margin-end: 4px; } -.requests-menu-icon { - outline: 1px solid var(--table-splitter-color); +.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-file { @@ -143,28 +156,35 @@ } .requests-security-state-icon { - width: 16px; - height: 16px; -moz-margin-end: 4px; + -moz-image-region:rect(0px, 16px, 16px, 0px); +} + +.requests-security-state-icon:hover { + -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-not-secure.svg); + list-style-image: url(chrome://browser/skin/identity-icons-generic.png); } .security-state-secure { cursor: pointer; - list-style-image: url(chrome://browser/skin/identity-secure.svg); + list-style-image: url(chrome://browser/skin/identity-icons-https.png); } .security-state-weak { cursor: pointer; - list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png); } .security-state-broken { cursor: pointer; - list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg); + list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active.png); } .requests-menu-type { @@ -199,42 +219,70 @@ label.requests-menu-status-code { -moz-margin-end: -3em !important; } -box.requests-menu-status:not([code]) { - background-color: var(--theme-content-color2); +.theme-dark box.requests-menu-status:not([code]) { + background-color: rgba(95, 115, 135, 1); /* dark grey */ +} + +.theme-light box.requests-menu-status:not([code]) { + background-color: rgba(143, 161, 178, 1); /* grey */ } -box.requests-menu-status[code="cached"] { - border: 2px solid var(--theme-content-color2); - background-color: transparent; +.theme-dark box.requests-menu-status[code^="1"] { + background-color: rgba(70, 175, 227, 1); /* light blue */ } -box.requests-menu-status[code^="1"] { - background-color: var(---theme-highlight-blue); +.theme-light box.requests-menu-status[code^="1"] { + background-color: rgba(0, 136, 204, 1); /* light blue */ } -box.requests-menu-status[code^="2"] { - background-color: var(--theme-highlight-green); +.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 */ } /* 3xx are triangles */ -box.requests-menu-status[code^="3"] { +.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"] { background-color: transparent; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; - border-bottom: 10px solid var(--theme-highlight-lightorange); + border-bottom: 10px solid rgba(217, 126, 0, 1); /* light orange */ border-radius: 0; } /* 4xx and 5xx are squares - error codes */ -box.requests-menu-status[code^="4"] { - background-color: var(--theme-highlight-red); +.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 */ border-radius: 0; /* squares */ } -box.requests-menu-status[code^="5"] { - background-color: var(--theme-highlight-pink); +.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! */ border-radius: 0; transform: rotate(45deg); } @@ -375,26 +423,17 @@ box.requests-menu-status[code^="5"] { } /* 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; } -.side-menu-widget-item:not(.selected)[odd] { - background-color: var(--table-zebra-background); +.theme-dark .side-menu-widget-item:not(.selected)[odd] { + background: rgba(255,255,255,0.05); } -.side-menu-widget-item:not(.selected):hover { - background-color: var(--theme-selection-background-semitransparent); +.theme-light .side-menu-widget-item:not(.selected)[odd] { + background: rgba(128,128,128,0.05); } /* Network request details */ @@ -420,7 +459,7 @@ box.requests-menu-status[code^="5"] { -moz-image-region: rect(0px,32px,16px,16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #details-pane-toggle { list-style-image: url("chrome://browser/skin/devtools/debugger-collapse@2x.png"); -moz-image-region: rect(0px,32px,32px,0px); @@ -437,16 +476,9 @@ box.requests-menu-status[code^="5"] { /* Network request details tabpanels */ -.tabpanel-content { - background-color: var(--theme-sidebar-background); -} - .theme-dark .tabpanel-content { - color: var(--theme-selection-color); -} - -#headers-tabpanel { background-color: var(--theme-toolbar-background); + color: var(--theme-selection-color); } /* Summary tabpanel */ @@ -466,10 +498,6 @@ box.requests-menu-status[code^="5"] { -moz-padding-start: 3px; } -.theme-dark .tabpanel-summary-value { - color: var(--theme-selection-color); -} - /* Headers tabpanel */ #headers-summary-status, @@ -560,7 +588,7 @@ box.requests-menu-status[code^="5"] { height: 12px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .security-warning-icon { background-image: url(alerticon-warning@2x.png); } @@ -586,9 +614,16 @@ box.requests-menu-status[code^="5"] { /* Footer */ -#requests-menu-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; background-color: var(--theme-toolbar-background); - border-top: 1px solid var(--table-splitter-color); } .requests-menu-footer-button, @@ -615,12 +650,14 @@ box.requests-menu-status[code^="5"] { .theme-dark .requests-menu-footer-spacer:not(:first-child), .theme-dark .requests-menu-footer-button:not(:first-child) { - -moz-border-start: 1px solid var(--table-splitter-color); + -moz-border-start: 1px solid rgba(128,128,128,0.15); + box-shadow: -1px 0 0 rgba(0,0,0,0.2); } .theme-light .requests-menu-footer-spacer:not(:first-child), .theme-light .requests-menu-footer-button:not(:first-child) { - -moz-border-start: 1px solid var(--table-splitter-color); + -moz-border-start: 1px solid transparent; + box-shadow: -1px 0 0 rgba(128,128,128,0.25); } .requests-menu-footer-button { @@ -632,40 +669,27 @@ box.requests-menu-status[code^="5"] { background: rgba(0,0,0,0.10); } -.requests-menu-footer-button:hover:active { - background-color: var(--theme-selection-background-semitransparent); -} - -.requests-menu-footer-button:not(:active)[checked] { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); -} - -.requests-menu-footer-label { - padding-top: 3px; - font-weight: 600; +.theme-dark .requests-menu-footer-button:hover:active { + background-color: rgba(29,79,115,0.4); /* Select Highlight Blue at 40% opacity */ } -#requests-menu-filter-freetext-text { - transition-property: max-width, -moz-padding-end, -moz-padding-start; - transition-duration: 250ms; - transition-timing-function: ease; +.theme-light .requests-menu-footer-button:hover:active { + background-color: rgba(76,158,217,0.4); /* Select Highlight Blue at 40% opacity */ } -#requests-menu-filter-freetext-text:not([focused]):not([filled]) > .textbox-input-box { - overflow: hidden; +.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 */ } -#requests-menu-filter-freetext-text:not([focused]):not([filled]) { - max-width: 20px !important; - -moz-padding-end: 5px; - -moz-padding-start: 22px; - background-position: 8px center, top left, top left; +.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-filter-freetext-text[focused], -#requests-menu-filter-freetext-text[filled] { - max-width: 200px !important; +.requests-menu-footer-label { + padding-top: 3px; + font-weight: 600; } /* Performance analysis buttons */ @@ -718,7 +742,7 @@ box.requests-menu-status[code^="5"] { } #network-statistics-charts { - background-color: var(--theme-sidebar-background); + background-color: var(--theme-toolbar-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 a115938..8bea997 100644 --- a/arc-firefox-theme/chrome/browser/devtools/performance-icons.svg +++ b/arc-firefox-theme/chrome/browser/devtools/performance-icons.svg @@ -1,45 +1,42 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/performance.css b/arc-firefox-theme/chrome/browser/devtools/performance.css index 8eafa36..198e56a 100644 --- a/arc-firefox-theme/chrome/browser/devtools/performance.css +++ b/arc-firefox-theme/chrome/browser/devtools/performance.css @@ -1,3 +1,7 @@ +/* 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, @@ -6,7 +10,6 @@ /* 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); @@ -14,7 +17,6 @@ .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); @@ -22,8 +24,13 @@ /* Toolbar */ -#performance-toolbar-control-other { - -moz-padding-end: 5px; +#performance-toolbar > tabs, +#performance-toolbar { + -moz-border-end-color: var(--theme-splitter-color); +} + +#performance-toolbar-controls-detail-views > toolbarbutton { + min-width: 0; } #performance-toolbar-controls-detail-views .toolbarbutton-text { @@ -31,167 +38,69 @@ -moz-padding-end: 8px; } -#filter-button { - list-style-image: url(timeline-filter.svg#filter); - min-width: 24px; -} - -#filter-button[disabled] { - list-style-image: url(timeline-filter.svg#filter-disabled); -} - -#filter-button[open] { - list-style-image: url(timeline-filter.svg#filter-open); -} - -#performance-filter-menupopup > menuitem:before { - content: ""; - display: block; - width: 8px; - height: 8px; - margin: 0 8px; - border-radius: 1px; -} +/* Recording Notice */ -/* Details panel buttons */ - -#select-waterfall-view { - list-style-image: url(performance-icons.svg#details-waterfall); -} - -#select-js-calltree-view, -#select-memory-calltree-view { - list-style-image: url(performance-icons.svg#details-call-tree); -} - -#select-js-flamegraph-view, -#select-memory-flamegraph-view { - list-style-image: url(performance-icons.svg#details-flamegraph); +#performance-view .notice-container { + font-size: 120%; + background-color: var(--theme-toolbar-background); + color: var(--theme-body-color); + padding-bottom: 20vh; } -#select-optimizations-view { - list-style-image: url(profiler-stopwatch.svg); +#performance-view .notice-container button { + min-width: 30px; + min-height: 28px; + margin: 0; } -/* Recording buttons */ +/* Overview Panel */ -#main-record-button { +.record-button { list-style-image: url(profiler-stopwatch.svg); } -#main-record-button[checked] { +.record-button[checked] { list-style-image: url(profiler-stopwatch-checked.svg); } -#main-record-button .button-icon { - margin: 0; -} - -#main-record-button .button-text { - display: none; -} - -.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; -} - .record-button[locked] { pointer-events: none; - opacity: 0.5; -} - -/* Sidebar & 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; -} - -/* Recording notices */ - -.notice-container { - font-size: 120%; - background-color: var(--theme-toolbar-background); - color: var(--theme-body-color); - padding-bottom: 20vh; } -.console-profile-command { - font-family: monospace; - margin: 3px 2px; +.record-button .button-icon { + margin: 0; } -.realtime-disabled-message, -.realtime-disabled-on-e10s-message { +.record-button .button-text { display: none; } -#performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message { - display: initial; - opacity: 0.5; - -} -#performance-view[e10s="unsupported"] .realtime-disabled-message { - display: initial; - opacity: 0.5; -} +/* Details Panel */ -.buffer-status-message, -.buffer-status-message-full { - display: none; -} - -#details-pane-container[buffer-status="in-progress"] .buffer-status-message { - display: initial; - opacity: 0.5; +#select-waterfall-view { + list-style-image: url(performance-icons.svg#details-waterfall); } -#details-pane-container[buffer-status="full"] .buffer-status-message { - display: initial; - color: var(--theme-highlight-red); - font-weight: bold; - opacity: 1; +#select-js-calltree-view, +#select-memory-calltree-view { + list-style-image: url(performance-icons.svg#details-call-tree); } -#details-pane-container[buffer-status="full"] .buffer-status-message-full { - display: initial; +#select-js-flamegraph-view, +#select-memory-flamegraph-view { + list-style-image: url(performance-icons.svg#details-flamegraph); } /* Profile call tree */ .call-tree-cells-container { + /* Hack: force hardware acceleration */ + transform: translateZ(1px); overflow: auto; } +.call-tree-cells-container[allocations-hidden] .call-tree-cell[type="allocations"], +.call-tree-cells-container[allocations-hidden] .call-tree-cell[type="self-allocations"], .call-tree-cells-container[categories-hidden] .call-tree-category { display: none; } @@ -221,11 +130,11 @@ width: 4.5vw; } -.call-tree-header[type="count"], -.call-tree-cell[type="count"], -.call-tree-header[type="self-count"], -.call-tree-cell[type="self-count"] { - width: 9vw; +.call-tree-header[type="allocations"], +.call-tree-cell[type="allocations"], +.call-tree-header[type="self-allocations"], +.call-tree-cell[type="self-allocations"] { + width: 7vw; } .call-tree-header[type="function"], @@ -260,7 +169,7 @@ background-color: var(--theme-tab-toolbar-background); } -.call-tree-item:last-child { +.call-tree-item:last-child:not(:focus) { border-bottom: 1px solid var(--cell-border-color); } @@ -276,7 +185,7 @@ background-color: var(--theme-selection-background); } -.call-tree-item:focus description { +.call-tree-item:focus label { color: var(--theme-selection-color) !important; } @@ -292,11 +201,8 @@ opacity: 0.6; } -.call-tree-name { - -moz-margin-end: 4px !important; -} - .call-tree-url { + -moz-margin-start: 4px !important; cursor: pointer; } @@ -304,11 +210,11 @@ text-decoration: underline; } -.call-tree-url, .tree-widget-item:not(.theme-selected) .opt-url { +.call-tree-url { color: var(--theme-highlight-blue); } -.call-tree-line, .tree-widget-item:not(.theme-selected) .opt-line { +.call-tree-line { color: var(--theme-highlight-orange); } @@ -323,131 +229,127 @@ color: var(--theme-content-color2); } -.call-tree-category { - transform: scale(0.75); - transform-origin: center right; +.call-tree-name[value=""], +.call-tree-url[value=""], +.call-tree-line[value=""], +.call-tree-column[value=""], +.call-tree-host[value=""] { + display: none; } -/** - * Waterfall ticks header - */ +.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; +} -.waterfall-header-ticks { - overflow: hidden; +.theme-dark .call-tree-zoom { + background-image: url(magnifying-glass.png); } -.waterfall-header-name { - padding: 2px 4px; - font-size: 90%; +.theme-light .call-tree-zoom { + background-image: url(magnifying-glass-light.png); } -.waterfall-header-tick { - width: 100px; - font-size: 9px; - transform-origin: left center; - color: var(--theme-body-color); +@media (min-resolution: 2dppx) { + .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-tick:not(:first-child) { - -moz-margin-start: -100px !important; /* Don't affect layout. */ +.call-tree-item:hover .call-tree-zoom { + transition: opacity 0.3s ease-in; + opacity: 1; } -.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; +.call-tree-item:hover .call-tree-zoom:hover { + opacity: 0; +} + +.call-tree-category { + transform: scale(0.75); + transform-origin: center right; } /** - * Markers waterfall breakdown + * Details Waterfall Styles */ -#waterfall-breakdown { +.waterfall-list-contents { + /* Hack: force hardware acceleration */ + transform: translateZ(1px); overflow-x: hidden; overflow-y: auto; } -.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-header-contents { + overflow-x: hidden; } -.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-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-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 - ); +.waterfall-marker-container[is-spacer] { + pointer-events: none; } -.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-dark .waterfall-marker-container:not([is-spacer]):nth-child(2n) { + background-color: rgba(255,255,255,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-light .waterfall-marker-container:not([is-spacer]):nth-child(2n) { + background-color: rgba(128,128,128,0.03); } -.waterfall-tree-item:nth-child(2n) > .waterfall-marker { - background-color: var(--row-alt-background-color); +.theme-dark .waterfall-marker-container:hover { + background-color: rgba(255,255,255,0.1) !important; } -.waterfall-tree-item:hover { - background-color: var(--row-hover-background-color); +.theme-light .waterfall-marker-container:hover { + background-color: rgba(128,128,128,0.1) !important; } -.waterfall-tree-item:last-child { - border-bottom: 1px solid var(--cell-border-color); +.waterfall-marker-item { + overflow: hidden; } -.waterfall-tree-item:focus { - background-color: var(--theme-selection-background); +.waterfall-sidebar { + -moz-border-end: 1px solid var(--theme-splitter-color); } -.waterfall-tree-item:focus description { - color: var(--theme-selection-color) !important; +.waterfall-marker-container:hover > .waterfall-sidebar { + background-color: transparent; } -/** - * Marker left sidebar - */ +.waterfall-header-name { + padding: 2px 4px; + font-size: 90%; +} -.waterfall-sidebar { - -moz-border-end: 1px solid var(--cell-border-color); +.waterfall-header-tick { + width: 100px; + font-size: 9px; + transform-origin: left center; + color: var(--theme-body-color); } -.waterfall-tree-item > .waterfall-sidebar:hover, -.waterfall-tree-item:hover > .waterfall-sidebar, -.waterfall-tree-item:focus > .waterfall-sidebar { - background: transparent; +.waterfall-header-tick:not(:first-child) { + -moz-margin-start: -100px !important; /* Don't affect layout. */ } .waterfall-marker-bullet { @@ -455,6 +357,7 @@ height: 8px; -moz-margin-start: 8px; -moz-margin-end: 6px; + border: 1px solid; border-radius: 1px; } @@ -463,48 +366,51 @@ padding-bottom: 1px !important; } -/** - * Marker timebar - */ - -.waterfall-marker { - overflow: hidden; -} - .waterfall-marker-bar { height: 9px; - transform-origin: left center; + border: 1px solid; border-radius: 1px; + transform-origin: left center; } -.waterfall-marker > .theme-twisty { - /* Don't affect layout. */ - width: 14px; - -moz-margin-end: -14px; +.waterfall-marker-container.selected > .waterfall-sidebar, +.waterfall-marker-container.selected > .waterfall-marker-item { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); } -/** - * Marker details view - */ +.waterfall-marker-container.selected .waterfall-marker-bullet, +.waterfall-marker-container.selected .waterfall-marker-bar { + border-color: initial !important; +} + +.waterfall-marker-location { + color: -moz-nativehyperlinktext; +} + +.waterfall-marker-location:hover, +.waterfall-marker-location:focus { + text-decoration: underline; +} #waterfall-details { -moz-padding-start: 8px; -moz-padding-end: 8px; padding-top: 2vh; overflow: auto; - min-width: 50px; -} - -#waterfall-details > * { - padding-top: 3px; } .marker-details-bullet { width: 8px; height: 8px; + border: 1px solid; border-radius: 1px; } +#waterfall-details > * { + padding-top: 3px; +} + .marker-details-labelname { -moz-padding-end: 4px; } @@ -518,205 +424,32 @@ font-weight: bold; } -/** - * Marker colors - */ +/* Recording items */ -menuitem.marker-color-graphs-purple:before, -.marker-color-graphs-purple { - background-color: var(--theme-graphs-purple); -} -menuitem.marker-color-graphs-grey:before, -.marker-color-graphs-grey{ - background-color: var(--theme-graphs-grey); -} -menuitem.marker-color-graphs-green:before, -.marker-color-graphs-green { - background-color: var(--theme-graphs-green); -} -menuitem.marker-color-graphs-yellow:before, -.marker-color-graphs-yellow { - background-color: var(--theme-graphs-yellow); -} -menuitem.marker-color-graphs-red:before, -.marker-color-graphs-red { - background-color: var(--theme-graphs-red); -} -menuitem.marker-color-graphs-blue:before, -.marker-color-graphs-blue { - background-color: var(--theme-graphs-blue); -} - -/** - * JIT View - */ - -#jit-optimizations-view { - width: 350px; - overflow-x: hidden; - overflow-y: auto; - min-width: 200px; -} - -/* override default styles for tree widget */ -#jit-optimizations-view .tree-widget-empty-text { - font-size: inherit; - padding: 0px; - margin: 8px; -} - -#jit-optimizations-view:not(.empty) .tree-widget-empty-text { - display: none; -} - -#jit-optimizations-toolbar { - height: 18px; - min-height: 0px; /* override .devtools-toolbar min-height */ +.recording-item { + padding: 4px; } -.jit-optimizations-title { - margin: 0px 4px; - font-weight: 600; +.recording-item-title { + font-size: 110%; } -#jit-optimizations-raw-view { +.recording-item-footer { + padding-top: 4px; font-size: 90%; } -/* override default .tree-widget-item line-height */ -#jit-optimizations-raw-view .tree-widget-item { - line-height: 20px !important; - display: block; - overflow: hidden; -} - -#jit-optimizations-raw-view .tree-widget-item[level="1"] { - font-weight: 600; -} - -#jit-optimizations-view .opt-outcome::before { - content: "→"; - margin: 4px 0px; - color: var(--theme-body-color); -} -#jit-optimizations-view .theme-selected .opt-outcome::before { - color: var(--theme-selection-color); -} - -#jit-optimizations-view .tree-widget-item:not(.theme-selected) .opt-outcome[outcome=success] { - color: var(--theme-highlight-green); -} -#jit-optimizations-view .tree-widget-item:not(.theme-selected) .opt-outcome[outcome=failure] { - color: var(--theme-highlight-red); -} -#jit-optimizations-view .tree-widget-container { - -moz-margin-end: 0px; -} -#jit-optimizations-view .tree-widget-container > li, -#jit-optimizations-view .tree-widget-children > li { - overflow: hidden; -} - -.opt-line::before { - content: ":"; - color: var(--theme-highlight-orange); -} -.theme-selected .opt-line::before { - color: var(--theme-selection-color); -} -.opt-line.header-line::before { - color: var(--theme-body-color); -} -#jit-optimizations-view.empty .opt-line.header-line::before { - display: none; -} - -.opt-url { - -moz-margin-start: 4px !important; -} -.opt-url:hover { +.recording-item-save { text-decoration: underline; -} -.opt-url.debugger-link { - cursor: pointer; -} - -.opt-icon::before { - content: ""; - background-image: url(chrome://browser/skin/devtools/webconsole.svg); - background-repeat: no-repeat; - 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; } -ul.frames-list { - list-style-type: none; - padding: 0px; - margin: 0px; -} - -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. - */ - -/** - * devtools.performance.ui.experimental - */ -menuitem.experimental-option::before { - content: ""; - background-image: url(chrome://browser/skin/devtools/webconsole.svg); - background-repeat: no-repeat; - background-size: 72px 60px; - width: 12px; - height: 12px; - display: inline-block; - - background-position: -24px -24px; - margin: 2px 5px 0 0; - max-height: 12px; -} -.theme-light menuitem.experimental-option::before { - background-image: url(chrome://browser/skin/devtools/webconsole.svg#light-icons); +.recording-item-duration, +.recording-item-save { + color: var(--theme-body-color-alt); } -#performance-options-menupopup:not(.experimental-enabled) .experimental-option, -#performance-options-menupopup:not(.experimental-enabled) .experimental-option::before { - display: none; +#recordings-list .selected label { + /* Text inside a selected item should not be custom colored. */ + color: inherit !important; } diff --git a/arc-firefox-theme/chrome/browser/devtools/power.svg b/arc-firefox-theme/chrome/browser/devtools/power.svg index d3a3284..2888951 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 abe68dc..f682354 100644 --- a/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch-checked.svg +++ b/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch-checked.svg @@ -1,17 +1,14 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch.svg b/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch.svg index 690fc7d..d8e1bdd 100644 --- a/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch.svg +++ b/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch.svg @@ -1,17 +1,14 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/profiler.css b/arc-firefox-theme/chrome/browser/devtools/profiler.css new file mode 100644 index 0000000..2e29fe8 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/profiler.css @@ -0,0 +1,402 @@ +/* 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: 2dppx) { + .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[allocations-hidden] .call-tree-cell[type="allocations"], +.call-tree-cells-container[allocations-hidden] .call-tree-cell[type="self-allocations"], +.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: 2dppx) { + .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/promisedebugger.css b/arc-firefox-theme/chrome/browser/devtools/promisedebugger.css deleted file mode 100644 index e003224..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/promisedebugger.css +++ /dev/null @@ -1,3 +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/. */ diff --git a/arc-firefox-theme/chrome/browser/devtools/pseudo-class.svg b/arc-firefox-theme/chrome/browser/devtools/pseudo-class.svg deleted file mode 100644 index 830d5fa..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/pseudo-class.svg +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/devtools/rewind.png b/arc-firefox-theme/chrome/browser/devtools/rewind.png deleted file mode 100644 index 098e256..0000000 Binary files a/arc-firefox-theme/chrome/browser/devtools/rewind.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/devtools/rewind@2x.png b/arc-firefox-theme/chrome/browser/devtools/rewind@2x.png deleted file mode 100644 index eaac45d..0000000 Binary files a/arc-firefox-theme/chrome/browser/devtools/rewind@2x.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/devtools/ruleview.css b/arc-firefox-theme/chrome/browser/devtools/ruleview.css index 8fad666..2bc650f 100644 --- a/arc-firefox-theme/chrome/browser/devtools/ruleview.css +++ b/arc-firefox-theme/chrome/browser/devtools/ruleview.css @@ -2,29 +2,20 @@ * 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-light { - --rule-highlight-background-color: #ffee99; -} - -.theme-dark { - --rule-highlight-background-color: #594724; -} - .ruleview { height: 100%; } .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,11 +48,7 @@ padding: 2px 4px; } -/** - * Display rules that don't match the current selected element and uneditable - * user agent styles differently - */ -.ruleview-rule[unmatched=true], +/* User agent styles are not editable, display them differently */ .ruleview-rule[uneditable=true] { background: var(--theme-tab-toolbar-background); } @@ -78,13 +65,14 @@ visibility: hidden; } -.ruleview-rule[uneditable=true] .ruleview-swatch { +.ruleview-rule[uneditable=true] .ruleview-colorswatch, +.ruleview-rule[uneditable=true] .ruleview-bezierswatch { cursor: default; } + .ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname, -.ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer > -.ruleview-propertyvalue { +.ruleview-rule[uneditable=true] .ruleview-propertycontainer > .ruleview-propertyvalue { border-bottom-color: transparent; } @@ -109,7 +97,7 @@ } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .ruleview-warning { background-image: url(alerticon-warning@2x.png); } @@ -144,7 +132,7 @@ } .ruleview-namecontainer, -.ruleview-propertyvaluecontainer, +.ruleview-propertycontainer, .ruleview-propertyname, .ruleview-propertyvalue { text-decoration: inherit; @@ -159,12 +147,13 @@ -moz-margin-start: 35px; } -.ruleview-swatch { +.ruleview-colorswatch, +.ruleview-bezierswatch { cursor: pointer; border-radius: 50%; - width: 0.9em; - height: 0.9em; - vertical-align: middle; + width: 1em; + height: 1em; + vertical-align: text-top; -moz-margin-end: 5px; display: inline-block; position: relative; @@ -191,12 +180,7 @@ background-size: 1em; } -.ruleview-filterswatch { - background: url("chrome://browser/skin/devtools/filter-swatch.svg"); - background-size: 1em; -} - -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .ruleview-bezierswatch { background: url("chrome://browser/skin/devtools/cubic-bezier-swatch@2x.png"); background-size: 1em; @@ -221,7 +205,7 @@ clear: right; } -.ruleview-propertycontainer > * { +.ruleview-property > * { vertical-align: middle; } @@ -229,90 +213,20 @@ border-left-color: var(--theme-highlight-green); } -.ruleview-highlight { - background-color: var(--rule-highlight-background-color); -} - .ruleview-namecontainer > .ruleview-propertyname, -.ruleview-propertyvaluecontainer > .ruleview-propertyvalue { +.ruleview-propertycontainer > .ruleview-propertyvalue { border-bottom: 1px dashed transparent; } .ruleview-namecontainer:hover > .ruleview-propertyname, -.ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue { +.ruleview-propertycontainer:hover > .ruleview-propertyvalue { border-bottom-color: hsl(0,0%,50%); } -.ruleview-selectorcontainer { +.ruleview-selector { word-wrap: break-word; - cursor: text; } .ruleview-selector-separator, .ruleview-selector-unmatched { color: #888; } - -.ruleview-selector-matched > .ruleview-selector-attribute { - /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */ -} - -.ruleview-selector-matched > .ruleview-selector-pseudo-class { - /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */ -} - -.ruleview-selector-matched > .ruleview-selector-pseudo-class-lock { - font-weight: bold; - color: var(--theme-highlight-orange); -} - -.ruleview-selectorhighlighter { - background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0; - padding-left: 16px; - margin-left: 5px; - cursor: pointer; -} - -.ruleview-selectorhighlighter:hover { - background-position: -32px 0; -} - -.ruleview-selectorhighlighter:active, -.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/scratchpad.css b/arc-firefox-theme/chrome/browser/devtools/scratchpad.css index 4c8a5d1..96d6f70 100644 --- a/arc-firefox-theme/chrome/browser/devtools/scratchpad.css +++ b/arc-firefox-theme/chrome/browser/devtools/scratchpad.css @@ -1,3 +1,7 @@ +/* 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/. */ + #scratchpad-sidebar > tabs { height: 0; diff --git a/arc-firefox-theme/chrome/browser/devtools/search-clear-dark.svg b/arc-firefox-theme/chrome/browser/devtools/search-clear-dark.svg deleted file mode 100644 index 422a7ce..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/search-clear-dark.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/devtools/search-clear-failed.svg b/arc-firefox-theme/chrome/browser/devtools/search-clear-failed.svg deleted file mode 100644 index a8f9fd8..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/search-clear-failed.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/devtools/search-clear-light.svg b/arc-firefox-theme/chrome/browser/devtools/search-clear-light.svg deleted file mode 100644 index 066ef44..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/search-clear-light.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/devtools/shadereditor.css b/arc-firefox-theme/chrome/browser/devtools/shadereditor.css index 9ba9ff8..3d01e20 100644 --- a/arc-firefox-theme/chrome/browser/devtools/shadereditor.css +++ b/arc-firefox-theme/chrome/browser/devtools/shadereditor.css @@ -1,3 +1,7 @@ +/* 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/. */ + /* 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/. */ @@ -60,7 +64,7 @@ border: 0; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .side-menu-widget-item-checkbox .checkbox-check { background-image: url(itemToggle@2x.png); } diff --git a/arc-firefox-theme/chrome/browser/devtools/splitview.css b/arc-firefox-theme/chrome/browser/devtools/splitview.css index 902fedb..9710c38 100644 --- a/arc-firefox-theme/chrome/browser/devtools/splitview.css +++ b/arc-firefox-theme/chrome/browser/devtools/splitview.css @@ -133,3 +133,20 @@ min-width: 48px; min-height: 0; } + + +/* Resizers */ + +.splitview-portrait-resizer { + -moz-appearance: none; + background: linear-gradient(black 1px, rgba(255,255,255,0.2) 1px), + linear-gradient(hsl(210,11%,36%), hsl(210,11%,18%)); + height: 12px; + background-size: 10px 2px, 100% 12px; + background-clip: content-box, border-box; + background-repeat: repeat-y, no-repeat; + background-position: center center; + padding: 2px 0; + border-top: 1px solid hsla(210,8%,5%,.5); + border-bottom: 1px solid hsla(210,8%,5%,.5); +} diff --git a/arc-firefox-theme/chrome/browser/devtools/storage.css b/arc-firefox-theme/chrome/browser/devtools/storage.css index a5a897e..5f6d78e 100644 --- a/arc-firefox-theme/chrome/browser/devtools/storage.css +++ b/arc-firefox-theme/chrome/browser/devtools/storage.css @@ -10,8 +10,8 @@ overflow: auto; } -#storage-tree { - background: var(--theme-sidebar-background); +.theme-dark #storage-tree { + background: #343c45; /* Toolbars */ } #storage-tree .tree-widget-item[type="store"]:after { diff --git a/arc-firefox-theme/chrome/browser/devtools/styleeditor.css b/arc-firefox-theme/chrome/browser/devtools/styleeditor.css index a4a300f..788d4aa 100644 --- a/arc-firefox-theme/chrome/browser/devtools/styleeditor.css +++ b/arc-firefox-theme/chrome/browser/devtools/styleeditor.css @@ -115,7 +115,7 @@ height: 40px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .stylesheet-enabled { background-image: url(itemToggle@2x.png); } diff --git a/arc-firefox-theme/chrome/browser/devtools/timeline-filter.svg b/arc-firefox-theme/chrome/browser/devtools/timeline-filter.svg index 1919e2c..60ebf9a 100644 --- a/arc-firefox-theme/chrome/browser/devtools/timeline-filter.svg +++ b/arc-firefox-theme/chrome/browser/devtools/timeline-filter.svg @@ -2,25 +2,36 @@ - - - - - - - - + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/timeline.css b/arc-firefox-theme/chrome/browser/devtools/timeline.css new file mode 100644 index 0000000..503527b --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/timeline.css @@ -0,0 +1,250 @@ +/* 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/. */ + +#record-button { + list-style-image: url(profiler-stopwatch.svg); + min-width: 24px; +} + +#record-button[checked] { + list-style-image: url(profiler-stopwatch-checked.svg); +} + +#record-button:not([checked]) ~ #record-label { + visibility: hidden; +} + +#memory-checkbox .checkbox-label { + line-height: 100%; +} + +#filter-button { + list-style-image: url(timeline-filter.svg#filter); + min-width: 24px; +} + +#filter-button[disabled] { + list-style-image: url(timeline-filter.svg#filter-disabled); +} + +#filter-button[open] { + list-style-image: url(timeline-filter.svg#filter-open); +} + +#timelineFilterPopup > menuitem:before { + content: ""; + display: block; + width: 8px; + height: 8px; + margin: 0 8px; + border: 1px solid; + border-radius: 1px; + background-color: var(--bullet-bg); + border-color: var(--bullet-border); +} + +.notice-container { + font-size: 120%; + padding-bottom: 35vh; +} + +.theme-dark .notice-container { + background: #343c45; /* Toolbars */ + color: #f5f7fa; /* Light foreground text */ +} + +.theme-light .notice-container { + background: #f0f1f2; /* Toolbars */ + color: #585959; /* Grey foreground text */ +} + +#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 #timeline-pane { + border-top: 1px solid #000; +} + +.theme-light #timeline-pane { + border-top: 1px solid #aaa; +} + +.waterfall-list-contents { + /* Hack: force hardware acceleration */ + transform: translateZ(1px); + overflow-x: hidden; + overflow-y: auto; +} + +.waterfall-header-contents { + overflow-x: hidden; +} + +.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; +} + +.waterfall-marker-container[is-spacer] { + pointer-events: none; +} + +.theme-dark .waterfall-marker-container:not([is-spacer]):nth-child(2n) { + background-color: rgba(255,255,255,0.03); +} + +.theme-light .waterfall-marker-container:not([is-spacer]):nth-child(2n) { + background-color: rgba(128,128,128,0.03); +} + +.theme-dark .waterfall-marker-container:hover { + background-color: rgba(255,255,255,0.1) !important; +} + +.theme-light .waterfall-marker-container:hover { + background-color: rgba(128,128,128,0.1) !important; +} + +.waterfall-marker-item { + overflow: hidden; +} + +.waterfall-sidebar { + -moz-border-end: 1px solid; +} + +.theme-dark .waterfall-sidebar { + -moz-border-end-color: #000; +} + +.theme-light .waterfall-sidebar { + -moz-border-end-color: #aaa; +} + +.waterfall-marker-container:hover > .waterfall-sidebar { + background-color: transparent; +} + +.waterfall-header-name { + padding: 4px; +} + +.waterfall-header-tick { + width: 100px; + font-size: 9px; + transform-origin: left center; +} + +.theme-dark .waterfall-header-tick { + color: #a9bacb; +} + +.theme-light .waterfall-header-tick { + color: #292e33; +} + +.waterfall-header-tick:not(:first-child) { + -moz-margin-start: -100px !important; /* Don't affect layout. */ +} + +.waterfall-marker-bullet { + width: 8px; + height: 8px; + -moz-margin-start: 8px; + -moz-margin-end: 6px; + border: 1px solid; + border-radius: 1px; +} + +.waterfall-marker-name { + font-size: 95%; + padding-bottom: 1px !important; +} + +.waterfall-marker-bar { + height: 9px; + border: 1px solid; + border-radius: 1px; + transform-origin: left center; +} + +.theme-light .waterfall-marker-container.selected > .waterfall-sidebar, +.theme-light .waterfall-marker-container.selected > .waterfall-marker-item { + background-color: #4c9ed9; /* Select Highlight Blue */ + color: #f5f7fa; /* Light foreground text */ +} + +.theme-dark .waterfall-marker-container.selected > .waterfall-sidebar, +.theme-dark .waterfall-marker-container.selected > .waterfall-marker-item { + background-color: #1d4f73; /* Select Highlight Blue */ + color: #f5f7fa; /* Light foreground text */ +} + +.waterfall-marker-container.selected .waterfall-marker-bullet, +.waterfall-marker-container.selected .waterfall-marker-bar { + border-color: initial!important; +} + +.waterfall-marker-location { + color: -moz-nativehyperlinktext; +} + +.waterfall-marker-location:hover, +.waterfall-marker-location:focus { + text-decoration: underline; +} + +#timeline-waterfall-details { + -moz-padding-start: 8px; + -moz-padding-end: 8px; + padding-top: 2vh; + overflow: auto; +} + +.marker-details-bullet { + width: 8px; + height: 8px; + border: 1px solid; + border-radius: 1px; +} + +#timeline-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; +} 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 998f21b..ae294f6 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-debugger-paused.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-debugger-paused.svg @@ -1,6 +1,3 @@ - - - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-debugger.svg b/arc-firefox-theme/chrome/browser/devtools/tool-debugger.svg index 655d482..128e6e8 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-debugger.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-debugger.svg @@ -1,10 +1,7 @@ - - - - - - - + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-inspector.svg b/arc-firefox-theme/chrome/browser/devtools/tool-inspector.svg index 45ec67f..5a8cbb8 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-inspector.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-inspector.svg @@ -1,12 +1,9 @@ - - - - - - - - - + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-network.svg b/arc-firefox-theme/chrome/browser/devtools/tool-network.svg index 8e232d6..bec394d 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-network.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-network.svg @@ -1,39 +1,36 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-options.svg b/arc-firefox-theme/chrome/browser/devtools/tool-options.svg index 2885ef9..62a6d75 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-options.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-options.svg @@ -1,6 +1,3 @@ - - - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-profiler-active.svg b/arc-firefox-theme/chrome/browser/devtools/tool-profiler-active.svg deleted file mode 100644 index 0882cca..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/tool-profiler-active.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-profiler.svg b/arc-firefox-theme/chrome/browser/devtools/tool-profiler.svg index 8441af3..d8e1bdd 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-profiler.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-profiler.svg @@ -1,17 +1,14 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-scratchpad.svg b/arc-firefox-theme/chrome/browser/devtools/tool-scratchpad.svg index c1e8e08..ad2133a 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-scratchpad.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-scratchpad.svg @@ -1,9 +1,6 @@ - - - - - - + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-shadereditor.svg b/arc-firefox-theme/chrome/browser/devtools/tool-shadereditor.svg deleted file mode 100644 index e4e239a..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/tool-shadereditor.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-storage.svg b/arc-firefox-theme/chrome/browser/devtools/tool-storage.svg index 8c2c291..7f5013b 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-storage.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-storage.svg @@ -1,10 +1,7 @@ - - - - - - - + + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-styleeditor.svg b/arc-firefox-theme/chrome/browser/devtools/tool-styleeditor.svg index e123f45..ac1f5c7 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-styleeditor.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-styleeditor.svg @@ -1,9 +1,6 @@ - - - - - - + + + + + diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-webaudio.svg b/arc-firefox-theme/chrome/browser/devtools/tool-webaudio.svg index cd317de..59d9d90 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-webaudio.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-webaudio.svg @@ -1,6 +1,3 @@ - - + - + \ 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 f62307d..0739e82 100644 --- a/arc-firefox-theme/chrome/browser/devtools/tool-webconsole.svg +++ b/arc-firefox-theme/chrome/browser/devtools/tool-webconsole.svg @@ -1,6 +1,3 @@ - - - + + diff --git a/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css b/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css index 0d66638..de0e21e 100644 --- a/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css +++ b/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css @@ -1,3 +1,7 @@ +/* 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/. */ + /* 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/. */ @@ -187,7 +191,7 @@ text { -moz-box-flex: 1; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { #inspector-pane-toggle { list-style-image: url(debugger-collapse@2x.png); -moz-image-region: rect(0px,32px,32px,0px); diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole.css b/arc-firefox-theme/chrome/browser/devtools/webconsole.css index d875c23..ea87584 100644 --- a/arc-firefox-theme/chrome/browser/devtools/webconsole.css +++ b/arc-firefox-theme/chrome/browser/devtools/webconsole.css @@ -27,11 +27,10 @@ a { box-sizing: border-box; } -.message > .prefix, .message > .timestamp { flex: none; color: GrayText; - margin: 3px 6px 0 0; + margin: 4px 6px 0 0; } .message > .indent { @@ -48,17 +47,19 @@ a { .message > .icon::before { content: ""; - background-image: url(chrome://browser/skin/devtools/webconsole.svg); - background-position: 12px 12px; + background-image: url(chrome://browser/skin/devtools/webconsole.png); + background-position: 8px 8px; background-repeat: no-repeat; - background-size: 72px 60px; - width: 12px; - height: 12px; + background-size: 48px 40px; + width: 8px; + height: 8px; display: inline-block; } -.theme-light .message > .icon::before { - background-image: url(chrome://browser/skin/devtools/webconsole.svg#light-icons); +@media (min-resolution: 2dppx) { + .message > .icon::before { + background-image: url(chrome://browser/skin/devtools/webconsole@2x.png); + } } .message > .message-body-wrapper { @@ -230,7 +231,7 @@ a { } .message[category=network][severity=error] > .icon::before { - background-position: -12px 0; + background-position: -8px 0; } .message[category=network] > .message-body { @@ -287,11 +288,11 @@ a { } .message[category=cssparser][severity=error] > .icon::before { - background-position: -12px -12px; + background-position: -8px -8px; } .message[category=cssparser][severity=warn] > .icon::before { - background-position: -24px -12px; + background-position: -16px -8px; } /* JS styles */ @@ -305,11 +306,11 @@ a { } .message[category=exception][severity=error] > .icon::before { - background-position: -12px -24px; + background-position: -8px -16px; } .message[category=exception][severity=warn] > .icon::before { - background-position: -24px -24px; + background-position: -16px -16px; } /* Web Developer styles */ @@ -324,15 +325,15 @@ a { .message[category=console][severity=error] > .icon::before, .message[category=output][severity=error] > .icon::before { - background-position: -12px -36px; + background-position: -8px -24px; } .message[category=console][severity=warn] > .icon::before { - background-position: -24px -36px; + background-position: -16px -24px; } .message[category=console][severity=info] > .icon::before { - background-position: -36px -36px; + background-position: -24px -24px; } /* Input and output styles */ @@ -342,11 +343,11 @@ a { } .message[category=input] > .icon::before { - background-position: -48px -36px; + background-position: -32px -24px; } .message[category=output] > .icon::before { - background-position: -60px -36px; + background-position: -40px -24px; } /* JSTerm Styles */ @@ -364,7 +365,7 @@ a { background-size: 16px 16px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .jsterm-input-node { background-image: -moz-image-rect(url('chrome://browser/skin/devtools/commandline-icon@2x.png'), 0, 64, 32, 32); } @@ -378,9 +379,6 @@ a { .inlined-variables-view .message-body { display: flex; flex-direction: column; - resize: vertical; - overflow: auto; - min-height: 200px; } .inlined-variables-view iframe { display: block; @@ -413,11 +411,11 @@ a { } .message[category=security][severity=error] > .icon::before { - background-position: -12px -48px; + background-position: -8px -32px; } .message[category=security][severity=warn] > .icon::before { - background-position: -24px -48px; + background-position: -16px -32px; } .navigation-marker { diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole.png b/arc-firefox-theme/chrome/browser/devtools/webconsole.png new file mode 100644 index 0000000..8aee790 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/webconsole.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole.svg b/arc-firefox-theme/chrome/browser/devtools/webconsole.svg deleted file mode 100644 index 6c21e54..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/webconsole.svg +++ /dev/null @@ -1,101 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ 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 new file mode 100644 index 0000000..2d5e97f Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/webconsole@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/widgets.css b/arc-firefox-theme/chrome/browser/devtools/widgets.css index 18a6757..181faa6 100644 --- a/arc-firefox-theme/chrome/browser/devtools/widgets.css +++ b/arc-firefox-theme/chrome/browser/devtools/widgets.css @@ -7,14 +7,6 @@ * 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/. */ -.theme-dark { - --table-splitter-color: rgba(255,255,255,0.15); - --table-zebra-background: rgba(255,255,255,0.05); -} -.theme-light { - --table-splitter-color: rgba(0,0,0,0.15); - --table-zebra-background: rgba(0,0,0,0.05); -} /* Generic pane helpers */ @@ -108,7 +100,7 @@ padding: 0; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .scrollbutton-up > .toolbarbutton-icon, .scrollbutton-down > .toolbarbutton-icon { background-image: url("breadcrumbs-scrollbutton@2x.png"); @@ -638,7 +630,7 @@ height: 16px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .variable-or-property-non-writable-icon { background-image: url("chrome://browser/skin/devtools/vview-lock@2x.png"); } @@ -738,7 +730,7 @@ height: 16px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .variables-view-delete { background-image: url("chrome://browser/skin/devtools/vview-delete@2x.png"); } @@ -764,7 +756,7 @@ cursor: pointer; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .variables-view-edit { background-image: url("chrome://browser/skin/devtools/vview-edit@2x.png"); } @@ -790,7 +782,7 @@ cursor: pointer; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .variables-view-open-inspector { background-image: url("chrome://browser/skin/devtools/vview-open-inspector@2x.png"); } @@ -865,10 +857,6 @@ cursor: col-resize; } -.graph-widget-canvas[input=adjusting-view-area] { - cursor: grabbing; -} - .graph-widget-canvas[input=hovering-selection-contents] { cursor: grab; } @@ -881,22 +869,13 @@ .line-graph-widget-gutter { position: absolute; + background: rgba(255,255,255,0.75); width: 10px; height: 100%; top: 0; left: 0; + border-right: 1px solid rgba(255,255,255,0.25); pointer-events: none; - -moz-border-end: 1px solid; -} - -.theme-light .line-graph-widget-gutter { - background: rgba(255,255,255,0.75); - -moz-border-end-color: rgba(255,255,255,0.25); -} - -.theme-dark .line-graph-widget-gutter { - background: rgba(0,0,0,0.5); - -moz-border-end-color: rgba(0,0,0,0.25); } .line-graph-widget-gutter-line { @@ -919,24 +898,17 @@ .line-graph-widget-tooltip { position: absolute; + background: rgba(255,255,255,0.75); border-radius: 2px; line-height: 15px; -moz-padding-start: 6px; -moz-padding-end: 6px; transform: translateY(-50%); - font-size: 0.8rem !important; + font-size: 80%; z-index: 1; pointer-events: none; } -.theme-light .line-graph-widget-tooltip { - background: rgba(255,255,255,0.75); -} - -.theme-dark .line-graph-widget-tooltip { - background: rgba(0,0,0,0.5); -} - .line-graph-widget-tooltip[with-arrows=true]::before { content: ""; position: absolute; @@ -946,31 +918,15 @@ } .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before { - -moz-border-end: 3px solid; + -moz-border-end: 3px solid rgba(255,255,255,0.75); left: -3px; } .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before { - -moz-border-start: 3px solid; + -moz-border-start: 3px solid rgba(255,255,255,0.75); right: -3px; } -.theme-light .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before { - -moz-border-end-color: rgba(255,255,255,0.75); -} - -.theme-dark .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before { - -moz-border-end-color: rgba(0,0,0,0.5); -} - -.theme-light .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before { - -moz-border-start-color: rgba(255,255,255,0.75); -} - -.theme-dark .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before { - -moz-border-start-color: rgba(0,0,0,0.5); -} - .line-graph-widget-tooltip[type=maximum] { left: 14px; } @@ -984,7 +940,7 @@ } .line-graph-widget-tooltip > [text=info] { - color: var(--theme-content-color1); + color: #18191a; } .line-graph-widget-tooltip > [text=value] { @@ -993,39 +949,35 @@ .line-graph-widget-tooltip > [text=metric] { -moz-margin-start: 1px; - color: var(--theme-content-color3); + color: #667380; } -.theme-light .line-graph-widget-tooltip > [text=value], -.theme-light .line-graph-widget-tooltip > [text=metric] { - text-shadow: 1px 0px rgba(255,255,255,0.5), - -1px 0px rgba(255,255,255,0.5), - 0px -1px rgba(255,255,255,0.5), - 0px 1px rgba(255,255,255,0.5); -} - -.theme-dark .line-graph-widget-tooltip > [text=value], -.theme-dark .line-graph-widget-tooltip > [text=metric] { - text-shadow: 1px 0px rgba(0,0,0,0.5), - -1px 0px rgba(0,0,0,0.5), - 0px -1px rgba(0,0,0,0.5), - 0px 1px rgba(0,0,0,0.5); +.line-graph-widget-tooltip > [text=value], +.line-graph-widget-tooltip > [text=metric] { + text-shadow: 1px 0px rgba(255,255,255,0.6), + -1px 0px rgba(255,255,255,0.6), + 0px -1px rgba(255,255,255,0.6), + 0px 1px rgba(255,255,255,0.6); } .line-graph-widget-tooltip[type=maximum] > [text=value] { - color: var(--theme-highlight-green); + color: #2cbb0f; } .line-graph-widget-tooltip[type=minimum] > [text=value] { - color: var(--theme-highlight-red); + color: #ed2655; } .line-graph-widget-tooltip[type=average] > [text=value] { - color: var(--theme-highlight-orange); + color: #d97e00; } /* Bar graph widget */ +.bar-graph-widget-canvas { + background: #f7f7f7; +} + .bar-graph-widget-legend { position: absolute; top: 4px; @@ -1207,16 +1159,43 @@ overflow: auto; } -.table-widget-body, -.table-widget-empty-text { - background-color: var(--theme-body-background); +.theme-light .table-widget-body { + background: var(--theme-sidebar-background); +} + +.theme-dark .table-widget-body, +.theme-dark .table-widget-empty-text { + background-color: var(--theme-toolbar-background); +} + +.theme-dark .table-widget-body:-moz-locale-dir(ltr) { + box-shadow: inset -1px 0 0 #000; +} + +.theme-dark .table-widget-body:-moz-locale-dir(rtl) { + box-shadow: inset 1px 0 0 #000; +} + +.table-widget-body:-moz-locale-dir(ltr) { + box-shadow: inset -1px 0 0 #aaa; +} + +.table-widget-body:-moz-locale-dir(rtl) { + box-shadow: inset 1px 0 0 #aaa; } /* Column Headers */ -.table-widget-column-header, -.table-widget-cell { - -moz-border-end: 1px solid var(--table-splitter-color) !important; +.theme-dark .table-widget-column-header, +.theme-dark .table-widget-cell { + -moz-border-end: 1px solid rgba(0,0,0,0.2); + box-shadow: inset 1px 0 0 rgba(128,128,128,0.15); +} + +.theme-light .table-widget-column-header, +.theme-light .table-widget-cell { + -moz-border-end: 1px solid rgba(128,128,128,0.25); + box-shadow: inset 1px 0 0 transparent; } /* Table widget column header colors are taken from netmonitor.inc.css to match @@ -1227,8 +1206,10 @@ background: rgba(0,0,0,0); position: sticky; top: 0; + min-height: 32px; width: 100%; - padding: 5px 0 0 !important; + border: none; + padding: 8px 0 0 !important; color: inherit; text-align: center; font-weight: inherit !important; @@ -1236,29 +1217,27 @@ } .table-widget-column-header:hover { - background-image: linear-gradient(rgba(0,0,0,0.10), rgba(0,0,0,0.10)); + background: 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)); + background: rgba(0,0,0,0.25); } .table-widget-column-header:not(:active)[sorted] { - background-image: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)); + background: rgba(0,0,0,0.15); } .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; + background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)); + background-size: 100% 1px; + background-repeat: no-repeat; } .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-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3)); + background-size: 100% 1px; + background-repeat: no-repeat; background-position: bottom; } @@ -1266,22 +1245,44 @@ .table-widget-cell { width: 100%; + margin: -1px 0 !important; padding: 3px 4px; background-clip: padding-box; min-width: 100px; -moz-user-focus: normal; - margin-bottom: -1px !important; +} + +.theme-dark .table-widget-cell { + border-top: 1px solid rgba(0,0,0,0.2); + border-bottom: 1px solid rgba(128,128,128,0.15); + color: var(--theme-selection-color); +} + +.theme-dark:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected), +.theme-dark .table-widget-cell:not(.theme-selected)[odd] { + background: rgba(255,255,255,0.05); +} + +.theme-dark .table-widget-cell:last-of-type { + box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); +} + +.theme-light .table-widget-cell { + border-top: 1px solid rgba(128,128,128,0.15); border-bottom: 1px solid transparent; +} + +.theme-light .table-widget-cell:not(.theme-selected) { color: var(--theme-body-color); } -.table-widget-cell:last-child { - border-bottom: 1px solid var(--table-splitter-color); +.theme-light:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected), +.theme-light .table-widget-cell:not(.theme-selected)[odd] { + background: rgba(128,128,128,0.05); } -:root:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected), -.table-widget-cell:not(.theme-selected)[odd] { - background: var(--table-zebra-background); +.theme-light .table-widget-cell:last-of-type { + box-shadow: inset 0 -1px 0 rgba(128,128,128,0.15); } .table-widget-cell.flash-out { @@ -1303,6 +1304,10 @@ margin-top: -20px !important; } +.theme-light .table-widget-empty-text { + background: #F7F7F7; /* Background-Sidebar */ +} + .table-widget-body:empty + .table-widget-empty-text:not([value=""]), .table-widget-body[empty] + .table-widget-empty-text:not([value=""]) { display: block; @@ -1354,11 +1359,11 @@ } .tree-widget-item[level="1"] { - font-weight: 700; + font-weight: 800; } /* Twisties */ -.tree-widget-item::before { +.tree-widget-item:before { content: ""; width: 14px; height: 14px; @@ -1371,24 +1376,24 @@ background-position: -28px -14px; } -.tree-widget-item:-moz-locale-dir(rtl)::before { +.tree-widget-item:-moz-locale-dir(rtl):before { float: right; transform: scaleX(-1); } -.theme-light .tree-widget-item:not(.theme-selected)::before { +.theme-light .tree-widget-item:before { background-position: 0 -14px; } -.tree-widget-item[empty]::before { +.tree-widget-item[empty]:before { background: transparent; } -.tree-widget-item[expanded]::before { +.tree-widget-item[expanded]:before { background-position: -42px -14px; } -.theme-light .tree-widget-item:not(.theme-selected)[expanded]:before { +.theme-light .tree-widget-item[expanded]:before { background-position: -14px -14px; } @@ -1421,7 +1426,7 @@ } } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 2dppx) { .tree-widget-item:before { background-image: url("chrome://browser/skin/devtools/controls@2x.png"); } @@ -1466,7 +1471,7 @@ /* Custom icons for certain tree items indicating the type of the item */ -.tree-widget-item[type]::after { +.tree-widget-item[type]:after { content: ""; float: left; width: 16px; @@ -1474,36 +1479,31 @@ -moz-margin-end: 4px; background-repeat: no-repeat; background-size: 20px auto; + filter: url('filters.svg#invert'); background-position: 0 0; background-size: auto 20px; - opacity: 0.75; -} - -.tree-widget-item.theme-selected[type]::after { - opacity: 1; } -.tree-widget-item:-moz-locale-dir(rtl)::after { +.tree-widget-item:-moz-locale-dir(rtl):after { float: right; } -.theme-light .tree-widget-item.theme-selected[type]::after, -.theme-dark .tree-widget-item[type]::after { - filter: invert(1); +.theme-dark .tree-widget-item[type]:after { + filter: url('filters.svg#invert-white'); } -.tree-widget-item[type="dir"]::after { +.tree-widget-item[type="dir"]:after { background-image: url(chrome://browser/skin/devtools/filetype-dir-close.svg); background-position: 2px 0; background-size: auto 16px; width: 20px; } -.tree-widget-item[type="dir"][expanded]:not([empty])::after { +.tree-widget-item[type="dir"][expanded]:not([empty]):after { background-image: url(chrome://browser/skin/devtools/filetype-dir-open.svg); } -.tree-widget-item[type="url"]::after { +.tree-widget-item[type="url"]:after { background-image: url(chrome://browser/skin/devtools/filetype-globe.svg); background-size: auto 18px; width: 18px; -- cgit v1.2.3