Previously, many CSS rules were written as:
-theme-preserve {
foo: bar;
}
Note that the selector is `-theme-preserve`, which in theory matches
any <-theme-preserve> elements — but we don’t use any such elements,
and it’s an invalid custom element name [1] anyway.
The only reason these selectors are used is to mark a CSS rule as
unaffected by DevTools theming; `_patchProperty` in `UIUtils.js` checks
if the selector contains `'-theme-'`.
stylelint-config-standard complains about this selector for good
reason, so we should use something else. A simple fix is to use a class
selector instead:
.-theme-preserve {
foo: bar;
}
There is one gotcha: `-theme-preserve` gets applied as an actual class
name to some <input> elements in the memory timeline under the
Performance panel. To prevent those elements from getting all the
`-theme-preserve` styles, this patch changes the class name for that
specific case to `-theme-preserve-input`.
This works great: stylelint is now happy, and `_patchProperty` in
`UIUtils.js` still works correctly, since it only checks if the
selector contains `-theme-` anywhere.
[1]: https://mothereff.in/custom-element-name#-theme-preserve
Bug: chromium:1083142
Change-Id: I923f12de6d581e9fef71a9a58bda184e40dee796
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2252017
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Commit-Queue: Mathias Bynens <mathias@chromium.org>
The patch fixes the toggle buttons for animation speed and the box
shadow type, inside the shadow editor.
Set opacity on disabled color. They are dimmed in places like the
text prompt in the Coverage panel and inputs and button in the
Sensors panel.
Fixed the hover state in the Request blocking panel. Where the
hover gradient is removed and background is set to Highlight.
Before: https://imgur.com/a/JHAzhS5
After: https://imgur.com/a/RTbiYad
Bug: 1048378
Change-Id: I5996548ee43dd8e866e466860dcf601d232f9e5c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2070664
Commit-Queue: Kham Udom <khamu@microsoft.com>
Reviewed-by: Kalon Hinds <kahinds@microsoft.com>
Update the DOM tree panel by fixing missing expanded glyph, removed the
borders, set by the system. The borders should only be visible,
when elements are hovered or selected.
Made sure all the panels, Style, Computed, Event Listeners,
DOM Breakpoints, Properties, and Accessibility, have a hover state,
if there is one, in Default mode. Otherwise, all panels
should be navigable, with keyboard.
Before: https://imgur.com/a/XaXWvFW
After: https://imgur.com/a/1lBV1Br
Update:1
Addressed comments to move styles to a central location,
removed unnecessary use of forced-colors and !important
and unused rule sets.
Update:2
Address change to use border color, more refactoring work
to remove unnecessary !important, more work on centralizing
styles
Bug: 1048378
Change-Id: I6942eb46d6c741fdea3f062ac61ead7c6e9d1bbc
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2007930
Commit-Queue: Kham Udom <khamu@microsoft.com>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Tim van der Lippe
