X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fdevtools%2Fwebconsole.css;h=095b405dc4b052349cb63eeb601b6f26408f8563;hp=593cceb50d3e775b7926a06a60c5a4ab8b2f6a9c;hb=b1d1a8bbaca0a31b2c2581911368b6892d447718;hpb=6f751fd100ed69c35ed979e9d0db9d0f991af80a diff --git a/LCARStrek/devtools/webconsole.css b/LCARStrek/devtools/webconsole.css index 593cceb5..095b405d 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,14 +110,28 @@ 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 */ direction: rtl; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.stack-trace .frame-link-source-inner, +.message-location .frame-link-source-inner { + /* Enforce LTR direction for the file name - fixes bug 1290056 */ + direction: ltr; + unicode-bidi: embed; +} + .stack-trace .frame-link-function-display-name { max-width: 50%; white-space: nowrap; @@ -130,6 +149,7 @@ a { } .message-flex-body > .message-body { + display: block; flex: auto; } @@ -137,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 @@ -174,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; } @@ -195,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 { @@ -204,7 +231,7 @@ a { } .message[severity=error] .console-string { - color: #000000; + background-color: var(--error-background-text); } .theme-selected .console-string, @@ -218,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; @@ -241,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); } @@ -255,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; @@ -273,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; } @@ -291,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; } @@ -309,23 +349,31 @@ a { border-color: #8050B0; } -.message[category=console] > .indent { +.message[category=console] > .indent, +.message.console-api > .indent { border-inline-end: solid #8050B0 6px; } .message[category=console][severity=error] > .icon::before, .message[category=output][severity=error] > .icon::before, -.message[category=server][severity=error] > .icon::before { +.message[category=server][severity=error] > .icon::before, +.message.console-api.error > .icon::before, +.message.output.error > .icon::before, +.message.server.error > .icon::before { background-position: -12px -36px; } .message[category=console][severity=warn] > .icon::before, -.message[category=server][severity=warn] > .icon::before { +.message[category=server][severity=warn] > .icon::before, +.message.console-api.warn > .icon::before, +.message.server.warn > .icon::before { background-position: -24px -36px; } .message[category=console][severity=info] > .icon::before, -.message[category=server][severity=info] > .icon::before { +.message[category=server][severity=info] > .icon::before, +.message.console-api.info > .icon::before, +.message.server.info > .icon::before { background-position: -36px -36px; } @@ -336,21 +384,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; } @@ -428,7 +481,8 @@ a { /* Security styles */ -.message[category=security] > .indent { +.message[category=security] > .indent, +.message.security > .indent { border-inline-end: solid #FF0000 6px; } @@ -437,11 +491,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; } @@ -472,11 +528,22 @@ a { margin: 5px 0 0 0; } +/* Force cells to only show one row of contents. Getting normal ellipses + behavior has proven impossible so far, so this is better than letting + rows get out of vertical alignment when one cell has a lot of content. */ +.consoletable .table-widget-cell > span { + overflow: hidden; + display: flex; + height: 1.25em; + line-height: 1.25em; +} + .message[severity=error] .stacktrace { background-color: #000000; } -.message[open] .stacktrace { +.message[open] .stacktrace, +.message.open .stacktrace { display: block; } @@ -487,6 +554,12 @@ a { flex-shrink: 0; } +/*Do not mirror the twisty because container force to ltr */ +.message .theme-twisty:dir(rtl), +.message .theme-twisty:-moz-locale-dir(rtl) { + transform: none; +} + .cm-s-mozilla a[class] { font-style: italic; text-decoration: none; @@ -514,6 +587,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); } @@ -567,3 +641,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; +}