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/. */
6 --eyedropper-image: url(images/command-eyedropper.svg);
13 /* Use flex layout for the Inspector toolbar. For now, it's done
14 specifically for the Inspector toolbar since general rule applied
15 on .devtools-toolbar breaks breadcrubs and also toolbars in other
16 panels (e.g. webconsole, debugger), these are not ready for HTML
18 div#inspector-toolbar.devtools-toolbar {
20 background-size: calc(100% - 30px);
21 background-image: linear-gradient(90deg,#9C9CFF,#9C9CFF);
22 background-repeat: no-repeat;
23 background-position: center center;
26 div#inspector-toolbar.devtools-toolbar .devtools-toolbar-spacer {
28 display: inline-block;
31 div#inspector-toolbar.devtools-toolbar::before,
32 div#inspector-toolbar.devtools-toolbar::after {
37 background-color: #FF9F00;
40 div#inspector-toolbar.devtools-toolbar::before {
41 border-radius: 8px 0px 0px 8px;
43 border-inline-end: 3px solid black;
44 margin-inline-end: 2px;
47 div#inspector-toolbar.devtools-toolbar::after {
48 border-radius: 0px 8px 8px 0px;
50 border-inline-start: 3px solid black;
51 margin-inline-start: 2px;
59 #inspector-searchlabel {
63 #inspector-breadcrumbs-toolbar {
65 border-bottom-width: 0px;
66 border-top-width: 1px;
69 /* Expand/collapse panel toolbar button */
71 #inspector-pane-toggle {
72 list-style-image: var(--theme-pane-collapse-image);
75 #inspector-pane-toggle[pane-collapsed] {
76 list-style-image: var(--theme-pane-expand-image);
79 @media (max-width: 700px) {
80 #inspector-pane-toggle > .toolbarbutton-icon {
81 transform: rotate(90deg);
85 /* Add element toolbar button */
87 #inspector-element-add-button {
88 list-style-image: url("chrome://devtools/skin/images/add.svg");
91 button#inspector-element-add-button::before {
92 background-image: url("chrome://devtools/skin/images/add.svg");
93 list-style-image: url("chrome://devtools/skin/images/add.svg");
94 -moz-user-focus: normal;
101 /* TODO: bug 1265759: should apply to .devtools-searchinput once all searchbox
102 is converted to html*/
103 #inspector-searchbox {
107 /* Eyedropper toolbar button */
109 #inspector-eyedropper-toggle {
110 /* hidden by default, until we can check that the required highlighter exists */
114 #inspector-eyedropper-toggle::before {
115 background-image: var(--eyedropper-image);
118 #inspector-sidebar-toggle-box {
119 line-height: initial;
122 button#sidebar-toggle {
126 /* Set the minimum width for the side bar so, all tabs are
127 properly visible. The value can be decreased when bug 1281789
128 is fixed and the all-tabs-menu is available again. */
129 #inspector-sidebar-container {
135 div#inspector-sidebar {
145 .tabs .tabs-navigation {
146 height: auto !important;
149 .tabs .tabs-menu-item {
150 border-radius: 8px 8px 0px 0px;
152 border: 0 !important;
153 border-inline-end: 2px solid transparent !important;
155 padding: 2px 4px 1px;
156 background-color: var(--theme-button-background);
157 color: var(--theme-button-color);
158 background-clip: padding-box;
159 height: auto !important;
162 .tabs .tabs-menu-item a {
163 color: inherit !important;
164 padding: 0 !important;
168 .tabs .tabs-menu-item:hover {
169 background-color: var(--theme-hover-background);
170 color: var(--theme-hover-color);
173 .tabs .tabs-menu-item:hover:active {
174 background-color: var(--theme-active-background);
175 color: var(--theme-active-color);
178 /* Tooltip: Events */
180 #devtools-tooltip-events-container {
181 margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
192 .event-header:first-child {
196 .event-header:not(:first-child) {
197 border-width: 1px 0 0 0;
200 .event-tooltip-event-type,
201 .event-tooltip-filename,
202 .event-tooltip-attributes {
203 margin-inline-start: 0;
208 .event-tooltip-event-type {
213 .event-tooltip-filename {
214 margin-inline-end: 0;
219 .event-tooltip-debugger-icon {
222 margin-inline-end: 4px;
227 .event-tooltip-debugger-icon:hover {
231 .event-tooltip-content-box {
235 margin-inline-end: 0;
236 border: 1px solid var(--theme-splitter-color);
237 border-width: 1px 0 0 0;
240 .event-toolbox-content-box iframe {
244 .event-tooltip-content-box[open] {
248 .event-tooltip-source-container {
251 margin-inline-start: 5px;
252 margin-inline-end: 0;
255 .event-tooltip-source {
259 .event-tooltip-attributes-container {
263 justify-content: flex-end;
266 .event-tooltip-attributes-box {
272 margin-inline-start: 5px;
273 background-color: var(--theme-body-color-alt);
274 color: var(--theme-toolbar-background);
277 .event-tooltip-attributes {