X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fdevtools%2Fwebconsole.css;h=dfd389714be60156471ee3356b81a9fd19950ac4;hp=6d065376f69f02340782d2bded3136caa8658d66;hb=589b5528220a57ff70809bd8ef0eeaf51a0c8b2f;hpb=c5772fdfc8610c3a9c9979d3821839895f8afdde diff --git a/LCARStrek/browser/devtools/webconsole.css b/LCARStrek/browser/devtools/webconsole.css index 6d065376..dfd38971 100644 --- a/LCARStrek/browser/devtools/webconsole.css +++ b/LCARStrek/browser/devtools/webconsole.css @@ -1,131 +1,114 @@ -/* ***** BEGIN LICENSE BLOCK ***** - * Version: MPL 1.1/GPL 2.0/LGPL 2.1 - * - * The contents of this file are subject to the Mozilla Public License Version - * 1.1 (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * http://www.mozilla.org/MPL/ - * - * Software distributed under the License is distributed on an "AS IS" basis, - * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License - * for the specific language governing rights and limitations under the - * License. - * - * The Original Code is DevTools code - * - * The Initial Developer of the Original Code is - * Mozilla Corporation - * Portions created by the Initial Developer are Copyright (C) 2010 - * the Initial Developer. All Rights Reserved. - * - * Contributor(s): - * David Dahl - - * Alternatively, the contents of this file may be used under the terms of - * either the GNU General Public License Version 2 or later (the "GPL"), or - * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"), - * in which case the provisions of the GPL or the LGPL are applicable instead - * of those above. If you wish to allow use of your version of this file only - * under the terms of either the GPL or the LGPL, and not to allow others to - * use your version of this file under the terms of the MPL, indicate your - * decision by deleting the provisions above and replace them with the notice - * and other provisions required by the GPL or the LGPL. If you do not delete - * the provisions above, a recipient may use your version of this file under - * the terms of any one of the MPL, the GPL or the LGPL. - * - * ***** END LICENSE BLOCK ***** */ - -.hud-box { - border-bottom: 3px solid #000000; -} - -.hud-box.animated { - -moz-transition: height 100ms; -} - -.hud-outer-wrapper { - width: 100%; - height: 100%; -} - -.hud-console-wrapper { - width: 100%; - overflow: auto; +/* 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/. */ + +window { + padding: 0; } -/* General output styles */ +/* + * 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 + */ -.webconsole-timestamp { - color: #8050B0; - margin-top: 0; - margin-bottom: 0; - font: 12px "Liberation Mono", Consolas, "Courier New", monospace; +.hud-filter-box { + width: 200px; } -.hud-msg-node { - list-style-image: url("chrome://browser/skin/devtools/webconsole.png"); - -moz-image-region: rect(0, 1px, 0, 0); -} +/* === BEGIN webconsole.inc.css === */ -.webconsole-msg-icon { - margin: 3px 4px; - width: 8px; - height: 8px; -} +/* General output styles */ -.hud-output-node div { - -moz-user-select: text; - white-space: pre-wrap; +a { -moz-user-focus: normal; -} - -.hud-clickable { + -moz-user-input: enabled; cursor: pointer; text-decoration: underline; } -.webconsole-msg-body { - margin-top: 0; - margin-bottom: 3px; - -moz-margin-start: 3px; - -moz-margin-end: 6px; - white-space: pre-wrap; - font: 12px "Liberation Mono", Consolas, "Courier New", monospace; +/* Workaround for Bug 575675 - FindChildWithRules aRelevantLinkVisited + * assertion when loading HTML page with links in XUL iframe */ +*:visited { } + +.message { + display: flex; + flex: 0 0 auto; + padding: 0 7px; + width: 100%; + box-sizing: border-box; } -.webconsole-msg-body-piece { - margin: 0; +.message > .timestamp { + flex: 0 0 auto; + color: #8050B0; + margin: 4px 6px 0 0; } -.webconsole-msg-url { - margin: 0 6px; +.message > .indent { + flex: 0 0 auto; +} + +.message > .icon { + background: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 0, 1, 0, 0) no-repeat; + background-position: center; + flex: 0 0 auto; + margin: 3px 6px 0 0; + padding: 0 4px; + width: 8px; + height: 1em; + align-self: flex-start; +} + +.message > .message-body-wrapper { + flex: 1 1 100%; + margin: 3px; } -/* Repeated messages */ -.webconsole-msg-repeat { - margin: 2px 0; - padding-left: 4px; - padding-right: 4px; +/* The red bubble that shows the number of times a message is repeated */ +.message-repeats { + -moz-user-select: none; + flex: 0 0 auto; + margin: 2px 6px; + padding: 0 6px; + height: 1.25em; color: #000000; background-color: #FF0000; border-radius: 40px; /* font: message-box; */ - font-size: 10px; + font-size: 0.9em; font-weight: 600; } -/* TODO move this and other functional rules to content - bug 635359 */ -.webconsole-msg-repeat[value="1"] { +.message-repeats[value="1"] { display: none; } -.webconsole-location { - margin-top: 0; - margin-bottom: 0; - -moz-margin-start: 0; - -moz-margin-end: 6px; +.message-location { + display: flex; + flex: 0 0 auto; + align-self: flex-start; + justify-content: flex-end; width: 10em; + margin-top: 3px; + color: #3333FF; + text-decoration: none; + white-space: nowrap; +} + +.message-location:hover, +.message-location:focus { + text-decoration: underline; +} + +.message-location > .filename { + text-overflow: ellipsis; text-align: end; + overflow: hidden; + white-space: nowrap; +} + +.message-location > .line-number { + flex: 0 0 auto; } .hud-msg-node[selected="true"] > .webconsole-timestamp, @@ -133,177 +116,237 @@ color: inherit; } -.jsterm-input-node, -.jsterm-complete-node { - font: 12px "Liberation Mono", Consolas, "Courier New", monospace; +.message-flex-body { + display: flex; } -.hud-output-node { - -moz-appearance: none; - border-bottom: 1px solid #9C9CFF; - border-top: 1px solid #9C9CFF; - margin: 0; +.message-body { + white-space: pre-wrap; + word-wrap: break-word; } -.hud-filtered-by-type, -.hud-filtered-by-string { - display: none; +.message-flex-body > .message-body { + display: block; + flex: 1 1 auto; + vertical-align: middle; } -.webconsole-clear-console-button > .toolbarbutton-icon { +.message-flex-body > .message-location { + 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; +} + +#output-container.hideTimestamps > .message { + -moz-padding-start: 0; + -moz-margin-start: 7px; + width: calc(100% - 7px); +} + +#output-container.hideTimestamps > .message > .timestamp { display: none; } -.webconsole-filter-button > .toolbarbutton-menubutton-button { - -moz-box-orient: horizontal; - list-style-image: url("chrome://browser/skin/devtools/webconsole.png"); +#output-container.hideTimestamps > .message > .indent { + background-color: #000000; /* .theme-body */ +} + +.filtered-by-type, +.filtered-by-string { + display: none; } -.webconsole-filter-button > .toolbarbutton-menubutton-button, -.webconsole-filter-button > .toolbarbutton-menubutton-button:hover:active { - -moz-padding-start: 6px; - -moz-padding-end: 3px; +.hidden-message { + display: block; + visibility: hidden; + height: 0; + overflow: hidden; } +/* WebConsole colored drops */ + .webconsole-filter-button { - -moz-margin-start: 3px; - -moz-margin-end: 3px; + -moz-user-focus: normal; +} + +.webconsole-filter-button[checked] { + /* color: white !important; */ +} + +.webconsole-filter-button > .toolbarbutton-menubutton-button:before { + content: ""; + display: inline-block; + height: 8px; + width: 8px; + border-radius: 50%; + margin-left: 5px; + border-width: 1px; + border-style: solid; +} + +.webconsole-filter-button menuitem { + -moz-image-region: auto; +} + +.hud-filter-box { + margin-top: 0; + margin-bottom: 0; } /* Network styles */ -.webconsole-filter-button[category="net"] { - -moz-image-region: rect(0, 8px, 8px, 0); +.webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before { + background-image: linear-gradient(#BF9B00, #7F6700); + border-color: #FFCF00; } -.webconsole-msg-network > .webconsole-msg-icon-container { - -moz-border-start: solid #000 6px; +.message[severity=error] { + background-color: #FF0000; } -.webconsole-msg-network.webconsole-msg-error { - -moz-image-region: rect(0, 16px, 8px, 8px); +.console-string { + color: #FF0000; } -/* CSS styles */ -.webconsole-filter-button[category="css"] { - -moz-image-region: rect(8px, 8px, 16px, 0); +.message[category=network] > .indent { + -moz-border-end: solid #FF0000 6px; } -.webconsole-msg-cssparser > .webconsole-msg-icon-container { - -moz-border-start: solid #00b6f0 6px; +.message[category=network][severity=error] > .icon { + background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 0, 16, 8, 8); } -.webconsole-msg-cssparser.webconsole-msg-error { - -moz-image-region: rect(8px, 16px, 16px, 8px); +.message[category=network] > .message-body { + display: flex; } -.webconsole-msg-cssparser.webconsole-msg-warn { - -moz-image-region: rect(8px, 24px, 16px, 16px); +.message[category=network] .method { + flex: 0 0 auto; } -/* JS styles */ -.webconsole-filter-button[category="js"] { - -moz-image-region: rect(16px, 8px, 24px, 0); +.message[category=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; + min-width: 5em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } -.webconsole-msg-exception > .webconsole-msg-icon-container { - -moz-border-start: solid #fb9500 6px; +.message[category=network] .status { + flex: 0 0 auto; + -moz-margin-start: 6px; } -.webconsole-msg-exception.webconsole-msg-error { - -moz-image-region: rect(16px, 16px, 24px, 8px); +.message[category=network].mixed-content .url { + color: #FF0000; } -.webconsole-msg-exception.webconsole-msg-warn { - -moz-image-region: rect(16px, 24px, 24px, 16px); +.message .learn-more-link { + color: #3333FF; + margin: 0 6px; } -/* Web Developer styles */ -.webconsole-filter-button[category="logging"] { - -moz-image-region: rect(24px, 8px, 32px, 0); +/* CSS styles */ +.webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before { + background-image: linear-gradient(#7575BF, #4E4E7F); + border-color: #9C9CFF; } -.webconsole-msg-console > .webconsole-msg-icon-container { - -moz-border-start: solid #cbcbcb 6px; +.message[category=cssparser] > .indent { + -moz-border-end: solid #9C9CFF 6px; } -.webconsole-msg-console.webconsole-msg-error, -.webconsole-msg-output.webconsole-msg-error { - -moz-image-region: rect(24px, 16px, 32px, 8px); +.message[category=cssparser][severity=error] > .icon { + background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 8, 16, 16, 8); } -.webconsole-msg-console.webconsole-msg-warn { - -moz-image-region: rect(24px, 24px, 32px, 16px); +.message[category=cssparser][severity=warn] > .icon { + background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 8, 24, 16, 16); } -.webconsole-msg-console.webconsole-msg-info { - -moz-image-region: rect(24px, 32px, 32px, 24px); +/* JS styles */ +.webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before { + background-image: linear-gradient(#BF7700, #7F4F00); + border-color: #FF9F00; } -/* Input and output styles */ -.webconsole-msg-input > .webconsole-msg-icon-container, -.webconsole-msg-output > .webconsole-msg-icon-container { - border-left: solid #808080 6px; +.message[category=exception] > .indent { + -moz-border-end: solid #FF9F00 6px; } -.webconsole-msg-input { - -moz-image-region: rect(24px, 40px, 32px, 32px); +.message[category=exception][severity=error] > .icon { + background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 16, 16, 24, 8); } -.webconsole-msg-output { - -moz-image-region: rect(24px, 48px, 32px, 40px); +.message[category=exception][severity=warn] > .icon { + background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 16, 24, 24, 16); } -.webconsole-close-button { - border: none; - padding: 3px; - list-style-image: url("chrome://global/skin/icons/close.png"); - -moz-image-region: rect(0, 16px, 16px, 0); - -moz-appearance: none; +/* Web Developer styles */ +.webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before { + background-image: linear-gradient(#5F3B83, #3F2756); + border-color: #8050B0; } -.webconsole-close-button:hover { - -moz-image-region: rect(0, 32px, 16px, 16px); +.message[category=console] > .indent { + -moz-border-end: solid #8050B0 6px; } -.webconsole-close-button:hover:active { - -moz-image-region: rect(0, 48px, 16px, 32px); +.message[category=console][severity=error] > .icon, +.message[category=output][severity=error] > .icon { + background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 16, 32, 8); } -/* JSTerm Styles */ +.message[category=console][severity=warn] > .icon { + background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 24, 32, 16); +} -.jsterm-wrapper-node { - font-family: "Liberation Mono", Consolas, "Courier New", monospace; - font-size: 1em; - background-color: #000; - border: 1px solid #333; - padding: 0.1em; - width: 100%; - height: 400px; +.message[category=console][severity=info] > .icon { + background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 32, 32, 24); +} + +/* Input and output styles */ +.message[category=input] > .indent, +.message[category=output] > .indent { + -moz-border-end: solid #A09090 6px; } -.jsterm-output-node { - width: 100%; - height: 400px; - color: white; - background-color: black; - overflow: auto; - overflow-x: auto; - position: absolute; - -moz-box-direction: reverse; +.message[category=input] > .icon { + background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 40, 32, 32); } -.jsterm-scroll-to-node { - height: 1px; width: 1px; position: relative; top: 92%; display: block; +.message[category=output] > .icon { + background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 48, 32, 40); } +/* JSTerm Styles */ + .jsterm-input-node, .jsterm-complete-node { - border: none; - padding: 0 0 0 16px; + -moz-padding-start: 16px; + margin: 3px 0 0 0; + background-color: transparent; } .jsterm-input-node { - background: url("chrome://global/skin/icons/commandline.png") 4px 3px no-repeat; + background: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16) no-repeat; } :-moz-any(.jsterm-input-node, @@ -311,26 +354,212 @@ overflow-x: hidden; } -.jsterm-complete-node > .textbox-input-box > .textbox-textarea { - color: #8050B0; +.inlined-variables-view .message-body { + display: flex; + flex-direction: column; +} + +.inlined-variables-view iframe { + display: block; + flex: 1; + margin-top: 5px; + margin-bottom: 15px; + -moz-margin-end: 15px; + border: 1px solid #9C9CFF; + border-radius: 4px; } -.jsterm-output-line { - font-size: 1em; +#webconsole-sidebar > tabs { + height: 0; + border: none; } -.hud-console-filter-toolbar { - padding: 1px 2px; - -moz-box-align: center; +.devtools-side-splitter ~ #webconsole-sidebar[hidden] { + display: none; } -.web-console-panel { - -moz-appearance: none; - background-color: black; +/* Security styles */ + +.message[category=security] > .indent { + -moz-border-end: solid #FF0000 6px; } -.web-console-panel > .hud-box { - height: 100%; - width: 100%; - background-color: black; +.webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before { + background-color: #FF0000; + border-color: #FFCF00; +} + +.message[category=security][severity=error] > .icon { + background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 32, 16, 40, 8); +} + +.message[category=security][severity=warn] > .icon { + background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 32, 24, 40, 16); +} + +.navigation-marker { + color: #000000; + background-color: #A09090; + margin-top: 6px; + margin-bottom: 6px; + font-size: 0.9em; +} + +.navigation-marker .url { + -moz-padding-end: 9px; + text-decoration: none; +} + +.stacktrace { + display: none; + list-style: none; + padding: 0 1em 0 1.5em; + margin: 5px 0 0 0; + max-height: 10em; + overflow-y: auto; + border: 1px solid #A09090; + border-radius: 3px; +} + +.message[severity=error] .stacktrace { + background-color: #000000; +} + +.message[open] .stacktrace { + display: block; +} + +.message .theme-twisty { + display: inline-block; + vertical-align: middle; + margin: 0 3px 0 0; +} + +.stacktrace li { + display: flex; + margin: 0; +} + +.stacktrace .function { + display: block; + flex: 1 1 auto; +} + +.cm-s-mozilla a[class] { + font-style: italic; + text-decoration: none; } + +.cm-s-mozilla a[class]:hover, +.cm-s-mozilla a[class]:focus { + text-decoration: underline; +} + +/* Open DOMNode in inspector button */ +.open-inspector { + background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0; + padding-left: 16px; + margin-left: 5px; + cursor: pointer; +} + +.elementNode:hover .open-inspector, +.open-inspector:hover { + background-position: -32px 0; +} + +.open-inspector:active { + background-position: -16px 0; +} + +/* Replace these values with CSS variables as available */ +.theme-dark .jsterm-input-container { + background-color: #000000; /* tabToolbarBackgroundColor */ + border-color: #9C9CFF; /* mainBackgroundColor */ +} + +.theme-dark .jsterm-input-node { + color: #E7ADE7; /* textColor */ +} + +.theme-dark .jsterm-complete-node { + color: #A09090; /* commentColor */ +} + +.theme-dark .navigation-marker .url { + background: #000000; /* mainBackgroundColor */ +} + +.theme-dark .inlined-variables-view iframe { + border-color: #A09090; +} + +.theme-dark .stacktrace { + border-color: #A09090; +} + +.theme-light .jsterm-input-container { + background-color: #000000; /* tabToolbarBackgroundColor */ + border-color: #9C9CFF; /* mainBackgroundColor */ +} + +.theme-light .jsterm-input-node { + color: #E7ADE7; /* textColor */ +} + +.theme-light .jsterm-complete-node { + color: #A09090; /* commentColor */ +} + +.theme-light .navigation-marker .url { + background: #000000; /* mainBackgroundColor */ +} + +.theme-light .inlined-variables-view iframe { + border-color: #A09090; +} + +.theme-dark .stacktrace { + border-color: #A09090; +} + +@media (max-width: 500px) { + .message > .timestamp { + display: none; + } + .toolbarbutton-text { + display: none; + } + .hud-console-filter-toolbar .webconsole-filter-button { + min-width: 40px; + } + .hud-console-filter-toolbar .webconsole-clear-console-button { + min-width: 25px; + } + .webconsole-filter-button > .toolbarbutton-menubutton-button:before { + width: 16px; + height: 16px; + margin-left: 1px; + } + .toolbarbutton-menubutton-dropmarker { + margin: 0px; + } +} + +@media (max-width: 300px) { + .hud-console-filter-toolbar { + -moz-box-orient: vertical; + } + .toolbarbutton-text { + display: -moz-box; + } + .devtools-toolbarbutton { + margin-top: 3px; + } + .hud-console-filter-toolbar .hud-filter-box, + .hud-console-filter-toolbar .devtools-toolbarbutton { + margin-top: 5px; + } +} + +/* === END webconsole.inc.css === */