Copy as Markdown
Other Tools
#define EXAMPLE_STYLESHEET "/* Copied from devtools/client/debugger/debugger.css on 2017-04-03 */\n\n.landing-page {\n flex: 1;\n display: flex;\n width: 100vw;\n height: 100vh;\n flex-direction: row;\n align-items: stretch;\n /* Customs properties */\n --title-font-size: 24px;\n --ui-element-font-size: 16px;\n --primary-line-height: 30px;\n --secondary-line-height: 25px;\n --base-spacing: 20px;\n --base-transition: all 0.25s ease;\n}\n\n.landing-popup {\n min-width: 0;\n}\n\n.landing-page .panel {\n display: flex;\n flex: 1;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.landing-page .panel header {\n display: flex;\n align-items: baseline;\n margin: calc(2 * var(--base-spacing)) 0 0;\n padding-bottom: var(--base-spacing);\n}\n\n.landing-page .panel header input[type=search] {\n flex: 1;\n background-color: var(--theme-tab-toolbar-background);\n color: var(--theme-comment);\n font-size: var(--ui-element-font-size);\n border: 1px solid var(--theme-splitter-color);\n padding: calc(var(--base-spacing) / 2);\n margin: 0 var(--base-spacing);\n transition: var(--base-transition);\n}\n\n.landing-page .panel header input[type=button] {\n background-color: var(--theme-tab-toolbar-background);\n color: var(--theme-comment);\n font-size: var(--ui-element-font-size);\n border: 1px solid var(--theme-splitter-color);\n padding: calc(var(--base-spacing) / 2);\n margin: 0 var(--base-spacing);\n transition: var(--base-transition);\n}\n\n.landing-page .panel header h1 {\n color: var(--theme-body-color);\n font-size: var(--title-font-size);\n margin: 0;\n line-height: var(--primary-line-height);\n font-weight: normal;\n padding-left: calc(2 * var(--base-spacing));\n}\n\n.landing-page .panel h3 {\n padding-left: calc(2 * var(--base-spacing));\n}\n\n.landing-page .panel header input::placeholder {\n color: var(--theme-body-color-inactive);\n}\n\n.landing-page .panel header input:focus {\n border: 1px solid var(--theme-selection-background);\n}\n\n.landing-page .panel .center-message {\n font-size: var(--ui-element-font-size);\n line-height: var(--secondary-line-height);\n padding: calc(var(--base-spacing) / 2);\n}\n\n.landing-page .center a {\n color: var(--theme-highlight-bluegrey);\n text-decoration: none;\n}\n\n.landing-page .panel .footer-note {\n padding: var(--base-spacing) 0;\n text-align: center;\n font-size: 14px;\n color: var(--theme-comment);\n}\n.landing-page .tab-group {\n flex: 1;\n overflow-y: auto;\n}\n\n.landing-page .tab-list {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.landing-page .tab {\n border-bottom: 1px solid var(--theme-splitter-color);\n padding: calc(var(--base-spacing) / 2) var(--base-spacing);\n font-family: sans-serif;\n}\n\n.landing-page .tab-sides {\n display: flex;\n justify-content: space-between;\n margin: 0 calc(var(--base-spacing) * 2);\n}\n\n.landing-page .tab-title {\n line-height: var(--secondary-line-height);\n font-size: var(--ui-element-font-size);\n color: var(--theme-highlight-bluegrey);\n word-break: break-all;\n}\n\n.landing-page .tab-url {\n color: var(--theme-comment);\n word-break: break-all;\n}\n\n.landing-page .tab-value {\n color: var(--theme-comment);\n line-height: var(--secondary-line-height);\n font-size: var(--ui-element-font-size);\n}\n\n.landing-page .tab:focus,\n.landing-page .tab.active {\n background: var(--theme-selection-background);\n color: var(--theme-selection-color);\n cursor: pointer;\n transition: var(--base-transition);\n}\n\n.landing-page .tab:focus .tab-title,\n.landing-page .tab.active .tab-title {\n color: inherit;\n}\n\n.landing-page .tab:focus .tab-url,\n.landing-page .tab.active .tab-url {\n color: var(--theme-highlight-gray);\n}\n.landing-page .sidebar {\n display: flex;\n background-color: var(--theme-tab-toolbar-background);\n width: 200px;\n flex-direction: column;\n border-right: 1px solid var(--theme-splitter-color);\n}\n\n.landing-page .sidebar h1 {\n color: var(--theme-body-color);\n font-size: var(--title-font-size);\n margin: 0;\n line-height: var(--primary-line-height);\n font-weight: normal;\n padding: calc(2 * var(--base-spacing)) var(--base-spacing);\n}\n\n.landing-page .sidebar ul {\n list-style: none;\n padding: 0;\n line-height: var(--primary-line-height);\n font-size: var(--ui-element-font-size);\n}\n\n.landing-page .sidebar li {\n padding: calc(var(--base-spacing) / 4) var(--base-spacing);\n}\n\n.landing-page .sidebar li a {\n color: var(--theme-body-color);\n}\n\n.landing-page .sidebar li.selected {\n background: var(--theme-highlight-bluegrey);\n color: var(--theme-selection-color);\n transition: var(--base-transition);\n}\n\n.landing-page .sidebar li.selected a {\n color: inherit;\n}\n\n.landing-page .sidebar li:hover,\n.landing-page .sidebar li:focus {\n background: var(--theme-selection-background);\n color: var(--theme-selection-color);\n cursor: pointer;\n}\n\n.landing-page .sidebar li:hover a,\n.landing-page .sidebar li:focus a {\n color: inherit;\n}\n:root.theme-light,\n:root .theme-light {\n --theme-search-overlays-semitransparent: rgba(221, 225, 228, 0.66);\n}\n\n* {\n box-sizing: border-box;\n}\n\nhtml,\nbody {\n height: 100%;\n margin: 0;\n padding: 0;\n width: 100%;\n}\n\n#mount {\n display: flex;\n height: 100%;\n}\n\n::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n background: transparent;\n}\n\n::-webkit-scrollbar-track {\n border-radius: 8px;\n background: transparent;\n}\n\n::-webkit-scrollbar-thumb {\n border-radius: 8px;\n background: rgba(113, 113, 113, 0.5);\n}\n\n:root.theme-dark .CodeMirror-scrollbar-filler {\n background: transparent;\n}\n/* BASICS */\n\n.CodeMirror {\n /* Set height, width, borders, and global font properties here */\n font-family: monospace;\n height: 300px;\n color: black;\n}\n\n/* PADDING */\n\n.CodeMirror-lines {\n padding: 4px 0; /* Vertical padding around content */\n}\n.CodeMirror pre {\n padding: 0 4px; /* Horizontal padding of content */\n}\n\n.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {\n background-color: white; /* The little square between H and V scrollbars */\n}\n\n/* GUTTER */\n\n.CodeMirror-gutters {\n border-right: 1px solid #ddd;\n background-color: #f7f7f7;\n white-space: nowrap;\n}\n.CodeMirror-linenumbers {}\n.CodeMirror-linenumber {\n padding: 0 3px 0 5px;\n min-width: 20px;\n text-align: right;\n color: #999;\n white-space: nowrap;\n}\n\n.CodeMirror-guttermarker { color: black; }\n.CodeMirror-guttermarker-subtle { color: #999; }\n\n/* CURSOR */\n\n.CodeMirror-cursor {\n border-left: 1px solid black;\n border-right: none;\n width: 0;\n}\n/* Shown when moving in bi-directional text */\n.CodeMirror div.CodeMirror-secondarycursor {\n border-left: 1px solid silver;\n}\n.cm-fat-cursor .CodeMirror-cursor {\n width: auto;\n border: 0 !important;\n background: #7e7;\n}\n.cm-fat-cursor div.CodeMirror-cursors {\n z-index: 1;\n}\n\n.cm-animate-fat-cursor {\n width: auto;\n border: 0;\n -webkit-animation: blink 1.06s steps(1) infinite;\n -moz-animation: blink 1.06s steps(1) infinite;\n animation: blink 1.06s steps(1) infinite;\n background-color: #7e7;\n}\n@-moz-keyframes blink {\n 0% {}\n 50% { background-color: transparent; }\n 100% {}\n}\n@-webkit-keyframes blink {\n 0% {}\n 50% { background-color: transparent; }\n 100% {}\n}\n@keyframes blink {\n 0% {}\n 50% { background-color: transparent; }\n 100% {}\n}\n\n/* Can style cursor different in overwrite (non-insert) mode */\n.CodeMirror-overwrite .CodeMirror-cursor {}\n\n.cm-tab { display: inline-block; text-decoration: inherit; }\n\n.CodeMirror-rulers {\n position: absolute;\n left: 0; right: 0; top: -50px; bottom: -20px;\n overflow: hidden;\n}\n.CodeMirror-ruler {\n border-left: 1px solid #ccc;\n top: 0; bottom: 0;\n position: absolute;\n}\n\n/* DEFAULT THEME */\n\n.cm-s-default .cm-header {color: blue;}\n.cm-s-default .cm-quote {color: #090;}\n.cm-negative {color: #d44;}\n.cm-positive {color: #292;}\n.cm-header, .cm-strong {font-weight: bold;}\n.cm-em {font-style: italic;}\n.cm-link {text-decoration: underline;}\n.cm-strikethrough {text-decoration: line-through;}\n\n.cm-s-default .cm-keyword {color: #708;}\n.cm-s-default .cm-atom {color: #219;}\n.cm-s-default .cm-number {color: #164;}\n.cm-s-default .cm-def {color: #00f;}\n.cm-s-default .cm-variable,\n.cm-s-default .cm-punctuation,\n.cm-s-default .cm-property,\n.cm-s-default .cm-operator {}\n.cm-s-default .cm-variable-2 {color: #05a;}\n.cm-s-default .cm-variable-3 {color: #085;}\n.cm-s-default .cm-comment {color: #a50;}\n.cm-s-default .cm-string {color: #a11;}\n.cm-s-default .cm-string-2 {color: #f50;}\n.cm-s-default .cm-meta {color: #555;}\n.cm-s-default .cm-qualifier {color: #555;}\n.cm-s-default .cm-builtin {color: #30a;}\n.cm-s-default .cm-bracket {color: #997;}\n.cm-s-default .cm-tag {color: #170;}\n.cm-s-default .cm-attribute {color: #00c;}\n.cm-s-default .cm-hr {color: #999;}\n.cm-s-default .cm-link {color: #00c;}\n\n.cm-s-default .cm-error {color: #f00;}\n.cm-invalidchar {color: #f00;}\n\n.CodeMirror-composing { border-bottom: 2px solid; }\n\n/* Default styles for common addons */\n\ndiv.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}\ndiv.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}\n.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }\n.CodeMirror-activeline-background {background: #e8f2ff;}\n\n/* STOP */\n\n/* The rest of this file contains styles related to the mechanics of\n the editor. You probably shouldn't touch them. */\n\n.CodeMirror {\n position: relative;\n overflow: hidden;\n background: white;\n}\n\n.CodeMirror-scroll {\n overflow: scroll !important; /* Things will break if this is overridden */\n /* 30px is the magic margin used to hide the element's real scrollbars */\n /* See overflow: hidden in .CodeMirror */\n margin-bottom: -30px; margin-right: -30px;\n padding-bottom: 30px;\n height: 100%;\n outline: none; /* Preven" "t dragging from highlighting the element */\n position: relative;\n}\n.CodeMirror-sizer {\n position: relative;\n border-right: 30px solid transparent;\n}\n\n/* The fake, visible scrollbars. Used to force redraw during scrolling\n before actual scrolling happens, thus preventing shaking and\n flickering artifacts. */\n.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {\n position: absolute;\n z-index: 6;\n display: none;\n}\n.CodeMirror-vscrollbar {\n right: 0; top: 0;\n overflow-x: hidden;\n overflow-y: scroll;\n}\n.CodeMirror-hscrollbar {\n bottom: 0; left: 0;\n overflow-y: hidden;\n overflow-x: scroll;\n}\n.CodeMirror-scrollbar-filler {\n right: 0; bottom: 0;\n}\n.CodeMirror-gutter-filler {\n left: 0; bottom: 0;\n}\n\n.CodeMirror-gutters {\n position: absolute; left: 0; top: 0;\n min-height: 100%;\n z-index: 3;\n}\n.CodeMirror-gutter {\n white-space: normal;\n height: 100%;\n display: inline-block;\n vertical-align: top;\n margin-bottom: -30px;\n}\n.CodeMirror-gutter-wrapper {\n position: absolute;\n z-index: 4;\n background: none !important;\n border: none !important;\n}\n.CodeMirror-gutter-background {\n position: absolute;\n top: 0; bottom: 0;\n z-index: 4;\n}\n.CodeMirror-gutter-elt {\n position: absolute;\n cursor: default;\n z-index: 4;\n}\n.CodeMirror-gutter-wrapper {\n -webkit-user-select: none;\n user-select: none;\n}\n\n.CodeMirror-lines {\n cursor: text;\n min-height: 1px; /* prevents collapsing before first draw */\n}\n.CodeMirror pre {\n /* Reset some styles that the rest of the page might have set */\n -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;\n border-width: 0;\n background: transparent;\n font-family: inherit;\n font-size: inherit;\n margin: 0;\n white-space: pre;\n word-wrap: normal;\n line-height: inherit;\n color: inherit;\n z-index: 2;\n position: relative;\n overflow: visible;\n -webkit-tap-highlight-color: transparent;\n -webkit-font-variant-ligatures: contextual;\n font-variant-ligatures: contextual;\n}\n.CodeMirror-wrap pre {\n word-wrap: break-word;\n white-space: pre-wrap;\n word-break: normal;\n}\n\n.CodeMirror-linebackground {\n position: absolute;\n left: 0; right: 0; top: 0; bottom: 0;\n z-index: 0;\n}\n\n.CodeMirror-linewidget {\n position: relative;\n z-index: 2;\n overflow: auto;\n}\n\n.CodeMirror-widget {}\n\n.CodeMirror-code {\n outline: none;\n}\n\n/* Force content-box sizing for the elements where we expect it */\n.CodeMirror-scroll,\n.CodeMirror-sizer,\n.CodeMirror-gutter,\n.CodeMirror-gutters,\n.CodeMirror-linenumber {\n -moz-box-sizing: content-box;\n box-sizing: content-box;\n}\n\n.CodeMirror-measure {\n position: absolute;\n width: 100%;\n height: 0;\n overflow: hidden;\n visibility: hidden;\n}\n\n.CodeMirror-cursor {\n position: absolute;\n pointer-events: none;\n}\n.CodeMirror-measure pre { position: static; }\n\ndiv.CodeMirror-cursors {\n visibility: hidden;\n position: relative;\n z-index: 3;\n}\ndiv.CodeMirror-dragcursors {\n visibility: visible;\n}\n\n.CodeMirror-focused div.CodeMirror-cursors {\n visibility: visible;\n}\n\n.CodeMirror-selected { background: #d9d9d9; }\n.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }\n.CodeMirror-crosshair { cursor: crosshair; }\n.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }\n.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }\n\n.cm-searching {\n background: #ffa;\n background: rgba(255, 255, 0, .4);\n}\n\n/* Used to force a border model for a node */\n.cm-force-border { padding-right: .1px; }\n\n@media print {\n /* Hide the cursor when printing */\n .CodeMirror div.CodeMirror-cursors {\n visibility: hidden;\n }\n}\n\n/* See issue #2901 */\n.cm-tab-wrap-hack:after { content: ''; }\n\n/* Help users use markselection to safely style text background */\nspan.CodeMirror-selectedtext { background: none; }\n/* This Source Code Form is subject to the terms of the Mozilla Public\n * License, v. 2.0. If a copy of the MPL was not distributed with this\n * file, You can obtain one at http://mozilla.org/MPL/2.0/. */\n\n:root {\n /* --breakpoint-background: url(\"chrome://devtools/skin/images/breakpoint.svg#light\"); */\n /* --breakpoint-hover-background: url(\"chrome://devtools/skin/images/breakpoint.svg#light-hover\"); */\n --breakpoint-active-color: rgba(44,187,15,.2);\n --breakpoint-active-color-hover: rgba(44,187,15,.5);\n /* --breakpoint-conditional-background: url(\"chrome://devtools/skin/images/breakpoint.svg#light-conditional\"); */\n}\n\n.theme-dark:root {\n /* --breakpoint-background: url(\"chrome://devtools/skin/images/breakpoint.svg#dark\"); */\n /* --breakpoint-hover-background: url(\"chrome://devtools/skin/images/breakpoint.svg#dark-hover\"); */\n --breakpoint-active-color: rgba(0,255,175,.4);\n --breakpoint-active-color-hover: rgba(0,255,175,.7);\n /* --breakpoint-conditional-background: url(\"chrome://devtools/skin/images/breakpoint.svg#dark-conditional\"); */\n}\n\n.CodeMirror .errors {\n width: 16px;\n}\n\n.CodeMirror .error {\n display: inline-block;\n margin-left: 5px;\n width: 12px;\n height: 12px;\n background-repeat: no-repeat;\n background-position: center;\n background-size: contain;\n /* background-image: url(\"chrome://devtools/skin/images/editor-error.png\"); */\n opacity: 0.75;\n}\n\n.CodeMirror .hit-counts {\n width: 6px;\n}\n\n.CodeMirror .hit-count {\n display: inline-block;\n height: 12px;\n border: solid rgba(0,0,0,0.2);\n border-width: 1px 1px 1px 0;\n border-radius: 0 3px 3px 0;\n padding: 0 3px;\n font-size: 10px;\n pointer-events: none;\n}\n\n.CodeMirror-linenumber:before {\n content: \" \";\n display: block;\n width: calc(100% - 3px);\n position: absolute;\n top: 1px;\n left: 0;\n height: 12px;\n z-index: -1;\n background-size: calc(100% - 2px) 12px;\n background-repeat: no-repeat;\n background-position: right center;\n padding-inline-end: 9px;\n}\n\n.breakpoint .CodeMirror-linenumber {\n color: var(--theme-body-background);\n}\n\n.breakpoint .CodeMirror-linenumber:before {\n background-image: var(--breakpoint-background) !important;\n}\n\n.conditional .CodeMirror-linenumber:before {\n background-image: var(--breakpoint-conditional-background) !important;\n}\n\n.debug-line .CodeMirror-linenumber {\n background-color: var(--breakpoint-active-color);\n}\n\n.theme-dark .debug-line .CodeMirror-linenumber {\n color: #c0c0c0;\n}\n\n.debug-line .CodeMirror-line {\n background-color: var(--breakpoint-active-color) !important;\n}\n\n/* Don't display the highlight color since the debug line\n is already highlighted */\n.debug-line .CodeMirror-activeline-background {\n display: none;\n}\n\n.CodeMirror {\n cursor: text;\n height: 100%;\n}\n\n.CodeMirror-gutters {\n cursor: default;\n}\n\n/* This is to avoid the fake horizontal scrollbar div of codemirror to go 0\nheight when floating scrollbars are active. Make sure that this value is equal\nto the maximum of `min-height` specific to the `scrollbar[orient=\"horizontal\"]`\nselector in floating-scrollbar-light.css across all platforms. */\n.CodeMirror-hscrollbar {\n min-height: 10px;\n}\n\n/* This is to avoid the fake vertical scrollbar div of codemirror to go 0\nwidth when floating scrollbars are active. Make sure that this value is equal\nto the maximum of `min-width` specific to the `scrollbar[orient=\"vertical\"]`\nselector in floating-scrollbar-light.css across all platforms. */\n.CodeMirror-vscrollbar {\n min-width: 10px;\n}\n\n.cm-trailingspace {\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUXCToH00Y1UgAAACFJREFUCNdjPMDBUc/AwNDAAAFMTAwMDA0OP34wQgX/AQBYgwYEx4f9lQAAAABJRU5ErkJggg==\");\n opacity: 0.75;\n background-position: left bottom;\n background-repeat: repeat-x;\n}\n\n.cm-highlight {\n position: relative;\n}\n\n.cm-highlight:before {\n position: absolute;\n border-top-style: solid;\n border-bottom-style: solid;\n border-top-color: var(--theme-comment-alt);\n border-bottom-color: var(--theme-comment-alt);\n border-top-width: 1px;\n border-bottom-width: 1px;\n top: -1px;\n bottom: 0;\n left: 0;\n right: 0;\n content: \"\";\n margin-bottom: -1px;\n}\n\n.cm-highlight-full:before {\n border: 1px solid var(--theme-comment-alt);\n}\n\n.cm-highlight-start:before {\n border-left-width: 1px;\n border-left-style: solid;\n border-left-color: var(--theme-comment-alt);\n margin: 0 0 -1px -1px;\n border-top-left-radius: 2px;\n border-bottom-left-radius: 2px;\n}\n\n.cm-highlight-end:before {\n border-right-width: 1px;\n border-right-style: solid;\n border-right-color: var(--theme-comment-alt);\n margin: 0 -1px -1px 0;\n border-top-right-radius: 2px;\n border-bottom-right-radius: 2px;\n}\n\n/* CodeMirror dialogs styling */\n\n.CodeMirror-dialog {\n padding: 4px 3px;\n}\n\n.CodeMirror-dialog,\n.CodeMirror-dialog input {\n font: message-box;\n}\n\n/* Fold addon */\n\n.CodeMirror-foldmarker {\n color: blue;\n text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;\n font-family: sans-serif;\n line-height: .3;\n cursor: pointer;\n}\n\n.CodeMirror-foldgutter {\n width: 16px; /* Same as breakpoints gutter above */\n}\n\n.CodeMirror-foldgutter-open,\n.CodeMirror-foldgutter-folded {\n color: #555;\n cursor: pointer;\n}\n\n.CodeMirror-foldgutter-open:after {\n font-size: 120%;\n content: \"\\25BE\";\n}\n\n.CodeMirror-foldgutter-folded:after {\n font-size: 120%;\n content: \"\\25B8\";\n}\n\n.CodeMirror-hints {\n position: absolute;\n z-index: 10;\n overflow: hidden;\n list-style: none;\n margin: 0;\n padding: 2px;\n border-radius: 3px;\n font-size: 90%;\n max-height:" " 20em;\n overflow-y: auto;\n}\n\n.CodeMirror-hint {\n margin: 0;\n padding: 0 4px;\n border-radius: 2px;\n max-width: 19em;\n overflow: hidden;\n white-space: pre;\n cursor: pointer;\n}\n\n.CodeMirror-Tern-completion {\n padding-inline-start: 22px;\n position: relative;\n line-height: 18px;\n}\n\n.CodeMirror-Tern-completion:before {\n position: absolute;\n left: 2px;\n bottom: 2px;\n border-radius: 50%;\n font-size: 12px;\n font-weight: bold;\n height: 15px;\n width: 15px;\n line-height: 16px;\n text-align: center;\n color: #ffffff;\n box-sizing: border-box;\n}\n\n.CodeMirror-Tern-completion-unknown:before {\n content: \"?\";\n}\n\n.CodeMirror-Tern-completion-object:before {\n content: \"O\";\n}\n\n.CodeMirror-Tern-completion-fn:before {\n content: \"F\";\n}\n\n.CodeMirror-Tern-completion-array:before {\n content: \"A\";\n}\n\n.CodeMirror-Tern-completion-number:before {\n content: \"N\";\n}\n\n.CodeMirror-Tern-completion-string:before {\n content: \"S\";\n}\n\n.CodeMirror-Tern-completion-bool:before {\n content: \"B\";\n}\n\n.CodeMirror-Tern-completion-guess {\n color: #999;\n}\n\n.CodeMirror-Tern-tooltip {\n border-radius: 3px;\n padding: 2px 5px;\n white-space: pre-wrap;\n max-width: 40em;\n position: absolute;\n z-index: 10;\n}\n\n.CodeMirror-Tern-hint-doc {\n max-width: 25em;\n}\n\n.CodeMirror-Tern-farg-current {\n text-decoration: underline;\n}\n\n.CodeMirror-Tern-fhint-guess {\n opacity: .7;\n}\n:root.theme-light,\n:root .theme-light {\n --search-overlays-semitransparent: rgba(221, 225, 228, 0.66);\n}\n\n:root.theme-dark,\n:root .theme-dark {\n --search-overlays-semitransparent: rgba(42, 46, 56, 0.66);\n}\n.debugger {\n display: flex;\n flex: 1;\n height: 100%;\n}\n\n.editor-pane {\n display: flex;\n position: relative;\n flex: 1;\n background-color: var(--theme-tab-toolbar-background);\n height: calc(100% - 1px);\n overflow: hidden;\n}\n\n.editor-container {\n width: 100%;\n}\n\n.subsettings:hover {\n cursor: pointer;\n}\n\n.search-container {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n z-index: 200;\n background-color: var(--search-overlays-semitransparent);\n}\n\n.search-container .close-button {\n width: 16px;\n margin-top: 25px;\n margin-right: 20px;\n}\nmenupopup {\n position: fixed;\n z-index: 10000;\n background: white;\n border: 1px solid #cccccc;\n padding: 5px 0;\n background: #f2f2f2;\n border-radius: 5px;\n color: #585858;\n box-shadow: 0 0 4px 0 rgba(190, 190, 190, 0.8);\n min-width: 130px;\n}\n\nmenuitem {\n display: block;\n padding: 0 20px;\n line-height: 20px;\n font-weight: 500;\n font-size: 13px;\n user-select: none;\n}\n\nmenuitem:hover {\n background: #3780fb;\n color: white;\n cursor: pointer;\n}\n\nmenuitem[disabled=true] {\n color: #cccccc;\n}\n\nmenuitem[disabled=true]:hover {\n background-color: transparent;\n cursor: default;\n}\n\nmenuseparator {\n border-bottom: 1px solid #cacdd3;\n width: 100%;\n height: 5px;\n display: block;\n margin-bottom: 5px;\n}\n\n#contextmenu-mask.show {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 999;\n}\n/* vim:set ts=2 sw=2 sts=2 et: */\n/* This Source Code Form is subject to the terms of the Mozilla Public\n * License, v. 2.0. If a copy of the MPL was not distributed with this\n * file, You can obtain one at http://mozilla.org/MPL/2.0/. */\n\n.split-box {\n display: flex;\n flex: 1;\n min-width: 0;\n height: 100%;\n width: 100%;\n}\n\n.split-box.vert {\n flex-direction: row;\n}\n\n.split-box.horz {\n flex-direction: column;\n}\n\n.split-box > .uncontrolled {\n display: flex;\n flex: 1;\n min-width: 0;\n overflow: auto;\n}\n\n.split-box > .controlled {\n display: flex;\n overflow: auto;\n}\n\n.split-box > .splitter {\n background-image: none;\n border: 0;\n border-style: solid;\n border-color: transparent;\n background-color: var(--theme-splitter-color);\n background-clip: content-box;\n position: relative;\n\n box-sizing: border-box;\n\n /* Positive z-index positions the splitter on top of its siblings and makes\n it clickable on both sides. */\n z-index: 1;\n}\n\n.split-box.vert > .splitter {\n min-width: calc(var(--devtools-splitter-inline-start-width) +\n var(--devtools-splitter-inline-end-width) + 1px);\n\n border-left-width: var(--devtools-splitter-inline-start-width);\n border-right-width: var(--devtools-splitter-inline-end-width);\n\n margin-left: calc(-1 * var(--devtools-splitter-inline-start-width) - 1px);\n margin-right: calc(-1 * var(--devtools-splitter-inline-end-width));\n\n cursor: ew-resize;\n}\n\n.split-box.horz > .splitter {\n min-height: calc(var(--devtools-splitter-top-width) +\n var(--devtools-splitter-bottom-width) + 1px);\n\n border-top-width: var(--devtools-splitter-top-width);\n border-bottom-width: var(--devtools-splitter-bottom-width);\n\n margin-top: calc(-1 * var(--devtools-splitter-top-width) - 1px);\n margin-bottom: calc(-1 * var(--devtools-splitter-bottom-width));\n\n cursor: ns-resize;\n}\n\n.split-box.disabled {\n pointer-events: none;\n}\n\n/**\n * Make sure splitter panels are not processing any mouse\n * events. This is good for performance during splitter\n * bar dragging.\n */\n.split-box.dragging > .controlled,\n.split-box.dragging > .uncontrolled {\n pointer-events: none;\n}\n/* vim:set ts=2 sw=2 sts=2 et: */\n/* This Source Code Form is subject to the terms of the Mozilla Public\n * License, v. 2.0. If a copy of the MPL was not distributed with this\n * file, You can obtain one at http://mozilla.org/MPL/2.0/. */\n\n.theme-dark,\n.theme-light {\n --number-color: var(--theme-highlight-green);\n --string-color: var(--theme-highlight-orange);\n --null-color: var(--theme-comment);\n --object-color: var(--theme-body-color);\n --caption-color: var(--theme-highlight-blue);\n --location-color: var(--theme-content-color1);\n --source-link-color: var(--theme-highlight-blue);\n --node-color: var(--theme-highlight-bluegrey);\n --reference-color: var(--theme-highlight-purple);\n}\n\n.theme-firebug {\n --number-color: #000088;\n --string-color: #FF0000;\n --null-color: #787878;\n --object-color: DarkGreen;\n --caption-color: #444444;\n --location-color: #555555;\n --source-link-color: blue;\n --node-color: rgb(0, 0, 136);\n --reference-color: rgb(102, 102, 255);\n}\n\n/******************************************************************************/\n\n.objectLink:hover {\n cursor: pointer;\n text-decoration: underline;\n}\n\n.inline {\n display: inline;\n white-space: normal;\n}\n\n.objectBox-object {\n font-weight: bold;\n color: var(--object-color);\n white-space: pre-wrap;\n}\n\n.objectBox-string,\n.objectBox-text,\n.objectLink-textNode,\n.objectBox-table {\n white-space: pre-wrap;\n}\n\n.objectBox-number,\n.objectLink-styleRule,\n.objectLink-element,\n.objectLink-textNode,\n.objectBox-array > .length {\n color: var(--number-color);\n}\n\n.objectBox-string {\n color: var(--string-color);\n}\n\n.objectLink-function,\n.objectBox-stackTrace,\n.objectLink-profile {\n color: var(--object-color);\n}\n\n.objectLink-Location {\n font-style: italic;\n color: var(--location-color);\n}\n\n.objectBox-null,\n.objectBox-undefined,\n.objectBox-hint,\n.logRowHint {\n font-style: italic;\n color: var(--null-color);\n}\n\n.objectLink-sourceLink {\n position: absolute;\n right: 4px;\n top: 2px;\n padding-left: 8px;\n font-weight: bold;\n color: var(--source-link-color);\n}\n\n/******************************************************************************/\n\n.objectLink-event,\n.objectLink-eventLog,\n.objectLink-regexp,\n.objectLink-object,\n.objectLink-Date {\n font-weight: bold;\n color: var(--object-color);\n white-space: pre-wrap;\n}\n\n/******************************************************************************/\n\n.objectLink-object .nodeName,\n.objectLink-NamedNodeMap .nodeName,\n.objectLink-NamedNodeMap .objectEqual,\n.objectLink-NamedNodeMap .arrayLeftBracket,\n.objectLink-NamedNodeMap .arrayRightBracket,\n.objectLink-Attr .attrEqual,\n.objectLink-Attr .attrTitle {\n color: var(--node-color);\n}\n\n.objectLink-object .nodeName {\n font-weight: normal;\n}\n\n/******************************************************************************/\n\n.objectLeftBrace,\n.objectRightBrace,\n.arrayLeftBracket,\n.arrayRightBracket {\n cursor: pointer;\n font-weight: bold;\n}\n\n.objectLeftBrace,\n.arrayLeftBracket {\n margin-right: 4px;\n}\n\n.objectRightBrace,\n.arrayRightBracket {\n margin-left: 4px;\n}\n\n/******************************************************************************/\n/* Cycle reference*/\n\n.objectLink-Reference {\n font-weight: bold;\n color: var(--reference-color);\n}\n\n.objectBox-array > .objectTitle {\n font-weight: bold;\n color: var(--object-color);\n}\n\n.caption {\n font-weight: bold;\n color: var(--caption-color);\n}\n\n/******************************************************************************/\n/* Themes */\n\n.theme-dark .objectBox-null,\n.theme-dark .objectBox-undefined,\n.theme-light .objectBox-null,\n.theme-light .objectBox-undefined {\n font-style: normal;\n}\n\n.theme-dark .objectBox-object,\n.theme-light .objectBox-object {\n font-weight: normal;\n white-space: pre-wrap;\n}\n\n.theme-dark .caption,\n.theme-light .caption {\n font-weight: normal;\n}\n\n.search-container {\n position: absolute;\n top: 30px;\n left: 0;\n width: calc(100% - 1px);\n height: calc(100% - 31px);\n display: flex;\n z-index: 200;\n background-color: var(--theme-body-background);\n}\n\n.searchinput-container {\n display: flex;\n border-bottom: 1px solid var(--theme-splitter-color);\n}\n\n.theme-dark .result-list li .subtitle {\n color: var(--theme-comment-alt);\n}\n\n.arrow,\n.folder,\n.domain,\n.file,\n.worker,\n.refresh,\n.add-button {\n fill: var(--theme-splitter-color);\n}\n\n.worker,\n.folder {\n position: relative;\n " "top: 2px;\n}\n\n.domain,\n.file,\n.worker,\n.refresh,\n.add-button {\n position: relative;\n top: 1px;\n}\n\n.domain svg,\n.folder svg,\n.worker svg,\n.refresh svg,\n.add-button svg {\n width: 15px;\n}\n\n.file svg {\n width: 13px;\n}\n\n.file svg,\n.domain svg,\n.folder svg,\n.refresh svg,\n.worker svg {\n margin-inline-end: 5px;\n}\n\n.arrow svg {\n fill: var(--theme-splitter-color);\n margin-top: 3px;\n transition: transform 0.25s ease;\n width: 10px;\n}\n\nhtml:not([dir=\"rtl\"]) .arrow svg {\n margin-right: 5px;\n transform: rotate(-90deg);\n}\n\nhtml[dir=\"rtl\"] .arrow svg {\n margin-left: 5px;\n transform: rotate(90deg);\n}\n\n/* TODO (Amit): html is just for specificity. keep it like this? */\nhtml .arrow.expanded svg {\n transform: rotate(0deg);\n}\n\n.arrow.hidden {\n visibility: hidden;\n}\n.close-btn path {\n fill: var(--theme-comment-alt);\n}\n\n.close-btn .close {\n cursor: pointer;\n width: 14px;\n height: 14px;\n padding: 2px;\n text-align: center;\n margin-top: 2px;\n line-height: 7px;\n transition: all 0.25s easeinout;\n}\n\n.close-btn .close svg {\n width: 8px;\n}\n\n.close-btn:hover {\n display: block;\n}\n\n.close-btn:hover .close {\n background: var(--theme-selection-background);\n border-radius: 2px;\n}\n\n.close-btn:hover .close path {\n fill: white;\n}\n\n.close-btn-big {\n padding: 11px;\n margin-right: 7px;\n width: 27px;\n height: 40px;\n}\n\n.close-btn-big .close {\n cursor: pointer;\n display: inline-block;\n padding: 2px;\n text-align: center;\n transition: all 0.25s easeinout;\n line-height: 100%;\n width: 16px;\n height: 16px;\n}\n\n.close-btn-big .close svg {\n width: 9px;\n height: 9px;\n}\n\n.close-btn-big .close:hover {\n border-radius: 2px;\n}\n\n.search-field {\n width: calc(100% - 1px);\n height: 27px;\n background-color: var(--theme-toolbar-background);\n border-bottom: 1px solid var(--theme-splitter-color);\n padding-right: 10px;\n display: flex;\n flex-shrink: 0;\n}\n\n.search-field.big {\n height: 40px;\n font-size: 14px;\n}\n\n.search-field.big input {\n font-size: 14px;\n}\n\n.search-field i {\n display: block;\n padding: 0;\n width: 16px;\n}\n\n.search-field i svg {\n width: 16px;\n}\n\n.search-field.big input {\n line-height: 40px;\n}\n\n.search-field input {\n border: none;\n line-height: 30px;\n background-color: var(--theme-toolbar-background);\n color: var(--theme-body-color-inactive);\n width: calc(100% - 38px);\n flex: 1;\n}\n\n.theme-dark .search-field input {\n color: var(--theme-body-color-inactive);\n}\n\n.search-field i.magnifying-glass,\n.search-field i.sad-face {\n padding: 6px;\n width: 24px;\n}\n\n.search-field.big i.magnifying-glass,\n.search-field.big i.sad-face {\n padding: 14px;\n width: 40px;\n}\n\n.search-field .magnifying-glass path,\n.search-field .magnifying-glass ellipse {\n stroke: var(--theme-splitter-color);\n}\n\n.search-field ::-webkit-input-placeholder {\n color: var(--theme-body-color-inactive);\n}\n\n.search-field input::placeholder {\n color: var(--theme-body-color-inactive);\n}\n\n.search-field input:focus {\n outline-width: 0;\n}\n\n.search-field input.empty {\n color: var(--theme-highlight-orange);\n}\n\n.search-field.big .summary {\n line-height: 40px;\n}\n\n.search-field .summary {\n line-height: 27px;\n padding-right: 10px;\n color: var(--theme-body-color-inactive);\n}\n\n.result-list {\n list-style: none;\n width: 100%;\n background-color: var(--theme-toolbar-background);\n margin: 0px;\n padding: 0px;\n overflow: auto;\n}\n\n.result-list.big {\n max-height: calc(100% - 32px);\n}\n\n.result-list * {\n user-select: none;\n}\n\n.result-list li {\n color: var(--theme-body-color);\n background-color: var(--theme-tab-toolbar-background);\n padding: 4px 13px;\n display: flex;\n justify-content: space-between;\n}\n\n.result-list li:first-child {\n border-top: none;\n}\n\n.result-list.big li {\n padding: 10px;\n flex-direction: column;\n border-bottom: 1px solid var(--theme-splitter-color);\n}\n\n.result-list li:hover {\n background: var(--theme-tab-toolbar-background);\n cursor: pointer;\n}\n\n.result-list li.selected {\n border: 1px solid var(--theme-selection-background);\n}\n\n.result-list.big li.selected {\n padding-left: 9px;\n padding-top: 9px;\n}\n\n.search-bar .result-list li.selected {\n background-color: var(--theme-selection-background);\n color: white;\n}\n\n.result-list li .title {\n line-height: 1.5em;\n word-break: break-all;\n}\n\n.result-list li.selected .title {\n color: white;\n}\n\n.result-list.big li.selected .title {\n color: var(--theme-body-color);\n}\n\n.result-list.big li .subtitle {\n word-break: break-all;\n color: var(--theme-body-color-inactive);\n}\n\n.result-list.big li .subtitle {\n line-height: 1.5em;\n}\n\n.search-bar .result-list li.selected .subtitle {\n color: white;\n}\n\n.search-bar .result-list {\n border-bottom: 1px solid var(--theme-splitter-color);\n}\n\n.theme-dark .result-list {\n background-color: var(--theme-body-background);\n}\n\n.autocomplete {\n flex: 1;\n width: 100%;\n}\n\n.autocomplete .no-result-msg {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n color: var(--theme-graphs-full-red);\n font-size: 24px;\n padding: 4px;\n word-break: break-all;\n}\n\n.autocomplete .no-result-msg .sad-face {\n width: 24px;\n margin: 0 4px;\n line-height: 0;\n flex-shrink: 0;\n}\n\n.autocomplete .no-result-msg .sad-face svg {\n fill: var(--theme-graphs-full-red);\n}\n.tree {\n -webkit-user-select: none;\n -ms-user-select: none;\n -o-user-select: none;\n user-select: none;\n\n white-space: nowrap;\n overflow: auto;\n min-width: 100%;\n}\n\n.tree button {\n display: block;\n}\n\n.tree .node {\n padding: 2px 5px;\n position: relative;\n cursor: pointer;\n}\n\n.tree .node.focused {\n color: white;\n background-color: var(--theme-selection-background);\n}\n\nhtml:not([dir=\"rtl\"]) .tree .node > div {\n margin-left: 10px;\n}\n\nhtml[dir=\"rtl\"] .tree .node > div {\n margin-right: 10px;\n}\n\n.tree .node.focused svg {\n fill: white;\n}\n\n.tree-node button {\n position: fixed;\n}\n.sources-panel {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.sources-panel * {\n user-select: none;\n}\n\n.sources-header {\n height: 30px;\n border-bottom: 1px solid var(--theme-splitter-color);\n padding-top: 0px;\n padding-bottom: 0px;\n line-height: 30px;\n font-size: 1.2em;\n display: flex;\n align-items: baseline;\n user-select: none;\n justify-content: flex-end;\n}\n\n.theme-dark .sources-header {\n background-color: var(--theme-tab-toolbar-background);\n}\n\n.sources-header {\n padding-inline-start: 10px;\n}\n\n.sources-header-info {\n font-size: 12px;\n color: var(--theme-comment-alt);\n font-weight: lighter;\n white-space: nowrap;\n padding-inline-end: 10px;\n cursor: pointer;\n}\n\n.sources-list {\n flex: 1;\n display: flex;\n overflow: hidden;\n}\n\n.theme-dark .sources-list .tree .node:not(.focused) svg {\n fill: var(--theme-comment);\n}\n\n.theme-dark .source-list .tree .node.focused {\n background-color: var(--theme-tab-toolbar-background);\n}\n.toggle-button-start,\n.toggle-button-end {\n transform: translate(0, 2px);\n transition: transform 0.25s ease-in-out;\n cursor: pointer;\n padding: 4px 2px;\n}\n\n.toggle-button-start svg,\n.toggle-button-end svg {\n width: 16px;\n fill: var(--theme-comment);\n}\n\n.theme-dark .toggle-button-start svg,\n.theme-dark .toggle-button-end svg {\n fill: var(--theme-comment-alt);\n}\n\n.toggle-button-end {\n margin-left: auto;\n margin-right: 5px;\n}\n\n.toggle-button-start {\n margin-left: 5px;\n}\n\nhtml:not([dir=\"rtl\"]) .toggle-button-end svg,\nhtml[dir=\"rtl\"] .toggle-button-start svg {\n transform: rotate(180deg);\n}\n\nhtml .toggle-button-end.vertical svg {\n transform: rotate(-90deg);\n}\n\n.toggle-button-end.vertical {\n margin-bottom: 2px;\n}\n\n.toggle-button-start.collapsed,\n.toggle-button-end.collapsed {\n transform: rotate(180deg);\n}\n\n.source-footer {\n background: var(--theme-toolbar-background);\n border-top: 1px solid var(--theme-splitter-color);\n position: absolute;\n display: flex;\n bottom: 0;\n left: 0;\n right: 1px;\n opacity: 1;\n z-index: 100;\n user-select: none;\n height: 27px;\n box-sizing: border-box;\n}\n\n.source-footer .commands {\n display: flex;\n}\n\n.source-footer .commands * {\n user-select: none;\n}\n\n.source-footer > .commands > .action {\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: opacity 200ms;\n border: none;\n background: transparent;\n padding: 8px 0.7em;\n}\n\n.source-footer > .commands > .action i {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n:root.theme-dark .source-footer > .commands > .action {\n fill: var(--theme-body-color);\n}\n\n:root.theme-dark .source-footer > .commands > .action:hover {\n fill: var(--theme-selection-color);\n}\n\n.source-footer > .commands > .action svg {\n height: 16px;\n width: 16px;\n}\n\n.source-footer .commands .coverage {\n color: var(--theme-body-color);\n}\n\n.coverage-on .source-footer .commands .coverage {\n color: var(--theme-highlight-blue);\n border: 1px solid var(--theme-body-color-inactive);\n border-radius: 2px;\n}\n\n.search-bar {\n display: flex;\n flex-direction: column;\n max-height: 50%;\n}\n\n.search-bar .search-field {\n padding-left: 7px;\n}\n\n.search-bar .close-btn {\n padding: 6px;\n}\n\n.search-bottom-bar * {\n user-select: none;\n}\n\n.search-bottom-bar {\n display: flex;\n flex-shrink: 0;\n justify-content: space-between;\n width: calc(100% - 1px);\n height: 27px;\n background-color: var(--theme-toolbar-background);\n border-bottom: 1px solid var(--theme-splitter-color);\n padding: 0 13px;\n}\n\n.search-bottom-bar button:focus {\n outline: no" "ne;\n}\n\n.search-bottom-bar .search-modifiers {\n display: flex;\n align-items: center;\n}\n\n.search-bottom-bar .search-modifiers button {\n padding: 0 3px;\n margin: 0 3px;\n border: none;\n background: none;\n width: 20px;\n height: 20px;\n border-radius: 3px;\n}\n\n.search-bottom-bar .search-modifiers button i {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n width: 16px;\n}\n\n.search-bottom-bar .search-modifiers button svg {\n fill: var(--theme-comment-alt);\n height: 16px;\n width: 16px;\n}\n\n.search-bottom-bar .search-modifiers button svg:hover {\n cursor: pointer;\n}\n\n.search-bottom-bar .search-modifiers button:active {\n outline: none;\n}\n\n.search-bottom-bar .search-modifiers button.active svg {\n fill: var(--theme-selection-background);\n}\n\n.theme-dark .search-bottom-bar .search-modifiers button.active svg {\n fill: white;\n}\n\n.search-bottom-bar .search-modifiers button.disabled svg {\n fill: var(--theme-comment-alt);\n}\n\n.search-bottom-bar .search-type-toggles {\n display: flex;\n align-items: center;\n}\n\n.search-bottom-bar .search-type-toggles .search-toggle-title {\n color: var(--theme-body-color-inactive);\n font-size: 11px;\n font-weight: normal;\n margin: 0;\n}\n\n.search-bottom-bar .search-type-toggles .search-type-btn {\n margin: 0 6px;\n border: none;\n background: transparent;\n color: var(--theme-comment-alt);\n}\n\n.search-bottom-bar .search-type-toggles .search-type-btn:hover {\n cursor: pointer;\n}\n\n.search-bottom-bar .search-type-toggles .search-type-btn:active {\n outline: none;\n}\n\n.search-bottom-bar .search-type-toggles .search-type-btn.active {\n color: var(--theme-selection-background);\n}\n\n.theme-dark .search-bottom-bar .search-type-toggles .search-type-btn.active {\n color: white;\n}\n\n.search-bar .result-list {\n max-height: 230px;\n}\n.popover {\n position: fixed;\n z-index: 4;\n}\n\n.popover-gap {\n height: 10px;\n padding-top: 10px;\n}\n\n.popover::before,\n.popover::after {\n content: '';\n height: 0;\n width: 0;\n position: absolute;\n border: 10px solid transparent;\n left: calc(20% - 10px); /* corresponds to calculation in Popover.js */\n}\n\n.popover::before {\n border-bottom-color: var(--theme-comment);\n top: -10px;\n}\n\n.popover::after {\n border-bottom-color: var(--theme-body-background);\n top: -8px;\n}\n.preview {\n background: var(--theme-body-background);\n min-width: 200px;\n min-height: 80px;\n border: 1px solid var(--theme-comment);\n padding: 10px;\n height: auto;\n min-height: inherit;\n max-height: 130px;\n overflow: auto;\n max-width: 400px;\n}\n\n.preview .header {\n width: 100%;\n line-height: 20px;\n border-bottom: 1px solid #cccccc;\n display: flex;\n flex-direction: column;\n}\n\n.preview .header .link {\n align-self: flex-end;\n color: var(--theme-highlight-blue);\n text-decoration: underline;\n}\n.preview .header .link:hover {\n cursor: pointer;\n}\n\n.selected-token {\n background-color: var(--theme-search-overlays-semitransparent);\n color: var(--theme-selection-color);\n}\n\n.selected-token:hover {\n cursor: pointer;\n}\n\n.preview .function-signature {\n padding-top: 10px;\n}\n\n.function-signature {\n line-height: 20px;\n align-self: center;\n}\n\n.function-signature .function-name {\n color: var(--theme-highlight-blue);\n}\n\n.function-signature .param {\n color: var(--string-color);\n}\n\n.function-signature .paren {\n color: var(--object-color);\n}\n\n.function-signature .comma {\n color: var(--object-color);\n}\n\n.theme-dark .preview {\n border-color: var(--theme-body-color);\n}\n\n.theme-dark .preview .arrow svg {\n fill: var(--theme-comment);\n}\n.conditional-breakpoint-panel {\n cursor: initial;\n margin: 1em 0;\n position: relative;\n display: flex;\n align-items: center;\n background: var(--theme-toolbar-background);\n border-top: 1px solid var(--theme-splitter-color);\n border-bottom: 1px solid var(--theme-splitter-color);\n}\n\n.conditional-breakpoint-panel .prompt {\n font-size: 1.8em;\n color: var(--theme-comment-alt);\n padding-left: 3px;\n}\n\n.conditional-breakpoint-panel input {\n margin: 5px 10px;\n width: calc(100% - 4em);\n border: none;\n background: var(--theme-toolbar-background);\n font-size: 14px;\n color: var(--theme-comment);\n line-height: 30px;\n}\n\n.conditional-breakpoint-panel input:focus {\n outline-width: 0;\n}\n/* vim:set ts=2 sw=2 sts=2 et: */\n\n/* This Source Code Form is subject to the terms of the Mozilla Public\n * License, v. 2.0. If a copy of the MPL was not distributed with this\n * file, You can obtain one at http://mozilla.org/MPL/2.0/. */\n\n/**\n * There's a known codemirror flex issue with chrome that this addresses.\n * BUG https://github.com/devtools-html/debugger.html/issues/63\n */\n.editor-wrapper {\n position: absolute;\n height: calc(100% - 31px);\n width: 100%;\n top: 30px;\n left: 0px;\n}\n\nhtml[dir=\"rtl\"] .editor-mount {\n direction: ltr;\n}\n\n.editor-wrapper .breakpoints {\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.function-search {\n max-height: 300px;\n overflow: hidden;\n}\n\n.function-search .results {\n height: auto;\n}\n\n.editor.hit-marker {\n height: 14px;\n}\n\n.coverage-on .CodeMirror-code :not(.hit-marker) .CodeMirror-line,\n.coverage-on .CodeMirror-code :not(.hit-marker) .CodeMirror-gutter-wrapper {\n opacity: 0.5;\n}\n\n.editor.new-breakpoint svg {\n fill: var(--theme-selection-background);\n width: 60px;\n height: 14px;\n position: absolute;\n top: 0px;\n right: -4px;\n}\n\n.new-breakpoint.has-condition svg {\n fill: var(--theme-graphs-yellow);\n}\n\n.editor.new-breakpoint.breakpoint-disabled svg {\n opacity: 0.3;\n}\n\n.CodeMirror {\n width: 100%;\n height: 100%;\n}\n\n.editor-wrapper .editor-mount {\n width: 100%;\n height: calc(100% - 32px);\n background-color: var(--theme-body-background);\n}\n\n.search-bar ~ .editor-mount {\n height: calc(100% - 72px);\n}\n\n.CodeMirror-linenumber {\n font-size: 11px;\n line-height: 14px;\n}\n\n/* set the linenumber white when there is a breakpoint */\n.new-breakpoint .CodeMirror-gutter-wrapper .CodeMirror-linenumber {\n color: white;\n}\n\n/* move the breakpoint below the linenumber */\n.new-breakpoint .CodeMirror-gutter-elt:last-child {\n z-index: 0;\n}\n\n.editor-wrapper .CodeMirror-line {\n font-size: 11px;\n line-height: 14px;\n}\n\n.theme-dark .editor-wrapper .CodeMirror-line .cm-comment {\n color: var(--theme-content-color3);\n}\n\n.debug-line .CodeMirror-line {\n background-color: var(--breakpoint-active-color) !important;\n}\n\n/* Don't display the highlight color since the debug line\n is already highlighted */\n.debug-line .CodeMirror-activeline-background {\n display: none;\n}\n\n.highlight-line .CodeMirror-line {\n animation: fade-highlight-out 1.5s normal forwards;\n}\n\n@keyframes fade-highlight-out {\n 0% { background-color: var(--theme-highlight-gray); }\n 100% { background-color: transparent; }\n}\n\n.welcomebox {\n width: calc(100% - 1px);\n\n /* Offsetting it by 30px for the sources-header area */\n height: calc(100% - 30px);\n position: absolute;\n top: 30px;\n left: 0;\n padding: 50px 0;\n text-align: center;\n font-size: 1.25em;\n color: var(--theme-comment-alt);\n background-color: var(--theme-tab-toolbar-background);\n font-weight: lighter;\n z-index: 100;\n user-select: none;\n}\n.input-expression {\n width: 100%;\n margin: 0px;\n border: 1px;\n cursor: pointer;\n background-color: var(--theme-body-background);\n font-size: 12px;\n padding: 0px 20px;\n color: var(--theme-highlight-blue);\n}\n\n.input-expression::-webkit-input-placeholder {\n text-align: center;\n font-style: italic;\n color: var(--theme-comment-alt);\n}\n\n.input-expression::placeholder {\n text-align: center;\n font-style: italic;\n color: var(--theme-comment-alt);\n opacity: 1;\n}\n\n.input-expression:focus {\n outline: none;\n cursor: text;\n}\n\n.expression-input-container {\n padding: 0.5em;\n display: flex;\n}\n\n.expression-container {\n border: 1px;\n padding: 8px 5px 0px 0px;\n width: 100%;\n color: var(--theme-body-color);\n background-color: var(--theme-body-background);\n display: flex;\n position: relative;\n}\n\n.expression-container > .tree {\n width: 100%;\n overflow: hidden;\n}\n\n:root.theme-light .expression-container:hover {\n background-color: var(--theme-tab-toolbar-background);\n}\n\n:root.theme-dark .expression-container:hover {\n background-color: var(--search-overlays-semitransparent);\n}\n\n.expression-container .close-btn {\n position: absolute;\n inset-inline-end: 6px;\n top: 6px;\n}\n\n.expression-container .close {\n display: none;\n}\n\n.expression-container:hover .close {\n display: block;\n}\n\n.expression-input {\n cursor: pointer;\n max-width: 50%;\n}\n\n.expression-separator {\n padding: 0px 5px;\n}\n\n.expression-value {\n overflow-x: scroll;\n color: var(--theme-content-color2);\n max-width: 50% !important;\n}\n\n.expression-error {\n color: var(--theme-highlight-red);\n}\n\n.why-paused {\n background-color: var(--breakpoint-active-color);\n border: 1.7px solid var(--breakpoint-active-color);\n color: var(--theme-highlight-blue);\n padding: 10px 10px 10px 20px;\n white-space: normal;\n opacity: 0.9;\n font-size: 12px;\n font-weight: bold;\n flex: 0 1 auto;\n}\n\n.theme-dark .secondary-panes .why-paused {\n color: white;\n}\n.breakpoints-list * {\n user-select: none;\n}\n\n.breakpoints-list .breakpoint {\n font-size: 12px;\n color: var(--theme-content-color1);\n padding: 0.5em 1px;\n line-height: 1em;\n position: relative;\n transition: all 0.25s ease;\n}\n\nhtml[dir=\"rtl\"] .breakpoints-list .breakpoint {\n border-right: 4px solid transparent;\n}\n\nhtml:not([dir=\"rtl\"]) .breakpoints-list .breakpoint {\n border-left: 4px solid transparent;\n}\n\n.breakpoints-list .breakpoint:last-of-type {\n padding-bottom: 0.45em;" "\n}\n\nhtml:not([dir=\"rtl\"]) .breakpoints-list .breakpoint.is-conditional {\n border-left-color: var(--theme-graphs-yellow);\n}\n\nhtml[dir=\"rtl\"] .breakpoints-list .breakpoint.is-conditional {\n border-right-color: var(--theme-graphs-yellow);\n}\n\nhtml .breakpoints-list .breakpoint.paused {\n background-color: var(--theme-toolbar-background-alt);\n border-color: var(--breakpoint-active-color);\n}\n\n.breakpoints-list .breakpoint.disabled .breakpoint-label {\n color: var(--theme-content-color3);\n transition: color 0.5s linear;\n}\n\n.breakpoints-list .breakpoint:hover {\n cursor: pointer;\n background-color: var(--search-overlays-semitransparent);\n}\n\n.breakpoints-list .breakpoint.paused:hover {\n border-color: var(--breakpoint-active-color-hover);\n}\n\n.breakpoints-list .breakpoint-checkbox {\n margin-inline-start: 0;\n}\n\n.breakpoints-list .breakpoint-label {\n display: inline-block;\n padding-inline-start: 2px;\n padding-bottom: 4px;\n}\n\n.breakpoints-list .pause-indicator {\n flex: 0 1 content;\n order: 3;\n}\n\n:root.theme-light .breakpoint-snippet,\n:root.theme-firebug .breakpoint-snippet {\n color: var(--theme-comment);\n}\n\n:root.theme-dark .breakpoint-snippet {\n color: var(--theme-body-color);\n opacity: 0.6;\n}\n\n.breakpoint-snippet {\n overflow: hidden;\n text-overflow: ellipsis;\n padding-inline-start: 18px;\n padding-inline-end: 18px;\n}\n\n.breakpoint .close-btn {\n position: absolute;\n inset-inline-end: 6px;\n top: 12px;\n}\n\n.breakpoint .close {\n display: none;\n}\n\n.breakpoint:hover .close {\n display: block;\n}\n\n.object-node.default-property {\n opacity: 0.6;\n}\n\n.object-label {\n color: var(--theme-highlight-blue);\n}\n\n.objectBox-object,\n.objectBox-string,\n.objectBox-text,\n.objectBox-table,\n.objectLink-textNode,\n.objectLink-event,\n.objectLink-eventLog,\n.objectLink-regexp,\n.objectLink-object,\n.objectLink-Date,\n.theme-dark .objectBox-object,\n.theme-light .objectBox-object {\n white-space: nowrap;\n}\n\n.scopes-list .tree-node {\n overflow: hidden;\n}\n.frames ul {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.frames ul li {\n cursor: pointer;\n padding: 7px 10px 7px 21px;\n overflow: hidden;\n display: flex;\n justify-content: space-between;\n}\n\n/* Style the focused call frame like so:\n.frames ul li:focus {\n border: 3px solid red;\n}\n*/\n\n.frames ul li * {\n user-select: none;\n}\n\n.frames ul li:nth-of-type(2n) {\n background-color: var(--theme-tab-toolbar-background);\n}\n\n.frames .location {\n font-weight: lighter;\n}\n\n:root.theme-light .frames .location,\n:root.theme-firebug .frames .location {\n color: var(--theme-comment);\n}\n\n:root.theme-dark .frames .location {\n color: var(--theme-body-color);\n opacity: 0.6;\n}\n\n.frames .title {\n text-overflow: ellipsis;\n overflow: hidden;\n margin-right: 1em;\n}\n\n.frames ul li:hover,\n.frames ul li:focus {\n background-color: var(--theme-toolbar-background-alt);\n outline: none;\n}\n\n.frames ul li.selected {\n background-color: var(--theme-selection-background);\n color: white;\n}\n\n:root.theme-light .frames ul li.selected .location,\n:root.theme-firebug .frames ul li.selected .location,\n:root.theme-dark .frames ul li.selected .location {\n color: white;\n}\n\n:root.theme-dark .frames ul li:hover .location,\n:root.theme-dark .frames ul li.selected .location {\n opacity: 1;\n}\n\n.show-more {\n cursor: pointer;\n text-align: center;\n padding: 8px 0px;\n border-top: 1px solid var(--theme-splitter-color);\n background-color: var(--theme-tab-toolbar-background);\n}\n\n.show-more:hover {\n background-color: var(--search-overlays-semitransparent);\n}\n.event-listeners {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.event-listeners .listener {\n cursor: pointer;\n padding: 7px 10px 7px 21px;\n clear: both;\n overflow: hidden;\n}\n\n.event-listeners .listener * {\n user-select: none;\n}\n\n.event-listeners .listener:nth-of-type(2n) {\n background-color: var(--theme-tab-toolbar-background);\n}\n\n.event-listeners .listener .type {\n color: var(--theme-highlight-bluegrey);\n padding-right: 5px;\n}\n\n.event-listeners .listener .selector {\n color: var(--theme-content-color2);\n}\n\n.event-listeners .listener-checkbox {\n margin-left: 0;\n}\n\n.event-listeners .listener .close-btn {\n float: right;\n}\n\n.event-listeners .listener .close {\n display: none;\n}\n\n.event-listeners .listener:hover .close {\n display: block;\n}\n.accordion {\n background-color: var(--theme-body-background);\n width: 100%;\n}\n\n.accordion ._header {\n background-color: var(--theme-toolbar-background);\n border-bottom: 1px solid var(--theme-splitter-color);\n cursor: pointer;\n font-size: 12px;\n padding: 5px;\n transition: all 0.25s ease;\n width: 100%;\n\n -webkit-user-select: none;\n -ms-user-select: none;\n -o-user-select: none;\n user-select: none;\n}\n\n.accordion ._header {\n display: flex;\n}\n\n.accordion ._header:hover {\n background-color: var(--search-overlays-semitransparent);\n}\n\n.accordion ._header button svg,\n.accordion ._header:hover button svg {\n fill: currentColor;\n height: 16px;\n}\n\n.accordion ._content {\n border-bottom: 1px solid var(--theme-splitter-color);\n font-size: 12px;\n}\n\n.accordion ._header .header-buttons {\n display: flex;\n margin-left: auto;\n padding-right: 5px;\n}\n\n.accordion .header-buttons .add-button {\n font-size: 180%;\n text-align: center;\n line-height: 16px;\n}\n\n.accordion .header-buttons button {\n color: var(--theme-body-color);\n border: none;\n background: none;\n outline: 0;\n padding: 0;\n width: 16px;\n height: 16px;\n}\n\n.accordion .header-buttons button::-moz-focus-inner {\n border: none;\n}\n.command-bar {\n flex: 0 0 30px;\n border-bottom: 1px solid var(--theme-splitter-color);\n display: flex;\n height: 30px;\n overflow: hidden;\n position: sticky;\n top: 0;\n z-index: 1;\n background-color: var(--theme-body-background);\n}\n\n.theme-dark .command-bar {\n background-color: var(--theme-tab-toolbar-background);\n}\n\n.command-bar > button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: transparent;\n border: none;\n cursor: pointer;\n display: inline-block;\n text-align: center;\n transition: all 0.25s ease;\n padding: 8px 5px;\n position: relative;\n fill: currentColor;\n}\n\n:root.theme-dark .command-bar > button {\n color: var(--theme-body-color);\n}\n\n.command-bar > button {\n margin-inline-end: 0.7em;\n}\n\nhtml .command-bar > button:disabled {\n opacity: 0.3;\n cursor: default;\n}\n\n.command-bar > button > i {\n height: 100%;\n width: 100%;\n display: block;\n}\n\n.command-bar > button > i > svg {\n width: 16px;\n height: 16px;\n}\n\n.command-bar button.pause-exceptions {\n margin-inline-start: 0.5em;\n}\n\n.command-bar .subSettings {\n float: right;\n}\n\n.command-bar button.pause-exceptions.uncaught {\n color: var(--theme-highlight-purple);\n}\n\n.command-bar button.pause-exceptions.all {\n color: var(--theme-highlight-blue);\n}\n.secondary-panes {\n display: flex;\n flex-direction: column;\n flex: 1;\n white-space: nowrap;\n}\n\n.secondary-panes * {\n user-select: none;\n}\n\n.secondary-panes .accordion {\n overflow-y: auto;\n overflow-x: hidden;\n flex: 1 0 auto;\n}\n\n.pane {\n color: var(--theme-body-color);\n}\n\n.pane .pane-info {\n font-style: italic;\n text-align: center;\n padding: 0.5em;\n user-select: none;\n}\n\n.theme-dark .secondary-panes .accordion .arrow svg {\n fill: var(--theme-comment);\n}\n.welcomebox {\n width: calc(100% - 1px);\n\n /* Offsetting it by 30px for the sources-header area */\n height: calc(100% - 30px);\n position: absolute;\n top: 30px;\n left: 0;\n padding: 50px 0 0 0;\n text-align: center;\n font-size: 1.25em;\n color: var(--theme-comment-alt);\n background-color: var(--theme-tab-toolbar-background);\n font-weight: lighter;\n z-index: 100;\n}\n\nhtml .welcomebox .toggle-button-end {\n bottom: 11px;\n position: absolute;\n top: auto;\n}\n.dropdown {\n --width: 150px;\n background: var(--theme-body-background);\n border: 1px solid var(--theme-splitter-color);\n box-shadow: 0 4px 4px 0 var(--search-overlays-semitransparent);\n max-height: 300px;\n position: absolute;\n right: 8px;\n top: 35px;\n width: var(--width);\n z-index: 1000;\n}\n\nhtml[dir=\"rtl\"] .dropdown {\n right: calc((var(--width) - 11px) * (-1));\n}\n\n.dropdown-block {\n padding: 0px 2px;\n position: relative;\n align-self: center;\n}\n\n.dropdown-button {\n cursor: pointer;\n color: var(--theme-comment);\n background: none;\n border: none;\n padding: 0;\n font-weight: 100;\n margin-top: 6px;\n font-size: 14px;\n}\n\n.dropdown li {\n transition: all 0.25s ease;\n padding: 2px 10px 10px 5px;\n overflow: hidden;\n height: 30px;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.dropdown li:hover {\n background-color: var(--search-overlays-semitransparent);\n cursor: pointer;\n}\n\n.dropdown ul {\n list-style: none;\n line-height: 2em;\n font-size: 1em;\n margin: 0;\n padding: 0;\n}\n\n.dropdown-mask {\n position: fixed;\n width: 100%;\n height: 100%;\n background: transparent;\n z-index: 999;\n left: 0;\n top: 0;\n}\n.source-header {\n border-bottom: 1px solid var(--theme-splitter-color);\n width: 100%;\n height: 30px;\n display: flex;\n align-items: flex-end;\n}\n\n.source-header * {\n user-select: none;\n}\n\n.source-header .new-tab-btn {\n padding: 0px 4px;\n margin-top: 8px;\n cursor: pointer;\n fill: var(--theme-comment);\n transition: 0.1s ease;\n align-self: center;\n}\n\n.source-header .new-tab-btn svg {\n width: 12px;\n}\n\n.source-tabs {\n max-width: calc(100% - 80px);\n align-self: flex-start;\n}\n\n.source-tab {\n border: 1px solid transparent;\n border-top-left-radius: 2px;\n border-top-right-radius: 2px;\n height: 30px;\n display: inline-fle" "x;\n align-items: center;\n position: relative;\n transition: all 0.25s ease;\n min-width: 40px;\n overflow: hidden;\n padding: 6px;\n margin-inline-start: 3px;\n margin-top: 2px;\n}\n\n.source-tab:hover {\n background-color: var(--theme-toolbar-background-alt);\n border-color: var(--theme-splitter-color);\n cursor: pointer;\n}\n\n.source-tab.active {\n color: var(--theme-body-color);\n background-color: var(--theme-body-background);\n border-color: var(--theme-splitter-color);\n border-bottom-color: transparent;\n}\n\n.source-tab.active path,\n.source-tab:hover path {\n fill: var(--theme-body-color);\n}\n\n.source-tab .prettyPrint {\n line-height: 0;\n}\n\n.source-tab .prettyPrint svg {\n height: 12px;\n width: 12px;\n}\n\n.source-tab .prettyPrint path {\n fill: var(--theme-textbox-box-shadow);\n}\n\n.source-tab .filename {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n.source-tab.pretty .filename {\n padding-inline-start: 8px;\n}\n\n.source-tab .close-btn {\n visibility: hidden;\n line-height: 0;\n margin-inline-start: 6px;\n}\n\n.source-tab.active .close-btn {\n visibility: visible;\n}\n\n.source-tab:hover .close-btn {\n visibility: visible;\n}\n\n.source-tab .close-btn .close {\n padding: 0;\n margin-top: 0;\n display: inline-flex;\n justify-content: center;\n}\n"
