diff options
Diffstat (limited to 'arc-firefox-theme/chrome/browser/devtools')
21 files changed, 375 insertions, 250 deletions
diff --git a/arc-firefox-theme/chrome/browser/devtools/animationinspector.css b/arc-firefox-theme/chrome/browser/devtools/animationinspector.css index 40efab7..dfd1b3d 100644 --- a/arc-firefox-theme/chrome/browser/devtools/animationinspector.css +++ b/arc-firefox-theme/chrome/browser/devtools/animationinspector.css @@ -12,6 +12,15 @@ --even-animation-timeline-background-color: rgba(128,128,128,0.03); } +:root { + /* How high should toolbars be */ + --toolbar-height: 20px; + /* How wide should the sidebar be */ + --timeline-sidebar-width: 150px; + /* How high should animations displayed in the timeline be */ + --timeline-animation-height: 20px; +} + html { height: 100%; } @@ -26,33 +35,47 @@ body { color: var(--theme-content-color3); } -/* The top toolbar, containing the toggle-all button */ +/* The top toolbar, containing the toggle-all button. And the timeline toolbar, + containing playback control buttons, shown only when there are animations + displayed in the timeline */ -#toolbar { +#global-toolbar, +#timeline-toolbar { border-bottom: 1px solid var(--theme-splitter-color); display: flex; flex-direction: row; align-items: center; justify-content: flex-end; - height: 20px; + height: var(--toolbar-height); } -#toolbar .label { - padding: 1px 4px; +#timeline-toolbar { + display: none; } -#toggle-all { - border-width: 0 0 0 1px; - min-height: 20px; +[timeline] #global-toolbar { + display: none; +} + +[timeline] #timeline-toolbar { + display: flex; +} + +#global-toolbar .label { + padding: 1px 4px; } /* The main animations container */ #players { - height: calc(100% - 20px); + height: calc(100% - var(--toolbar-height)); overflow: auto; } +[empty] #players { + display: none; +} + /* The error message, shown when an invalid/unanimated element is selected */ #error-message { @@ -65,16 +88,23 @@ body { display: none; } +[empty] #error-message { + display: block; +} -/* Element picker and toggle-all buttons */ +/* Element picker, toggle-all buttons, timeline pause button, ... */ -#element-picker, -#toggle-all { +#global-toolbar .devtools-button, +#timeline-toolbar .devtools-button { + border-width: 0 0 0 1px; + min-height: var(--toolbar-height); +} + +.devtools-button { position: relative; } -#element-picker::before, -#toggle-all::before { +.devtools-button::before { content: ""; display: block; width: 16px; @@ -83,10 +113,13 @@ body { left: 50%; top: 50%; margin: -8px 0 0 -8px; +} + +#element-picker::before { background-image: url("chrome://browser/skin/devtools/command-pick.png"); } -#toggle-all::before { +.pause-button::before { background-image: url("debugger-pause.png"); } @@ -95,21 +128,21 @@ body { filter: none; /* Icon is blue when checked, don't invert for light theme */ } -#toggle-all.paused::before { +.pause-button.paused::before { background-image: url("debugger-play.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #element-picker::before { background-image: url("chrome://browser/skin/devtools/command-pick@2x.png"); background-size: 64px; } - #toggle-all::before { + .pause-button::before { background-image: url("debugger-pause@2x.png"); } - #toggle-all.paused::before { + .pause-button.paused::before { background-image: url("debugger-play@2x.png"); } } @@ -119,6 +152,7 @@ body { .animation-timeline { height: 100%; overflow: hidden; + position: relative; /* 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) @@ -127,17 +161,42 @@ body { 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; + background-position: var(--timeline-sidebar-width) 0; display: flex; flex-direction: column; } +.animation-timeline .scrubber { + position: absolute; + height: 100%; + width: var(--timeline-sidebar-width); + border-right: 1px solid red; + box-sizing: border-box; + z-index: 1; + pointer-events: none; +} + +.animation-timeline .scrubber::before { + content: ""; + position: absolute; + top: 0; + width: 1px; + right: -6px; + border-top: 5px solid red; + border-left: 5px solid transparent; + border-right: 5px solid transparent; +} + .animation-timeline .time-header { - margin-left: 150px; - height: 20px; + margin-left: var(--timeline-sidebar-width); + min-height: var(--toolbar-height); overflow: hidden; position: relative; - border-bottom: 1px solid var(--theme-splitter-color); + /* This is the same color as the time graduations in + browser/devtools/animationinspector/utils.js */ + border-bottom: 1px solid rgba(128, 136, 144, .5); + cursor: col-resize; + -moz-user-select: none; } .animation-timeline .time-header .time-tick { @@ -158,7 +217,7 @@ body { .animation-timeline .animation { margin: 4px 0; - height: 20px; + height: var(--timeline-animation-height); position: relative; } @@ -167,7 +226,7 @@ body { } .animation-timeline .animation .target { - width: 150px; + width: var(--timeline-sidebar-width); overflow: hidden; height: 100%; } @@ -179,7 +238,7 @@ body { .animation-timeline .animation .time-block { position: absolute; top: 0; - left: 150px; + left: var(--timeline-sidebar-width); right: 0; height: 100%; } @@ -189,19 +248,37 @@ body { .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 */ + + --timelime-border-color: var(--theme-body-color); + --timeline-background-color: var(--theme-splitter-color); + + /* Iterations of the animation are displayed with a repeating linear-gradient + which size is dynamically changed from JS. The gradient only draws 1px + borders between each iteration. These borders must have the same color as + the border of this element */ background-image: linear-gradient(to right, - var(--theme-highlight-lightorange) 0, - var(--theme-highlight-lightorange) 1px, + var(--timelime-border-color) 0, + var(--timelime-border-color) 1px, transparent 1px, transparent 2px); background-repeat: repeat-x; background-position: -1px 0; + border: 1px solid var(--timelime-border-color); + + /* The background color is set independently */ + background-color: var(--timeline-background-color); +} + +.animation-timeline .animation .cssanimation { + --timelime-border-color: var(--theme-highlight-lightorange); + --timeline-background-color: var(--theme-contrast-background); +} + +.animation-timeline .animation .csstransition { + --timelime-border-color: var(--theme-highlight-bluegrey); + --timeline-background-color: var(--theme-highlight-blue); } .animation-timeline .animation .iterations.infinite { @@ -226,42 +303,41 @@ body { top: unset; } -.animation-timeline .animation .animation-title { - height: 1.5em; +.animation-timeline .animation .name { + color: var(--theme-selection-color); + height: 100%; width: 100%; - box-sizing: border-box; overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + line-height: 150%; + padding: 0 2px; } .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); -} + /* Make sure the delay covers up the animation border */ + transform: translate(-1px, -1px); + box-sizing: border-box; + height: calc(100% + 2px); -.animation-timeline .animation .delay::before { - position: absolute; - content: ""; - left: 0; - width: 2px; - height: 8px; - top: 50%; - margin-top: -4px; - background: var(--theme-highlight-lightorange); + border: 1px solid var(--timelime-border-color); + border-width: 1px 0 1px 1px; + background-image: repeating-linear-gradient(45deg, + transparent, + transparent 1px, + var(--theme-selection-color) 1px, + var(--theme-selection-color) 4px); + background-color: var(--timelime-border-color); } -.animation-timeline .animation .name { - position: absolute; - z-index: 1; - padding: 2px; - white-space: nowrap; +.animation-timeline .animation .delay.negative { + /* Negative delays are displayed on top of the animation, so they need a + right border. Whereas normal delays are displayed just before the + animation, so there's already the animation's left border that serves as + a separation. */ + border-width: 1px; } /* Animation target node gutter, contains a preview of the dom node */ @@ -326,7 +402,7 @@ body { /* Timeline wiget */ .timeline { - height: 20px; + height: var(--timeline-animation-height); width: 100%; display: flex; flex-direction: row; @@ -362,7 +438,7 @@ body { background-image: url(rewind.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .timeline .toggle::before { background-image: url(debugger-pause@2x.png); } diff --git a/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css b/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css index a749260..efeac51 100644 --- a/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css +++ b/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css @@ -138,7 +138,7 @@ list-style-image: url(debugger-step-out.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #resume { list-style-image: url(debugger-play@2x.png); -moz-image-region: rect(0px,64px,32px,32px); @@ -243,7 +243,7 @@ background-size: 12px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .selected .call-item-gutter { background-image: url("editor-debug-location@2x.png"); } diff --git a/arc-firefox-theme/chrome/browser/devtools/computedview.css b/arc-firefox-theme/chrome/browser/devtools/computedview.css index f770681..a4eff43 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: 1.1dppx) { .property-value, .other-property-value { background-image: url(arrow-e@2x.png); } diff --git a/arc-firefox-theme/chrome/browser/devtools/dark-theme.css b/arc-firefox-theme/chrome/browser/devtools/dark-theme.css index 53a868f..22480b2 100644 --- a/arc-firefox-theme/chrome/browser/devtools/dark-theme.css +++ b/arc-firefox-theme/chrome/browser/devtools/dark-theme.css @@ -38,6 +38,7 @@ /* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */ --theme-graphs-green: #70bf53; --theme-graphs-blue: #46afe3; + --theme-graphs-bluegrey: #5e88b0; --theme-graphs-purple: #df80ff; --theme-graphs-yellow: #d99b28; --theme-graphs-red: #eb5368; @@ -334,7 +335,7 @@ div.CodeMirror span.eval-text { background-position: -42px 0; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .theme-twisty, .theme-checkbox { background-image: url("chrome://browser/skin/devtools/controls@2x.png"); } @@ -372,7 +373,7 @@ div.CodeMirror span.eval-text { margin-left: -4px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .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"); @@ -725,7 +726,7 @@ div.CodeMirror span.eval-text { opacity: 0.5; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .devtools-button::before { background-size: 32px; } @@ -842,7 +843,7 @@ div.CodeMirror span.eval-text { -moz-image-region: rect(0, 32px, 16px, 16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .theme-dark .devtools-searchinput { background-image: url(magnifying-glass@2x.png); } @@ -1172,7 +1173,7 @@ div.CodeMirror span.eval-text { background-image: url("chrome://browser/skin/devtools/command-rulers.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #command-button-paintflashing > image { background-image: url("chrome://browser/skin/devtools/command-paintflashing@2x.png"); } diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger.css b/arc-firefox-theme/chrome/browser/devtools/debugger.css index 97eb3b0..e16cdb8 100644 --- a/arc-firefox-theme/chrome/browser/devtools/debugger.css +++ b/arc-firefox-theme/chrome/browser/devtools/debugger.css @@ -66,7 +66,7 @@ list-style-image: url(debugger-blackbox.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #black-box { list-style-image: url(debugger-blackbox@2x.png); } @@ -76,7 +76,7 @@ list-style-image: url(debugger-prettyprint.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #pretty-print { list-style-image: url(debugger-prettyprint@2x.png); } @@ -86,7 +86,7 @@ list-style-image: url(debugger-toggleBreakpoints.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #toggle-breakpoints { list-style-image: url(debugger-toggleBreakpoints@2x.png); } @@ -104,7 +104,7 @@ -moz-image-region: rect(0px,32px,16px,16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #sources-toolbar .devtools-toolbarbutton:not([label]) { -moz-image-region: rect(0px,32px,32px,0px); } @@ -138,7 +138,7 @@ -moz-margin-end: 5px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #black-boxed-message-button > .button-box > .button-icon { background-image: url(debugger-blackbox@2x.png); } @@ -226,7 +226,7 @@ -moz-image-region: rect(0px,32px,16px,16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #trace { list-style-image: url(tracer-icon@2x.png); -moz-image-region: rect(0px,32px,32px,0px); @@ -328,7 +328,7 @@ margin: 2px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .dbg-expression-arrow { background-image: url(commandline-icon@2x.png); } @@ -564,7 +564,7 @@ list-style-image: url(debugger-play.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #resume { list-style-image: url(debugger-pause@2x.png); -moz-image-region: rect(0px,32px,32px,0px); @@ -581,7 +581,12 @@ } #debugger-controls toolbarbutton[disabled] { - opacity: .5; + opacity: .5; + transition: none; +} + +#resume[break-on-next] { + background: var(--theme-highlight-lightorange); } #step-over { @@ -596,7 +601,7 @@ list-style-image: url(debugger-step-out.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #step-over { list-style-image: url(debugger-step-over@2x.png); } @@ -626,7 +631,7 @@ -moz-image-region: rect(0px,32px,16px,16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #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/editor-breakpoint@2x.png b/arc-firefox-theme/chrome/browser/devtools/editor-breakpoint@2x.png Binary files differnew file mode 100644 index 0000000..7253aee --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/editor-breakpoint@2x.png diff --git a/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars-light.css b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars-light.css index 7e38611..01b622f 100644 --- a/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars-light.css +++ b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars-light.css @@ -3,7 +3,7 @@ * 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/. */ -@import url("floating-scrollbars.css"); +@import url("chrome://browser/skin/devtools/floating-scrollbars.css"); scrollbar thumb { background-color: rgba(170,170,170,0.2) !important; diff --git a/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css index 934a38e..61c66c8 100644 --- a/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css +++ b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css @@ -29,7 +29,6 @@ scrollbar thumb { background-color: rgba(170,170,170,0.2) !important; border-radius: 3px !important; } - scrollbar scrollbarbutton, scrollbar gripper { display: none; } diff --git a/arc-firefox-theme/chrome/browser/devtools/inspector.css b/arc-firefox-theme/chrome/browser/devtools/inspector.css index cab78e7..a892ec3 100644 --- a/arc-firefox-theme/chrome/browser/devtools/inspector.css +++ b/arc-firefox-theme/chrome/browser/devtools/inspector.css @@ -49,7 +49,7 @@ -moz-image-region: rect(0px,32px,16px,16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #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/light-theme.css b/arc-firefox-theme/chrome/browser/devtools/light-theme.css index 92515ff..276b34a 100644 --- a/arc-firefox-theme/chrome/browser/devtools/light-theme.css +++ b/arc-firefox-theme/chrome/browser/devtools/light-theme.css @@ -38,6 +38,7 @@ /* Colors used in Graphs, like performance tools. Similar colors to Chrome's timeline. */ --theme-graphs-green: #85d175; --theme-graphs-blue: #83b7f6; + --theme-graphs-bluegrey: #0072ab; --theme-graphs-purple: #b693eb; --theme-graphs-yellow: #efc052; --theme-graphs-red: #e57180; @@ -343,7 +344,7 @@ div.CodeMirror span.eval-text { background-position: -14px 0; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .theme-twisty, .theme-checkbox { background-image: url("chrome://browser/skin/devtools/controls@2x.png"); } @@ -381,7 +382,7 @@ div.CodeMirror span.eval-text { margin-left: -4px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .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"); @@ -723,7 +724,7 @@ div.CodeMirror span.eval-text { opacity: 0.5; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .devtools-button::before { background-size: 32px; } @@ -840,7 +841,7 @@ div.CodeMirror span.eval-text { -moz-image-region: rect(0, 32px, 16px, 16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .theme-dark .devtools-searchinput { background-image: url(magnifying-glass@2x.png); } @@ -1170,7 +1171,7 @@ div.CodeMirror span.eval-text { background-image: url("chrome://browser/skin/devtools/command-rulers.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #command-button-paintflashing > image { background-image: url("chrome://browser/skin/devtools/command-paintflashing@2x.png"); } diff --git a/arc-firefox-theme/chrome/browser/devtools/markup-view.css b/arc-firefox-theme/chrome/browser/devtools/markup-view.css index e1912d8..fb3d958 100644 --- a/arc-firefox-theme/chrome/browser/devtools/markup-view.css +++ b/arc-firefox-theme/chrome/browser/devtools/markup-view.css @@ -15,6 +15,18 @@ border: 1px solid #CCC; } +/* Draw a circle next to nodes that have a pseudo class lock. + Center vertically with the 1.4em line height on .tag-line */ +.child.pseudoclass-locked::before { + content: ""; + background: var(--theme-highlight-lightorange); + border-radius: 50%; + width: .8em; + height: .8em; + margin-top: .3em; + left: 1px; + position: absolute; +} /* Selected nodes in the tree should have light selected text. theme-selected doesn't work in this case since the text is a diff --git a/arc-firefox-theme/chrome/browser/devtools/memory.css b/arc-firefox-theme/chrome/browser/devtools/memory.css new file mode 100644 index 0000000..78f8f1f --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/memory.css @@ -0,0 +1,81 @@ +/* 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); + --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); +} + +.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); +} + +.heap-view { + position: relative; +} + +.heap-view .theme-twisty { + text-align: end; +} + +.heap-tree-item { + list-style-type: none; + /* display: none; */ +} + +.heap-tree-item[expanded] { + display: block; +} + +.heap-tree-item:nth-child(2n) { + background-color: var(--row-alt-background-color); +} + +.heap-tree-item:hover { + background-color: var(--row-hover-background-color); +} + +.heap-tree-item:focus { + background-color: var(--theme-selection-background); +} + +.heap-tree-item:focus description { + color: var(--theme-selection-color) !important; +} + +.heap-tree-item:focus .call-tree-cell { + -moz-border-end-color: var(--focus-cell-border-color); +} + + +.heap-tree-cell[type="bytes"], .heap-tree-cell[type="count"] { + position: absolute; + text-align: right; + width: 40px; +} + +.heap-tree-cell[type="name"] { + width: 150px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; +} + +.heap-tree-cell[type="count"] { + left: 300px; +} + +.heap-tree-cell[type="bytes"] { + left: 250px; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/netmonitor.css b/arc-firefox-theme/chrome/browser/devtools/netmonitor.css index 9448a39..d47f112 100644 --- a/arc-firefox-theme/chrome/browser/devtools/netmonitor.css +++ b/arc-firefox-theme/chrome/browser/devtools/netmonitor.css @@ -1,7 +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/. */ - /* 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 @@ -146,25 +142,27 @@ width: 16px; height: 16px; -moz-margin-end: 4px; + cursor: pointer; } .security-state-insecure { - list-style-image: url(chrome://browser/skin/identity-not-secure.svg); + list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg); } .security-state-secure { - cursor: pointer; list-style-image: url(chrome://browser/skin/identity-secure.svg); } .security-state-weak { - cursor: pointer; list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); } .security-state-broken { - cursor: pointer; - list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg); + list-style-image: url(chrome://browser/skin/controlcenter/warning-gray.svg); +} + +.security-state-local { + list-style-image: url(chrome://browser/skin/identity-not-secure.svg); } .requests-menu-type { @@ -200,7 +198,8 @@ label.requests-menu-status-code { } box.requests-menu-status:not([code]) { - background-color: var(--theme-content-color2); + background-color: var(--theme-highlight-red); + border-radius: 0; /* squares */ } box.requests-menu-status[code="cached"] { @@ -420,7 +419,7 @@ box.requests-menu-status[code^="5"] { -moz-image-region: rect(0px,32px,16px,16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #details-pane-toggle { list-style-image: url("chrome://browser/skin/devtools/debugger-collapse@2x.png"); -moz-image-region: rect(0px,32px,32px,0px); @@ -547,6 +546,10 @@ box.requests-menu-status[code^="5"] { -moz-padding-start: 1em; } +.theme-dark #security-error-message { + color: var(--theme-selection-color); +} + #security-tabpanel { overflow: auto; } @@ -560,7 +563,7 @@ box.requests-menu-status[code^="5"] { height: 12px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .security-warning-icon { background-image: url(alerticon-warning@2x.png); } @@ -832,6 +835,7 @@ box.requests-menu-status[code^="5"] { } } +/* Platform overrides (copied in from the old platform specific files) */ #headers-summary-resend { padding: 4px; } diff --git a/arc-firefox-theme/chrome/browser/devtools/performance.css b/arc-firefox-theme/chrome/browser/devtools/performance.css index 8eafa36..4279a16 100644 --- a/arc-firefox-theme/chrome/browser/devtools/performance.css +++ b/arc-firefox-theme/chrome/browser/devtools/performance.css @@ -20,6 +20,16 @@ --row-hover-background-color: rgba(76,158,217,0.2); } +/** + * A generic class to hide elements, replacing the `element.hidden` attribute + * that we use to hide elements that can later be active + */ +.hidden { + display: none; + width: 0px; + height: 0px; +} + /* Toolbar */ #performance-toolbar-control-other { @@ -224,8 +234,20 @@ .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-cell[type="self-count"], +.call-tree-header[type="size"], +.call-tree-cell[type="size"], +.call-tree-header[type="self-size"], +.call-tree-cell[type="self-size"], +.call-tree-header[type="count-percentage"], +.call-tree-cell[type="count-percentage"], +.call-tree-header[type="self-count-percentage"], +.call-tree-cell[type="self-count-percentage"], +.call-tree-header[type="size-percentage"], +.call-tree-cell[type="size-percentage"], +.call-tree-header[type="self-size-percentage"], +.call-tree-cell[type="self-size-percentage"] { + width: 6vw; } .call-tree-header[type="function"], @@ -518,22 +540,31 @@ font-weight: bold; } +.marker-details-customcontainer .custom-button { + padding: 2px 5px; + border-width: 1px; +} + /** * Marker colors */ -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-blue:before, +.marker-color-graphs-blue { + background-color: var(--theme-graphs-blue); +} +menuitem.marker-color-graphs-bluegrey:before, +.marker-color-graphs-bluegrey { + background-color: var(--theme-graphs-bluegrey); +} +menuitem.marker-color-graphs-purple:before, +.marker-color-graphs-purple { + background-color: var(--theme-graphs-purple); +} menuitem.marker-color-graphs-yellow:before, .marker-color-graphs-yellow { background-color: var(--theme-graphs-yellow); @@ -542,9 +573,9 @@ 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); +menuitem.marker-color-graphs-grey:before, +.marker-color-graphs-grey{ + background-color: var(--theme-graphs-grey); } /** @@ -558,6 +589,14 @@ menuitem.marker-color-graphs-blue:before, min-width: 200px; } +#optimizations-graph { + height: 30px; +} + +#jit-optimizations-view.empty #optimizations-graph { + display: none !important; +} + /* override default styles for tree widget */ #jit-optimizations-view .tree-widget-empty-text { font-size: inherit; @@ -670,9 +709,6 @@ description.opt-icon::before { .opt-icon[severity=warning]::before { background-position: -24px -24px; } -.opt-icon[type=linkable]::before { - cursor: pointer; -} ul.frames-list { list-style-type: none; diff --git a/arc-firefox-theme/chrome/browser/devtools/ruleview.css b/arc-firefox-theme/chrome/browser/devtools/ruleview.css index 8fad666..e9ae604 100644 --- a/arc-firefox-theme/chrome/browser/devtools/ruleview.css +++ b/arc-firefox-theme/chrome/browser/devtools/ruleview.css @@ -5,10 +5,12 @@ /* CSS Variables specific to this panel that aren't defined by the themes */ .theme-light { --rule-highlight-background-color: #ffee99; + --rule-filter-icon: url(magnifying-glass-light.png); } .theme-dark { --rule-highlight-background-color: #594724; + --rule-filter-icon: url(magnifying-glass.png); } .ruleview { @@ -103,18 +105,25 @@ background-size: 13px 12px; -moz-margin-start: 5px; display: inline-block; - vertical-align: top; width: 13px; height: 12px; } - -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .ruleview-warning { background-image: url(alerticon-warning@2x.png); } } +.ruleview-overridden-rule-filter { + background-image: var(--rule-filter-icon); + background-size: 11px 11px; + -moz-margin-start: 5px; + display: inline-block; + width: 11px; + height: 11px; +} + .ruleview-ruleopen { -moz-padding-end: 5px; } @@ -196,7 +205,7 @@ background-size: 1em; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .ruleview-bezierswatch { background: url("chrome://browser/skin/devtools/cubic-bezier-swatch@2x.png"); background-size: 1em; @@ -300,13 +309,15 @@ * the state */ #ruleview-add-rule-button, -#pseudo-class-panel-toggle { +#pseudo-class-panel-toggle, +.ruleview-overridden-rule-filter { opacity: 0.8; } #ruleview-add-rule-button:not([disabled]):hover, #pseudo-class-panel-toggle:hover, -#pseudo-class-panel-toggle[checked] { +#pseudo-class-panel-toggle[checked], +.ruleview-overridden-rule-filter:hover { opacity: 1; } diff --git a/arc-firefox-theme/chrome/browser/devtools/shadereditor.css b/arc-firefox-theme/chrome/browser/devtools/shadereditor.css index 9ba9ff8..4626a38 100644 --- a/arc-firefox-theme/chrome/browser/devtools/shadereditor.css +++ b/arc-firefox-theme/chrome/browser/devtools/shadereditor.css @@ -60,7 +60,7 @@ border: 0; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .side-menu-widget-item-checkbox .checkbox-check { background-image: url(itemToggle@2x.png); } diff --git a/arc-firefox-theme/chrome/browser/devtools/styleeditor.css b/arc-firefox-theme/chrome/browser/devtools/styleeditor.css index a4a300f..0cc2fca 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: 1.1dppx) { .stylesheet-enabled { background-image: url(itemToggle@2x.png); } diff --git a/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css b/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css index 0d66638..3be55bd 100644 --- a/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css +++ b/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css @@ -187,7 +187,7 @@ text { -moz-box-flex: 1; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #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..d17690e 100644 --- a/arc-firefox-theme/chrome/browser/devtools/webconsole.css +++ b/arc-firefox-theme/chrome/browser/devtools/webconsole.css @@ -2,10 +2,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/. */ -/* 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/. */ - /* General output styles */ a { @@ -323,18 +319,32 @@ a { } .message[category=console][severity=error] > .icon::before, -.message[category=output][severity=error] > .icon::before { +.message[category=output][severity=error] > .icon::before, +.message[category=server][severity=error] > .icon::before { background-position: -12px -36px; } -.message[category=console][severity=warn] > .icon::before { +.message[category=console][severity=warn] > .icon::before, +.message[category=server][severity=warn] > .icon::before { background-position: -24px -36px; } -.message[category=console][severity=info] > .icon::before { +.message[category=console][severity=info] > .icon::before, +.message[category=server][severity=info] > .icon::before { background-position: -36px -36px; } +/* Server Logging Styles */ + +.webconsole-filter-button[category="server"] > .toolbarbutton-menubutton-button:before { + background-image: linear-gradient(rgb(144, 176, 144), rgb(99, 151, 99)); + border-color: rgb(76, 143, 76); +} + +.message[category=server] > .indent { + -moz-border-end: solid #90B090 6px; +} + /* Input and output styles */ .message[category=input] > .indent, .message[category=output] > .indent { @@ -364,7 +374,7 @@ a { background-size: 16px 16px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .jsterm-input-node { background-image: -moz-image-rect(url('chrome://browser/skin/devtools/commandline-icon@2x.png'), 0, 64, 32, 32); } @@ -586,6 +596,3 @@ a { } } -.jsterm-input-node { - width: 98%; -} diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole_networkpanel.css b/arc-firefox-theme/chrome/browser/devtools/webconsole_networkpanel.css deleted file mode 100644 index 3803fe3..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/webconsole_networkpanel.css +++ /dev/null @@ -1,99 +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/. */ - -body { - font-family: sans-serif; - font-size: 11px; - background: #EEE; - color: #000; -} - -#header { - padding: 5px; - overflow-x:auto; - display: block; -} - -h1 { - font-size: 13px; - line-height: 15px; - padding: 3px 10px; - vertical-align: bottom; - margin: 0px; - background: linear-gradient(#BBB, #999); - border-radius: 2px; - text-shadow: #FFF 0px 1px 0px; -} - -h1 .info { - font-size: 11px; - line-height: 15px; - vertical-align: bottom; - float: right; - color: #333; - padding-right: 3px; -} - -.property-table { - padding: 2px 5px; - background: linear-gradient(#FFF, #F8F8F8); - color: #333; - width: 100%; - max-height: 330px; - overflow: auto; - display: block; -} - -.property-name { - font-size: 11px; - font-weight: bold; - color: #000; - white-space: nowrap; - text-align: end; - vertical-align: top; - width: 10%; -} - -.property-value { - padding-right: 5px; - font-size: 11px; - word-wrap: break-word; - width: 90%; -} - -div.group { - margin-top: 10px; -} - -div.group, -#header { - background: #FFF; - border-color: #E1E1E1; - border-style: solid; - border-width: 1px; - box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.2); - border-radius: 4px 4px 4px 4px; -} - -img#responseImageNode { - box-shadow: rgba(0,0,0,0.2) 0px 3px 3.5px; - max-width: 100%; -} - -#responseImageNodeDiv { - padding: 5px; -} - -#responseBodyFetchLink, #requestBodyFetchLink { - padding: 5px; - margin: 0; - cursor: pointer; - font-weight: bold; - font-size: 1.1em; - text-decoration: underline; -} - -.longStringEllipsis { - margin-left: 0.6em; -} diff --git a/arc-firefox-theme/chrome/browser/devtools/widgets.css b/arc-firefox-theme/chrome/browser/devtools/widgets.css index 18a6757..a23f0f5 100644 --- a/arc-firefox-theme/chrome/browser/devtools/widgets.css +++ b/arc-firefox-theme/chrome/browser/devtools/widgets.css @@ -1,7 +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/. */ - /* 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 @@ -108,7 +104,7 @@ padding: 0; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .scrollbutton-up > .toolbarbutton-icon, .scrollbutton-down > .toolbarbutton-icon { background-image: url("breadcrumbs-scrollbutton@2x.png"); @@ -217,6 +213,7 @@ padding-bottom: 0; } + .breadcrumbs-widget-item:not([checked]) { background: -moz-element(#breadcrumb-separator-normal) no-repeat center left; } @@ -638,7 +635,7 @@ height: 16px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .variable-or-property-non-writable-icon { background-image: url("chrome://browser/skin/devtools/vview-lock@2x.png"); } @@ -738,7 +735,7 @@ height: 16px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .variables-view-delete { background-image: url("chrome://browser/skin/devtools/vview-delete@2x.png"); } @@ -764,7 +761,7 @@ cursor: pointer; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .variables-view-edit { background-image: url("chrome://browser/skin/devtools/vview-edit@2x.png"); } @@ -790,7 +787,7 @@ cursor: pointer; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .variables-view-open-inspector { background-image: url("chrome://browser/skin/devtools/vview-open-inspector@2x.png"); } @@ -1421,7 +1418,7 @@ } } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .tree-widget-item:before { background-image: url("chrome://browser/skin/devtools/controls@2x.png"); } @@ -1591,9 +1588,3 @@ background-image: url("app-manager/add.svg"); -moz-margin-end: 2px; } - -.side-menu-widget-group-checkbox .checkbox-spacer-box, -.side-menu-widget-item-checkbox .checkbox-spacer-box { - margin: 0; - border: none; -} |
