/* vim:set ts=2 sw=2 sts=2 et: */ /* 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/. */ .theme-dark, .theme-light { --number-color: var(--theme-highlight-green); --string-color: var(--theme-highlight-red); --null-color: var(--theme-comment); --object-color: var(--theme-highlight-blue); --caption-color: var(--theme-highlight-blue); --location-color: var(--theme-comment); --source-link-color: var(--theme-highlight-blue); --node-color: var(--theme-highlight-purple); --reference-color: var(--theme-highlight-blue); --comment-node-color: var(--theme-comment); } /******************************************************************************/ .inline { display: inline; white-space: normal; } .objectBox-object { font-weight: bold; color: var(--object-color); white-space: pre-wrap; } .objectBox-string, .objectBox-symbol, .objectBox-text, .objectBox-textNode, .objectBox-table { white-space: pre-wrap; } .objectBox-number, .objectBox-styleRule, .objectBox-element, .objectBox-textNode, .objectBox-array > .length { color: var(--number-color); } .objectBox-textNode, .objectBox-string, .objectBox-symbol { color: var(--string-color); } .objectBox-string a, .objectBox-string a:visited { color: currentColor; text-decoration: none; font-style: italic; cursor: pointer; } .objectBox-string a:hover { text-decoration: underline; } .objectBox-function, .objectBox-profile { color: var(--object-color); } .objectBox-stackTrace { color: var(--error-color); } .objectBox-stackTrace-grid { display: inline-grid; grid-template-columns: auto auto; margin-top: 3px; } .objectBox-stackTrace-fn { color: var(--console-output-color); padding-inline-start: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-inline-end: 5px; } .objectBox-stackTrace-location { color: var(--frame-link-source, currentColor); direction: rtl; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: end; } .objectBox-stackTrace-location:hover { text-decoration: underline; } .objectBox-stackTrace-location { cursor: pointer; } .objectBox-Location, .location { color: var(--location-color); } .objectBox-null, .objectBox-undefined, .objectBox-hint, .objectBox-nan, .logRowHint { color: var(--null-color); } .objectBox-sourceLink { position: absolute; right: 4px; top: 2px; padding-left: 8px; font-weight: bold; color: var(--source-link-color); } .objectBox-failure { color: var(--string-color); border-width: 1px; border-style: solid; border-radius: 2px; font-size: 0.8em; padding: 0 2px; } .objectBox-accessible.clickable, .objectBox-node.clickable { cursor: pointer; } /******************************************************************************/ .objectBox-event, .objectBox-eventLog, .objectBox-regexp, .objectBox-object { color: var(--object-color); white-space: pre-wrap; } .objectBox .Date { color: var(--string-color); white-space: pre-wrap; } /******************************************************************************/ .objectBox.theme-comment { color: var(--comment-node-color); } .accessible-role, .tag-name { color: var(--object-color); } .attrName { color: var(--string-color); } .attrEqual, .objectEqual { color: var(--comment-node-color); } .attrValue, .attrValue.objectBox-string { color: var(--node-color); } .angleBracket { color: var(--theme-body-color); } /******************************************************************************/ /* Length bubble for arraylikes and maplikes */ .objectLengthBubble { color: var(--null-color); } /******************************************************************************/ .objectLeftBrace, .objectRightBrace, .arrayLeftBracket, .arrayRightBracket { color: var(--object-color); } /******************************************************************************/ /* Cycle reference */ .objectBox-Reference { font-weight: bold; color: var(--reference-color); } [class*="objectBox"] > .objectTitle { color: var(--object-color); } .caption { color: var(--caption-color); } /******************************************************************************/ /* Themes */ .theme-dark .objectBox-null, .theme-dark .objectBox-undefined, .theme-light .objectBox-null, .theme-light .objectBox-undefined { font-style: normal; } .theme-dark .objectBox-object, .theme-light .objectBox-object { font-weight: normal; white-space: pre-wrap; } .theme-dark .caption, .theme-light .caption { font-weight: normal; } /******************************************************************************/ /* Open DOMNode in inspector or Accessible in accessibility inspector button */ button.open-accessibility-inspector, button.open-inspector { mask: url("resource://devtools/client/shared/components/reps/images/open-inspector.svg") no-repeat; display: inline-block; vertical-align: top; height: 15px; width: 15px; margin: 0 4px; padding: 0; border: none; background-color: var(--theme-icon-color); cursor: pointer; } .objectBox-accessible:hover .open-accessibility-inspector, .objectBox-node:hover .open-inspector, .objectBox-textNode:hover .open-inspector, .open-accessibility-inspector:hover, .open-inspector:hover { background-color: var(--theme-icon-checked-color); } /******************************************************************************/ /* Jump to definition button */ button.jump-definition { mask: url("resource://devtools/client/shared/components/reps/images/jump-definition.svg") no-repeat; display: inline-block; background-color: var(--theme-icon-color); height: 16px; margin-left: 0.25em; vertical-align: middle; } .jump-definition:hover { background-color: var(--theme-icon-checked-color); } /******************************************************************************/ /* Invoke getter button */ button.invoke-getter { mask: url("resource://devtools/client/shared/components/reps/images/input.svg") no-repeat; display: inline-block; background-color: var(--theme-icon-color); height: 10px; vertical-align: middle; border: none; } .invoke-getter:hover { background-color: var(--theme-icon-checked-color); } /******************************************************************************/ /* "more…" ellipsis */ .more-ellipsis { color: var(--comment-node-color); } /* 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/. */ /* We can remove the outline since we do add our own focus style on nodes */ .tree:focus { outline: none; } .tree.inline { display: inline-block; } .tree.nowrap { white-space: nowrap; } .tree.noselect { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .tree .tree-node { display: flex; } .tree .tree-node:not(.focused):hover { background-color: var(--theme-selection-background-hover); } .tree-indent { display: inline-block; width: 12px; margin-inline-start: 3px; border-inline-start: 1px solid #a2d1ff; flex-shrink: 0; } .debugger .tree-indent { width: 16px; margin-inline-start: 0px; border-inline-start: 0; } /* For non expandable root nodes, we don't have .tree-indent elements, so we declare the margin on the start of the node */ .tree-node[data-expandable="false"][aria-level="1"] { padding-inline-start: 15px; } .tree .tree-node[data-expandable="true"] { cursor: default; } .tree-node button.arrow { mask: url("resource://devtools/client/debugger/images/arrow.svg") no-repeat center; mask-size: 10px; vertical-align: -1px; width: 10px; height: 10px; border: 0; padding: 0; margin-inline-end: 4px; transform-origin: center center; transition: transform 125ms var(--animation-curve); background-color: var(--theme-icon-dimmed-color); } .tree-node button.arrow:not(.expanded) { transform: rotate(-90deg); } html[dir="rtl"] .tree-node button:not(.expanded) { transform: rotate(90deg); } .tree .tree-node.focused { color: white; background-color: var(--theme-selection-background, #0a84ff); } .tree-node.focused button.arrow { background-color: currentColor; } /* 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/. */ .tree.object-inspector .node.object-node { display: inline-block; } .tree.object-inspector .object-label, .tree.object-inspector .object-label * { color: var(--theme-highlight-blue); } .tree.object-inspector .node .unavailable { color: var(--theme-comment); } .tree.object-inspector .lessen, .tree.object-inspector .lessen *, .tree.object-inspector .lessen .object-label, .tree.object-inspector .lessen .object-label * { color: var(--theme-comment); } .tree.object-inspector .block .object-label, .tree.object-inspector .block .object-label * { color: var(--theme-body-color); } .tree.object-inspector .block .object-label::before { content: "\2632"; font-size: 1.1em; display: inline; padding-inline-end: 2px; line-height: 14px; } .object-inspector .object-delimiter { color: var(--theme-comment); white-space: pre-wrap; } .object-inspector .tree-node .arrow { display: inline-block; vertical-align: middle; margin-inline-start: -1px; } /* Focused styles */ .tree.object-inspector .tree-node.focused * { color: inherit; } .tree-node.focused button.jump-definition, .tree-node.focused button.open-inspector, .tree-node.focused button.invoke-getter { background-color: currentColor; } .A11y-mouse :focus { outline: 0; } /* 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 . */ .modal-wrapper { position: fixed; display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; top: 0; left: 0; transition: z-index 200ms; z-index: 100; } .modal { display: flex; width: 80%; max-height: 80vh; overflow-y: auto; background-color: var(--theme-toolbar-background); transition: transform 150ms cubic-bezier(0.07, 0.95, 0, 1); box-shadow: 1px 1px 6px 1px var(--popup-shadow-color); } .modal.entering, .modal.exited { transform: translateY(-101%); } .modal.entered, .modal.exiting { transform: translateY(5px); flex-direction: column; } /* This rule is active when the screen is not narrow */ @media (min-width: 580px) { .modal { width: 50%; } } @media (min-height: 340px) { .modal.entered, .modal.exiting { transform: translateY(30px); } } /* 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 . */ .shortcuts-content { padding: 15px; column-width: 250px; cursor: default; user-select: none; } .shortcuts-content h2 { margin-top: 2px; margin-bottom: 2px; color: var(--theme-text-color-strong); } .shortcuts-section { display: inline-block; margin: 5px; margin-bottom: 15px; width: 250px; } .shortcuts-list { list-style: none; margin: 0px; padding: 0px; overflow: auto; width: calc(100% - 1px); /* 1px fixes the hidden right border */ } .shortcuts-list li { font-size: 12px; color: var(--theme-body-color); padding-top: 5px; display: flex; justify-content: space-between; border: 1px solid transparent; white-space: pre; } @media (max-width: 640px) { .shortcuts-section { width: 100%; } } /* 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 . */ :root { /* header height is 28px + 1px for its border */ --editor-header-height: 29px; /* footer height is 24px + 1px for its border */ --editor-footer-height: 25px; /* searchbar height is 24px + 1px for its top border */ --editor-searchbar-height: 25px; /* Remove once https://bugzilla.mozilla.org/show_bug.cgi?id=1520440 lands */ --theme-code-line-height: calc(15 / 11); } :root.theme-light, :root .theme-light { --search-overlays-semitransparent: rgba(221, 225, 228, 0.66); --popup-shadow-color: #d0d0d0; } :root.theme-dark, :root .theme-dark { --search-overlays-semitransparent: rgba(42, 46, 56, 0.66); --popup-shadow-color: #5c667b; } /* 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 . */ * { box-sizing: border-box; } button { background: transparent; border: none; font-family: inherit; font-size: inherit; } button:hover, button:focus { background-color: var(--theme-toolbar-background-hover); } .theme-dark button:hover, .theme-dark button:focus { background-color: var(--theme-toolbar-hover); } .debugger { display: flex; flex: 1; height: 100%; } .editor-pane { display: flex; position: relative; flex: 1; background-color: var(--theme-body-background); height: 100%; overflow: hidden; } .editor-container { width: 100%; } /* Utils */ .absolute-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .d-flex { display: flex; } .align-items-center { align-items: center; } .rounded-circle { border-radius: 50%; } .text-white { color: white; } .text-center { text-align: center; } .min-width-0 { min-width: 0; } /* Prevents horizontal scrollbar from displaying when right pane collapsed (#7505) */ .split-box > .splitter:last-child { display: none; } /* Launchpad Root */ * { box-sizing: border-box; } html, body { height: 100%; margin: 0; padding: 0; width: 100%; } #mount { display: flex; height: 100%; } ::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; } ::-webkit-scrollbar-track { border-radius: 8px; background: transparent; } ::-webkit-scrollbar-thumb { border-radius: 8px; background: rgba(113, 113, 113, 0.5); } /* 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/. */ * { box-sizing: border-box; } html, body { height: 100%; margin: 0; padding: 0; width: 100%; } #mount { display: flex; height: 100%; } ::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; } ::-webkit-scrollbar-track { border-radius: 8px; background: transparent; } ::-webkit-scrollbar-thumb { border-radius: 8px; background: rgba(113, 113, 113, 0.5); } /* 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 . */ menupopup { position: fixed; z-index: 10000; background: white; border: 1px solid #cccccc; padding: 5px 0; background: #f2f2f2; border-radius: 5px; color: #585858; box-shadow: 0 0 4px 0 rgba(190, 190, 190, 0.8); min-width: 130px; } menuitem { display: block; padding: 0 20px; line-height: 20px; font-weight: 500; font-size: 13px; -moz-user-select: none; user-select: none; } menuitem:hover { background: #3780fb; color: white; } menuitem[disabled="true"] { color: #cccccc; } menuitem[disabled="true"]:hover { background-color: transparent; cursor: default; } menuseparator { border-bottom: 1px solid #cacdd3; width: 100%; height: 5px; display: block; margin-bottom: 5px; } #contextmenu-mask.show { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; } /* vim:set ts=2 sw=2 sts=2 et: */ /* 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/. */ .theme-dark, .theme-light { --number-color: var(--theme-highlight-green); --string-color: var(--theme-highlight-orange); --null-color: var(--theme-comment); --object-color: var(--theme-body-color); --caption-color: var(--theme-highlight-blue); --location-color: var(--theme-text-color-strong); --source-link-color: var(--theme-highlight-blue); --node-color: var(--theme-highlight-bluegrey); --reference-color: var(--theme-highlight-purple); } /******************************************************************************/ .objectLink:hover { text-decoration: underline; } .inline { display: inline; white-space: normal; } .objectBox-object { font-weight: bold; color: var(--object-color); white-space: pre-wrap; } .objectBox-string, .objectBox-text, .objectLink-textNode, .objectBox-table { white-space: pre-wrap; } .objectBox-number, .objectLink-styleRule, .objectLink-element, .objectLink-textNode, .objectBox-array > .length { color: var(--number-color); } .objectBox-string { color: var(--string-color); } .objectLink-function, .objectBox-stackTrace, .objectLink-profile { color: var(--object-color); } .objectLink-Location { font-style: italic; color: var(--location-color); } .objectBox-null, .objectBox-undefined, .objectBox-hint, .logRowHint { font-style: italic; color: var(--null-color); } .objectLink-sourceLink { position: absolute; right: 4px; top: 2px; padding-left: 8px; font-weight: bold; color: var(--source-link-color); } /******************************************************************************/ .objectLink-event, .objectLink-eventLog, .objectLink-regexp, .objectLink-object, .objectLink-Date { font-weight: bold; color: var(--object-color); white-space: pre-wrap; } /******************************************************************************/ .objectLink-object .nodeName, .objectLink-NamedNodeMap .nodeName, .objectLink-NamedNodeMap .objectEqual, .objectLink-NamedNodeMap .arrayLeftBracket, .objectLink-NamedNodeMap .arrayRightBracket, .objectLink-Attr .attrEqual, .objectLink-Attr .attrTitle { color: var(--node-color); } .objectLink-object .nodeName { font-weight: normal; } /******************************************************************************/ .objectLeftBrace, .objectRightBrace, .arrayLeftBracket, .arrayRightBracket { font-weight: bold; } .objectLeftBrace, .arrayLeftBracket { margin-right: 4px; } .objectRightBrace, .arrayRightBracket { margin-left: 4px; } /******************************************************************************/ /* Cycle reference*/ .objectLink-Reference { font-weight: bold; color: var(--reference-color); } .objectBox-array > .objectTitle { font-weight: bold; color: var(--object-color); } .caption { font-weight: bold; color: var(--caption-color); } /******************************************************************************/ /* Themes */ .theme-dark .objectBox-null, .theme-dark .objectBox-undefined, .theme-light .objectBox-null, .theme-light .objectBox-undefined { font-style: normal; } .theme-dark .objectBox-object, .theme-light .objectBox-object { font-weight: normal; white-space: pre-wrap; } .theme-dark .caption, .theme-light .caption { font-weight: normal; } /* vim:set ts=2 sw=2 sts=2 et: */ /* 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/. */ .split-box { display: flex; flex: 1; min-width: 0; height: 100%; width: 100%; } .split-box.vert { flex-direction: row; } .split-box.horz { flex-direction: column; } .split-box > .uncontrolled { display: flex; flex: 1; min-width: 0; overflow: auto; } .split-box > .controlled { display: flex; overflow: auto; } .split-box > .splitter { background-image: none; border: 0; border-style: solid; border-color: transparent; background-color: var(--theme-splitter-color); background-clip: content-box; position: relative; box-sizing: border-box; /* Positive z-index positions the splitter on top of its siblings and makes it clickable on both sides. */ z-index: 1; } .split-box.vert > .splitter { /* prettier-ignore */ min-width: calc(var(--devtools-splitter-inline-start-width) + var(--devtools-splitter-inline-end-width) + 1px); border-left-width: var(--devtools-splitter-inline-start-width); border-right-width: var(--devtools-splitter-inline-end-width); margin-left: calc(-1 * var(--devtools-splitter-inline-start-width) - 1px); margin-right: calc(-1 * var(--devtools-splitter-inline-end-width)); cursor: ew-resize; } .split-box.horz > .splitter { /* prettier-ignore */ min-height: calc(var(--devtools-splitter-top-width) + var(--devtools-splitter-bottom-width) + 1px); border-top-width: var(--devtools-splitter-top-width); border-bottom-width: var(--devtools-splitter-bottom-width); margin-top: calc(-1 * var(--devtools-splitter-top-width) - 1px); margin-bottom: calc(-1 * var(--devtools-splitter-bottom-width)); cursor: ns-resize; } .split-box.disabled { pointer-events: none; } /** * Make sure splitter panels are not processing any mouse * events. This is good for performance during splitter * bar dragging. */ .split-box.dragging > .controlled, .split-box.dragging > .uncontrolled { pointer-events: none; } /* 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 . */ .managed-tree .tree { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; white-space: nowrap; overflow: auto; min-width: 100%; display: grid; grid-template-columns: 1fr; align-content: start; line-height: 1.4em; } .managed-tree .tree button { display: block; } .managed-tree .tree .node { padding: 2px 3px 2px 3px; position: relative; } .managed-tree .tree .node.focused { color: white; background-color: var(--theme-selection-background); } html:not([dir="rtl"]) .managed-tree .tree .node > div { margin-left: 10px; } html[dir="rtl"] .managed-tree .tree .node > div { margin-right: 10px; } .managed-tree .tree-node button { position: fixed; } /* 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 . */ .img { display: inline-block; width: 16px; height: 16px; vertical-align: middle; /* use background-color for the icon color, and mask-image for its shape */ background-color: var(--theme-icon-color); mask-size: contain; mask-repeat: no-repeat; mask-position: center; /* multicolor icons use background-image */ background-position: center; background-repeat: no-repeat; background-size: contain; /* do not let images shrink when used as flex children */ flex-shrink: 0; } /* Expand arrow icon */ .img.arrow { width: 10px; height: 10px; mask-image: url(resource://devtools/client/debugger/images/arrow.svg); /* we may override the width/height in specific contexts to make the clickable area bigger, but we should always keep the mask size 10x10 */ mask-size: 10px 10px; background-color: var(--theme-icon-dimmed-color); transform: rotate(-90deg); transition: transform 180ms var(--animation-curve); } html[dir="rtl"] .img.arrow { transform: rotate(90deg); } .img.arrow.expanded { /* icon should always point to the bottom (default) when expanded, regardless of the text direction */ transform: none !important; } .img.arrow-down { mask-image: url(resource://devtools/client/debugger/images/arrow-down.svg); } .img.arrow-up { mask-image: url(resource://devtools/client/debugger/images/arrow-up.svg); } .img.blackBox { mask-image: url(resource://devtools/client/debugger/images/blackBox.svg); } .img.breadcrumb { mask-image: url(resource://devtools/client/debugger/images/breadcrumbs-divider.svg); } .img.case-match { mask-image: url(resource://devtools/client/debugger/images/case-match.svg); } .img.close { mask-image: url(resource://devtools/client/debugger/images/close.svg); } .img.disable-pausing { mask-image: url(resource://devtools/client/debugger/images/disable-pausing.svg); } .img.globe { mask-image: url(resource://devtools/client/debugger/images/globe.svg); } .img.globe-small { mask-image: url(resource://devtools/client/debugger/images/globe-small.svg); mask-size: 12px 12px; } .img.window { mask-image: url(resource://devtools/client/debugger/images/window.svg); mask-size: 12px 12px; } .img.file { mask-image: url(resource://devtools/client/debugger/images/file-small.svg); mask-size: 12px 12px; } .img.folder { mask-image: url(resource://devtools/client/debugger/images/folder.svg); } .img.home { mask-image: url(resource://devtools/client/debugger/images/home.svg); } .img.info { mask-image: url(resource://devtools/client/debugger/images/info.svg); } .img.loader { mask-image: url(resource://devtools/client/debugger/images/loader.svg); } .img.more-tabs { mask-image: url(resource://devtools/client/debugger/images/command-chevron.svg); } html[dir="rtl"] .img.more-tabs { transform: scaleX(-1); } .img.next { mask-image: url(resource://devtools/client/debugger/images/next.svg); } .img.next-circle { mask-image: url(resource://devtools/client/debugger/images/next-circle.svg); } .img.pane-collapse { mask-image: url(resource://devtools/client/debugger/images/pane-collapse.svg); } .img.pane-expand { mask-image: url(resource://devtools/client/debugger/images/pane-expand.svg); } .img.pause { mask-image: url(resource://devtools/client/debugger/images/pause.svg); } .img.plus { mask-image: url(resource://devtools/client/debugger/images/plus.svg); } .img.prettyPrint { mask-image: url(resource://devtools/client/debugger/images/prettyPrint.svg); } .img.refresh { mask-image: url(resource://devtools/client/debugger/images/reload.svg); } .img.regex-match { mask-image: url(resource://devtools/client/debugger/images/regex-match.svg); } .img.resume { mask-image: url(resource://devtools/client/debugger/images/resume.svg); } .img.reverseStepIn { mask-image: url(resource://devtools/client/debugger/images/stepIn.svg); transform: scaleX(-1); } .img.reverseStepOut { mask-image: url(resource://devtools/client/debugger/images/stepOut.svg); transform: scaleX(-1); } .img.reverseStepOver { mask-image: url(resource://devtools/client/debugger/images/stepOver.svg); transform: scaleX(-1); } .img.rewind { mask-image: url(resource://devtools/client/debugger/images/rewind.svg); } .img.search { mask-image: url(resource://devtools/client/debugger/images/search.svg); } .img.shortcuts { mask-image: url(resource://devtools/client/debugger/images/help.svg); } .img.stepIn { mask-image: url(resource://devtools/client/debugger/images/stepIn.svg); } .img.stepOut { mask-image: url(resource://devtools/client/debugger/images/stepOut.svg); } .img.stepOver { mask-image: url(resource://devtools/client/debugger/images/stepOver.svg); } .img.tab { mask-image: url(resource://devtools/client/debugger/images/tab.svg); } .img.whole-word-match { mask-image: url(resource://devtools/client/debugger/images/whole-word-match.svg); } .img.worker { mask-image: url(resource://devtools/client/debugger/images/worker.svg); } /* 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 . */ .close-btn { width: 16px; height: 16px; border: 1px solid transparent; border-radius: 2px; padding: 1px; color: var(--theme-icon-color); } .close-btn:hover, .close-btn:focus { color: var(--theme-selection-color); background-color: var(--theme-selection-background); } .close-btn .img { display: block; width: 12px; height: 12px; /* inherit the button's text color for the icon's color */ background-color: currentColor; } .close-btn.big { width: 20px; height: 20px; } .close-btn.big .img { width: 16px; height: 16px; } /* 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 . */ .command-bar-button { appearance: none; background: transparent; border: none; display: inline-block; text-align: center; position: relative; padding: 0px 5px; fill: currentColor; min-width: 30px; } .command-bar-button:disabled { opacity: 0.8; cursor: default; } .command-bar-button:not(.disabled):hover { background: var(--theme-toolbar-background-hover); } .theme-dark .command-bar-button:not(.disabled):hover { background: var(--theme-toolbar-hover); } :root.theme-dark .command-bar-button { color: var(--theme-body-color); } .command-bar-button > * { width: 16px; height: 16px; display: inline-block; vertical-align: middle; } /* 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 . */ .toggle-button { padding: 4px 6px; } .toggle-button .img { vertical-align: middle; } .toggle-button.end { margin-inline-end: 0px; margin-inline-start: auto; } .toggle-button.start { margin-inline-start: 0px; } html[dir="rtl"] .toggle-button.start .img, html[dir="ltr"] .toggle-button.end:not(.vertical) .img { transform: scaleX(-1); } .toggle-button.end.vertical .img { transform: rotate(-90deg); } /* 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 . */ @keyframes search-loader-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .search-outline { border: 1px solid var(--theme-toolbar-background); border-bottom: 1px solid var(--theme-splitter-color); transition: border-color 200ms ease-in-out; } .search-outline:focus-within { border-color: var(--blue-50); } .search-field { position: relative; display: flex; align-items: center; flex-shrink: 0; min-height: 24px; width: 100%; background-color: var(--theme-toolbar-background); } .search-field .img.search { --icon-mask-size: 12px; --icon-inset-inline-start: 6px; position: absolute; z-index: 1; top: calc(50% - 8px); mask-size: var(--icon-mask-size); background-color: var(--theme-icon-dimmed-color); pointer-events: none; } .search-field.big .img.search { --icon-mask-size: 16px; --icon-inset-inline-start: 12px; } [dir="ltr"] .search-field .img.search { left: var(--icon-inset-inline-start); } [dir="rtl"] .search-field .img.search { right: var(--icon-inset-inline-start); } .search-field .img.loader { width: 24px; height: 24px; margin-inline-end: 6px; animation: search-loader-rotate 0.5s linear infinite; } .search-field input { align-self: stretch; flex-grow: 1; height: 24px; width: 40px; border: none; padding: 4px; padding-inline-start: 28px; line-height: 16px; font-family: inherit; font-size: inherit; color: var(--theme-body-color); background-color: transparent; } .search-field.big input { height: 40px; padding-top: 10px; padding-bottom: 10px; padding-inline-start: 40px; font-size: 14px; line-height: 20px; } .search-field input:focus { outline: none; } .search-field input::placeholder { color: var(--theme-toolbar-color); } .search-field-summary { align-self: center; padding: 2px 4px; white-space: nowrap; text-align: center; user-select: none; color: var(--theme-text-color-alt); } .search-field .search-nav-buttons { display: flex; user-select: none; } .search-field .search-nav-buttons .nav-btn { display: flex; justify-content: center; align-items: center; height: 100%; padding: 4px; background: transparent; } .search-field .search-nav-buttons .nav-btn:hover { background-color: var(--theme-toolbar-background-hover); } .search-field .close-btn { margin-inline-end: 4px; } .search-field.big .close-btn { margin-inline-end: 8px; } /* 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 . */ .search-container { position: absolute; top: var(--editor-header-height); left: 0; width: calc(100% - 1px); height: calc(100% - 31px); display: flex; flex-direction: column; z-index: 20; background-color: var(--theme-body-background); overflow-y: hidden; } .project-text-search { flex-grow: 1; display: flex; flex-direction: column; overflow-y: hidden; height: 100%; } .project-text-search .result { display: contents; cursor: default; padding: 4px 0 4px 5px; line-height: 16px; font-size: 10px; width: 100%; } .project-text-search .matches-summary { margin-left: 5px; } .project-text-search .result { font-family: Menlo, monospace; } .project-text-search .result .query-match { background-color: var(--theme-selection-background); color: white; padding: 1px 4px; margin: 0 2px 0 2px; border-radius: 2px; } .project-text-search .result .line-number { padding-left: 5px; min-width: 33px; width: 100%; text-align: end; grid-column: 1/2; } .project-text-search .result .line-value { grid-column: 2/3; padding-left: 5px; text-overflow: ellipsis; overflow-x: hidden; } .project-text-search .tree-indent { display: none; } .project-text-search .no-result-msg { color: var(--theme-text-color-inactive); font-size: 24px; padding: 4px 15px; max-width: 100%; overflow-wrap: break-word; hyphens: auto; } .project-text-search .file-result { font-weight: bold; line-height: 20px; cursor: default; padding: 2px 0 2px 5px; font-size: 12px; grid-column: 1/3; } .project-text-search .file-result .arrow { margin: 2px 0 2px 0; } .project-text-search .line-match { display: "flex"; flex-grow: 1; } .project-text-search .search-field { display: flex; align-self: stretch; flex-grow: 1; width: 100%; border-bottom: none; } .project-text-search .managed-tree { overflow-y: auto; height: 100%; } .project-text-search .managed-tree .tree { height: 100%; display: grid; grid-template-columns: auto 1fr; overflow-x: hidden; } .project-text-search .managed-tree .tree .tree-node { display: contents; } /* Focus values */ .project-text-search .file-result.focused .img.file { background-color: white; } .project-text-search .file-result.focused, .project-text-search .result.focused .line-value { background-color: var(--theme-selection-background); } .project-text-search .result.focused .line-number { font-weight: bolder; background-color: var(--theme-selection-background); } .project-text-search .result.focused .query-match { background-color: #ffffff; color: #000000; } .container { background-color: lightgrey; border: 1px solid darkgrey; cursor: pointer; padding: 0 3px; } .container[aria-selected=true] { background-color: white; } .container { display: flex; list-style: none; margin: 0; padding: 0; } /* 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/. */ menu { display: inline; padding: 0; } menu > menuitem::after { content: "\25BA"; float: right; padding-left: 5px; } menu > menupopup { display: none; } menu > menuitem:hover + menupopup, menu > menupopup:hover { display: block; } menupopup { position: fixed; z-index: 10000; background: white; border: 1px solid #cccccc; padding: 5px 0; background: #f2f2f2; border-radius: 5px; color: #585858; box-shadow: 0 0 4px 0 rgba(190, 190, 190, 0.8); min-width: 130px; } menuitem { display: block; padding: 0 20px; line-height: 20px; font-weight: 500; font-size: 13px; -moz-user-select: none; user-select: none; } menuitem:hover { background: #3780fb; color: white; cursor: pointer; } menuitem[disabled=true] { color: #cccccc; } menuitem[disabled=true]:hover { background-color: transparent; cursor: default; } menuitem[type=checkbox]::before { content: ""; width: 10px; display: inline-block; } menuitem[type=checkbox][checked=true]::before { content: "\2713"; left: -8px; position: relative; } menuseparator { border-bottom: 1px solid #cacdd3; width: 100%; height: 5px; display: block; margin-bottom: 5px; } #contextmenu-mask.show { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; } .outline-filter { padding: 4px 10px 0 10px; } .outline-filter-input { padding: 0.5em 1.6em; width: 100%; border: 1px solid var(--theme-splitter-color); background-color: var(--theme-sidebar-background); color: var(--theme-body-color); font-size: 12px; -moz-user-select: text; user-select: text; } .outline-filter-input.focused { border: 1px solid var(--theme-highlight-blue); } .outline-filter-input::placeholder { font-style: italic; color: var(--theme-comment); } .theme-dark .outline-filter-input.focused { border: 1px solid var(--blue-50); } /* 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 . */ .outline { overflow-y: hidden; } .outline > div { width: 100%; position: relative; } .outline-pane-info { padding: 0.5em; width: 100%; font-style: italic; text-align: center; user-select: none; font-size: 12px; overflow: hidden; } .outline-list { margin: 0; padding: 0 0 4px 0; position: absolute; top: 38px; bottom: 25px; left: 0; right: 0; list-style-type: none; overflow: auto; } .outline-list__class-list { margin: 0; padding: 0; list-style: none; } .outline-list__class-list > .outline-list__element { padding-inline-start: 2rem; } .outline-list__class-list .function-signature .function-name { color: var(--theme-highlight-green); } .outline-list .function-signature .paren { color: inherit; } .outline-list__class h2 { font-weight: normal; font-size: 1em; padding: 3px 0; padding-inline-start: 10px; color: var(--blue-55); margin: 0; } .outline-list__class:not(:first-child) h2 { margin-top: 12px; } .outline-list h2:hover { background: var(--theme-toolbar-background-hover); } .theme-dark .outline-list h2 { color: var(--theme-highlight-blue); } .outline-list h2 .keyword { color: var(--theme-highlight-red); } .outline-list__element { padding: 3px 10px 3px 10px; cursor: default; white-space: nowrap; } .outline-list > .outline-list__element { padding-inline-start: 1rem; } .outline-list__element-icon { padding-inline-end: 0.4rem; } .outline-list__element:hover { background: var(--theme-toolbar-background-hover); } .outline-footer { display: flex; box-sizing: border-box; position: absolute; bottom: 0; left: 0; right: 0; height: 25px; background: var(--theme-body-background); border-top: 1px solid var(--theme-splitter-color); opacity: 1; z-index: 1; -moz-user-select: none; user-select: none; } .theme-dark .outline-footer button { color: var(--theme-body-color); } .outline-footer button.active { background: var(--theme-highlight-blue); color: #ffffff; } .theme-dark .outline-footer button.active { background: var(--theme-selection-background); color: #ffffff; } /* 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 . */ .function-signature { align-self: center; } .function-signature .function-name { color: var(--theme-highlight-blue); } .function-signature .param { color: var(--theme-highlight-red); } .function-signature .paren { color: var(--object-color); } .function-signature .comma { color: var(--object-color); } /* 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 . */ /** * Variant of AccessibleImage used in sources list and tabs. * Define the different source type / framework / library icons here. */ .source-icon { margin-inline-end: 4px; } /* Icons for frameworks and libs */ .img.aframe { background-image: url(resource://devtools/client/debugger/images/sources/aframe.svg); background-color: transparent !important; } .img.angular { background-image: url(resource://devtools/client/debugger/images/sources/angular.svg); background-color: transparent !important; } .img.babel { mask-image: url(resource://devtools/client/debugger/images/sources/babel.svg); } .img.backbone { mask-image: url(resource://devtools/client/debugger/images/sources/backbone.svg); } .img.choo { background-image: url(resource://devtools/client/debugger/images/sources/choo.svg); background-color: transparent !important; } .img.coffeescript { mask-image: url(resource://devtools/client/debugger/images/sources/coffeescript.svg); } .img.dojo { background-image: url(resource://devtools/client/debugger/images/sources/dojo.svg); background-color: transparent !important; } .img.ember { background-image: url(resource://devtools/client/debugger/images/sources/ember.svg); background-color: transparent !important; } .img.express { mask-image: url(resource://devtools/client/debugger/images/sources/express.svg); } .img.extension { mask-image: url(resource://devtools/client/debugger/images/sources/extension.svg); } .img.immutable { mask-image: url(resource://devtools/client/debugger/images/sources/immutable.svg); } .img.javascript { mask-image: url(resource://devtools/client/debugger/images/sources/javascript.svg); mask-size: 14px 14px; } .img.jquery { mask-image: url(resource://devtools/client/debugger/images/sources/jquery.svg); } .img.lodash { mask-image: url(resource://devtools/client/debugger/images/sources/lodash.svg); } .img.marko { background-image: url(resource://devtools/client/debugger/images/sources/marko.svg); background-color: transparent !important; } .img.mobx { background-image: url(resource://devtools/client/debugger/images/sources/mobx.svg); background-color: transparent !important; } .img.nextjs { background-image: url(resource://devtools/client/debugger/images/sources/nextjs.svg); background-color: transparent !important; } .img.node { background-image: url(resource://devtools/client/debugger/images/sources/node.svg); background-color: transparent !important; } .img.nuxtjs { background-image: url(resource://devtools/client/debugger/images/sources/nuxtjs.svg); background-color: transparent !important; } .img.preact { background-image: url(resource://devtools/client/debugger/images/sources/preact.svg); background-color: transparent !important; } .img.pug { background-image: url(resource://devtools/client/debugger/images/sources/pug.svg); background-color: transparent !important; } .img.react { mask-image: url(resource://devtools/client/debugger/images/sources/react.svg); background-color: var(--theme-highlight-bluegrey); } .img.redux { mask-image: url(resource://devtools/client/debugger/images/sources/redux.svg); } .img.rxjs { background-image: url(resource://devtools/client/debugger/images/sources/rxjs.svg); background-color: transparent !important; } .img.sencha-extjs { background-image: url(resource://devtools/client/debugger/images/sources/sencha-extjs.svg); background-color: transparent !important; } .img.typescript { mask-image: url(resource://devtools/client/debugger/images/sources/typescript.svg); } .img.underscore { mask-image: url(resource://devtools/client/debugger/images/sources/underscore.svg); } /* We use both 'Vue' and 'VueJS' when identifying frameworks */ .img.vue, .img.vuejs { background-image: url(resource://devtools/client/debugger/images/sources/vuejs.svg); background-color: transparent !important; } .img.webpack { background-image: url(resource://devtools/client/debugger/images/sources/webpack.svg); background-color: transparent !important; } /* 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 . */ .sources-panel { background-color: var(--theme-sidebar-background); display: flex; flex: 1; flex-direction: column; overflow: hidden; position: relative; } .sources-panel * { -moz-user-select: none; user-select: none; } .sources-clear-root { padding: 4px 8px; width: 100%; text-align: start; white-space: nowrap; color: inherit; display: block; border-bottom: 1px solid var(--theme-splitter-color); } .sources-clear-root .home { background-color: var(--theme-icon-dimmed-color); } .sources-clear-root .breadcrumb { width: 5px; margin: 0 2px 0 6px; vertical-align: bottom; background: var(--theme-text-color-alt); } .sources-clear-root-label { margin-left: 5px; line-height: 16px; } .sources-pane { display: flex; flex: 1; flex-direction: column; } .sources-list { flex: 1; display: flex; } .sources-list .managed-tree { flex: 1; display: flex; } .sources-list .managed-tree .tree { padding: 4px 0; } .sources-list .managed-tree .tree .node { display: flex; align-items: center; width: 100%; padding: 3px 8px 3px 6px; } .sources-list .img { margin-inline-end: 4px; } .sources-list .tree .focused .img { background-color: #ffffff; } /* Use the same width as .img.arrow */ .sources-list .tree .img.no-arrow { width: 10px; visibility: hidden; } .sources-list .tree .label .suffix { font-style: italic; font-size: 0.9em; color: var(--theme-comment); } .sources-list .tree .focused .label .suffix { color: inherit; } .theme-dark .source-list .node.focused { background-color: var(--theme-tab-toolbar-background); } .sources-list .tree .label { display: inline-block; line-height: 16px; } .no-sources-message { width: 100%; font-style: italic; text-align: center; padding: 0.5em; font-size: 12px; user-select: none; justify-content: center; align-items: center; } .sources-panel .outline { display: flex; height: 100%; } .source-outline-tabs { font-size: 12px; width: 100%; background: var(--theme-body-background); display: flex; -moz-user-select: none; user-select: none; box-sizing: border-box; height: var(--editor-header-height); margin: 0; padding: 0; border-bottom: 1px solid var(--theme-splitter-color); } .source-outline-tabs .tab { align-items: center; background-color: var(--theme-toolbar-background); color: var(--theme-toolbar-color); cursor: default; display: inline-flex; flex: 1; justify-content: center; overflow: hidden; padding: 4px 8px; position: relative; } .source-outline-tabs .tab::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background-color: var(--tab-line-color, transparent); transition: transform 250ms var(--animation-curve), opacity 250ms var(--animation-curve); opacity: 0; transform: scaleX(0); } .source-outline-tabs .tab.active { --tab-line-color: var(--tab-line-selected-color); color: var(--theme-toolbar-selected-color); border-bottom-color: transparent; } .source-outline-tabs .tab:not(.active):hover { --tab-line-color: var(--tab-line-hover-color); background-color: var(--theme-toolbar-hover); } .source-outline-tabs .tab:hover::before, .source-outline-tabs .tab.active::before { opacity: 1; transform: scaleX(1); } .source-outline-panel { flex: 1; overflow: auto; } .source-outline-panel.has-root > div { height: 100%; } .source-outline-panel.has-root .thread-header { margin-top: 4px; } .sources-list .img.blackBox { mask-size: 13px; background-color: var(--theme-icon-checked-color); } /* Custom root styles */ .sources-pane.sources-list-custom-root { display: block; position: relative; } .sources-list-custom-root .sources-pane { display: block; } .sources-list-custom-root .no-sources-message { position: absolute; top: 26px; right: 0; bottom: 0; left: 0; } /* Removes start margin when a custom root is used */ .sources-list-custom-root .tree > .tree-node[data-expandable="false"][aria-level="0"] { padding-inline-start: 4px; } .sources-list .tree-node[data-expandable="false"] .tree-indent:last-of-type { margin-inline-end: 0; } .thread-header { margin-top: 10px; } .thread-header .img.worker, .thread-header .img.file { margin-top: -1px; margin-inline-end: 4px; margin-inline-start: 2px; } .thread-header .img.file { margin-top: -2px; } .thread-header .label { line-height: 15px; } /* 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 . */ .search-bar { position: relative; display: flex; border-top: 1px solid var(--theme-splitter-color); height: var(--editor-searchbar-height); } /* display a fake outline above the search bar's top border, and above the source footer's top border */ .search-bar::before { content: ""; position: absolute; z-index: 10; top: -1px; left: 0; right: 0; bottom: -1px; border: solid 1px var(--blue-50); pointer-events: none; opacity: 0; transition: opacity 150ms ease-out; } .search-bar:focus-within::before { opacity: 1; } .search-bar .search-outline { flex-grow: 1; border-width: 0; } .search-bottom-bar * { -moz-user-select: none; user-select: none; } .search-bottom-bar { display: flex; flex-shrink: 0; justify-content: flex-end; align-items: center; background-color: var(--theme-toolbar-background); padding: 0; } .search-bottom-bar .search-modifiers { display: flex; align-items: center; } .search-bottom-bar .search-modifiers button { padding: 2px; margin: 0 3px; border: none; background: none; width: 20px; height: 20px; border-radius: 2px; } .search-bottom-bar .pipe-divider { flex: none; align-self: stretch; width: 1px; vertical-align: middle; margin: 4px; background-color: var(--theme-splitter-color); } .search-bottom-bar .search-modifiers .img { display: block; } .search-bottom-bar .search-modifiers button:hover { background-color: var(--theme-toolbar-background-hover); } .search-bottom-bar .search-modifiers button.active .img { background-color: var(--theme-icon-checked-color); } .search-bottom-bar .search-type-toggles { display: flex; align-items: center; max-width: 68%; } .search-bottom-bar .search-type-name { margin: 0 4px; border: none; background: transparent; color: var(--theme-comment); } .search-bottom-bar .search-type-toggles .search-type-btn.active { color: var(--theme-selection-background); } .theme-dark .search-bottom-bar .search-type-toggles .search-type-btn.active { color: white; } .search-bottom-bar .close-btn { margin-inline-end: 3px; } .search-bar .result-list { max-height: 230px; } /* 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 . */ .bracket-arrow { position: absolute; pointer-events: none; } .bracket-arrow::before, .bracket-arrow::after { content: ""; height: 0; width: 0; position: absolute; border: 7px solid transparent; } .bracket-arrow.up::before { border-bottom-color: var(--theme-splitter-color); top: -1px; } .theme-dark .bracket-arrow.up::before { border-bottom-color: var(--theme-body-color); } .bracket-arrow.up::after { border-bottom-color: var(--theme-body-background); top: 0px; } .bracket-arrow.down::before { border-bottom-color: transparent; border-top-color: var(--theme-splitter-color); top: 0px; } .theme-dark .bracket-arrow.down::before { border-top-color: var(--theme-body-color); } .bracket-arrow.down::after { border-bottom-color: transparent; border-top-color: var(--theme-body-background); top: -1px; } .bracket-arrow.left::before { border-left-color: transparent; border-right-color: var(--theme-splitter-color); top: 0px; } .theme-dark .bracket-arrow.left::before { border-right-color: var(--theme-body-color); } .bracket-arrow.left::after { border-left-color: transparent; border-right-color: var(--theme-body-background); top: 0px; left: 1px; } /* 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 . */ .popover { position: fixed; z-index: 100; } .popover { position: fixed; z-index: 100; } .popover.orientation-right { display: flex; flex-direction: row; } .popover.orientation-right .gap { padding-left: 5px; } .popover:not(.orientation-right) .gap { height: 5px; padding-top: 5px; } .popover:not(.orientation-right) .preview-popup { margin-left: -55px; } .popover .add-to-expression-bar { margin-left: -55px; } /* 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 . */ .popover .preview-popup { background: var(--theme-body-background); width: 350px; border: 1px solid var(--theme-splitter-color); padding: 10px; height: auto; overflow: auto; box-shadow: 1px 2px 3px var(--popup-shadow-color); } .theme-dark .popover .preview-popup { box-shadow: 1px 2px 3px var(--popup-shadow-color); } .popover .preview-popup .header-container { width: 100%; line-height: 15px; display: flex; flex-direction: row; margin-bottom: 5px; } .popover .preview-popup .logo { width: 20px; margin-right: 5px; } .popover .preview-popup .header-container h3 { margin: 0; margin-bottom: 5px; font-weight: normal; font-size: 14px; line-height: 20px; margin-left: 4px; } .popover .preview-popup .header .link { align-self: flex-end; color: var(--theme-highlight-blue); text-decoration: underline; } .preview-selection:hover { cursor: default; } .preview-selection, .debug-expression.preview-selection { background-color: var(--theme-highlight-yellow); } .theme-dark .preview-selection, .theme-dark .debug-expression.preview-selection { background-color: #743884; } .theme-dark .cm-s-mozilla .preview-selection, .theme-dark .cm-s-mozilla .debug-expression.preview-selection { color: #e7ebee; } .popover .preview-popup .function-signature { padding-top: 10px; } .theme-dark .popover .preview-popup { border-color: var(--theme-body-color); } .tooltip { position: fixed; z-index: 100; } .tooltip .preview-popup { background: var(--theme-toolbar-background); max-width: inherit; min-height: 80px; border: 1px solid var(--theme-splitter-color); box-shadow: 1px 2px 4px 1px var(--theme-toolbar-background-alt); padding: 5px; height: auto; min-height: inherit; max-height: 200px; overflow: auto; } .theme-dark .tooltip .preview-popup { border-color: var(--theme-body-color); } .tooltip .gap { height: 4px; padding-top: 4px; } .add-to-expression-bar { border: 1px solid var(--theme-splitter-color); border-top: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 14px; line-height: 30px; background: var(--theme-toolbar-background); color: var(--theme-text-color-inactive); padding: 0 4px; } .add-to-expression-bar .prompt { width: 1em; } .add-to-expression-bar .expression-to-save-label { width: calc(100% - 4em); } .add-to-expression-bar .expression-to-save-button { font-size: 14px; color: var(--theme-comment); } /* 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 . */ .conditional-breakpoint-panel { cursor: initial; margin: 1em 0; position: relative; display: flex; align-items: center; background: var(--theme-toolbar-background); border-top: 1px solid var(--theme-splitter-color); border-bottom: 1px solid var(--theme-splitter-color); } .conditional-breakpoint-panel .prompt { font-size: 1.8em; color: var(--theme-graphs-orange); padding-left: 3px; padding-right: 3px; padding-bottom: 3px; text-align: right; width: 30px; align-self: baseline; margin-top: 3px; } .conditional-breakpoint-panel.log-point .prompt { color: var(--purple-60); } .conditional-breakpoint-panel .CodeMirror { margin: 6px 10px; } /* 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 . */ .editor-wrapper { --debug-line-border: rgb(145, 188, 219); --debug-expression-background: rgba(202, 227, 255, 0.5); --debug-line-error-border: rgb(255, 0, 0); --debug-expression-error-background: rgba(231, 116, 113, 0.3); --highlight-line-duration: 1500ms; } .theme-dark .editor-wrapper { --debug-expression-background: rgba(202, 227, 255, 0.3); --debug-line-border: #7786a2; } .editor-wrapper .CodeMirror-linewidget { margin-right: -7px; overflow: hidden; } .editor-wrapper { min-width: 0 !important; } .CodeMirror.cm-s-mozilla, .CodeMirror-scroll, .CodeMirror-sizer { overflow-anchor: none; } /** * There's a known codemirror flex issue with chrome that this addresses. * BUG https://github.com/firefox-devtools/debugger/issues/63 */ .editor-wrapper { position: absolute; width: calc(100% - 1px); top: var(--editor-header-height); bottom: var(--editor-footer-height); left: 0px; } html[dir="rtl"] .editor-mount { direction: ltr; } .theme-light .cm-s-mozilla .empty-line .CodeMirror-linenumber { color: var(--grey-40); } .theme-dark .cm-s-mozilla .empty-line .CodeMirror-linenumber { color: var(--grey-50); } .function-search { max-height: 300px; overflow: hidden; } .function-search .results { height: auto; } .editor.hit-marker { height: 15px; } .editor-wrapper .highlight-lines { background: var(--theme-selection-background-hover); } .CodeMirror { width: 100%; height: 100%; } .editor-wrapper .editor-mount { width: 100%; background-color: var(--theme-body-background); font-size: var(--theme-code-font-size); line-height: var(--theme-code-line-height); } .folding-enabled .CodeMirror-linenumber { text-align: left; padding: 0 0 0 2px; } /* set the linenumber white when there is a breakpoint */ .editor-wrapper:not(.skip-pausing) .new-breakpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber { color: white; } /* move the breakpoint below the other gutter elements */ .new-breakpoint .CodeMirror-gutter-elt:nth-child(2) { z-index: 0; } .theme-dark .editor-wrapper .CodeMirror-line .cm-comment { color: var(--theme-comment); } .debug-expression { background-color: var(--debug-expression-background); } .debug-expression-error { background-color: var(--debug-expression-error-background); } :not(.conditional-breakpoint-panel) .new-debug-line .CodeMirror-line { background-color: transparent !important; outline: var(--debug-line-border) solid 1px; } /* Don't display the highlight color since the debug line is already highlighted */ .new-debug-line .CodeMirror-activeline-background { display: none; } :not(.conditional-breakpoint-panel) .new-debug-line-error .CodeMirror-line { background-color: var(--debug-expression-error-background) !important; outline: var(--debug-line-error-border) solid 1px; } /* Don't display the highlight color since the debug line is already highlighted */ .new-debug-line-error .CodeMirror-activeline-background { display: none; } .highlight-line .CodeMirror-line { animation: fade-highlight-out var(--highlight-line-duration) normal forwards; } @keyframes fade-highlight-out { 0% { background-color: var(--theme-highlight-gray); } 100% { background-color: transparent; } } .theme-dark .highlight-line .CodeMirror-line { animation: fade-highlight-out-dark 1s normal forwards; } @keyframes fade-highlight-out-dark { 0% { background-color: var(--theme-comment); } 100% { background-color: transparent; } } .CodeMirror-guttermarker-subtle { visibility: hidden; } .visible { visibility: visible; } .download-anchor { display: none; } /* 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 . */ .theme-light { --gutter-hover-background-color: #dde1e4; --breakpoint-fill: var(--blue-50); --breakpoint-stroke: var(--blue-60); } .theme-dark { --gutter-hover-background-color: #414141; --breakpoint-fill: var(--blue-55); --breakpoint-stroke: var(--blue-40); } .theme-light, .theme-dark { --logpoint-fill: var(--theme-graphs-purple); --logpoint-stroke: var(--purple-60); --breakpoint-condition-fill: var(--theme-graphs-yellow); --breakpoint-condition-stroke: var(--theme-graphs-orange); --breakpoint-skipped-opacity: 0.15; --breakpoint-inactive-opacity: 0.3; --breakpoint-disabled-opacity: 0.6; } /* Standard gutter breakpoints */ .editor-wrapper .breakpoints { position: absolute; top: 0; left: 0; } .new-breakpoint .CodeMirror-linenumber { pointer-events: none; } .editor-wrapper:not(.blackboxed) :not(.empty-line):not(.new-breakpoint) > .CodeMirror-gutter-wrapper:hover > .CodeMirror-linenumber::after { content: ""; position: absolute; /* paint below the number */ z-index: -1; top: 0; left: 0; right: -4px; bottom: 0; height: 15px; background-color: var(--gutter-hover-background-color); mask: url(resource://devtools/client/debugger/images/breakpoint.svg) no-repeat; mask-size: auto 15px; mask-position: right; } .editor.new-breakpoint svg { fill: var(--breakpoint-fill); stroke: var(--breakpoint-stroke); width: 60px; height: 15px; position: absolute; top: 0px; right: -4px; } .editor .breakpoint { position: absolute; right: -2px; } .editor.new-breakpoint.folding-enabled svg { right: -16px; } .new-breakpoint.has-condition .CodeMirror-gutter-wrapper svg { fill: var(--breakpoint-condition-fill); stroke: var(--breakpoint-condition-stroke); } .new-breakpoint.has-log .CodeMirror-gutter-wrapper svg { fill: var(--logpoint-fill); stroke: var(--logpoint-stroke); } .editor.new-breakpoint.breakpoint-disabled svg { fill-opacity: var(--breakpoint-disabled-opacity); stroke-opacity: var(--breakpoint-disabled-opacity); } .editor-wrapper.skip-pausing .editor.new-breakpoint svg { fill-opacity: var(--breakpoint-skipped-opacity); } /* Columnn breakpoints */ .column-breakpoint { display: inline; padding-inline-start: 1px; padding-inline-end: 1px; } .column-breakpoint:hover { background-color: transparent; } .column-breakpoint svg { display: inline-block; cursor: pointer; height: 13px; width: 11px; vertical-align: top; fill: var(--breakpoint-fill); stroke: var(--breakpoint-stroke); fill-opacity: var(--breakpoint-inactive-opacity); stroke-opacity: var(--breakpoint-inactive-opacity); } .column-breakpoint.active svg { fill: var(--breakpoint-fill); stroke: var(--breakpoint-stroke); fill-opacity: 1; stroke-opacity: 1; } .column-breakpoint.disabled svg { fill-opacity: var(--breakpoint-disabled-opacity); stroke-opacity: var(--breakpoint-disabled-opacity); } .column-breakpoint.has-log.disabled svg { fill-opacity: 0.5; stroke-opacity: 0.5; } .column-breakpoint.has-condition svg { fill: var(--breakpoint-condition-fill); stroke: var(--breakpoint-condition-stroke); } .column-breakpoint.has-log svg { fill: var(--logpoint-fill); stroke: var(--logpoint-stroke); } .editor-wrapper.skip-pausing .column-breakpoint svg { fill-opacity: var(--breakpoint-skipped-opacity); } .img.column-marker { background-image: url(resource://devtools/client/debugger/images/column-marker.svg); } /* 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 . */ .cm-highlight { position: relative; } .cm-highlight::before { position: absolute; border-top-style: solid; border-bottom-style: solid; border-top-color: var(--theme-text-color-inactive); border-bottom-color: var(--theme-text-color-inactive); border-top-width: 1px; border-bottom-width: 1px; top: -1px; bottom: 0; left: 0; right: 0; content: ""; margin-bottom: -1px; } .cm-highlight-full::before { border: 1px solid var(--theme-text-color-inactive); border-radius: 2px; margin: 0 -1px -1px -1px; } /* 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 . */ .breakpoints-pane > ._content { overflow-x: auto; } .breakpoints-toggle { margin: 2px 3px; } .breakpoints-exceptions-options *, .breakpoints-list * { -moz-user-select: none; user-select: none; } .breakpoints-list { padding: 4px 0; } .breakpoints-list .breakpoint-heading { text-overflow: ellipsis; width: 100%; font-size: 12px; line-height: 16px; } .breakpoint-heading:not(:first-child) { margin-top: 2px; } .breakpoints-list .breakpoint-heading .filename { overflow: hidden; text-overflow: ellipsis; } .breakpoints-list .breakpoint-heading .filename span { opacity: 0.7; padding-left: 4px; } .breakpoints-list .breakpoint-heading, .breakpoints-list .breakpoint { color: var(--theme-text-color-strong); position: relative; cursor: pointer; } .breakpoints-list .breakpoint-heading, .breakpoints-list .breakpoint, .breakpoints-exceptions, .breakpoints-exceptions-caught { display: flex; align-items: center; overflow: hidden; padding-top: 2px; padding-bottom: 2px; padding-inline-start: 16px; padding-inline-end: 12px; } .breakpoints-exceptions { padding-bottom: 3px; padding-top: 3px; user-select: none; } .breakpoints-exceptions-caught { padding-bottom: 3px; padding-top: 3px; padding-inline-start: 36px; } .breakpoints-exceptions-options { padding-top: 4px; padding-bottom: 4px; } .xhr-breakpoints-pane .breakpoints-exceptions-options { border-bottom: 1px solid var(--theme-splitter-color); } .breakpoints-exceptions-options:not(.empty) { border-bottom: 1px solid var(--theme-splitter-color); } .breakpoints-exceptions input, .breakpoints-exceptions-caught input { padding-inline-start: 2px; margin-top: 0px; margin-bottom: 0px; margin-inline-start: 0; margin-inline-end: 2px; vertical-align: text-bottom; } .breakpoint-exceptions-label { line-height: 14px; padding-inline-end: 8px; cursor: default; overflow: hidden; text-overflow: ellipsis; } html[dir="rtl"] .breakpoints-list .breakpoint, html[dir="rtl"] .breakpoints-list .breakpoint-heading, html[dir="rtl"] .breakpoints-exceptions { border-right: 4px solid transparent; } html:not([dir="rtl"]) .breakpoints-list .breakpoint, html:not([dir="rtl"]) .breakpoints-list .breakpoint-heading, html:not([dir="rtl"]) .breakpoints-exceptions { border-left: 4px solid transparent; } html .breakpoints-list .breakpoint.is-conditional { border-inline-start-color: var(--theme-graphs-yellow); } html .breakpoints-list .breakpoint.is-log { border-inline-start-color: var(--theme-graphs-purple); } html .breakpoints-list .breakpoint.paused { background-color: var(--theme-toolbar-background-alt); border-color: var(--breakpoint-active-color); } .breakpoints-list .breakpoint:hover { background-color: var(--search-overlays-semitransparent); } .breakpoint-line-close { margin-inline-start: 4px; } .breakpoints-list .breakpoint .breakpoint-line { font-size: 11px; color: var(--theme-comment); min-width: 16px; text-align: end; padding-top: 1px; padding-bottom: 1px; } .breakpoints-list .breakpoint:hover .breakpoint-line, .breakpoints-list .breakpoint-line-close:focus-within .breakpoint-line { color: transparent; } .breakpoints-list .breakpoint.paused:hover { border-color: var(--breakpoint-active-color-hover); } .breakpoints-list .breakpoint-label { display: inline-block; cursor: pointer; flex-grow: 1; text-overflow: ellipsis; overflow: hidden; font-size: 11px; } .breakpoints-list .breakpoint-label span, .breakpoint-line-close { display: inline; line-height: 14px; } .breakpoint-checkbox { margin-inline-start: 0px; margin-top: 0px; margin-bottom: 0px; vertical-align: text-bottom; } .breakpoint-label .location { width: 100%; display: inline-block; overflow-x: hidden; text-overflow: ellipsis; padding: 1px 0; vertical-align: bottom; } .breakpoints-list .pause-indicator { flex: 0 1 content; order: 3; } .breakpoint .close-btn { position: absolute; /* hide button outside of row until hovered or focused */ top: -100px; } [dir="ltr"] .breakpoint .close-btn { right: 12px; } [dir="rtl"] .breakpoint .close-btn { left: 12px; } /* Reveal the remove button on hover/focus */ .breakpoint:hover .close-btn, .breakpoint .close-btn:focus { top: calc(50% - 8px); } /* Hide the line number when revealing the remove button (since they're overlayed) */ .breakpoint-line-close:focus-within .breakpoint-line, .breakpoint:hover .breakpoint-line { visibility: hidden; } .CodeMirror.cm-s-mozilla-breakpoint { cursor: pointer; } .CodeMirror.cm-s-mozilla-breakpoint .CodeMirror-lines { padding: 0; } .CodeMirror.cm-s-mozilla-breakpoint .CodeMirror-sizer { min-width: initial !important; } .breakpoints-list .breakpoint .CodeMirror.cm-s-mozilla-breakpoint { transition: opacity 0.15s linear; } .breakpoints-list .breakpoint.disabled .CodeMirror.cm-s-mozilla-breakpoint { opacity: 0.5; } .CodeMirror.cm-s-mozilla-breakpoint .CodeMirror-line span[role="presentation"] { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; } .CodeMirror.cm-s-mozilla-breakpoint .CodeMirror-code, .CodeMirror.cm-s-mozilla-breakpoint .CodeMirror-scroll { pointer-events: none; } .CodeMirror.cm-s-mozilla-breakpoint { padding-top: 1px; } /** * Skip Pausing style * Add a gray background and lower content opacity */ .breakpoints-pane .pane.skip-pausing { background-color: var(--theme-toolbar-hover); } .breakpoints-pane .pane.skip-pausing > * { opacity: 0.6; } .breakpoints-pane .skip-pausing .breakpoint-label, .breakpoints-pane .skip-pausing .breakpoint-heading .filename, .breakpoints-pane .skip-pausing .breakpoint-exceptions-label, .breakpoints-pane .skip-pausing .breakpoint .breakpoint-line { color: var(--theme-body-color); } /* 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 . */ .expression-input-form { width: 100%; } .input-expression { width: 100%; margin: 0; font-size: inherit; border: 1px; background-color: var(--theme-sidebar-background); line-height: 16px; padding-top: 1px; padding-bottom: 1px; padding-inline-start: 19px; padding-inline-end: 12px; color: var(--theme-body-color); outline: 0; } @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } } .input-expression::placeholder { font-style: italic; color: var(--theme-comment); } .input-expression:focus { cursor: text; } .expressions-list { /* TODO: add normalize */ margin: 0; padding: 4px 0px; overflow-x: auto; } .expression-input-container { display: flex; border: 1px solid transparent; } .expression-input-container.focused { border: 1px solid var(--theme-highlight-blue); } :root.theme-dark .expression-input-container.focused { border: 1px solid var(--blue-50); } .expression-input-container.error { border: 1px solid red; } .expression-container { padding-top: 3px; padding-bottom: 3px; padding-inline-start: 20px; padding-inline-end: 12px; width: 100%; color: var(--theme-body-color); background-color: var(--theme-body-background); display: block; position: relative; overflow: hidden; } .expression-container > .tree { width: 100%; overflow: hidden; } .expression-container .tree .tree-node[aria-level="1"] { padding-top: 0px; /* keep line-height at 14px to prevent row from shifting upon expansion */ line-height: 14px; } .expression-container .tree-node[aria-level="1"] .object-label { font-family: var(--monospace-font-family); } :root.theme-light .expression-container:hover { background-color: var(--search-overlays-semitransparent); } :root.theme-dark .expression-container:hover { background-color: var(--search-overlays-semitransparent); } .tree .tree-node:not(.focused):hover { background-color: transparent; } .expression-container__close-btn { position: absolute; /* hiding button outside of row until hovered or focused */ top: -100px; } .expression-container:hover .expression-container__close-btn, .expression-container:focus-within .expression-container__close-btn, .expression-container__close-btn:focus-within { top: 0; } .expression-content .object-node { padding-inline-start: 0px; } .expressions-list .tree.object-inspector .node.object-node { display: flex; align-items: center; } .expression-container__close-btn { max-height: 16px; padding-inline-start: 4px; } [dir="ltr"] .expression-container__close-btn { right: 0; } [dir="rtl"] .expression-container__close-btn { left: 0; } .expression-content { display: flex; align-items: center; flex-grow: 1; position: relative; } .expression-content .tree { overflow: hidden; flex-grow: 1; line-height: 15px; } .expression-content .tree-node[data-expandable="false"][aria-level="1"] { padding-inline-start: 0px; } .input-expression:not(:placeholder-shown) { font-family: var(--monospace-font-family); } /* 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 . */ .frames-group .group, .frames-group .group .location { font-weight: 500; cursor: default; /* * direction:rtl is set in Frames.css to overflow the location text from the * start. Here we need to reset it in order to display the framework icon * after the framework name. */ direction: ltr; } .frames-group.expanded .group, .frames-group.expanded .group .location { color: var(--theme-highlight-blue); } .frames-group .frames-list [role="listitem"] { padding-inline-start: 30px; } .frames-group .frames-list { border-top: 1px solid var(--theme-splitter-color); border-bottom: 1px solid var(--theme-splitter-color); } .frames-group.expanded .badge { color: var(--theme-highlight-blue); } .frames-group .img.arrow { margin-inline-start: -1px; margin-inline-end: 4px; } /* 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 . */ .badge { --size: 17px; --radius: calc(var(--size) / 2); height: var(--size); min-width: var(--size); line-height: var(--size); background: var(--theme-toolbar-background-hover); color: var(--theme-body-color); border-radius: var(--radius); padding: 0 4px; font-size: 0.9em; } /* 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 . */ .frames [role="list"] { list-style: none; margin-top: 4px; padding: 0; } .frames [role="list"] [role="listitem"] { padding: 2px 10px 2px 20px; overflow: hidden; display: flex; justify-content: space-between; column-gap: 0.5em; flex-direction: row; align-items: center; margin: 0; max-width: 100%; flex-wrap: wrap; } .frames [role="list"] [role="listitem"] * { -moz-user-select: none; user-select: none; } .frames .badge { flex-shrink: 0; margin-right: 4px; } .frames .location { font-weight: normal; margin: 0; flex-grow: 1; max-width: 100%; overflow: hidden; white-space: nowrap; /* Trick to get the ellipsis at the start of the string */ text-overflow: ellipsis; direction: rtl; text-align: right; } .theme-light .frames .location { color: var(--theme-comment); } :root.theme-dark .frames .location { color: var(--theme-body-color); opacity: 0.6; } .frames .title { text-overflow: ellipsis; overflow: hidden; } .frames [role="list"] [role="listitem"]:hover, .frames [role="list"] [role="listitem"]:focus { background-color: var(--theme-toolbar-background-alt); } .theme-dark .frames [role="list"] [role="listitem"]:focus { background-color: var(--theme-tab-toolbar-background); } .frames [role="list"] [role="listitem"].selected { background-color: var(--theme-selection-background); color: white; } .frames [role="list"] [role="listitem"].selected i.annotation-logo svg path { fill: white; } :root.theme-light .frames [role="list"] [role="listitem"].selected .location, :root.theme-dark .frames [role="list"] [role="listitem"].selected .location { color: white; } .frames .show-more-container { display: flex; min-height: 24px; padding: 4px 0; } .frames .show-more { text-align: center; padding: 8px 0px; margin: 7px 10px 7px 7px; border: 1px solid var(--theme-splitter-color); background-color: var(--theme-tab-toolbar-background); width: 100%; font-size: inherit; color: inherit; } .frames .show-more:hover { background-color: var(--theme-toolbar-background-hover); } .frames .img.annotation-logo { margin-inline-end: 4px; background-color: currentColor; } /* * We also show the library icon in locations, which are forced to RTL. */ .frames .location .img.annotation-logo { margin-inline-start: 4px; } /* Some elements are added to the DOM only to be printed into the clipboard when the user copy some elements. We don't want those elements to mess with the layout so we put them outside of the screen */ .frames .clipboard-only { position: absolute; left: -9999px; } /* 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 . */ .workers-list { padding: 4px 0; } .workers-list * { -moz-user-select: none; user-select: none; } .workers-list > .worker { font-size: inherit; color: var(--theme-text-color-strong); padding: 2px 6px; padding-inline-start: 20px; line-height: 16px; position: relative; cursor: pointer; display: flex; align-items: center; } .workers-list > .worker:hover { background-color: var(--search-overlays-semitransparent); } .workers-list > .worker.selected { background-color: var(--tab-line-selected-color); } .workers-list .icon { flex: none; margin-inline-end: 4px; } .workers-list .img { display: block; } .workers-list .label { display: inline-block; flex-grow: 1; flex-shrink: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .workers-list .pause-badge { flex: none; margin-inline-start: 4px; } .workers-list > .worker.selected { background: var(--theme-selection-background); color: var(--theme-selection-color); } .workers-list > .worker.selected .img { background-color: currentColor; } /* 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 . */ :root { --accordion-header-background: var(--theme-toolbar-background); } :root.theme-dark { --accordion-header-background: #222225; } .accordion { background-color: var(--theme-sidebar-background); width: 100%; list-style-type: none; padding: 0px; margin-top: 0px; } .accordion ._header { background-color: var(--accordion-header-background); border-bottom: 1px solid var(--theme-splitter-color); display: flex; font-size: 12px; line-height: calc(16 / 12); padding: 4px 6px; width: 100%; align-items: center; margin: 0px; font-weight: normal; cursor: default; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .accordion ._header:hover { background-color: var(--theme-toolbar-background-hover); } .accordion ._header .arrow { margin-inline-end: 4px; } .accordion ._header .header-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .accordion ._header .header-buttons { display: flex; margin-inline-start: auto; } .accordion ._header .header-buttons button { color: var(--theme-body-color); border: none; background: none; padding: 0; margin: 0 2px; width: 16px; height: 16px; } .accordion ._header .header-buttons button::-moz-focus-inner { border: none; } .accordion ._header .header-buttons button .img { display: block; } .accordion ._content { border-bottom: 1px solid var(--theme-splitter-color); font-size: var(--theme-body-font-size); } .accordion div:last-child ._content { border-bottom: none; } /* 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 . */ .command-bar { flex: 0 0 29px; border-bottom: 1px solid var(--theme-splitter-color); display: flex; overflow: hidden; z-index: 1; background-color: var(--theme-toolbar-background); } html[dir="rtl"] .command-bar { border-right: 1px solid var(--theme-splitter-color); } .theme-dark .command-bar { background-color: var(--theme-toolbar-background); } .command-bar .filler { flex-grow: 1; } .command-bar .replay-inactive { opacity: 0.5; } .command-bar .step-position { color: var(--theme-text-color-inactive); padding-top: 8px; margin-inline-end: 4px; } .command-bar .replay-active { color: var(--theme-highlight-blue); } .command-bar .active .disable-pausing { background-color: var(--theme-icon-checked-color); } .bottom { border-bottom: none; background-color: var(--theme-body-background); border-top: 1px solid var(--theme-splitter-color); flex: none; height: var(--editor-footer-height); } .command-bar.bottom { justify-content: flex-end; } .command-bar.bottom > button { color: var(--theme-comment); width: 26px; } .command-bar.bottom > button:hover { color: var(--theme-body-color); } .command-bar .divider { width: 1px; background: var(--theme-splitter-color); height: 10px; margin: 11px 6px 0 6px; } /* 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 . */ .xhr-breakpoints-pane ._content { overflow-x: auto; } .xhr-input-container { display: flex; border: 1px solid transparent; } .xhr-input-container.focused { border: 1px solid var(--theme-highlight-blue); } :root.theme-dark .xhr-input-container.focused { border: 1px solid var(--blue-50); } .xhr-input-container.error { border: 1px solid red; } .xhr-input-form { display: inline-flex; width: 100%; padding-inline-start: 20px; padding-inline-end: 12px; } .xhr-checkbox { margin-inline-start: 0; margin-inline-end: 4px; } .xhr-input-url { border: 1px; padding: 3px 0px; flex-grow: 1; background-color: var(--theme-sidebar-background); font-size: inherit; line-height: 14px; color: var(--theme-body-color); } .xhr-input-url::placeholder { font-style: italic; color: var(--theme-comment); } .xhr-input-url:focus { cursor: text; outline: none; } .xhr-container { border-left: 4px solid transparent; width: 100%; color: var(--theme-body-color); padding-inline-start: 16px; padding-inline-end: 12px; background-color: var(--theme-body-background); display: flex; align-items: center; position: relative; } :root.theme-light .xhr-container:hover { background-color: var(--search-overlays-semitransparent); } :root.theme-dark .xhr-container:hover { background-color: var(--search-overlays-semitransparent); } .xhr-label-method { line-height: 14px; display: inline-block; margin-inline-end: 2px; } .xhr-input-method { display: none; } .xhr-input-container.focused .xhr-input-method { display: block; } .xhr-label-url { max-width: calc(100% - var(--breakpoint-expression-right-clear-space)); color: var(--theme-comment); display: inline-block; cursor: text; flex-grow: 1; text-overflow: ellipsis; overflow: hidden; padding: 0px 2px 0px 2px; line-height: 14px; } .xhr-container label { flex-grow: 1; display: flex; align-items: center; overflow-x: hidden; } .xhr-container__close-btn { display: flex; padding-top: 2px; padding-bottom: 2px; } /* 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 . */ .event-listeners-content { padding-top: 4px; padding-bottom: 4px; padding-inline-start: 14px; padding-inline-end: 20px; } .event-listeners-content ul { padding: 0; list-style-type: none; } .event-listener-group { user-select: none; } .event-listener-header { display: flex; align-items: center; } .event-listener-expand { border: none; background: none; padding: 4px 5px; line-height: 12px; } .event-listener-expand:hover { background: transparent; } .event-listener-group input[type="checkbox"] { margin: 0px; margin-inline-end: 4px; } .event-listener-label { display: flex; align-items: center; padding-inline-start: 2px; padding-inline-end: 10px; } .event-listener-category { padding: 3px 0px; line-height: 14px; } .event-listeners-content .arrow { margin-inline-end: 0; } html[dir="ltr"] .event-listeners-content .arrow.expanded { transform: rotate(0deg); } html[dir="rtl"] .event-listeners-content .arrow.expanded { transform: rotate(90deg); } .event-listener-event { display: flex; align-items: center; margin-inline-start: 30px; } .event-listener-name { line-height: 14px; padding: 3px 0px; } .event-listener-event input { margin-inline-end: 4px; margin-inline-start: 0px; margin-top: 0px; margin-bottom: 0px; } /* 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 . */ .why-paused { display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid var(--theme-splitter-color); background-color: hsl(54, 100%, 92%); color: var(--theme-body-color); font-size: 12px; cursor: default; min-height: 44px; padding: 4px; white-space: normal; font-weight: bold; } .why-paused > div { display: flex; flex-direction: row; justify-content: space-between; } .why-paused .info.icon { align-self: center; padding: 0px 4px; } .why-paused .pause.reason { display: flex; flex-direction: column; padding-left: 16px; padding-right: 4px; } .theme-dark .secondary-panes .why-paused { background-color: hsl(42, 37%, 19%); color: hsl(43, 94%, 81%); } .why-paused .message { font-style: italic; font-weight: 100; } .why-paused .message.warning { color: var(--theme-graphs-red); font-weight: bold; font-style: italic; } /* 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 . */ .secondary-panes .map-scopes-header { padding-inline-end: 3px; } .secondary-panes .header-buttons .img.shortcuts { width: 14px; height: 14px; /* Better vertical centering of the icon */ margin-top: -2px; } .scopes-content .toggle-map-scopes a.mdn { padding-inline-start: 3px; } .scopes-content .toggle-map-scopes .img.shortcuts { background: var(--theme-comment); } .object-node.default-property { opacity: 0.6; } .object-node { padding-inline-start: 20px; } html[dir="rtl"] .object-node { padding-right: 4px; } .object-label { color: var(--theme-highlight-blue); } .objectBox-object, .objectBox-string, .objectBox-text, .objectBox-table, .objectLink-textNode, .objectLink-event, .objectLink-eventLog, .objectLink-regexp, .objectLink-object, .objectLink-Date, .theme-dark .objectBox-object, .theme-light .objectBox-object { white-space: nowrap; } .scopes-pane ._content { overflow: auto; } .scopes-list { padding: 4px 0px; } .scopes-list .function-signature { display: inline-block; } .scopes-list .scope-type-toggle { text-align: center; padding-top: 10px; padding-bottom: 10px; } .scopes-list .scope-type-toggle button { /* Override color so that the link doesn't turn purple */ color: var(--theme-body-color); font-size: inherit; text-decoration: underline; cursor: pointer; } .scopes-list .scope-type-toggle button:hover { background: transparent; } .scopes-list .tree.object-inspector .node.object-node { display: flex; align-items: center; } .scopes-list .tree { line-height: 15px; } /* 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 . */ .secondary-panes { overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; flex: 1; white-space: nowrap; --breakpoint-expression-right-clear-space: 36px; } /* We apply overflow to the container with the commandbar. This allows the commandbar to remain fixed when scrolling until the content completely ends. Not just the height of the wrapper. Ref: https://github.com/firefox-devtools/debugger/issues/3426 */ .secondary-panes-wrapper { height: 100%; width: 100%; display: flex; flex-direction: column; } .secondary-panes .accordion { flex: 1 0 auto; margin-bottom: 0; } .secondary-panes-wrapper .accordion li:last-child ._content { border-bottom: 0; } .pane { color: var(--theme-body-color); } .pane .pane-info { font-style: italic; text-align: center; padding: 0.5em; -moz-user-select: none; user-select: none; cursor: default; } .secondary-panes .breakpoints-buttons { display: flex; } .dropdown { width: 20em; overflow: auto; } .secondary-panes input[type="checkbox"] { margin: 0; margin-inline-end: 4px; } /* 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 . */ .welcomebox { position: absolute; top: var(--editor-header-height); left: 0; bottom: var(--editor-footer-height); width: calc(100% - 1px); padding: 50px 0 0 0; text-align: center; background-color: var(--theme-toolbar-background); overflow: hidden; font-weight: lighter; z-index: 10; user-select: none; } .theme-dark .welcomebox { background-color: var(--theme-body-background); } .alignlabel { display: flex; white-space: nowrap; font-size: 1.25em; } .shortcutKeys { font-family: Courier; } .shortcutKey, .shortcutLabel { flex: 1; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .welcomebox__searchSources:hover, .welcomebox__searchProject:hover, .welcomebox__allShortcuts:hover { color: var(--theme-body-color); } .shortcutKey { text-align: end; padding-right: 10px; font-family: var(--monospace-font-family); font-size: 14px; line-height: 18px; color: var(--theme-body-color); } :root[platform="mac"] .welcomebox .shortcutKey, .launchpad-root[platform="mac"] .welcomebox .shortcutKey { font-family: system-ui, -apple-system, sans-serif; font-weight: 500; } .shortcutLabel { text-align: start; padding-left: 10px; font-size: 14px; line-height: 18px; } .shortcutFunction { margin: 0 auto; color: var(--theme-comment); display: table; } .shortcutFunction p { display: table-row; } .shortcutFunction .shortcutKey, .shortcutFunction .shortcutLabel { padding: 10px 5px; display: table-cell; } /* 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 . */ .source-header { display: flex; width: 100%; height: var(--editor-header-height); border-bottom: 1px solid var(--theme-splitter-color); background-color: var(--theme-toolbar-background); } .source-header * { -moz-user-select: none; user-select: none; } .source-header .command-bar { flex: initial; flex-shrink: 0; border-bottom: 0; border-inline-start: 1px solid var(--theme-splitter-color); } .source-tabs { flex: auto; align-self: flex-start; align-items: flex-start; /* Reserve space for the overflow button (even if not visible) */ padding-inline-end: 28px; } .source-tab { display: inline-flex; align-items: center; position: relative; min-width: 40px; max-width: 100%; overflow: hidden; padding: 4px 10px; cursor: default; height: calc(var(--editor-header-height) - 1px); font-size: 12px; background-color: transparent; vertical-align: bottom; } .source-tab::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background-color: var(--tab-line-color, transparent); transition: transform 250ms var(--animation-curve), opacity 250ms var(--animation-curve); opacity: 0; transform: scaleX(0); } .source-tab.active { --tab-line-color: var(--tab-line-selected-color); color: var(--theme-toolbar-selected-color); border-bottom-color: transparent; } .source-tab:not(.active):hover { --tab-line-color: var(--tab-line-hover-color); background-color: var(--theme-toolbar-hover); } .source-tab:hover::before, .source-tab.active::before { opacity: 1; transform: scaleX(1); } .source-tab .img.prettyPrint, .source-tab .img.blackBox { mask-size: 14px; background-color: currentColor; } .source-tab .filename { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-inline-end: 4px; } .source-tab .filename span { opacity: 0.7; padding-inline-start: 4px; } .source-tab .close-btn { visibility: hidden; margin-inline-end: -6px; } .source-tab.active .close-btn { color: inherit; } .source-tab.active .close-btn, .source-tab:hover .close-btn { visibility: visible; } .source-tab .close-btn:hover, .source-tab .close-btn:focus { color: var(--theme-selection-color); background-color: var(--theme-selection-background); } /* 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 . */ .dropdown { background: var(--theme-body-background); border: 1px solid var(--theme-splitter-color); border-radius: 4px; box-shadow: 0 4px 4px 0 var(--search-overlays-semitransparent); max-height: 300px; position: absolute; top: 24px; width: 150px; z-index: 1000; overflow: auto; } [dir="ltr"] .dropdown { right: 2px; } [dir="rtl"] .dropdown { left: 2px; } .dropdown-block { position: relative; align-self: center; height: 100%; } /* cover the reserved space at the end of .source-tabs */ .source-tabs + .dropdown-block { margin-inline-start: -28px; } .dropdown-button { color: var(--theme-comment); background: none; border: none; padding: 4px 6px; font-weight: 100; font-size: 14px; height: 100%; width: 28px; } .dropdown-button .img { display: block; } .dropdown ul { margin: 0; padding: 4px 0; list-style: none; } .dropdown li { display: flex; align-items: center; padding: 6px 8px; font-size: 12px; line-height: calc(16 / 12); transition: all 0.25s ease; } .dropdown li:hover { background-color: var(--search-overlays-semitransparent); } .dropdown-icon { margin-inline-end: 4px; mask-size: 13px 13px; } .dropdown-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dropdown-icon.prettyPrint, .dropdown-icon.blackBox { background-color: var(--theme-highlight-blue); } .dropdown-mask { position: fixed; width: 100%; height: 100%; background: transparent; z-index: 999; left: 0; top: 0; } /* 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 . */ .source-footer { background: var(--theme-body-background); border-top: 1px solid var(--theme-splitter-color); position: absolute; display: flex; bottom: 0; left: 0; right: 0; opacity: 1; z-index: 1; -moz-user-select: none; width: calc(100% - 1px); user-select: none; height: var(--editor-footer-height); box-sizing: border-box; } .source-footer-start { display: flex; align-items: center; justify-self: start; } .source-footer-end { display: flex; margin-left: auto; } .source-footer .commands * { -moz-user-select: none; user-select: none; } .source-footer > .source-footer-start > .commands { display: flex; } .source-footer > .source-footer-start > .commands > .action { display: flex; justify-content: center; align-items: center; transition: opacity 200ms; border: none; background: transparent; padding: 4px 6px; } .source-footer > .source-footer-start > .commands > button.action:hover { background: var(--theme-toolbar-background-hover); } :root.theme-dark .source-footer > .source-footer-start > .commands > .action { fill: var(--theme-body-color); } :root.theme-dark .source-footer > .source-footer-start > .commands > .action:hover { fill: var(--theme-selection-color); } .source-footer > .source-footer-start > .commands > div.loader { vertical-align: top; width: 20px; margin: 0 4px; } .source-footer > .source-footer-start > .commands > .blackboxed > .img.blackBox { background-color: var(--theme-icon-checked-color); } .source-footer .mapped-source, .source-footer .cursor-position { color: var(--theme-body-color); padding-right: 2.5px; } .source-footer .mapped-source { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .source-footer .cursor-position { padding: 5px; white-space: nowrap; } /* 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 . */ .result-list { list-style: none; margin: 0px; padding: 0px; overflow: auto; width: 100%; background: var(--theme-body-background); } .result-list * { -moz-user-select: none; user-select: none; } .result-list li { color: var(--theme-body-color); padding: 4px 8px; display: flex; } .result-list.big li { flex-direction: row; align-items: center; padding: 6px 8px; font-size: 12px; line-height: 16px; } .result-list.small li { justify-content: space-between; } .result-list li:hover { background: var(--theme-tab-toolbar-background); } .result-list li.selected { background: var(--accordion-header-background); } .result-list.small li.selected { background-color: var(--theme-selection-background); color: white; } .theme-dark .result-list.small li.selected { background-color: var(--theme-body-background); } .theme-dark .result-list li:hover { background: var(--grey-70); } .theme-dark .result-list li.selected { background: var(--grey-70); } .result-list li .result-item-icon { background-color: var(--theme-icon-dimmed-color); } .result-list li .icon { align-self: center; margin-inline-end: 14px; margin-inline-start: 4px; } .result-list .result-item-icon { display: block; } .result-list .selected .result-item-icon { background-color: var(--theme-selection-color); } .result-list li .title { word-break: break-all; text-overflow: ellipsis; white-space: nowrap; /** https://searchfox.org/mozilla-central/source/devtools/client/themes/variables.css **/ color: var(--grey-90); } .theme-dark .result-list li .title { /** https://searchfox.org/mozilla-central/source/devtools/client/themes/variables.css **/ color: var(--grey-30); } .result-list li.selected .title { color: white; } .result-list.big li.selected { background-color: var(--theme-selection-background); color: white; } .result-list.big li.selected .subtitle { color: white; } .result-list.big li.selected .subtitle .highlight { color: white; font-weight: bold; } .result-list.big li .subtitle { word-break: break-all; /** https://searchfox.org/mozilla-central/source/devtools/client/themes/variables.css **/ color: var(--grey-40); margin-left: 15px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .theme-dark .result-list.big li.selected .subtitle { color: white; } .theme-dark .result-list.big li .subtitle { color: var(--theme-text-color-inactive); } .search-bar .result-list li.selected .subtitle { color: white; } .search-bar .result-list { border-bottom: 1px solid var(--theme-splitter-color); } .theme-dark .result-list { background-color: var(--theme-body-background); } /* 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 . */ .result-item .title .highlight { font-weight: bold; background-color: transparent; } .selected .highlight { color: white; } .result-item .subtitle .highlight { color: var(--grey-90); font-weight: 500; background-color: transparent; } .theme-dark .result-item .title .highlight, .theme-dark .result-item .subtitle .highlight { color: white; } .loading-indicator { padding: 5px 0 5px 0; text-align: center; }