From: Robert Kaiser Date: Mon, 21 Nov 2016 17:49:52 +0000 (+0100) Subject: improve devtools looks somewhat and make them work up to current nightly X-Git-Tag: LCARStrek-2.47~1 X-Git-Url: https://git-public.kairo.at/?a=commitdiff_plain;h=60156ae2942f9e0388417766c47ff8d8ab79369b;p=themes.git improve devtools looks somewhat and make them work up to current nightly --- diff --git a/LCARStrek/devtools/common.css b/LCARStrek/devtools/common.css index f3e8d0ba..c11ffd4e 100644 --- a/LCARStrek/devtools/common.css +++ b/LCARStrek/devtools/common.css @@ -159,3 +159,24 @@ input[type="checkbox"]:-moz-focusring, checkbox:-moz-focusring { outline: none; } + + +:root { + --clear-icon-url: url("chrome://devtools/skin/images/clear.svg"); +} + +.devtools-button.devtools-clear-icon::before { + background-image: var(--clear-icon-url); +} + +.devtools-button.devtools-filter-icon::before { + background-image: var(--filter-image); +} + +.devtools-toolbarbutton.devtools-clear-icon { + list-style-image: var(--clear-icon-url); +} + +.devtools-option-toolbarbutton { + list-style-image: var(--tool-options-image); +} diff --git a/LCARStrek/devtools/dark-theme.css b/LCARStrek/devtools/dark-theme.css index ad4c3ebf..7ecfc02f 100644 --- a/LCARStrek/devtools/dark-theme.css +++ b/LCARStrek/devtools/dark-theme.css @@ -383,18 +383,29 @@ div.CodeMirror span.eval-text { .devtools-textinput, .devtools-searchinput, -.devtools-filterinput { +.devtools-filterinput, +.devtools-plaininput { background-color: #000000; color: #E7ADE7; border: 1px solid #9C9CFF; + border-radius: 3px; } .devtools-textinput:focus, .devtools-searchinput:focus, -.devtools-filterinput:focus { +.devtools-filterinput:focus, +.devtools-plaininput:focus { border-color: #008484; } +.devtools-textinput::-moz-placeholder, +.devtools-searchinput::-moz-placeholder, +.devtools-filterinput::-moz-placeholder, +.devtools-plaininput::-moz-placeholder { + color: #8050B0; + opacity: 1.0; +} + .CodeMirror-Tern-fname { color: #A09090; } diff --git a/LCARStrek/devtools/images/breadcrumbs-divider@2x.png b/LCARStrek/devtools/images/breadcrumbs-divider@2x.png index 086daac9..3f057d2e 100644 Binary files a/LCARStrek/devtools/images/breadcrumbs-divider@2x.png and b/LCARStrek/devtools/images/breadcrumbs-divider@2x.png differ diff --git a/LCARStrek/devtools/inspector.css b/LCARStrek/devtools/inspector.css index 76d86813..1d5f1f67 100644 --- a/LCARStrek/devtools/inspector.css +++ b/LCARStrek/devtools/inspector.css @@ -10,13 +10,69 @@ window { padding: 0; } -:root.theme-dark { +:root { --breadcrumbs-border-color: #9C9CFF; } +* { + box-sizing: border-box; +} + +/* Make sure to hide scroll bars for the parent window */ +window { + overflow: hidden; +} + +/* The main Inspector panel container. */ +.inspector-responsive-container { + height: 100vh; +} + +/* The main panel layout. This area consists of a toolbar, markup view + and breadcrumbs bar. */ +#inspector-main-content { + /* Subtract 1 pixel from the panel height. It's puzzling why this + is needed, but if not presented the entire Inspector panel + content jumps 1 pixel up when the Toolbox is opened. */ + height: calc(100% - 1px); + /* This min-width avoids a visual glitch when moving the splitter quickly to the left. + See bug 1307408 comment #12. */ + min-width: 125px; + display: flex; + flex-direction: column; + flex: 1 1 auto; +} + +/* Inspector Panel Splitter */ + +#inspector-splitter-box { + height: 100vh; + width: 100vw; + position: fixed; +} + +/* Minimum dimensions for the Inspector splitter areas. */ +#inspector-splitter-box .uncontrolled, +#inspector-splitter-box .controlled { + min-height: 50px; + min-width: 50px; + overflow-x: hidden; +} + +/* Set a minimum width of 200px for tab content to avoid breaking the layout when resizing + the sidebar tab to small width. If a specific panel supports smaller width, this should + be overridden on a panel-by-panel basis */ +.inspector-tabpanel { + min-width: 200px; +} + +#inspector-splitter-box .controlled.pane-collapsed { + visibility: collapse; +} + /* Use flex layout for the Inspector toolbar. For now, it's done specifically for the Inspector toolbar since general rule applied - on .devtools-toolbar breaks breadcrubs and also toolbars in other + on .devtools-toolbar breaks breadcrumbs and also toolbars in other panels (e.g. webconsole, debugger), these are not ready for HTML layout yet. */ #inspector-toolbar.devtools-toolbar { @@ -28,6 +84,13 @@ window { display: inline-block; } +/* Add element toolbar button */ +#inspector-element-add-button::before { + background-image: url("chrome://devtools/skin/images/add.svg"); + list-style-image: url("chrome://devtools/skin/images/add.svg"); + -moz-user-focus: normal; +} + #inspector-searchlabel { overflow: hidden; } @@ -40,18 +103,45 @@ window { line-height: 19px; } +#inspector-search { + flex: unset; +} + +/* Eyedropper toolbar button */ + +#inspector-eyedropper-toggle { + /* Required to display tooltip when eyedropper is disabled in non-HTML documents */ + pointer-events: auto; +} + +#inspector-eyedropper-toggle::before { + background-image: var(--eyedropper-image); +} + +#inspector-sidebar-toggle-box { + line-height: initial; +} + #inspector-breadcrumbs-toolbar { padding: 0px; border-bottom-width: 0px; - border-top-width: 1px; - border-top-color: var(--breadcrumbs-border-color); +/* border-top-width: 1px; + border-top-color: var(--breadcrumbs-border-color);*/ /* Bug 1262668 - Use the same background as the body so the breadcrumbs toolbar doesn't get mistaken as a splitter */ - background-color: var(--theme-body-background); + background-color: var(--theme-alternate-toolbar-background); + background-image: none; + background-size: auto; display: block; position: relative; } +/* Remove LCARS startcap and endcap */ +div#inspector-breadcrumbs-toolbar::before, +div#inspector-breadcrumbs-toolbar::after { + display: none; +} + #inspector-breadcrumbs-toolbar, #inspector-breadcrumbs-toolbar * { box-sizing: border-box; @@ -59,6 +149,7 @@ window { #inspector-breadcrumbs { display: flex; + /* Break out of the XUL flexbox, so the splitter can still shrink the markup view even if the contents of the breadcrumbs are wider than the new width. */ @@ -85,22 +176,25 @@ window { #inspector-breadcrumbs .breadcrumbs-widget-item { white-space: nowrap; flex-shrink: 0; - font: message-box; + font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; } -#inspector-eyedropper-toggle { - /* hidden by default, until we can check that the required highlighter exists */ - display: none; +#inspector-sidebar-container { + overflow: hidden; + position: relative; + height: 100%; } -#inspector-eyedropper-toggle::before { - background-image: var(--eyedropper-image); +#inspector-sidebar { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; } -/* Add element toolbar button */ -#inspector-element-add-button::before { - background-image: url("chrome://devtools/skin/images/add.svg"); - list-style-image: url("chrome://devtools/skin/images/add.svg"); +/* Override `-moz-user-focus:ignore;` from toolkit/content/minimal-xul.css */ +.inspector-tabpanel > * { -moz-user-focus: normal; } @@ -112,3 +206,20 @@ window { text-align: center; margin: 5px; } + +/* Markup Box */ + +iframe { + border: 0; +} + +#markup-box { + width: 100%; + flex: 1; + min-height: 0; +} + +#markup-box > iframe { + height: 100%; + width: 100%; +} diff --git a/LCARStrek/devtools/performance.css b/LCARStrek/devtools/performance.css index 1fd9412e..d2759987 100644 --- a/LCARStrek/devtools/performance.css +++ b/LCARStrek/devtools/performance.css @@ -70,17 +70,27 @@ /* Recording buttons */ #recordings-controls { - background-color: #9C9CFF; +/* background-color: #9C9CFF;*/ + display: flex; +} + +#recording-controls-mount, +#recording-controls-mount > div, +#recording-controls-mount > div > .devtools-toolbar { + display: flex; + flex: 1 1 auto; } #clear-button::before { background-image: var(--clear-icon-url); } +#main-record-button > image, #main-record-button::before { background-image: url(images/profiler-stopwatch-tbutton.svg); } +#import-button > image, #import-button::before { background-image: url(images/import.svg); } diff --git a/LCARStrek/devtools/rules.css b/LCARStrek/devtools/rules.css index 08f320a2..863b473e 100644 --- a/LCARStrek/devtools/rules.css +++ b/LCARStrek/devtools/rules.css @@ -32,6 +32,13 @@ height: auto; } +/* Remove LCARS startcap and endcap */ +/* XXX: We actually should add them via the #ruleview-toolbar again */ +div#ruleview-toolbar-container::before, +div#ruleview-toolbar-container::after { + display: none; +} + #ruleview-toolbar { display: flex; } diff --git a/LCARStrek/devtools/toolbars.css b/LCARStrek/devtools/toolbars.css index ea1816d2..ee12919a 100644 --- a/LCARStrek/devtools/toolbars.css +++ b/LCARStrek/devtools/toolbars.css @@ -24,6 +24,17 @@ /* Toolbars */ .devtools-toolbar, .devtools-sidebar-tabs tabs { + padding: 0; + border-width: 0; +/* border-bottom-width: 1px;*/ + border-style: solid; +/* height: 24px; + line-height: 24px;*/ + box-sizing: border-box; + font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; +} +.devtools-toolbar { + height: 24px; } .devtools-toolbar { @@ -43,6 +54,65 @@ .devtools-toolbar checkbox .checkbox-label-box .checkbox-label { } +/* HTML Checkboxes - a lot copied from global/in-content/common.css */ +/* Hide the actual checkbox */ +input[type="checkbox"]:not(#browser-style-checkbox) { /* not() is workaround for old placement of checkbox in label */ + opacity: 0; + width: 0; + pointer-events: none; + position: absolute; +} + +/* Create a box to style as the checkbox */ +input[type="checkbox"] + label::before { + display: inline-block; + content: ""; + vertical-align: middle; +} + +.devtools-searchbox + #browser-style-checkbox-label, /* workaround for old placement of checkbox in label */ +input[type="checkbox"] + label { + line-height: 0px; + color: var(--theme-capped-toolbar-text); +} + +input[type="checkbox"] + label::before { + -moz-appearance: none; + width: 13px; + height: 13px; + border-radius: 0; + border: 1px solid var(--theme-body-color); + margin-inline-end: 3px; + margin-inline-start: 2px; + background-color: var(--theme-toolbar-background); + background-position: center center; + background-repeat: no-repeat; +} + +input[type="checkbox"]:not(:disabled) + label:hover::before { + border-color: var(--theme-hover-background); +} +.devtools-searchbox + #browser-style-checkbox-label:hover, /* workaround for old placement of checkbox in label */ +input[type="checkbox"]:not(:disabled) + label:hover { + color: var(--theme-hover-background); +} +input[type="checkbox"]:checked + label::before { + background-image: url("chrome://global/skin/in-content/check.svg#check"); +} + +input[type="checkbox"]:checked:disabled + label::before { + background-image: url("chrome://global/skin/in-content/check.svg#check-disabled"); +} +input[type="checkbox"]:checked:not(:disabled) + label:hover::before { + background-image: url("chrome://global/skin/in-content/check.svg#check-hover"); +} +input[type="checkbox"]:disabled + label::before { + border-color: var(--theme-body-color-inactive); +} +input[type="checkbox"]:disabled + label { + color: var(--theme-body-color-inactive); +} + .devtools-separator { margin: 0 2px; width: 2px; @@ -52,6 +122,39 @@ background-position: 0, 1px, 2px; } +/* HTML toolbars - style them LCARStrek-like */ + +div.devtools-toolbar { + background-size: calc(100% - 30px); + background-image: linear-gradient(90deg, var(--theme-capped-toolbar-background), var(--theme-capped-toolbar-background)); + background-repeat: no-repeat; + background-position: center center; + display: flex; +} + +div.devtools-toolbar::before, +div.devtools-toolbar::after { + display: flex; + content: ""; + width: 12px; + min-height: 16px; + background-color: var(--theme-toolbar-caps); +} + +div.devtools-toolbar::before { + border-radius: 8px 0px 0px 8px; + border: none; + border-inline-end: 3px solid black; + margin-inline-end: 2px; +} + +div.devtools-toolbar::after { + border-radius: 0px 8px 8px 0px; + border: none; + border-inline-start: 3px solid black; + margin-inline-start: auto; /* originally 2px, but auto makes us able to get flexible free space */ +} + /* Toolbar buttons */ .devtools-menulist, @@ -121,7 +224,8 @@ .devtools-button[standalone], .devtools-button[data-standalone], .devtools-toolbarbutton[standalone], -.devtools-toolbarbutton[data-standalone] { +.devtools-toolbarbutton[data-standalone], +.menu-filter-button { border: none; /* min-height: 32px; */ background-color: var(--theme-button-background); @@ -132,7 +236,8 @@ .devtools-button[standalone]:hover, .devtools-button[data-standalone]:hover, .devtools-toolbarbutton[standalone]:hover, -.devtools-toolbarbutton[data-standalone]:hover { +.devtools-toolbarbutton[data-standalone]:hover, +.menu-filter-button:hover { background-color: var(--theme-hover-background); color: var(--theme-hover-color); } @@ -140,11 +245,21 @@ .devtools-button[standalone]:hover:active, .devtools-button[data-standalone]:hover:active, .devtools-toolbarbutton[standalone]:hover:active, -.devtools-toolbarbutton[data-standalone]:hover:active { +.devtools-toolbarbutton[data-standalone]:hover:active, +.menu-filter-button:hover:active { background-color: var(--theme-active-background); color: var(--theme-active-color); } +.menu-filter-button.checked { + background: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.menu-filter-button + .menu-filter-button { + margin-inline-start: 2px; +} + .devtools-toolbarbutton[standalone], .devtools-toolbarbutton[data-standalone] { } @@ -353,7 +468,7 @@ } .devtools-filterinput { - background-image: url(--filter-image); + background-image: var(--filter-image); } .devtools-searchinput:-moz-locale-dir(rtl), @@ -412,7 +527,7 @@ .devtools-rule-searchbox { -moz-box-flex: 1; width: 100%; - font: inherit; +/* font: inherit;*/ } .devtools-rule-searchbox[filled] { @@ -422,8 +537,8 @@ } .devtools-style-searchbox-no-match { - background-color: var(--searcbox-no-match-background-color) !important; - border-color: var(--searcbox-no-match-border-color) !important; + background-color: var(--searchbox-no-match-background-color) !important; + border-color: var(--searchbox-no-match-border-color) !important; } .devtools-searchinput-clear { @@ -558,6 +673,30 @@ /* background-color: var(--theme-splitter-color);*/ } +/* HACK around hardcoded stylings for the HTML-based sidebar tabs */ +.tabs .tabs-menu-item, +.theme-dark .tabs .tabs-menu-item, +.theme-light .tabs .tabs-menu-item { + margin: 0; + margin-inline-end: 3px !important; + padding: 0 !important; + border-radius: 8px 8px 0 0; + border: 0 !important; + background-color: var(--theme-button-background); +} +.tabs .tabs-menu-item a { + color: var(--theme-button-color) !important; + padding: 0px 3px !important; +} +.tabs .tabs-menu-item.is-active { + height: auto !important; +} +.tabs .tabs-navigation { + height: auto !important; + border: 0 !important; + border-bottom: 3px solid var(--theme-body-background) !important; +} + /* Throbbers */ .devtools-throbber::before { diff --git a/LCARStrek/devtools/toolbox.css b/LCARStrek/devtools/toolbox.css index 448e1e9c..fa527f3c 100644 --- a/LCARStrek/devtools/toolbox.css +++ b/LCARStrek/devtools/toolbox.css @@ -45,6 +45,16 @@ color: #FFCF00; } +/* Set flex attribute to Toolbox buttons and Picker container so, + they don't overlapp with the tab bar */ +#toolbox-buttons { + display: flex; +} + +#toolbox-picker-container { + display: flex; +} + /* Toolbox tabs */ .devtools-tab { @@ -65,12 +75,8 @@ -moz-user-focus: normal; -moz-box-flex: 1; - color: #000000; - background-color: #C09070; -} - -.theme-dark .devtools-tab:hover { - color: #ced3d9; + color: var(--theme-button-color); + background-color: var(--theme-button-background); } .devtools-tab:hover, @@ -112,8 +118,8 @@ } .devtools-tabbar .devtools-tab[selected] { - background-color: var(--theme-selection-background); color: var(--theme-selection-color); + background-color: var(--theme-selection-background); } #toolbox-tabs .devtools-tab[selected], diff --git a/LCARStrek/devtools/variables.css b/LCARStrek/devtools/variables.css index d1c68186..49f0a28a 100644 --- a/LCARStrek/devtools/variables.css +++ b/LCARStrek/devtools/variables.css @@ -23,11 +23,15 @@ --theme-tab-toolbar-background: #402800; --theme-toolbar-background: #000000; + --theme-capped-toolbar-background: #9C9CFF; + --theme-capped-toolbar-text: #000000; + --theme-alternate-toolbar-background: #A09090; + --theme-toolbar-caps: #FF9F00; --theme-button-background: #C09070; --theme-button-color: #000000; --theme-hover-background: #FFCF00; --theme-hover-color: #000000; - --theme-active-background: #FFCF00; + --theme-active-background: #FF9F00; --theme-active-color: #000000; --theme-selection-background: #008484; --theme-selection-color: #000000; diff --git a/LCARStrek/devtools/webconsole.css b/LCARStrek/devtools/webconsole.css index f99cd3e2..ce0d175d 100644 --- a/LCARStrek/devtools/webconsole.css +++ b/LCARStrek/devtools/webconsole.css @@ -7,6 +7,11 @@ .theme-dark, .theme-light, .theme-firebug { + --error-color: #FF0000; + --error-background-color: #FF0000; + --error-background-text: #000000; + --warning-background-color: #FFCF00; + --warning-background-text: #000000; } window { @@ -105,6 +110,12 @@ a { max-width: 40%; } +.stack-trace { + /* The markup contains extra whitespace to improve formatting of clipboard text. + Make sure this whitespace doesn't affect the HTML rendering */ + white-space: normal; +} + .stack-trace .frame-link-source, .message-location .frame-link-source { /* Makes the file name truncated (and ellipsis shown) on the left side */ @@ -138,6 +149,7 @@ a { } .message-flex-body > .message-body { + display: block; flex: auto; } @@ -145,6 +157,7 @@ a { direction: ltr; overflow: auto; -moz-user-select: text; + position: relative; } /* The width on #output-container is set to a hardcoded px in webconsole.js @@ -182,13 +195,18 @@ a { -moz-user-focus: normal; } +.webconsole-filter-button > .toolbarbutton-menubutton-button { + -moz-box-orient: horizontal; /* saving vertical space in toolbar */ +} + .webconsole-filter-button > .toolbarbutton-menubutton-button:before { content: ""; display: inline-block; height: 8px; width: 8px; border-radius: 50%; - margin-inline-start: 5px; + margin-inline-start: 1px; + margin-inline-end: 3px; border-width: 1px; border-style: solid; } @@ -203,8 +221,9 @@ a { background-color: var(--theme-contrast-background); } -.message[severity=error] { - background-color: #FF0000; +.message[severity=error], +.message.error { + background-color: var(--error-background-color); } .console-string { @@ -212,7 +231,7 @@ a { } .message[severity=error] .console-string { - color: #000000; + background-color: var(--error-background-text); } .theme-selected .console-string, @@ -226,20 +245,24 @@ a { border-inline-end: solid var(--theme-body-color-alt) 6px; } -.message[category=network][severity=error] > .icon::before { +.message[category=network][severity=error] > .icon::before, +.message.network.error > .icon::before { background-position: -12px 0; } -.message[category=network] > .message-body { +.message[category=network] > .message-body, +.message.network > .message-body { display: flex; flex-wrap: wrap; } -.message[category=network] .method { +.message[category=network] .method, +.message.network .method { flex: none; } -.message[category=network]:not(.navigation-marker) .url { +.message[category=network]:not(.navigation-marker) .url, +.message.network:not(.navigation-marker) .url { flex: 1 1 auto; /* Make sure the URL is very small initially, let flex change width as needed. */ width: 100px; @@ -249,12 +272,14 @@ a { text-overflow: ellipsis; } -.message[category=network] .status { +.message[category=network] .status, +.message.network .status { flex: none; margin-inline-start: 6px; } -.message[category=network].mixed-content .url { +.message[category=network].mixed-content .url, +.message.network.mixed-content .url { color: var(--theme-highlight-red); } @@ -263,7 +288,8 @@ a { margin: 0 6px; } -.message[category=network] .xhr { +.message[category=network] .xhr, +.message.network .xhr { background-color: var(--theme-body-color-alt); color: var(--theme-body-background); border-radius: 3px; @@ -281,15 +307,18 @@ a { border-color: #9C9CFF; } -.message[category=cssparser] > .indent { +.message[category=cssparser] > .indent, +.message.cssparser > .indent { border-inline-end: solid #9C9CFF 6px; } -.message[category=cssparser][severity=error] > .icon::before { +.message[category=cssparser][severity=error] > .icon::before, +.message.cssparser.error > .icon::before { background-position: -12px -12px; } -.message[category=cssparser][severity=warn] > .icon::before { +.message[category=cssparser][severity=warn] > .icon::before, +.message.cssparser.warn > .icon::before { background-position: -24px -12px; } @@ -299,15 +328,18 @@ a { border-color: #FF9F00; } -.message[category=exception] > .indent { +.message[category=exception] > .indent, +.message.exception > .indent { border-inline-end: solid #FF9F00 6px; } -.message[category=exception][severity=error] > .icon::before { +.message[category=exception][severity=error] > .icon::before, +.message.exception.error > .icon::before { background-position: -12px -24px; } -.message[category=exception][severity=warn] > .icon::before { +.message[category=exception][severity=warn] > .icon::before, +.message.exception.warn > .icon::before { background-position: -24px -24px; } @@ -317,7 +349,8 @@ a { border-color: #8050B0; } -.message[category=console] > .indent { +.message[category=console] > .indent, +.message.console-api > .indent { border-inline-end: solid #8050B0 6px; } @@ -344,21 +377,26 @@ a { border-color: #008484; } -.message[category=server] > .indent { +.message[category=server] > .indent, +.message.server > .indent { border-inline-end: solid #8050B0 6px; } /* Input and output styles */ .message[category=input] > .indent, -.message[category=output] > .indent { +.message[category=output] > .indent, +.message.command > .indent, +.message.result > .indent { border-inline-end: solid #A09090 6px; } -.message[category=input] > .icon::before { +.message[category=input] > .icon::before, +.message.command > .icon::before { background-position: -48px -36px; } -.message[category=output] > .icon::before { +.message[category=output] > .icon::before, +.message.result > .icon::before { background-position: -60px -36px; } @@ -436,7 +474,8 @@ a { /* Security styles */ -.message[category=security] > .indent { +.message[category=security] > .indent, +.message.security > .indent { border-inline-end: solid #FF0000 6px; } @@ -445,11 +484,13 @@ a { border-color: #FFCF00; } -.message[category=security][severity=error] > .icon::before { +.message[category=security][severity=error] > .icon::before, +.message.security.error > .icon::before { background-position: -12px -48px; } -.message[category=security][severity=warn] > .icon::before { +.message[category=security][severity=warn] > .icon::before, +.message.security.warn > .icon::before { background-position: -24px -48px; } @@ -532,6 +573,7 @@ a.learn-more-link.webconsole-learn-more-link { filter: url(images/filters.svg#checked-icon-state); } +.elementNode:hover .open-inspector:active, .open-inspector:active { filter: url(images/filters.svg#checked-icon-state); } @@ -585,3 +627,128 @@ a.learn-more-link.webconsole-learn-more-link { :root[platform="win"] .hud-filter-box { width: 200px; } + +/* NEW CONSOLE STYLES */ + +#output-wrapper > div { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +#output-container { + height: 100%; +} + +.webconsole-output-wrapper { + display: flex; + flex-direction: column; + height: 100%; + -moz-user-focus: normal; +} + +.webconsole-filterbar-wrapper { + flex-grow: 0; +} + +.webconsole-output { + flex: 1; + overflow: auto; +} + +.webconsole-filterbar-primary { + display: flex; +} + +.devtools-toolbar.webconsole-filterbar-secondary { + height: initial; +} + +.webconsole-filterbar-primary .devtools-plaininput { + flex: 1 1 100%; +} + +.webconsole-output.hideTimestamps > .message > .timestamp { + display: none; +} + +.message.startGroup .message-body, +.message.startGroupCollapsed .message-body { + color: var(--theme-body-color); + font-weight: bold; +} + +.webconsole-output-wrapper .message > .icon { + margin: 3px 0 0 0; + padding: 0 0 0 6px; +} + +.message.error > .icon::before { + background-position: -12px -36px; +} + +.message.warn > .icon::before { + background-position: -24px -36px; +} + +.message.info > .icon::before { + background-position: -36px -36px; +} + +.message.network .method { + margin-inline-end: 5px; +} + +.webconsole-output-wrapper .message .indent { + display: inline-block; + border-inline-end: solid 1px var(--theme-splitter-color); +} + +.message.startGroup .indent, +.message.startGroupCollapsed .indent { + border-inline-end-color: transparent; + margin-inline-end: 5px; +} + +.message.startGroup .icon, +.message.startGroupCollapsed .icon { + display: none; +} + +/* console.table() */ +.new-consoletable { + width: 100%; + border-collapse: collapse; + --consoletable-border: 1px solid var(--table-splitter-color); +} + +.new-consoletable thead, +.new-consoletable tbody { + background-color: var(--theme-body-background); +} + +.new-consoletable th { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); + margin: 0; + padding: 5px 0 0; + font-weight: inherit; + border-inline-end: var(--consoletable-border); + border-bottom: var(--consoletable-border); +} + +.new-consoletable tr:nth-of-type(even) { + background-color: var(--table-zebra-background); +} + +.new-consoletable td { + padding: 3px 4px; + min-width: 100px; + -moz-user-focus: normal; + color: var(--theme-body-color); + border-inline-end: var(--consoletable-border); + height: 1.25em; + line-height: 1.25em; +} diff --git a/LCARStrek/devtools/widgets.css b/LCARStrek/devtools/widgets.css index dc8e6e0f..686a686e 100644 --- a/LCARStrek/devtools/widgets.css +++ b/LCARStrek/devtools/widgets.css @@ -231,7 +231,7 @@ } .breadcrumbs-widget-item { - background-color: var(--theme-toolbar-background); + background-color: var(--theme-capped-toolbar-background); min-height: 24px; min-width: 65px; margin: 0; @@ -254,8 +254,8 @@ .breadcrumbs-widget-item[siblings-menu-open], .breadcrumbs-widget-item:active { - background-color: #FF9F00; - color: #000000; + background-color: var(--theme-active-background); + color: var(--theme-active-color); } .breadcrumbs-widget-item:-moz-focusring { @@ -278,16 +278,22 @@ } .breadcrumbs-widget-item:not([checked]) { - background: -moz-element(#breadcrumb-separator-normal) no-repeat center left; + background-image: -moz-element(#breadcrumb-separator-normal); + background-repeat: no-repeat; + background-position: center left; } .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item { - background: -moz-element(#breadcrumb-separator-after) no-repeat 0 0; + background-image: -moz-element(#breadcrumb-separator-after); + background-repeat: no-repeat; + background-position: 0 0; } .breadcrumbs-widget-item[checked] { - background: -moz-element(#breadcrumb-separator-before) no-repeat 0 0; - background-color: #008484; /* Select Highlight Blue */ + background-image: -moz-element(#breadcrumb-separator-before); + background-repeat: no-repeat; + background-position: 0 0; + background-color: var(--theme-selection-background); /* Select Highlight Blue */ } .breadcrumbs-widget-item:first-child { @@ -321,27 +327,28 @@ .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag, .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes, .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes { - color: var(--theme-highlight-lightorange); + color: var(--theme-button-color); /* --theme-highlight-lightorange */ } .breadcrumbs-widget-item { - color: var(--theme-highlight-lightorange); + color: var(--theme-button-color); /* tag name, --theme-highlight-lightorange */ } +.breadcrumbs-widget-item:not([checked]):hover span, .breadcrumbs-widget-item:not([checked]):hover label { color: var(--theme-hover-color) !important; } .breadcrumbs-widget-item-id { - color: var(--theme-body-color-alt); + color: var(--theme-highlight-red); /* --theme-body-color-alt */ } .breadcrumbs-widget-item-classes { - color: var(--theme-content-color1); + color: var(#402800); /* --theme-content-color1 */ } .breadcrumbs-widget-item-pseudo-classes { - color: var(--theme-highlight-lightorange); + color: var(--theme-button-color); /* --theme-highlight-lightorange */ } /* SimpleListWidget */