Mypal/devtools/client/themes/webconsole.css

/* 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/. */

/* Webconsole specific theme variables */
.theme-light,
.theme-firebug {
  --error-color: #FF0000;
  --error-background-color: #FFEBEB;
  --warning-background-color: #FFFFC8;
}

/* General output styles */

a {
  -moz-user-focus: normal;
  cursor: pointer;
  text-decoration: underline;
}

/* Workaround for Bug 575675 - FindChildWithRules aRelevantLinkVisited
 * assertion when loading HTML page with links in XUL iframe */
*:visited { }

.message {
  display: flex;
  padding: 0 7px;
  width: 100%;
  box-sizing: border-box;
}

.message > .prefix,
.message > .timestamp {
  flex: none;
  color: var(--theme-comment);
  margin: 3px 6px 0 0;
}

.message > .indent {
  flex: none;
}

.message > .icon {
  flex: none;
  margin: 3px 6px 0 0;
  padding: 0 4px;
  height: 1em;
  align-self: flex-start;
}

.theme-firebug .message > .icon {
  margin: 0;
  margin-inline-end: 6px;
}

.theme-firebug .message[severity="error"],
.theme-light .message.error,
.theme-firebug .message.error {
  color: var(--error-color);
  background-color: var(--error-background-color);
}

.theme-firebug .message[severity="warn"],
.theme-light .message.warn,
.theme-firebug .message.warn {
  background-color: var(--warning-background-color);
}

.message > .icon::before {
  content: "";
  background-image: url(chrome://devtools/skin/images/webconsole.svg);
  background-position: 12px 12px;
  background-repeat: no-repeat;
  background-size: 72px 60px;
  width: 12px;
  height: 12px;
  display: inline-block;
}

.theme-light .message > .icon::before {
  background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons);
}

.message > .message-body-wrapper {
  flex: auto;
  min-width: 0px;
  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: none;
  margin: 2px 6px;
  padding: 0 6px;
  height: 1.25em;
  color: white;
  background-color: red;
  border-radius: 40px;
  font: message-box;
  font-size: 0.9em;
  font-weight: 600;
}

.message-repeats[value="1"] {
  display: none;
}

.message-location {
  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;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-flex-body {
  display: flex;
}

.message-body {
  white-space: pre-wrap;
  word-wrap: break-word;
}

.message-flex-body > .message-body {
  display: block;
  flex: auto;
}

#output-wrapper {
  direction: ltr;
  overflow: auto;
  -moz-user-select: text;
  position: relative;
}

/* 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 {
  padding-inline-start: 0;
  margin-inline-start: 7px;
  width: calc(100% - 7px);
}

#output-container.hideTimestamps > .message > .timestamp {
  display: none;
}

#output-container.hideTimestamps > .message > .indent {
  background-color: var(--theme-body-background);
}

.filtered-by-type,
.filtered-by-string {
  display: none;
}

.hidden-message {
  display: block;
  visibility: hidden;
  height: 0;
  overflow: hidden;
}

/* WebConsole colored drops */

.webconsole-filter-button {
  -moz-user-focus: normal;
}

.webconsole-filter-button > .toolbarbutton-menubutton-button:before {
  content: "";
  display: inline-block;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  margin-inline-start: 5px;
  border-width: 1px;
  border-style: solid;
}

/* Network styles */
.webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before {
  background-image: linear-gradient(#444444, #000000);
  border-color: #777;
}

.message:hover {
  background-color: var(--theme-selection-background-semitransparent) !important;
}

.theme-light .message[severity=error],
.theme-light .message.error {
  background-color: rgba(255, 150, 150, 0.3);
}

.theme-dark .message[severity=error],
.theme-dark .message.error {
  background-color: rgba(235, 83, 104, 0.17);
}

.console-string {
  color: var(--theme-highlight-lightorange);
}

.theme-selected .console-string,
.theme-selected .cm-number,
.theme-selected .cm-variable,
.theme-selected .kind-ArrayLike {
  color: #f5f7fa !important; /* Selection Text Color */
}

.message[category=network] > .indent {
  border-inline-end: solid var(--theme-body-color-alt) 6px;
}

.message[category=network][severity=error] > .icon::before,
.message.network.error > .icon::before {
  background-position: -12px 0;
}

.message[category=network] > .message-body,
.message.network > .message-body {
  display: flex;
  flex-wrap: wrap;
}

.message[category=network] .method,
.message.network .method {
  flex: none;
}

.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;
  min-width: 5em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message[category=network] .status,
.message.network .status {
  flex: none;
  margin-inline-start: 6px;
}

.message[category=network].mixed-content .url,
.message.network.mixed-content .url {
  color: var(--theme-highlight-red);
}

.message .learn-more-link {
  color: var(--theme-highlight-blue);
  margin: 0 6px;
}

.message[category=network] .xhr,
.message.network .xhr {
  background-color: var(--theme-body-color-alt);
  color: var(--theme-body-background);
  border-radius: 3px;
  font-weight: bold;
  font-size: 10px;
  padding: 2px;
  line-height: 10px;
  margin-inline-start: 3px;
  margin-inline-end: 1ex;
}

/* CSS styles */
.webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before {
  background-image: linear-gradient(#2DC3F3, #00B6F0);
  border-color: #1BA2CC;
}

.message[category=cssparser] > .indent,
.message.cssparser > .indent  {
  border-inline-end: solid #00b6f0 6px;
}

.message[category=cssparser][severity=error] > .icon::before,
.message.cssparser.error > .icon::before {
  background-position: -12px -12px;
}

.message[category=cssparser][severity=warn] > .icon::before,
.message.cssparser.warn > .icon::before {
  background-position: -24px -12px;
}

/* JS styles */
.webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before {
  background-image: linear-gradient(#FCB142, #FB9500);
  border-color: #E98A00;
}

.message[category=exception] > .indent,
.message.exception > .indent {
  border-inline-end: solid #fb9500 6px;
}

.message[category=exception][severity=error] > .icon::before,
.message.exception.error > .icon::before {
  background-position: -12px -24px;
}

.message[category=exception][severity=warn] > .icon::before,
.message.exception.warn > .icon::before {
  background-position: -24px -24px;
}

/* Web Developer styles */
.webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before {
  background-image: linear-gradient(#B9B9B9, #AAAAAA);
  border-color: #929292;
}

.message[category=console] > .indent,
.message.console-api > .indent {
  border-inline-end: solid #cbcbcb 6px;
}

.message[category=console][severity=error] > .icon::before,
.message[category=output][severity=error] > .icon::before,
.message[category=server][severity=error] > .icon::before {
  background-position: -12px -36px;
}

.message[category=console][severity=warn] > .icon::before,
.message[category=server][severity=warn] > .icon::before {
  background-position: -24px -36px;
}

.message[category=console][severity=info] > .icon::before,
.message[category=server][severity=info] > .icon::before {
  background-position: -36px -36px;
}

/* Server Logging Styles */

.webconsole-filter-button[category="server"] > .toolbarbutton-menubutton-button:before {
  background-image: linear-gradient(rgb(144, 176, 144), rgb(99, 151, 99));
  border-color: rgb(76, 143, 76);
}

.message[category=server] > .indent,
.message.server > .indent {
  border-inline-end: solid #90B090 6px;
}

/* Input and output styles */
.message[category=input] > .indent,
.message[category=output] > .indent,
.message.command > .indent,
.message.result > .indent {
  border-inline-end: solid #808080 6px;
}

.message[category=input] > .icon::before,
.message.command > .icon::before {
  background-position: -48px -36px;
}

.message[category=output] > .icon::before,
.message.result > .icon::before {
  background-position: -60px -36px;
}

/* JSTerm Styles */
.jsterm-input-container {
  background-color: var(--theme-tab-toolbar-background);
  border-top: 1px solid var(--theme-splitter-color);
}

.theme-light .jsterm-input-container {
  /* For light theme use a white background for the input - it looks better
     than off-white */
  background-color: #fff;
  border-top-color: #e0e0e0;
}

.theme-firebug .jsterm-input-container {
  border-top: 1px solid #ccc;
}

.jsterm-input-node,
.jsterm-complete-node {
  border: none;
  padding: 0;
  padding-inline-start: 20px;
  margin: 0;
  -moz-appearance: none;
  background-color: transparent;
}

.jsterm-input-node[focused="true"] {
  background-image: var(--theme-command-line-image-focus);
  box-shadow: none;
}

.jsterm-complete-node {
  color: var(--theme-comment);
}

.jsterm-input-node {
  /* 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(--theme-command-line-image);
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: 4px 50%;
  color: var(--theme-content-color1);
}

:-moz-any(.jsterm-input-node,
          .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
  overflow-x: hidden;
  /* Set padding for console input on textbox to make sure it is inlcuded in
     scrollHeight that is used when resizing JSTerminal's input. Note: textbox
     default style has important already */
  padding: 4px 0 !important;
}

.inlined-variables-view .message-body {
  display: flex;
  flex-direction: column;
  resize: vertical;
  overflow: auto;
  min-height: 200px;
}
.inlined-variables-view iframe {
  display: block;
  flex: 1;
  margin-top: 5px;
  margin-bottom: 15px;
  margin-inline-end: 15px;
  border: 1px solid var(--theme-splitter-color);
  border-radius: 3px;
}

#webconsole-sidebar > tabs {
  height: 0;
  border: none;
}

/* Firebug theme has the tabs visible. */
.theme-firebug #webconsole-sidebar > tabs {
  height: 28px;
}

.devtools-side-splitter ~ #webconsole-sidebar[hidden] {
  display: none;
}

/* Security styles */

.message[category=security] > .indent,
.message.security > .indent {
  border-inline-end: solid red 6px;
}

.webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before {
  background-image: linear-gradient(#FF3030, #FF7D7D);
  border-color: #D12C2C;
}

.message[category=security][severity=error] > .icon::before,
.message.security.error > .icon::before {
  background-position: -12px -48px;
}

.message[category=security][severity=warn] > .icon::before,
.message.security.warn > .icon::before {
  background-position: -24px -48px;
}

.navigation-marker {
  color: #aaa;
  background: linear-gradient(#aaa, #aaa) no-repeat left 50%;
  background-size: 100% 2px;
  margin-top: 6px;
  margin-bottom: 6px;
  font-size: 0.9em;
}

.navigation-marker .url {
  padding-inline-end: 9px;
  text-decoration: none;
  background: var(--theme-body-background);
}

.theme-light .navigation-marker .url {
  background: #fff;
}

.stacktrace {
  display: none;
  padding: 5px 10px;
  margin: 5px 0 0 0;
  overflow-y: auto;
  border: 1px solid var(--theme-splitter-color);
  border-radius: 3px;
}

.consoletable {
  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;
}

.theme-light .message[severity=error] .stacktrace,
.theme-light .message.error .stacktrace {
  background-color: rgba(255, 255, 255, 0.5);
}

.theme-dark .message[severity=error] .stacktrace,
.theme-dark .message.error .stacktrace {
  background-color: rgba(0, 0, 0, 0.5);
}

.message[open] .stacktrace,
.message.open .stacktrace {
  display: block;
}

.message .theme-twisty {
  display: inline-block;
  vertical-align: middle;
  margin: 3px 0 0 0;
  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;
}

.cm-s-mozilla a[class]:hover,
.cm-s-mozilla a[class]:focus {
  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;
  padding-left: 16px;
  margin-left: 5px;
  cursor: pointer;
}

.elementNode:hover .open-inspector,
.open-inspector:hover {
  filter: url(images/filters.svg#checked-icon-state);
}

.elementNode:hover .open-inspector:active,
.open-inspector:active {
  filter: url(images/filters.svg#checked-icon-state) brightness(0.9);
}

@media (max-width: 500px) {
  .message > .timestamp {
    display: none;
  }
  .hud-console-filter-toolbar .webconsole-filter-button .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: 12px;
    height: 12px;
    margin-inline-start: 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;
  }
}

/*
 * 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;
}

/* Firebug theme support for console.table() */

.theme-firebug .consoletable .theme-body {
  width: 100%;
  border-top: 1px solid #D7D7D7;
  border-bottom: 2px solid #D7D7D7;
  border-left: 1px solid #D7D7D7;
  border-right: 1px solid #D7D7D7;
}


/* 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%;
}

.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;
}