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>
This change makes the Changes drawer editor more accessible by adding a
gutter column with +/- symbols on added or deleted rows, respectively.
This information was previously conveyed only through color, a WCAG
violation.
In order to communicate whether a line is an addition or deletion to
screen reader users, I created a new code mirror input style that
prepends 'Addition:' or 'Deletion:' to the text that screen readers read
out for each diff line. This solution was settled on after discussing it
with other devs working on accessibility in order to avoid implementing
something more complex like VS Code's screen reader diff experience [1].
Screenshot: https://gyazo.com/8fe95b563a9e74d0d8b1a88900876c2a
[1] https://github.com/Microsoft/vscode/issues/17263#issuecomment-305701496
Bug: 963183
Change-Id: Ieeab30b8058fb36ef3a0d9ef4beac52419f6dc33
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1891836
Reviewed-by: Robert Paveza <Rob.Paveza@microsoft.com>
Commit-Queue: Jack Lynch <jalyn@microsoft.com>
Mathias Bynens