X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fdevtools%2Fwebconsole.css;h=f085cc4c8bc68da57e6134a816d359aed63c85a2;hp=c7d43527cfb4fdd19dac1c2e16cbbcf58b2d3e6d;hb=5d91f988780d79a9b7e08efa72f2ff1212793bba;hpb=dc9d5d64a3f915cb832f43050545b432f33504f7 diff --git a/LCARStrek/devtools/webconsole.css b/LCARStrek/devtools/webconsole.css index c7d43527..f085cc4c 100644 --- a/LCARStrek/devtools/webconsole.css +++ b/LCARStrek/devtools/webconsole.css @@ -2,6 +2,15 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +/* Webconsole specific theme variables */ + +.theme-dark, +.theme-light, +.theme-firebug { + --command-line-image: -moz-image-rect(url("chrome://devtools/skin/images/commandline-icon.png"), 0, 32, 16, 16); + --command-line-image-2x: -moz-image-rect(url('chrome://devtools/skin/images/commandline-icon@2x.png'), 0, 64, 32, 32); +} + window { padding: 0; } @@ -15,8 +24,6 @@ window { width: 200px; } -/* === BEGIN webconsole.inc.css === */ - /* General output styles */ a { @@ -41,7 +48,7 @@ a { .message > .prefix, .message > .timestamp { flex: none; - color: #8050B0; + color: var(--theme-comment); margin: 3px 6px 0 0; } @@ -59,7 +66,7 @@ a { .message > .icon::before { content: ""; - background-image: url("chrome://devtools/skin/webconsole.svg"); + background-image: url("chrome://devtools/skin/images/webconsole.svg"); background-position: 12px 12px; background-repeat: no-repeat; background-size: 72px 60px; @@ -113,20 +120,8 @@ a { text-decoration: underline; } -.message-location > .filename { - text-overflow: ellipsis; - text-align: end; - overflow: hidden; - white-space: nowrap; -} - -.message-location > .line-number { - flex: none; -} - -.hud-msg-node[selected="true"] > .webconsole-timestamp, -.hud-msg-node[selected="true"] > .webconsole-location { - color: inherit; +.message-location > .frame-link .frame-link-source { + width: 10em; } .message-flex-body { @@ -148,24 +143,15 @@ a { margin-top: 0; } -.jsterm-input-container { - border-top-width: 1px; - border-top-style: solid; -} - #output-wrapper { direction: ltr; overflow: auto; -} - -#output-container { -moz-user-select: text; - -moz-box-flex: 1; - display: flex; - flex-direction: column; - align-items: flex-start; } +/* The width on #output-container is set to a hardcoded px in webconsole.js + since it's way faster than using 100% with -moz-box-flex (see Bug 1237368) */ + #output-container.hideTimestamps > .message { -moz-padding-start: 0; -moz-margin-start: 7px; @@ -194,10 +180,6 @@ a { /* WebConsole colored drops */ -.hud-console-filter-toolbar toolbarbutton > .toolbarbutton-text { - padding: 2px 2px 3px; -} - .webconsole-filter-button { -moz-user-focus: normal; } @@ -208,25 +190,11 @@ a { height: 8px; width: 8px; border-radius: 50%; - -moz-margin-start: 2px; - -moz-margin-end: 2px; + margin-left: 5px; border-width: 1px; border-style: solid; } -.webconsole-filter-button > .toolbarbutton-menubutton-button { - -moz-box-orient: horizontal; -} - -.webconsole-filter-button menuitem { - -moz-image-region: auto; -} - -.hud-filter-box { - margin-top: 0; - margin-bottom: 0; -} - /* Network styles */ .webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before { background-image: linear-gradient(#BF9B00, #7F6700); @@ -257,7 +225,7 @@ a { } .message[category=network] > .indent { - -moz-border-end: solid #FF0000 6px; + -moz-border-end: solid var(--theme-body-color-alt) 6px; } .message[category=network][severity=error] > .icon::before { @@ -266,6 +234,7 @@ a { .message[category=network] > .message-body { display: flex; + flex-wrap: wrap; } .message[category=network] .method { @@ -288,11 +257,11 @@ a { } .message[category=network].mixed-content .url { - color: #FF0000; + color: var(--theme-highlight-red); } .message .learn-more-link { - color: #3333FF; + color: var(--theme-highlight-blue); margin: 0 6px; } @@ -304,7 +273,8 @@ a { font-size: 10px; padding: 2px; line-height: 10px; - -moz-margin-end: 1ex; + margin-inline-start: 3px; + margin-inline-end: 1ex; } /* CSS styles */ @@ -395,23 +365,36 @@ a { } /* JSTerm Styles */ +.jsterm-input-container { + background-color: var(--theme-tab-toolbar-background); + border-top: 1px solid var(--theme-splitter-color); +} .jsterm-input-node, .jsterm-complete-node { - -moz-padding-start: 16px; - margin: 3px 0 0 0; + border: none; + padding: 0 0 0 16px; + -moz-appearance: none; background-color: transparent; } +.jsterm-complete-node { + color: var(--theme-comment); +} + .jsterm-input-node { - background-image: -moz-image-rect(url("chrome://devtools/skin/commandline-icon.png"), 0, 32, 16, 16); + /* Always allow scrolling on input - it auto expands in js by setting height, + but don't want it to get bigger than the window. 24px = toolbar height. */ + max-height: calc(90vh - 24px); + background-image: var(--command-line-image); background-repeat: no-repeat; background-size: 16px 16px; + color: var(--theme-content-color1); } @media (min-resolution: 1.1dppx) { .jsterm-input-node { - background-image: -moz-image-rect(url('chrome://devtools/skin/commandline-icon@2x.png'), 0, 64, 32, 32); + background-image: var(--command-line-image-2x); } } @@ -429,13 +412,13 @@ a { } .inlined-variables-view iframe { - display: block; + display: block; flex: 1; margin-top: 5px; margin-bottom: 15px; -moz-margin-end: 15px; - border: 1px solid #9C9CFF; - border-radius: 4px; + border: 1px solid var(--theme-splitter-color); + border-radius: 3px; } #webconsole-sidebar > tabs { @@ -477,6 +460,7 @@ a { .navigation-marker .url { -moz-padding-end: 9px; text-decoration: none; + background: var(--theme-body-background); } .stacktrace { @@ -486,7 +470,7 @@ a { margin: 5px 0 0 0; max-height: 10em; overflow-y: auto; - border: 1px solid #A09090; + border: 1px solid var(--theme-splitter-color); border-radius: 3px; } @@ -505,7 +489,8 @@ a { .message .theme-twisty { display: inline-block; vertical-align: middle; - margin: 0 3px 0 0; + margin: 3px 0 0 0; + flex-shrink: 0; } .stacktrace li { @@ -528,6 +513,10 @@ a { text-decoration: underline; } +a.learn-more-link.webconsole-learn-more-link { + font-style: normal; +} + /* Open DOMNode in inspector button */ .open-inspector { background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0; @@ -538,37 +527,11 @@ a { .elementNode:hover .open-inspector, .open-inspector:hover { - background-position: -32px 0; + filter: url(images/filters.svg#checked-icon-state); } .open-inspector:active { - background-position: -16px 0; -} - -/* Replace these values with CSS variables as available */ -.jsterm-input-container { - background-color: var(--theme-toolbar-background); - border-color: var(--theme-splitter-color); -} - -.jsterm-input-node { - color: var(--theme-highlight-pink); -} - -.jsterm-complete-node { - color: var(--theme-comment); -} - -.navigation-marker .url { - background: var(--theme-body-background); -} - -.inlined-variables-view iframe { - border-color: #A09090; -} - -.stacktrace { - border-color: #A09090; + filter: url(images/filters.svg#checked-icon-state); } @media (max-width: 500px) { @@ -612,4 +575,11 @@ a { */ } -/* === END webconsole.inc.css === */ +/* + * This hardcoded width likely due to a toolkit Windows specific bug. + * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7 + */ + +:root[platform="win"] .hud-filter-box { + width: 200px; +}