X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fdevtools%2Fwebconsole.css;h=58f15d15f742ca8e61acdcc621077e520402326f;hp=f221fd60c488f6773578ff47f5f9d73064f66ae9;hb=cac2a998599d19515fc59e7a93b9f8db9ca3a903;hpb=649b5d38865cb338a3419ffda9ff41382c2c9523 diff --git a/LCARStrek/browser/devtools/webconsole.css b/LCARStrek/browser/devtools/webconsole.css index f221fd60..58f15d15 100644 --- a/LCARStrek/browser/devtools/webconsole.css +++ b/LCARStrek/browser/devtools/webconsole.css @@ -32,38 +32,60 @@ a { .message { display: flex; - flex: 0 0 auto; - -moz-margin-start: 6px; - -moz-margin-end: 8px; - width: calc(100% - 6px - 8px); + flex: none; + padding: 0 7px; + width: 100%; + box-sizing: border-box; } .message > .timestamp { - flex: 0 0 auto; + flex: none; color: #8050B0; - margin: 4px 0; + margin: 4px 6px 0 0; +} + +.message > .indent { + flex: none; } .message > .icon { - background: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 0, 1, 0, 0) no-repeat; - background-position: center 0.5em; - flex: 0 0 auto; - margin: 0 6px; + flex: none; + margin: 3px 6px 0 0; padding: 0 4px; + height: 1em; + align-self: flex-start; +} + +.message > .icon::before { + content: ""; + background-image: url("chrome://browser/skin/devtools/webconsole.png"); + background-position: 8px 8px; + background-repeat: no-repeat; + background-size: 48px 40px; width: 8px; + height: 8px; + display: inline-block; +} + +@media (min-resolution: 2dppx) { + .message > .icon::before { + background-image: url("chrome://browser/skin/devtools/webconsole@2x.png"); + } } -.message > .body { +.message > .message-body-wrapper { flex: 1 1 100%; - white-space: pre-wrap; - word-wrap: break-word; - margin-top: 4px; + margin: 3px; +} + +.message-body-wrapper .table-widget-body { + overflow: visible; } /* The red bubble that shows the number of times a message is repeated */ .message-repeats { -moz-user-select: none; - flex: 0 0 auto; + flex: none; margin: 2px 6px; padding: 0 6px; height: 1.25em; @@ -80,13 +102,12 @@ a { } .message-location { - -moz-margin-start: 6px; display: flex; - flex: 0 0 auto; + flex: none; align-self: flex-start; justify-content: flex-end; width: 10em; - margin-top: 4px; + margin-top: 3px; color: #3333FF; text-decoration: none; white-space: nowrap; @@ -105,7 +126,7 @@ a { } .message-location > .line-number { - flex: 0 0 auto; + flex: none; } .hud-msg-node[selected="true"] > .webconsole-timestamp, @@ -113,6 +134,25 @@ a { color: inherit; } +.message-flex-body { + display: flex; +} + +.message-body { + white-space: pre-wrap; + word-wrap: break-word; +} + +.message-flex-body > .message-body { + display: block; + flex: 1 1 main-size; + vertical-align: middle; +} + +.message-flex-body > .message-location { + margin-top: 0; +} + .jsterm-input-container { border-top-width: 1px; border-top-style: solid; @@ -131,10 +171,20 @@ a { 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; } +#output-container.hideTimestamps > .message > .indent { + background-color: #000000; /* .theme-body */ +} + .filtered-by-type, .filtered-by-string { display: none; @@ -153,10 +203,6 @@ a { -moz-user-focus: normal; } -.webconsole-filter-button[checked] { - /* color: white !important; */ -} - .webconsole-filter-button > .toolbarbutton-menubutton-button:before { content: ""; display: inline-block; @@ -183,24 +229,43 @@ a { border-color: #FFCF00; } -.message[category=network] > .icon { - -moz-border-start: solid #FFCF00 6px; +.message:hover { + background-color: #404000; +} + +.message[severity=error] { + background-color: #FF0000; +} + +.console-string { + color: #FF0000; +} + +.theme-selected .console-string, +.theme-selected .cm-number, +.theme-selected .cm-variable, +.theme-selected .kind-ArrayLike { + color: #000000 !important; /* Selection Text Color */ } -.message[category=network][severity=error] > .icon { - background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 0, 16, 8, 8); +.message[category=network] > .indent { + -moz-border-end: solid #FF0000 6px; } -.message[category=network] > .body { +.message[category=network][severity=error] > .icon::before { + background-position: -8px 0; +} + +.message[category=network] > .message-body { display: flex; } .message[category=network] .method { - flex: 0 0 auto; + flex: none; } .message[category=network]:not(.navigation-marker) .url { - flex: 1 1 auto; + flex: 1 1 main-size; /* Make sure the URL is very small initially, let flex change width as needed. */ width: 100px; min-width: 5em; @@ -210,7 +275,7 @@ a { } .message[category=network] .status { - flex: 0 0 auto; + flex: none; -moz-margin-start: 6px; } @@ -229,16 +294,16 @@ a { border-color: #9C9CFF; } -.message[category=cssparser] > .icon { - -moz-border-start: solid #9C9CFF 6px; +.message[category=cssparser] > .indent { + -moz-border-end: solid #9C9CFF 6px; } -.message[category=cssparser][severity=error] > .icon { - background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 8, 16, 16, 8); +.message[category=cssparser][severity=error] > .icon::before { + background-position: -8px -8px; } -.message[category=cssparser][severity=warn] > .icon { - background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 8, 24, 16, 16); +.message[category=cssparser][severity=warn] > .icon::before { + background-position: -16px -8px; } /* JS styles */ @@ -247,16 +312,16 @@ a { border-color: #FF9F00; } -.message[category=exception] > .icon { - -moz-border-start: solid #FF9F00 6px; +.message[category=exception] > .indent { + -moz-border-end: solid #FF9F00 6px; } -.message[category=exception][severity=error] > .icon { - background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 16, 16, 24, 8); +.message[category=exception][severity=error] > .icon::before { + background-position: -8px -16px; } -.message[category=exception][severity=warn] > .icon { - background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 16, 24, 24, 16); +.message[category=exception][severity=warn] > .icon::before { + background-position: -16px -16px; } /* Web Developer styles */ @@ -265,35 +330,35 @@ a { border-color: #8050B0; } -.message[category=console] > .icon { - -moz-border-start: solid #8050B0 6px; +.message[category=console] > .indent { + -moz-border-end: solid #8050B0 6px; } -.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); +.message[category=console][severity=error] > .icon::before, +.message[category=output][severity=error] > .icon::before { + background-position: -8px -24px; } -.message[category=console][severity=warn] > .icon { - background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 24, 32, 16); +.message[category=console][severity=warn] > .icon::before { + background-position: -16px -24px; } -.message[category=console][severity=info] > .icon { - background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 32, 32, 24); +.message[category=console][severity=info] > .icon::before { + background-position: -24px -24px; } /* Input and output styles */ -.message[category=input] > .icon, -.message[category=output] > .icon { - -moz-border-start: solid #A09090 6px; +.message[category=input] > .indent, +.message[category=output] > .indent { + -moz-border-end: solid #A09090 6px; } -.message[category=input] > .icon { - background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 40, 32, 32); +.message[category=input] > .icon::before { + background-position: -32px -24px; } -.message[category=output] > .icon { - background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 24, 48, 32, 40); +.message[category=output] > .icon::before { + background-position: -40px -24px; } /* JSTerm Styles */ @@ -306,7 +371,15 @@ a { } .jsterm-input-node { - background: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16) no-repeat; + background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16); + background-repeat: no-repeat; + background-size: 16px 16px; +} + +@media (min-resolution: 2dppx) { + .jsterm-input-node { + background-image: -moz-image-rect(url('chrome://browser/skin/devtools/commandline-icon@2x.png'), 0, 64, 32, 32); + } } :-moz-any(.jsterm-input-node, @@ -314,7 +387,7 @@ a { overflow-x: hidden; } -.inlined-variables-view .body { +.inlined-variables-view .message-body { display: flex; flex-direction: column; } @@ -340,8 +413,8 @@ a { /* Security styles */ -.message[category=security] > .icon { - -moz-border-start: solid #FF0000 6px; +.message[category=security] > .indent { + -moz-border-end: solid #FF0000 6px; } .webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before { @@ -349,12 +422,12 @@ a { 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=error] > .icon::before { + background-position: -8px -32px; } -.message[category=security][severity=warn] > .icon { - background-image: -moz-image-rect(url("chrome://browser/skin/devtools/webconsole.png"), 32, 24, 40, 16); +.message[category=security][severity=warn] > .icon::before { + background-position: -16px -32px; } .navigation-marker { @@ -370,27 +443,35 @@ a { text-decoration: none; } -.consoleTrace .body > div { - display: flex; - margin-bottom: 5px; -} - -.consoleTrace .title { - display: block; - flex: 1 1 auto; -} - .stacktrace { + display: none; list-style: none; padding: 0 1em 0 1.5em; - margin: 0; + margin: 5px 0 0 0; max-height: 10em; overflow-y: auto; - border: 1px solid #A09090; border-radius: 3px; } +.consoletable { + margin: 5px 0 0 0; +} + +.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; @@ -398,7 +479,7 @@ a { .stacktrace .function { display: block; - flex: 1 1 auto; + flex: 1 1 main-size; } .cm-s-mozilla a[class] { @@ -429,53 +510,28 @@ a { } /* 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 { +.jsterm-input-container { background-color: #000000; /* tabToolbarBackgroundColor */ border-color: #9C9CFF; /* mainBackgroundColor */ } -.theme-light .jsterm-input-node { +.jsterm-input-node { color: #E7ADE7; /* textColor */ } -.theme-light .jsterm-complete-node { +.jsterm-complete-node { color: #A09090; /* commentColor */ } -.theme-light .navigation-marker .url { +.navigation-marker .url { background: #000000; /* mainBackgroundColor */ } -.theme-light .inlined-variables-view iframe { +.inlined-variables-view iframe { border-color: #A09090; } -.theme-dark .stacktrace { +.stacktrace { border-color: #A09090; } @@ -483,7 +539,7 @@ a { .message > .timestamp { display: none; } - .toolbarbutton-text { + .hud-console-filter-toolbar .webconsole-filter-button .toolbarbutton-text { display: none; } .hud-console-filter-toolbar .webconsole-filter-button { @@ -493,8 +549,8 @@ a { min-width: 25px; } .webconsole-filter-button > .toolbarbutton-menubutton-button:before { - width: 16px; - height: 16px; + width: 12px; + height: 12x; margin-left: 1px; } .toolbarbutton-menubutton-dropmarker {