Nicolas Chevobbe
6563f489b0
This patch make it so the tooltip we show when hovering a `@container` query condition in the rule view will have the properties that are directly referenced in the condition. So for example, if the query is `@container (width > 10px)` it'll have `width`, if it's `@container style(--x)` it'll have `--x`, if it's `@container style(attr(data-x px))`, it'll have `data-x` and so on. We also indicate when referenced variables and attributes are not set. Tests case are added in !!browser_rules_container-queries.js!! to cover the different features we can have. We also now assert the condition text in `assertQueryContainerTooltip` so it's easier to understand which condition the function is asserting. Differential Revision: https://phabricator.services.mozilla.com/D294420
35 lines
944 B
CSS
35 lines
944 B
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/. */
|
|
|
|
/* Rules that may be used in different inspector panels and tooltips */
|
|
|
|
@import url("./inspector-swatches.css");
|
|
|
|
:root {
|
|
--inspector-highlight-background-color: light-dark(var(--theme-highlight-yellow), #521c76);
|
|
--inspector-highlight-color: inherit;
|
|
|
|
&[forced-colors-active] {
|
|
--inspector-highlight-background-color: Mark;
|
|
--inspector-highlight-color: MarkText;
|
|
}
|
|
}
|
|
|
|
.empty-css-variable,
|
|
.property-value.empty {
|
|
color: var(--theme-text-color-alt);
|
|
font-style: italic;
|
|
}
|
|
|
|
.inspector-unmatched {
|
|
color: var(--theme-text-color-alt);
|
|
}
|
|
|
|
.inspector-unmatched:not(
|
|
/* don't show the strike through when the element is hovered so it's more legible */
|
|
:hover
|
|
) {
|
|
text-decoration: line-through solid currentColor;
|
|
}
|