/* 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/. */ @import url(variables.css); /* No idea why this is needed but we get error messages without it */ :root { --eyedropper-image: url(images/command-eyedropper.svg); } window { padding: 0; } :root { --breadcrumbs-border-color: #9C9CFF; } * { box-sizing: border-box; } /* Make sure to hide scroll bars for the parent window */ window { overflow: hidden; } /* The main Inspector panel container. */ .inspector-responsive-container { height: 100vh; } /* The main panel layout. This area consists of a toolbar, markup view and breadcrumbs bar. */ #inspector-main-content { /* Subtract 1 pixel from the panel height. It's puzzling why this is needed, but if not presented the entire Inspector panel content jumps 1 pixel up when the Toolbox is opened. */ height: calc(100% - 1px); /* This min-width avoids a visual glitch when moving the splitter quickly to the left. See bug 1307408 comment #12. */ min-width: 125px; display: flex; flex-direction: column; flex: 1 1 auto; } /* Inspector Panel Splitter */ #inspector-splitter-box { height: 100vh; width: 100vw; position: fixed; } /* Minimum dimensions for the Inspector splitter areas. */ #inspector-splitter-box .uncontrolled, #inspector-splitter-box .controlled { min-height: 50px; min-width: 50px; overflow-x: hidden; } /* Set a minimum width of 200px for tab content to avoid breaking the layout when resizing the sidebar tab to small width. If a specific panel supports smaller width, this should be overridden on a panel-by-panel basis */ .inspector-tabpanel { min-width: 200px; } #inspector-splitter-box .controlled.pane-collapsed { visibility: collapse; } /* Use flex layout for the Inspector toolbar. For now, it's done specifically for the Inspector toolbar since general rule applied on .devtools-toolbar breaks breadcrumbs and also toolbars in other panels (e.g. webconsole, debugger), these are not ready for HTML layout yet. */ #inspector-toolbar.devtools-toolbar { display: flex; } #inspector-toolbar.devtools-toolbar .devtools-toolbar-spacer { flex-grow: 1; display: inline-block; } /* Add element toolbar button */ #inspector-element-add-button::before { background-image: url("chrome://devtools/skin/images/add.svg"); list-style-image: url("chrome://devtools/skin/images/add.svg"); -moz-user-focus: normal; } #inspector-searchlabel { overflow: hidden; margin-inline-end: 2px; } #inspector-search { flex: unset; } /* TODO: bug 1265759: should apply to .devtools-searchinput once all searchbox is converted to html*/ #inspector-searchbox { width: 100%; } /* Make sure the text is vertically centered in Inspector's search box. This can be removed when the search box is switched to HTML. See also: https://bugzilla.mozilla.org/show_bug.cgi?id=1265759 */ #inspector-searchbox { line-height: 19px; } /* Eyedropper toolbar button */ #inspector-eyedropper-toggle { /* Required to display tooltip when eyedropper is disabled in non-HTML documents */ pointer-events: auto; } #inspector-eyedropper-toggle::before { background-image: var(--eyedropper-image); } #inspector-sidebar-toggle-box { line-height: initial; } #inspector-breadcrumbs-toolbar { padding: 0px; border-bottom-width: 0px; /* border-top-width: 1px; border-top-color: var(--breadcrumbs-border-color);*/ /* Bug 1262668 - Use the same background as the body so the breadcrumbs toolbar doesn't get mistaken as a splitter */ background-color: var(--theme-alternate-toolbar-background); background-image: none; background-size: auto; display: block; position: relative; } /* Remove LCARS startcap and endcap */ div#inspector-breadcrumbs-toolbar::before, div#inspector-breadcrumbs-toolbar::after { display: none; } #inspector-breadcrumbs-toolbar, #inspector-breadcrumbs-toolbar * { box-sizing: border-box; } #inspector-breadcrumbs { display: flex; /* Break out of the XUL flexbox, so the splitter can still shrink the markup view even if the contents of the breadcrumbs are wider than the new width. */ position: absolute; top: 0; left: 0; bottom: 0; right: 0; } #inspector-breadcrumbs .scrollbutton-up, #inspector-breadcrumbs .scrollbutton-down { flex: 0; display: flex; align-items: center; } #inspector-breadcrumbs .html-arrowscrollbox-inner { flex: 1; display: flex; overflow: hidden; } #inspector-breadcrumbs .breadcrumbs-widget-item { white-space: nowrap; flex-shrink: 0; font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; } #inspector-sidebar-container { overflow: hidden; position: relative; height: 100%; } #inspector-sidebar { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } /* Override `-moz-user-focus:ignore;` from toolkit/content/minimal-xul.css */ .inspector-tabpanel > * { -moz-user-focus: normal; } /* "no results" warning message displayed in the ruleview and in the computed view */ #ruleview-no-results, #computedview-no-results { color: var(--theme-body-color-inactive); text-align: center; margin: 5px; } /* Markup Box */ iframe { border: 0; } #markup-box { width: 100%; flex: 1; min-height: 0; } #markup-box > iframe { height: 100%; width: 100%; }