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