mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-22 09:45:41 +00:00
f9d2dc2d7d
This moves the eyedropper button from the toolbar into the inspector, therefore the old eyedropper command isn't needed anymore, or at least not as it was. The button in the inspector simply uses the pickColorFromPage inspector actor method. And to preserve a eyedropper gcli command, a new simpler one was added. MozReview-Commit-ID: B1yr1EqLFBD --HG-- extra : rebase_source : 47c2effe193f4d1a64a8d16ea3609ff5ae1f793b
115 lines
2.8 KiB
CSS
115 lines
2.8 KiB
CSS
/* vim:set ts=2 sw=2 sts=2 et: */
|
|
/* 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/. */
|
|
|
|
:root {
|
|
--eyedropper-image: url(images/command-eyedropper.svg);
|
|
}
|
|
|
|
.theme-firebug {
|
|
--eyedropper-image: url(images/firebug/command-eyedropper.svg);
|
|
}
|
|
|
|
/* 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 breadcrubs 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;
|
|
}
|
|
|
|
#inspector-searchlabel {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 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 */
|
|
.theme-dark #inspector-searchbox,
|
|
.theme-light #inspector-searchbox {
|
|
line-height: 19px;
|
|
}
|
|
.theme-firebug #inspector-searchbox {
|
|
line-height: 17px;
|
|
}
|
|
|
|
#inspector-breadcrumbs-toolbar {
|
|
padding: 0px;
|
|
border-bottom-width: 0px;
|
|
border-top-width: 1px;
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
#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: message-box;
|
|
}
|
|
|
|
/* Eyedropper toolbar button */
|
|
|
|
#inspector-eyedropper-toggle {
|
|
/* hidden by default, until we can check that the required highlighter exists */
|
|
display: none;
|
|
}
|
|
|
|
#inspector-eyedropper-toggle::before {
|
|
background-image: var(--eyedropper-image);
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* "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;
|
|
}
|