tor-browser

Popup.css (6008B)

---

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

.preview-popup {
 border: 1px solid var(--theme-splitter-color);
 height: auto;
 overflow: auto;
 background: var(--theme-body-background);
 box-shadow: 1px 1px 3px var(--popup-shadow-color);
}

/* Popover is used when previewing objects */
.popover .preview-popup {
 max-width: 450px;
 min-width: 200px;

 &.preview-type-pause {
   padding: 5px 10px;
 }

 /* Because of tracer header, we can't put a padding on the popup */
 /* Nor can we put a margin on the .tree or .objectBox which causes overflows */
 &.preview-type-tracer {
   overflow: hidden;
   display: flex;
   flex-direction: column;
   .tree {
     padding: 5px;
     overflow: auto;
     flex: 1;
   }
 }
}

/* Tooltip is used when previewing primitives and exceptions */
.tooltip .preview-popup {
 max-width: inherit;
 min-height: inherit;
 max-height: 200px;

 &.preview-type-pause {
   padding: 5px;
 }

 &.preview-type-tracer {
   padding-bottom: 5px;

   .preview-tracer-header {
     margin-bottom: 5px;
   }
   .objectBox {
     padding: 0 5px;
   }
 }

 &.exception-popup {
   padding: 5px;
   color: var(--theme-error-color);
   background-color: var(--theme-error-background);
 }
}

.preview-tracer-header {
 --icon-url: url("chrome://devtools/content/debugger/images/trace.svg");
 --icon-color: var(--theme-inline-preview-label-trace-color);
 color: var(--theme-inline-preview-label-trace-color);
 background-color: var(--theme-inline-preview-label-trace-background);
 border-block-end: 1px solid oklch(from var(--theme-inline-preview-label-trace-color) l c h / 0.25);

 /* Add a bit more padding on the end to balance the icon, especially when have a small primitive value in preview */
 padding-inline-end: 10px !important;
}

.preview-tracer-warning {
 --icon-url: url("chrome://devtools/skin/images/info.svg");
 --icon-color: currentColor;
 background-color: var(--theme-body-alternate-emphasized-background);
 border-bottom: 1px solid var(--theme-splitter-color);
}

.preview-tracer-header,
.preview-tracer-warning {
 display: flex;
 gap: 5px;
 padding: 5px;
 align-items: center;

 &::before {
   flex-shrink: 0;
   content: "";
   display: inline-block;
   width: 12px;
   height: 12px;

   background-image: var(--icon-url);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;

   -moz-context-properties: fill;
   fill: var(--icon-color);
 }
}

.preview-popup .tree {
 /* Setting a fixed line height to avoid issues in custom formatters changing
  * the line height like the CLJS DevTools */
 line-height: 15px;
}

.gap svg {
 pointer-events: none;
}

.gap polygon {
 pointer-events: auto;
}

.popover .preview-popup .object-node {
 padding-inline-start: 0;
}

.preview-token:hover {
 cursor: default;
}

/**
* Use an animation in order to delay the preview-loading-token
* style 1/4s second after hovering a token.
*
* It avoids to render this intermediate style if the previews is ready
* right away.
*/
@keyframes animateLoading {
 25% {
   cursor: wait;
   text-decoration: grey underline solid;
   text-decoration-thickness: 2px;
   text-underline-offset: 2px;
   text-decoration-skip-ink: none;
 }
 100% {
   cursor: wait;
   text-decoration: grey underline solid;
   text-decoration-thickness: 2px;
   text-underline-offset: 2px;
   text-decoration-skip-ink: none;
 }
}
.preview-loading-token {
 animation: animateLoading 1s forwards;
}

.preview-token,
.debug-expression.preview-token {
 background-color: var(--theme-highlight-yellow);
}

.theme-dark .preview-token,
.theme-dark .debug-expression.preview-token {
 background-color: #743884;
}

.theme-dark .cm-s-mozilla .preview-token,
.theme-dark .cm-s-mozilla .debug-expression.preview-token {
 color: #e7ebee;
}

/* Use a color other than yellow to highlight the hovered token on the paused line
  as the paused line is already yellow */
.paused-line .preview-token {
 background-color: light-dark(rgba(202, 227, 255, 0.5), rgba(202, 227, 255, 0.3));
}

/* This rule only make sure the text remains readable when hovering a token on the paused line. */
:root[forced-colors-active] .paused-line :is(.preview-token, .debug-expression.preview-token) {
 color: inherit;
 background-color: inherit;
}

.theme-dark .popover .preview-popup {
 border-color: var(--theme-body-color);
}

.tooltip {
 position: fixed;
 z-index: 100;
}

.theme-dark .tooltip .preview-popup {
 border-color: var(--theme-body-color);
}

.tooltip .gap {
 height: 4px;
 padding-top: 0;
}

/* Exception popup */
.exception-popup .exception-text {
 color: var(--red-70);
}

.theme-dark .exception-popup .exception-text {
 color: var(--red-20);
}

.exception-popup .exception-message {
 display: flex;
 align-items: center;
}

.exception-message .dbg-img-arrow {
 margin-inline-end: 4px;
}

.exception-popup .exception-stacktrace {
 display: grid;
 grid-template-columns: auto 1fr;
 grid-column-gap: 8px;
 padding-inline: 20px 3px;
 line-height: var(--theme-code-line-height);
}

.exception-stacktrace .frame {
 display: contents;
 cursor: pointer;
}

.exception-stacktrace .title {
 grid-column: 1/2;
 color: var(--grey-90);
}

.theme-dark .exception-stacktrace .title {
 color: white;
}

.exception-stacktrace .location {
 grid-column: -1/-2;
 color: var(--theme-highlight-purple);
 direction: rtl;
 text-align: end;
 white-space: nowrap;
 /* Force the location to be on one line and crop at start if wider then max-width */
 overflow: hidden;
 text-overflow: ellipsis;
 max-width: 350px;
}

.theme-dark .exception-stacktrace .location {
 color: var(--blue-40);
}

.exception-stacktrace .line {
 color: var(--theme-highlight-blue);
}

.theme-dark .exception-stacktrace .line {
 color: hsl(210, 40%, 60%);
}