X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fdevtools%2Fdebugger.css;h=6e230bb21d714774e2dbb5cfd28c1878c251c203;hp=64fe1902e088e6033a4e3937cad921f66f4fafe3;hb=b1d1a8bbaca0a31b2c2581911368b6892d447718;hpb=dc9d5d64a3f915cb832f43050545b432f33504f7;ds=sidebyside diff --git a/LCARStrek/devtools/debugger.css b/LCARStrek/devtools/debugger.css index 64fe1902..6e230bb2 100644 --- a/LCARStrek/devtools/debugger.css +++ b/LCARStrek/devtools/debugger.css @@ -1,3 +1,4 @@ +/* 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/. */ @@ -6,8 +7,6 @@ window { padding: 0; } -/* === BEGIN debugger.inc.css === */ - /* Sources and breakpoints pane */ #sources-pane[selectedIndex="0"] + #sources-and-editor-splitter { @@ -15,92 +14,96 @@ window { } #sources-pane > tabs { - -moz-border-end-color: var(--theme-splitter-color); +/* border-inline-end: 1px solid;*/ } -.dbg-breakpoint-condition-thrown-message { - display: none; - color: var(--theme-highlight-red); +#sources-pane .devtools-toolbar { + border: none; /* Remove the devtools-toolbar bottom border. */ +/* border-inline-end: 1px solid;*/ } -.dbg-breakpoint.dbg-breakpoint-condition-thrown .dbg-breakpoint-condition-thrown-message { - display: block; - -moz-padding-start: 0; +#sources-pane > tabs, +#sources-pane .devtools-toolbar { + border-inline-end-color: var(--theme-splitter-color); } -/* Sources toolbar */ +/* Sources and breakpoints list */ -#sources-toolbar > .devtools-toolbarbutton, -#sources-controls > .devtools-toolbarbutton { - min-width: 32px; +.dbg-source-item { + padding: 2px 0px; } -#black-box { - list-style-image: url("debugger-blackbox.png"); +.dbg-wasm-item .icon { + display: block; + background-image: url(chrome://devtools/skin/images/webconsole.svg); + background-repeat: no-repeat; + background-size: 72px 60px; + /* show warning icon */ + background-position: -24px -24px; + width: 10px; + height: 10px; + position: absolute; + margin-inline-start: -15px; + margin-top: 3px; } -@media (min-resolution: 1.1dppx) { - #black-box { - list-style-image: url(debugger-blackbox@2x.png); - } +.dbg-breakpoint-line { + font-weight: 600; } -#pretty-print { - list-style-image: url(debugger-prettyprint.png); +.dbg-breakpoint-text { + padding-inline-start: 6px; + font-style: italic; + font-size: 90%; } -@media (min-resolution: 1.1dppx) { - #pretty-print { - list-style-image: url(debugger-prettyprint@2x.png); - } +.dbg-breakpoint-checkbox { + width: 16px; + height: 16px; + margin: 2px; } -#toggle-breakpoints { - list-style-image: url("debugger-toggleBreakpoints.png"); +.dbg-breakpoint-condition-thrown-message { + display: none; + color: var(--theme-highlight-red); } -@media (min-resolution: 1.1dppx) { - #toggle-breakpoints { - list-style-image: url(debugger-toggleBreakpoints@2x.png); - } +.dbg-breakpoint.dbg-breakpoint-condition-thrown .dbg-breakpoint-condition-thrown-message { + display: block; + padding-inline-start: 0; } -#toggle-promise-debugger { - /* TODO Bug 1186119: Add a toggle promise debugger image */ -} +/* Sources toolbar */ -#sources-toolbar .devtools-toolbarbutton:not([label]) { - -moz-image-region: rect(0px, 16px, 16px, 0px); +#sources-toolbar > .devtools-toolbarbutton, +#sources-controls > .devtools-toolbarbutton { + min-width: 16px; } -#sources-toolbar .devtools-toolbarbutton:not([label]):hover { - -moz-image-region: rect(16px, 16px, 32px, 0px); +#black-box { + list-style-image: url("images/debugger-blackbox.svg"); } -#sources-toolbar .devtools-toolbarbutton:not([label])[checked] { - -moz-image-region: rect(0px, 32px, 16px, 16px); +#pretty-print { + list-style-image: url("images/debugger-prettyprint.svg"); } -#sources-toolbar .devtools-toolbarbutton:not([label])[checked]:hover { - -moz-image-region: rect(16px, 32px, 32px, 16px); +#toggle-breakpoints { + list-style-image: url(images/debugger-toggleBreakpoints.svg); + -moz-image-region: rect(0,32px,16px,16px); } -@media (min-resolution: 1.1dppx) { - #sources-toolbar .devtools-toolbarbutton:not([label]) { - -moz-image-region: rect(0px,32px,32px,0px); - } - - #sources-toolbar .devtools-toolbarbutton:not([label]):hover { - -moz-image-region: rect(32px,32px,64px,0px); - } +#toggle-breakpoints[checked] { + -moz-image-region: rect(0,16px,16px,0); +} - #sources-toolbar .devtools-toolbarbutton:not([label])[checked] { - -moz-image-region: rect(0px,64px,32px,32px); - } +#toggle-breakpoints[checked] > image { + /* This button has a special checked image, don't make it blue */ + filter: none; +} - #sources-toolbar .devtools-toolbarbutton:not([label])[checked]:hover { - -moz-image-region: rect(32px,64px,64px,32px); - } +#toggle-promise-debugger { + /* TODO Bug 1186119: Add a toggle promise debugger image */ } #sources .black-boxed { @@ -115,32 +118,14 @@ window { display: none; } -#sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(ltr) { - background-image: none; -/* box-shadow: inset -1px 0 0 #222426; */ -} - -#sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(rtl) { - background-image: none; -/* box-shadow: inset 1px 0 0 #222426; */ -} - /* Debugger unblackbox button */ #black-boxed-message-button > .button-box > .button-icon { width: 16px; height: 16px; - background-image: url("debugger-blackbox.png"); - background-position: -16px -16px; - background-size: 32px 32px; - background-repeat: no-repeat; - -moz-margin-end: 5px; -} - -@media (min-resolution: 1.1dppx) { - #black-boxed-message-button > .button-box > .button-icon { - background-image: url("debugger-blackbox@2x.png"); - } + background-image: url("images/debugger-blackbox.svg"); + background-position: 0 0; + background-size: cover; } /* Black box message and source progress meter */ @@ -170,102 +155,20 @@ window { padding: .25em; } -/* Tracer */ - -#trace { - list-style-image: url("tracer-icon.png"); - -moz-image-region: rect(0px,16px,16px,0px); -} - -#trace:hover, -#trace[checked] { - -moz-image-region: rect(0px,32px,16px,16px); -} - -@media (min-resolution: 1.1dppx) { - #trace { - list-style-image: url(tracer-icon@2x.png); - -moz-image-region: rect(0px,32px,32px,0px); - } - - #trace:hover, - #trace[checked] { - -moz-image-region: rect(0px,64px,32px,32px); - } -} - -#clear-tracer { - /* Make this button as narrow as the text inside it. */ - min-width: 1px; -} - -.trace-name { - -moz-padding-start: 4px !important; -} - -/* Tracer dark+light theme */ - -.trace-item { - color: var(--theme-content-color1); -} - -.trace-item.black-boxed { - color: #A09090; -} - -.trace-item.selected-matching { - background-color: #004242; /* Select highlight blue at 40% alpha */ -} - -.selected > .trace-item { - background-color: #004242; /* Select highlight blue at 75% alpha */ -} - -.trace-call { - color: var(--theme-highlight-blue); -} - -.trace-return, -.trace-yield { - color: var(--theme-highlight-green); -} - -.trace-throw { - color: var(--theme-highlight-red); -} - -.trace-param { - color: var(--theme-highlight-pink); -} - -.trace-syntax { - color: var(--theme-content-color2); -} - /* Breadcrumbs stack frames view */ -.breadcrumbs-widget-item { - max-width: none; -} - -#stackframes { - min-height: 25px; -} - .dbg-stackframe-details { - -moz-padding-start: 4px; + padding-inline-start: 4px; } /* Classic stack frames view */ .dbg-classic-stackframe { display: block; - padding: 0 4px; } .dbg-classic-stackframe-title { font-weight: 600; - color: #9C9CFF; } .dbg-classic-stackframe-details:-moz-locale-dir(ltr) { @@ -279,7 +182,10 @@ window { .dbg-classic-stackframe-details-url { max-width: 90%; text-align: end; - color: var(--theme-text-blue); +} + +.dbg-classic-stackframe-details-url { + color: var(--theme-content-color1); } .dbg-classic-stackframe-details-sep { @@ -287,68 +193,72 @@ window { } .dbg-classic-stackframe-details-line { - color: var(--theme-highlight-blue); + color: var(--theme-highlight-bluegrey); } -#callstack-list .side-menu-widget-item.selected label { - color: #FFCF00; +#callstack-list .selected label { + /* Text inside a selected item should not be custom colored. */ + color: inherit !important; } -/* Sources and breakpoints view */ +/* Tracer */ -.dbg-breakpoint { - -moz-margin-start: 4px; +#trace { + list-style-image: url("images/tracer-icon.png"); } -.dbg-breakpoint-line { - font-weight: 600; +@media (min-resolution: 1.1dppx) { + #trace { + list-style-image: url("images/tracer-icon@2x.png"); + } } -.dbg-breakpoint-text { - -moz-margin-start: 10px !important; - font-style: italic; - font-size: 90%; +#clear-tracer { + /* Make this button as narrow as the text inside it. */ + min-width: 1px; } -.dbg-breakpoint-checkbox { - width: 16px; - height: 16px; - margin: 2px; +.trace-name { + padding-inline-start: 4px; } -/* Variable bubble view */ +/* Tracer dark+light theme */ -.devtools-tooltip-simple-text.token-undefined, -.devtools-tooltip-simple-text.token-null { - text-align: center; - color: #A09090 !important; /* Override the theme's color. */ +.trace-item { + color: var(--theme-content-color1); } -.devtools-tooltip-simple-text.token-boolean { - text-align: center; - color: #9C9CFF !important; +.trace-item.black-boxed { + color: #A09090; } -.devtools-tooltip-simple-text.token-number { - text-align: center; - color: #E7ADE7 !important; +.trace-item.selected-matching { + background-color: #004242; /* Select highlight blue at 40% alpha */ } -.devtools-tooltip-simple-text.token-string { - text-align: start; - color: #008484 !important; +.selected > .trace-item { + background-color: #004242; /* Select highlight blue at 75% alpha */ } -.devtools-tooltip-simple-text.token-other { - text-align: center; - color: #FF9F00 !important; +.trace-call { + color: var(--theme-highlight-blue); } -/* Instruments pane (watch expressions, variables, event listeners...) */ +.trace-return, +.trace-yield { + color: var(--theme-highlight-green); +} -#instruments-pane .side-menu-widget-container, -#instruments-pane .side-menu-widget-empty-text { -/* box-shadow: none !important; */ +.trace-throw { + color: var(--theme-highlight-red); +} + +.trace-param { + color: var(--theme-highlight-pink); +} + +.trace-syntax { + color: var(--theme-content-color2); } /* Watch expressions view */ @@ -363,21 +273,12 @@ window { } .dbg-expression-arrow { - background-image: url("commandline-icon.png"); - background-position: -16px 0; - background-repeat: no-repeat; - background-size: 32px 16px; + background-image: var(--theme-command-line-image-focus); width: 16px; height: 16px; margin: 2px; } -@media (min-resolution: 1.1dppx) { - .dbg-expression-arrow { - background-image: url(commandline-icon@2x.png); - } -} - .dbg-expression-input { color: inherit; } @@ -392,14 +293,14 @@ window { /* Event listeners view */ -.dbg-event-listener { - padding: 0 8px; -} - .dbg-event-listener-type { font-weight: 600; } +.dbg-event-listener-location { + color: var(--theme-highlight-pink); +} + .dbg-event-listener-separator { color: var(--theme-body-color-alt); } @@ -408,37 +309,35 @@ window { color: var(--theme-highlight-blue); } -.dbg-event-listener-location { - color: var(--theme-highlight-pink); -} - -#event-listeners .side-menu-widget-item.selected { - background: none !important; +#event-listeners .selected { + /* Selected items shouldn't be displayed differently. */ + background: none; + color: var(--theme-content-color1); } /* Searchbox and the search operations help panel */ #searchbox { min-width: 220px; - -moz-margin-start: 1px; + margin-inline-start: 1px; } #filter-label { - -moz-margin-start: 2px; + margin-inline-start: 2px; } #searchbox-panel-operators { margin-top: 5px; margin-bottom: 8px; - -moz-margin-start: 2px; + margin-inline-start: 2px; } .searchbox-panel-operator-button { min-width: 26px; margin-top: 0; margin-bottom: 0; - -moz-margin-start: 2px; - -moz-margin-end: 6px; + margin-inline-start: 2px; + margin-inline-end: 6px; text-align: center; } @@ -448,19 +347,17 @@ window { /* Searchbox results panel */ -.results-panel { - padding: 4px; +#results-panel { + border: none; } .results-panel-item { - border: 1px solid #A09090; - border-top-color: #8050B0; - padding: 5px; - cursor: pointer; + padding: 6px 8px; + border-top: 1px solid #A09090; } .results-panel-item:first-of-type { - border-top-color: #9C9CFF; + border-top: none; border-radius: 4px 4px 0 0; } @@ -472,36 +369,40 @@ window { border-radius: 4px; } -.results-panel-item:not(.selected):not(:hover) { -/* text-shadow: 0 1px #fff;*/ +.results-panel-item-label { + font-weight: 600; } .results-panel-item-label-before { - -moz-margin-end: 5px !important; - color: var(--theme-content-color2); - cursor: inherit; + padding-inline-end: 6px; } .results-panel-item-label { color: var(--theme-highlight-blue); - font-weight: 600; - cursor: inherit; +} + +.results-panel-item-label-before { + color: var(--theme-content-color2); } .results-panel-item-label-below { color: var(--theme-content-color3); - cursor: inherit; +} + +#results-panel .selected label { + /* Text inside a selected item should not be custom colored. */ + color: inherit !important; } /* Sources search view */ #globalsearch { min-height: 10px; - max-height: 125px; + max-height: 50vh; } #globalsearch + .devtools-horizontal-splitter { - -moz-border-top-colors: #9C9CFF; + -moz-border-top-colors: var(--theme-splitter-color); } .dbg-source-results { @@ -510,11 +411,11 @@ window { } .dbg-source-results:not(.selected):hover { - background-color: #000000; /* Sidebar background */ + background-color: var(--theme-sidebar-background); } .dbg-results-header { - -moz-padding-start: 6px; + padding-inline-start: 6px; } .dbg-results-header-location { @@ -522,37 +423,28 @@ window { } .dbg-results-header-match-count { - -moz-padding-start: 6px; - color: var(--theme-content-disabled); + padding-inline-start: 6px; + color: var(--theme-body-color-inactive); } .dbg-results-line-number { - background-color: var(--theme-toolbar-background); - min-width: 40px; - -moz-border-end: 1px solid #9C9CFF; - -moz-padding-end: 4px; - padding-top: 2px; + min-width: 3em; + border-inline-end: 1px solid #9C9CFF; + padding-inline-end: 4px; text-align: end; - color: var(--theme-body-color); } .dbg-results-line-contents { - -moz-padding-start: 4px; - padding-top: 1px; - padding-bottom: 1px; -} - -.dbg-results-line-contents-string { - padding: 1px; -/* color: var(--theme-body-color-alt);*/ + padding-inline-start: 4px; } .dbg-results-line-contents-string[match=true] { background: #E7ADE7; color: var(--theme-selection-color); - padding: 0; border: 1px solid #9C9CFF; border-radius: 4px; + margin-top: -1px !important; + margin-bottom: -1px !important; cursor: pointer; } @@ -565,63 +457,51 @@ window { transform: scale(1.75, 1.75); } -/* Toolbar controls */ - -#toggle-panes { - list-style-image: url("chrome://devtools/skin/debugger-expand.png"); - -moz-image-region: rect(0px, 16px, 16px, 0px); +.dbg-source-results:not(.selected):hover { + background-color: var(--theme-sidebar-background); } -#toggle-panes:not([panesHidden]) { - list-style-image: url("chrome://devtools/skin/debugger-collapse.png"); +.dbg-results-header { + background-color: var(--theme-tab-toolbar-background); } -#toggle-panes:hover, -#toggle-panes:hover:active { - -moz-image-region: rect(0px, 32px, 16px, 16px); +.dbg-results-header { + color: var(--theme-content-color1); } -#debugger-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon, -#sources-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon { - width: 16px; - height: 16px; +.dbg-search-result:hover { + background-color: #004242; /* Select highlight blue at 40% alpha */ } -#resume { - list-style-image: url("chrome://devtools/skin/debugger-pause.png"); - -moz-image-region: rect(0px, 16px, 16px, 0px); +.dbg-results-header-match-count { + color: var(--theme-content-color3); } -#resume:hover { - -moz-image-region: rect(0px, 32px, 16px, 16px); +.dbg-results-line-number { + background-color: var(--theme-tab-toolbar-background); + color: var(--theme-body-color-alt); } -#resume[checked=true] { - list-style-image: url("chrome://devtools/skin/debugger-play.png"); +.dbg-results-line-contents-string { + color: var(--theme-body-color-alt); } -@media (min-resolution: 1.1dppx) { - #resume { - list-style-image: url(debugger-pause@2x.png); - -moz-image-region: rect(0px, 32px, 32px, 0px); - } - - #resume:hover { - -moz-image-region: rect(0px, 64px, 32px, 32px); - } +.theme-dark .dbg-results-line-contents-string[match=true] { + color: var(--theme-selection-color); +} - #resume[checked=true] { - list-style-image: url(debugger-play@2x.png); - } +.theme-light .dbg-results-line-contents-string[match=true] { + color: var(--theme-body-color); } -#debugger-controls toolbarbutton { -/* transition: opacity 0.15s ease-in-out; */ +/* Toolbar controls */ + +#resume { + list-style-image: url(images/pause.svg); } -#debugger-controls toolbarbutton[disabled] { -/* opacity: 0.5; - transition: none; */ +#resume[checked] { + list-style-image: url(images/play.svg); } #resume[break-on-next] { @@ -629,87 +509,23 @@ window { } #step-over { - list-style-image: url("chrome://devtools/skin/debugger-step-over.png"); - -moz-image-region: rect(0px, 16px, 16px, 0px); -} -#step-over:hover { - -moz-image-region: rect(0px, 32px, 16px, 16px); + list-style-image: url(images/debugger-step-over.svg); } #step-in { - list-style-image: url("chrome://devtools/skin/debugger-step-in.png"); - -moz-image-region: rect(0px, 16px, 16px, 0px); -} -#step-in:hover { - -moz-image-region: rect(0px, 32px, 16px, 16px); + list-style-image: url(images/debugger-step-in.svg); } #step-out { - list-style-image: url("chrome://devtools/skin/debugger-step-out.png"); - -moz-image-region: rect(0px, 16px, 16px, 0px); -} -#step-out:hover { - -moz-image-region: rect(0px, 32px, 16px, 16px); -} - -@media (min-resolution: 1.1dppx) { - #step-over { - list-style-image: url(debugger-step-over@2x.png); - -moz-image-region: rect(0px, 32px, 32px, 0); - } - - #step-over:hover { - -moz-image-region: rect(0px, 64px, 32px, 32px); - } - - #step-in { - list-style-image: url(debugger-step-in@2x.png); - -moz-image-region: rect(0px, 32px, 32px, 0); - } - - #step-in:hover { - -moz-image-region: rect(0px, 64px, 32px, 32px); - } - - #step-out { - list-style-image: url(debugger-step-out@2x.png); - -moz-image-region: rect(0px, 32px, 32px, 0); - } - - #step-out:hover { - -moz-image-region: rect(0px, 64px, 32px, 32px); - } + list-style-image: url(images/debugger-step-out.svg); } #instruments-pane-toggle { -/* background: none; - box-shadow: none; - border: none; */ - list-style-image: url("chrome://devtools/skin/debugger-collapse.png"); - -moz-image-region: rect(0px,16px,16px,0px); + list-style-image: var(--theme-pane-collapse-image); } #instruments-pane-toggle[pane-collapsed] { - list-style-image: url("chrome://devtools/skin/debugger-expand.png"); -} - -#instruments-pane-toggle:hover { - -moz-image-region: rect(0px,32px,16px,16px); -} - -@media (min-resolution: 1.1dppx) { - #instruments-pane-toggle { - list-style-image: url(debugger-collapse@2x.png); - -moz-image-region: rect(0px,32px,32px,0px); - } - - #instruments-pane-toggle[pane-collapsed] { - list-style-image: url(debugger-expand@2x.png); - } - - #instruments-pane-toggle:hover { - -moz-image-region: rect(0px,64px,32px,32px); - } + list-style-image: var(--theme-pane-expand-image); } /* Horizontal vs. vertical layout */ @@ -719,15 +535,15 @@ window { max-height: 80vh; } +#body[layout=vertical] #sources-pane > tabs { + border-inline-end: none; +} + #body[layout=vertical] #instruments-pane { margin: 0 !important; /* To prevent all the margin hacks to hide the sidebar. */ } -#body[layout=vertical] #sources-pane > tabs { - -moz-border-end: none; -} - #body[layout=vertical] .side-menu-widget-container, #body[layout=vertical] .side-menu-widget-empty-text { box-shadow: none !important; @@ -737,4 +553,7 @@ window { background-image: none !important; } -/* === END debugger.inc.css === */ +#body[layout=vertical] .side-menu-widget-group, +#body[layout=vertical] .side-menu-widget-item { + margin-inline-end: 0; +}