This CL turns on the use_theme_colors stylelint rule which enforces that
any colors use variables defined in our codebase.
There are many, many violations, unsurprisingly (about 1500), so for now
I have disabled every single violation. The goal of the dark mode
migration will be in part to remove all violations of this rule.
Additionally, new code going forwards should adhere to the rule and not
add the comment to disable the warning.
Bug: 1152736
Change-Id: I51372724ea51485daef3d4f75b7d3f60a7c8016f
No-Presubmit: true
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2671323
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
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>
crrev.com/c/2152929 set a hover/focus color on all text buttons, but
didn't account for text colors other than blue, such as the Stop
button when Memory - Allocation Sampling is running. This CL fixes
that by only setting the hover color when the class is not .running.
Bug: 1078246
Change-Id: I71f9034e9027728c74b9d70a174493048b47fd96
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2182813
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Commit-Queue: Livvie Lin <livvielin@chromium.org>
There are multiple changes in this patch. For the Styles panel,
the color on the the web property when focused, now changes to
HighlightText. The link is now LinkText color on rest and hover state,
but changes to HighlightText when focused.
The toolbar with drop-down, the history drop-down and search box
now have borders. The disabled text button is fixed, with the correct
background, foreground and border color. The toolbar button text has
the correct color on hover and focus.
Made another pass to remove !important
Before: https://imgur.com/a/PJRm3K0
After: https://imgur.com/a/kFUXCFp
Bug: 1048378
Change-Id: Ie33778a0129203b98c5426f2a4a58fc5ee34a568
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2063384
Commit-Queue: Kham Udom <khamu@microsoft.com>
Reviewed-by: Kalon Hinds <kahinds@microsoft.com>
For the pie chart and its labels, it is opt-out of forced colors
on the color swatch, so we are able to distinguish the difference of
swatches, instead of seeing empty boxes. Timeline status dialog
got a border treatment and fixed text-buttons to use the correct
color values for hover and focus.
Hover, select, and focus on grid view, for Bottom-Up, Call Tree
and Event Log, is updated to correct color value.
update:
Use border-color for focus state
https://imgur.com/a/HKBMlRy
Before: https://imgur.com/a/0sD79Qy
After: https://imgur.com/a/vxsIo2m
Bug: 1048378
Change-Id: If9d89702a6eb427ab8e6d240c087fe70dc85d867
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2031069
Commit-Queue: Kham Udom <khamu@microsoft.com>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Jack Franklin