mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-26 19:55:39 +00:00
f5bb80b8d5
The rule-view and computed-view now have tabindex="-1" on their containers so that clicking anywhere in the views will focus them, so will tabbing through the inspector to them. This means that any user activity on them ends up focusing them (or any focusable element in them, which was the case before anyway). Because of this, pressing ctrl+F (or any other shortcut) will work correctly: the _onShortcut callback in each of these views will detect that the active element is the view itself and will therefore handle the event. Note that the container element that has the tabindex attribute is a child of the main container element that is scrollable (overflow:auto). That is because if we use only one element for both, then grabbing the scrollbar will focus the element and blur any field that's currently focused. MozReview-Commit-ID: 97a1tpdlbmZ --HG-- extra : rebase_source : 607f025a0f06064180a9cb3e72129e3c734598c6
536 lines
12 KiB
CSS
536 lines
12 KiB
CSS
/* 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/. */
|
|
|
|
/* CSS Variables specific to this panel that aren't defined by the themes */
|
|
.theme-light {
|
|
--rule-highlight-background-color: #ffee99;
|
|
--rule-filter-icon: url(images/filter.svg);
|
|
}
|
|
|
|
.theme-dark {
|
|
--rule-highlight-background-color: #594724;
|
|
--rule-filter-icon: url(images/filter.svg);
|
|
}
|
|
|
|
.theme-firebug {
|
|
--rule-highlight-background-color: #ffee99;
|
|
--rule-filter-icon: url(images/filter.svg);
|
|
--rule-property-name: darkgreen;
|
|
--rule-property-value: darkblue;
|
|
}
|
|
|
|
/* Rule View Tabpanel */
|
|
|
|
.theme-firebug .ruleview {
|
|
font-family: monospace;
|
|
font-size: 11px;
|
|
}
|
|
|
|
#sidebar-panel-ruleview {
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Rule View Toolbar */
|
|
|
|
#ruleview-toolbar-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: auto;
|
|
}
|
|
|
|
#ruleview-toolbar {
|
|
display: flex;
|
|
}
|
|
|
|
#ruleview-toolbar > .devtools-searchbox:first-child {
|
|
padding-inline-start: 0px;
|
|
}
|
|
|
|
#ruleview-command-toolbar {
|
|
display: flex;
|
|
}
|
|
|
|
#pseudo-class-panel {
|
|
display: flex;
|
|
height: 24px;
|
|
overflow: hidden;
|
|
transition: height 150ms ease;
|
|
}
|
|
|
|
#pseudo-class-panel[hidden] {
|
|
height: 0px;
|
|
}
|
|
|
|
#pseudo-class-panel > label {
|
|
-moz-user-select: none;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Rule View Container */
|
|
|
|
#ruleview-container {
|
|
-moz-user-select: text;
|
|
overflow: auto;
|
|
flex: auto;
|
|
height: 100%;
|
|
}
|
|
|
|
/* This extra wrapper only serves as a way to get the content of the view focusable.
|
|
So that when the user reaches it either via keyboard or mouse, we know that the view
|
|
is focused and therefore can handle shortcuts.
|
|
However, for accessibility reasons, tabindex is set to -1 to avoid having to tab
|
|
through it, and the outline is hidden. */
|
|
#ruleview-container-focusable {
|
|
height: 100%;
|
|
outline: none;
|
|
}
|
|
|
|
#ruleview-container.non-interactive {
|
|
pointer-events: none;
|
|
visibility: collapse;
|
|
transition: visibility 0.25s;
|
|
}
|
|
|
|
.ruleview-code {
|
|
direction: ltr;
|
|
}
|
|
|
|
.ruleview-property:not(:hover) > .ruleview-enableproperty {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ruleview-expandable-container[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.ruleview-expandable-container {
|
|
display: block;
|
|
}
|
|
|
|
.ruleview-namecontainer {
|
|
cursor: text;
|
|
}
|
|
|
|
.ruleview-propertyvaluecontainer {
|
|
cursor: text;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.ruleview-propertyvaluecontainer a {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ruleview-computedlist,
|
|
.ruleview-overridden-rule-filter[hidden],
|
|
.ruleview-warning[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.ruleview-computedlist[user-open],
|
|
.ruleview-computedlist[filter-open] {
|
|
display: block;
|
|
}
|
|
|
|
.ruleview-rule-source {
|
|
text-align: end;
|
|
float: right;
|
|
-moz-user-select: none;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.ruleview-rule-source > label {
|
|
cursor: pointer;
|
|
margin: 0;
|
|
}
|
|
|
|
.ruleview-rule-source[unselectable],
|
|
.ruleview-rule-source[unselectable] > label {
|
|
cursor: default;
|
|
}
|
|
|
|
.theme-firebug .ruleview-rule-source label {
|
|
font-family: var(--proportional-font-family);
|
|
font-weight: bold;
|
|
color: #0000FF;
|
|
}
|
|
|
|
.ruleview-rule-source:not([unselectable]):hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.ruleview-header {
|
|
border-top-width: 1px;
|
|
border-bottom-width: 1px;
|
|
border-top-style: solid;
|
|
border-bottom-style: solid;
|
|
padding: 1px 4px;
|
|
-moz-user-select: none;
|
|
word-wrap: break-word;
|
|
vertical-align: middle;
|
|
min-height: 1.5em;
|
|
line-height: 1.5em;
|
|
margin-top: -1px;
|
|
}
|
|
|
|
.theme-firebug .theme-gutter.ruleview-header {
|
|
font-family: var(--proportional-font-family);
|
|
font-weight: bold;
|
|
color: inherit;
|
|
border: none;
|
|
margin: 4px 0;
|
|
padding: 3px 4px 2px 4px;
|
|
line-height: inherit;
|
|
min-height: 0;
|
|
background: var(--theme-header-background);
|
|
}
|
|
|
|
:root[platform="win"] .ruleview-header,
|
|
:root[platform="linux"] .ruleview-header {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.ruleview-header.ruleview-expandable-header {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ruleview-rule-pseudo-element {
|
|
padding-left:20px;
|
|
border-left: solid 10px;
|
|
}
|
|
|
|
.ruleview-rule {
|
|
padding: 2px 4px;
|
|
}
|
|
|
|
/**
|
|
* Display rules that don't match the current selected element and uneditable
|
|
* user agent styles differently
|
|
*/
|
|
.ruleview-rule[unmatched=true],
|
|
.ruleview-rule[uneditable=true] {
|
|
background: var(--theme-tab-toolbar-background);
|
|
}
|
|
|
|
.ruleview-rule[unmatched=true] {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.ruleview-rule[uneditable=true] :focus {
|
|
outline: none;
|
|
}
|
|
|
|
.ruleview-rule[uneditable=true] .theme-link {
|
|
color: var(--theme-highlight-bluegrey);
|
|
}
|
|
|
|
.ruleview-rule[uneditable=true] .ruleview-enableproperty {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.ruleview-rule[uneditable=true] .ruleview-swatch {
|
|
cursor: default;
|
|
}
|
|
|
|
.ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
|
|
.ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer >
|
|
.ruleview-propertyvalue {
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
.theme-firebug .ruleview-namecontainer > .ruleview-propertyname,
|
|
.theme-firebug .ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.theme-firebug .ruleview-namecontainer > .ruleview-propertyname {
|
|
color: var(--rule-property-name);
|
|
}
|
|
|
|
.theme-firebug .ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
|
|
color: var(--rule-property-value);
|
|
}
|
|
|
|
.theme-firebug .ruleview-overridden .ruleview-propertyname,
|
|
.theme-firebug .ruleview-overridden .ruleview-propertyvalue {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-namecontainer,
|
|
.theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-namecontainer *,
|
|
.theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertyvaluecontainer,
|
|
.theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertyvaluecontainer *,
|
|
.theme-firebug .ruleview-overridden > * > .ruleview-computed:not(.ruleview-overridden),
|
|
.theme-firebug .ruleview-overridden > * > .ruleview-computed:not(.ruleview-overridden) * {
|
|
color: #CCCCCC;
|
|
}
|
|
|
|
.ruleview-rule + .ruleview-rule {
|
|
border-top-width: 1px;
|
|
border-top-style: dotted;
|
|
}
|
|
|
|
.theme-firebug .ruleview-rule + .ruleview-rule {
|
|
border-top: none;
|
|
}
|
|
|
|
.ruleview-warning {
|
|
background-image: url(images/alerticon-warning.png);
|
|
background-size: 13px 12px;
|
|
margin-inline-start: 5px;
|
|
display: inline-block;
|
|
width: 13px;
|
|
height: 12px;
|
|
}
|
|
|
|
@media (min-resolution: 1.1dppx) {
|
|
.ruleview-warning {
|
|
background-image: url(images/alerticon-warning@2x.png);
|
|
}
|
|
}
|
|
|
|
.ruleview-overridden-rule-filter {
|
|
background-image: var(--rule-filter-icon);
|
|
background-size: 11px 11px;
|
|
margin-inline-start: 5px;
|
|
display: inline-block;
|
|
width: 11px;
|
|
height: 11px;
|
|
}
|
|
|
|
.ruleview-ruleopen {
|
|
padding-inline-end: 5px;
|
|
}
|
|
|
|
.ruleview-ruleclose {
|
|
cursor: text;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.ruleview-propertylist {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.ruleview-rule:not(:hover) .ruleview-enableproperty {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.ruleview-expander {
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
}
|
|
|
|
.ruleview-newproperty {
|
|
/* (enable checkbox width: 12px) + (expander width: 15px) */
|
|
margin-inline-start: 27px;
|
|
}
|
|
|
|
.ruleview-namecontainer,
|
|
.ruleview-propertyvaluecontainer,
|
|
.ruleview-propertyname,
|
|
.ruleview-propertyvalue {
|
|
text-decoration: inherit;
|
|
}
|
|
|
|
.ruleview-computedlist {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.ruleview-computed {
|
|
margin-inline-start: 35px;
|
|
}
|
|
|
|
.ruleview-swatch {
|
|
cursor: pointer;
|
|
border-radius: 50%;
|
|
width: 0.9em;
|
|
height: 0.9em;
|
|
vertical-align: middle;
|
|
/* align the swatch with its value */
|
|
margin-top: -1px;
|
|
margin-inline-end: 5px;
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
|
|
.ruleview-colorswatch::before {
|
|
content: '';
|
|
background-color: #eee;
|
|
background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
|
|
linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
|
|
background-size: 12px 12px;
|
|
background-position: 0 0, 6px 6px;
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: -1;
|
|
}
|
|
|
|
.ruleview-bezierswatch {
|
|
background: url("chrome://devtools/skin/images/cubic-bezier-swatch.png");
|
|
background-size: 1em;
|
|
}
|
|
|
|
.ruleview-filterswatch {
|
|
background: url("chrome://devtools/skin/images/filter-swatch.svg");
|
|
background-size: 1em;
|
|
}
|
|
|
|
.ruleview-angleswatch {
|
|
background: url("chrome://devtools/skin/images/angle-swatch.svg");
|
|
background-size: 1em;
|
|
}
|
|
|
|
@media (min-resolution: 1.1dppx) {
|
|
.ruleview-bezierswatch {
|
|
background: url("chrome://devtools/skin/images/cubic-bezier-swatch@2x.png");
|
|
background-size: 1em;
|
|
}
|
|
}
|
|
|
|
.ruleview-overridden {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.theme-light .ruleview-overridden {
|
|
text-decoration-color: var(--theme-content-color3);
|
|
}
|
|
|
|
.styleinspector-propertyeditor {
|
|
border: 1px solid #CCC;
|
|
padding: 0;
|
|
margin: -1px -3px -1px -1px;
|
|
}
|
|
|
|
.theme-firebug .styleinspector-propertyeditor {
|
|
border: 1px solid var(--theme-splitter-color);
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.ruleview-property {
|
|
border-left: 3px solid transparent;
|
|
clear: right;
|
|
}
|
|
|
|
.ruleview-propertycontainer > * {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.ruleview-property[dirty] {
|
|
border-left-color: var(--theme-highlight-green);
|
|
}
|
|
|
|
.ruleview-highlight {
|
|
background-color: var(--rule-highlight-background-color);
|
|
}
|
|
|
|
.ruleview-namecontainer > .ruleview-propertyname,
|
|
.ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
|
|
border-bottom: 1px dashed transparent;
|
|
}
|
|
|
|
.ruleview-namecontainer:hover > .ruleview-propertyname,
|
|
.ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue {
|
|
border-bottom-color: hsl(0,0%,50%);
|
|
}
|
|
|
|
.ruleview-selectorcontainer {
|
|
word-wrap: break-word;
|
|
cursor: text;
|
|
}
|
|
|
|
.ruleview-selector-separator,
|
|
.ruleview-selector-unmatched {
|
|
color: #888;
|
|
}
|
|
|
|
.ruleview-selector-matched > .ruleview-selector-attribute {
|
|
/* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
|
|
}
|
|
|
|
.ruleview-selector-matched > .ruleview-selector-pseudo-class {
|
|
/* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
|
|
}
|
|
|
|
.ruleview-selector-matched > .ruleview-selector-pseudo-class-lock {
|
|
font-weight: bold;
|
|
color: var(--theme-highlight-orange);
|
|
}
|
|
|
|
.theme-firebug .ruleview-selector > .ruleview-selector-matched,
|
|
.theme-firebug .ruleview-selector > .ruleview-selector-separator,
|
|
.theme-firebug .ruleview-selector > .ruleview-selector-unmatched {
|
|
color: inherit;
|
|
}
|
|
|
|
.ruleview-selectorhighlighter {
|
|
background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
|
|
padding-left: 16px;
|
|
margin-left: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ruleview-selectorhighlighter:hover {
|
|
filter: url(images/filters.svg#checked-icon-state);
|
|
}
|
|
|
|
.ruleview-selectorhighlighter:active,
|
|
.ruleview-selectorhighlighter.highlighted {
|
|
filter: url(images/filters.svg#checked-icon-state) brightness(0.9);
|
|
}
|
|
|
|
#ruleview-add-rule-button::before {
|
|
background-image: url("chrome://devtools/skin/images/add.svg");
|
|
background-size: cover;
|
|
}
|
|
|
|
#pseudo-class-panel-toggle::before {
|
|
background-image: url("chrome://devtools/skin/images/pseudo-class.svg");
|
|
background-size: cover;
|
|
}
|
|
|
|
.ruleview-overridden-rule-filter {
|
|
opacity: 0.8;
|
|
}
|
|
.ruleview-overridden-rule-filter:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.theme-firebug .ruleview-overridden {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Firebug theme disable/enable CSS rule. Firebug theme uses its own
|
|
icons to indicate when CSS rules can be disabled or enabled. */
|
|
|
|
.theme-firebug .ruleview-rule .theme-checkbox {
|
|
background-repeat: no-repeat;
|
|
background-size: 12px 12px;
|
|
background-image: url(chrome://devtools/skin/images/firebug/disable.svg);
|
|
background-position: 0 0;
|
|
}
|
|
|
|
.theme-firebug .ruleview-rule .theme-checkbox:not([checked]){
|
|
filter: grayscale(1);
|
|
}
|
|
|
|
.theme-firebug .ruleview-rule .theme-checkbox[checked] {
|
|
background-position: 0 0;
|
|
}
|
|
|
|
.theme-firebug .ruleview-property:not(:hover) .ruleview-enableproperty {
|
|
visibility: hidden;
|
|
}
|