make HTML-based video controls work while keeping the XUL-based ones intact - this...

[themes.git] / LCARStrek / devtools / 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-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 {
  padding: 0;
}

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

.hud-filter-box {
  width: 200px;
}

/* General output styles */

a {
  -moz-user-focus: normal;
  -moz-user-input: enabled;
  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;
}

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

.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: #000000;
  background-color: #FF0000;
  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 {
  -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: 1px;
  margin-inline-end: 3px;
  border-width: 1px;
  border-style: solid;
}

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

.message:hover {
  background-color: var(--theme-contrast-background);
}

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

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

.message[severity=error] .console-string {
  background-color: var(--error-background-text);
}

.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] > .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(#7575BF, #4E4E7F);
  border-color: #9C9CFF;
}

.message[category=cssparser] > .indent,
.message.cssparser > .indent {
  border-inline-end: solid #9C9CFF 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(#BF7700, #7F4F00);
   border-color: #FF9F00;
}

.message[category=exception] > .indent,
.message.exception > .indent {
  border-inline-end: solid #FF9F00 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(#5F3B83, #3F2756);
   border-color: #8050B0;
}

.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 {
  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(#006363, #004242);
  border-color: #008484;
}

.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.command > .indent,
.message.result > .indent {
  border-inline-end: solid #A09090 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);
}

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

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

/* Security styles */

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

.webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before {
  background-color: #FF0000;
  border-color: #FFCF00;
}

.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: #000000;
  background-color: #A09090;
  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);
}

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

.message[severity=error] .stacktrace {
  background-color: #000000;
}

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

.message .theme-twisty {
  display: inline-block;
  vertical-align: middle;
  margin: 3px 0 0 0;
  flex-shrink: 0;
}

.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-inline-start: 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);
}

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

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