| 1 | /* This Source Code Form is subject to the terms of the Mozilla Public |
| 2 | * License, v. 2.0. If a copy of the MPL was not distributed with this |
| 3 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ |
| 4 | |
| 5 | @import url(variables.css); /* No idea why this is needed but we get error messages without it */ |
| 6 | |
| 7 | :root { |
| 8 | --eyedropper-image: url(images/command-eyedropper.svg); |
| 9 | } |
| 10 | |
| 11 | window { |
| 12 | padding: 0; |
| 13 | } |
| 14 | |
| 15 | :root { |
| 16 | --breadcrumbs-border-color: #9C9CFF; |
| 17 | } |
| 18 | |
| 19 | * { |
| 20 | box-sizing: border-box; |
| 21 | } |
| 22 | |
| 23 | /* Make sure to hide scroll bars for the parent window */ |
| 24 | window { |
| 25 | overflow: hidden; |
| 26 | } |
| 27 | |
| 28 | /* The main Inspector panel container. */ |
| 29 | .inspector-responsive-container { |
| 30 | height: 100vh; |
| 31 | } |
| 32 | |
| 33 | /* The main panel layout. This area consists of a toolbar, markup view |
| 34 | and breadcrumbs bar. */ |
| 35 | #inspector-main-content { |
| 36 | /* Subtract 1 pixel from the panel height. It's puzzling why this |
| 37 | is needed, but if not presented the entire Inspector panel |
| 38 | content jumps 1 pixel up when the Toolbox is opened. */ |
| 39 | height: calc(100% - 1px); |
| 40 | /* This min-width avoids a visual glitch when moving the splitter quickly to the left. |
| 41 | See bug 1307408 comment #12. */ |
| 42 | min-width: 125px; |
| 43 | display: flex; |
| 44 | flex-direction: column; |
| 45 | flex: 1 1 auto; |
| 46 | } |
| 47 | |
| 48 | /* Inspector Panel Splitter */ |
| 49 | |
| 50 | #inspector-splitter-box { |
| 51 | height: 100vh; |
| 52 | width: 100vw; |
| 53 | position: fixed; |
| 54 | } |
| 55 | |
| 56 | /* Minimum dimensions for the Inspector splitter areas. */ |
| 57 | #inspector-splitter-box .uncontrolled, |
| 58 | #inspector-splitter-box .controlled { |
| 59 | min-height: 50px; |
| 60 | min-width: 50px; |
| 61 | overflow-x: hidden; |
| 62 | } |
| 63 | |
| 64 | /* Set a minimum width of 200px for tab content to avoid breaking the layout when resizing |
| 65 | the sidebar tab to small width. If a specific panel supports smaller width, this should |
| 66 | be overridden on a panel-by-panel basis */ |
| 67 | .inspector-tabpanel { |
| 68 | min-width: 200px; |
| 69 | } |
| 70 | |
| 71 | #inspector-splitter-box .controlled.pane-collapsed { |
| 72 | visibility: collapse; |
| 73 | } |
| 74 | |
| 75 | /* Use flex layout for the Inspector toolbar. For now, it's done |
| 76 | specifically for the Inspector toolbar since general rule applied |
| 77 | on .devtools-toolbar breaks breadcrumbs and also toolbars in other |
| 78 | panels (e.g. webconsole, debugger), these are not ready for HTML |
| 79 | layout yet. */ |
| 80 | #inspector-toolbar.devtools-toolbar { |
| 81 | display: flex; |
| 82 | } |
| 83 | |
| 84 | #inspector-toolbar.devtools-toolbar .devtools-toolbar-spacer { |
| 85 | flex-grow: 1; |
| 86 | display: inline-block; |
| 87 | } |
| 88 | |
| 89 | /* Add element toolbar button */ |
| 90 | #inspector-element-add-button::before { |
| 91 | background-image: url("chrome://devtools/skin/images/add.svg"); |
| 92 | list-style-image: url("chrome://devtools/skin/images/add.svg"); |
| 93 | -moz-user-focus: normal; |
| 94 | } |
| 95 | |
| 96 | #inspector-searchlabel { |
| 97 | overflow: hidden; |
| 98 | margin-inline-end: 2px; |
| 99 | } |
| 100 | |
| 101 | #inspector-search { |
| 102 | flex: unset; |
| 103 | } |
| 104 | |
| 105 | /* TODO: bug 1265759: should apply to .devtools-searchinput once all searchbox |
| 106 | is converted to html*/ |
| 107 | #inspector-searchbox { |
| 108 | width: 100%; |
| 109 | } |
| 110 | |
| 111 | /* Make sure the text is vertically centered in Inspector's |
| 112 | search box. This can be removed when the search box is |
| 113 | switched to HTML. |
| 114 | See also: https://bugzilla.mozilla.org/show_bug.cgi?id=1265759 */ |
| 115 | #inspector-searchbox { |
| 116 | line-height: 19px; |
| 117 | } |
| 118 | |
| 119 | /* Eyedropper toolbar button */ |
| 120 | |
| 121 | #inspector-eyedropper-toggle { |
| 122 | /* Required to display tooltip when eyedropper is disabled in non-HTML documents */ |
| 123 | pointer-events: auto; |
| 124 | } |
| 125 | |
| 126 | #inspector-eyedropper-toggle::before { |
| 127 | background-image: var(--eyedropper-image); |
| 128 | } |
| 129 | |
| 130 | #inspector-sidebar-toggle-box { |
| 131 | line-height: initial; |
| 132 | } |
| 133 | |
| 134 | #inspector-breadcrumbs-toolbar { |
| 135 | padding: 0px; |
| 136 | border-bottom-width: 0px; |
| 137 | /* border-top-width: 1px; |
| 138 | border-top-color: var(--breadcrumbs-border-color);*/ |
| 139 | /* Bug 1262668 - Use the same background as the body so the breadcrumbs toolbar doesn't |
| 140 | get mistaken as a splitter */ |
| 141 | background-color: var(--theme-alternate-toolbar-background); |
| 142 | background-image: none; |
| 143 | background-size: auto; |
| 144 | display: block; |
| 145 | position: relative; |
| 146 | } |
| 147 | |
| 148 | /* Remove LCARS startcap and endcap */ |
| 149 | div#inspector-breadcrumbs-toolbar::before, |
| 150 | div#inspector-breadcrumbs-toolbar::after { |
| 151 | display: none; |
| 152 | } |
| 153 | |
| 154 | #inspector-breadcrumbs-toolbar, |
| 155 | #inspector-breadcrumbs-toolbar * { |
| 156 | box-sizing: border-box; |
| 157 | } |
| 158 | |
| 159 | #inspector-breadcrumbs { |
| 160 | display: flex; |
| 161 | |
| 162 | /* Break out of the XUL flexbox, so the splitter can still shrink the |
| 163 | markup view even if the contents of the breadcrumbs are wider than |
| 164 | the new width. */ |
| 165 | position: absolute; |
| 166 | top: 0; |
| 167 | left: 0; |
| 168 | bottom: 0; |
| 169 | right: 0; |
| 170 | } |
| 171 | |
| 172 | #inspector-breadcrumbs .scrollbutton-up, |
| 173 | #inspector-breadcrumbs .scrollbutton-down { |
| 174 | flex: 0; |
| 175 | display: flex; |
| 176 | align-items: center; |
| 177 | } |
| 178 | |
| 179 | #inspector-breadcrumbs .html-arrowscrollbox-inner { |
| 180 | flex: 1; |
| 181 | display: flex; |
| 182 | overflow: hidden; |
| 183 | } |
| 184 | |
| 185 | #inspector-breadcrumbs .breadcrumbs-widget-item { |
| 186 | white-space: nowrap; |
| 187 | flex-shrink: 0; |
| 188 | font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; |
| 189 | } |
| 190 | |
| 191 | #inspector-sidebar-container { |
| 192 | overflow: hidden; |
| 193 | position: relative; |
| 194 | height: 100%; |
| 195 | } |
| 196 | |
| 197 | #inspector-sidebar { |
| 198 | position: absolute; |
| 199 | top: 0; |
| 200 | bottom: 0; |
| 201 | left: 0; |
| 202 | right: 0; |
| 203 | } |
| 204 | |
| 205 | /* Override `-moz-user-focus:ignore;` from toolkit/content/minimal-xul.css */ |
| 206 | .inspector-tabpanel > * { |
| 207 | -moz-user-focus: normal; |
| 208 | } |
| 209 | |
| 210 | /* "no results" warning message displayed in the ruleview and in the computed view */ |
| 211 | |
| 212 | #ruleview-no-results, |
| 213 | #computedview-no-results { |
| 214 | color: var(--theme-body-color-inactive); |
| 215 | text-align: center; |
| 216 | margin: 5px; |
| 217 | } |
| 218 | |
| 219 | /* Markup Box */ |
| 220 | |
| 221 | iframe { |
| 222 | border: 0; |
| 223 | } |
| 224 | |
| 225 | #markup-box { |
| 226 | width: 100%; |
| 227 | flex: 1; |
| 228 | min-height: 0; |
| 229 | } |
| 230 | |
| 231 | #markup-box > iframe { |
| 232 | height: 100%; |
| 233 | width: 100%; |
| 234 | } |