https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
:focus-visible is basically the exact same functionality as the custom
data-keyboard-focus attribute that devtools maintains. This CL converts
all of our uses of data-keyboard-focus in CSS to use :focus-visible.
This has no intended behaviour change although it's possible there are
small differences in our implementation vs. the web platform one, so
this might cause some regression with focus styles for keyboard
interaction.
I tested a few of these manually to verify they still do the same thing.
The CSS linter was unhappy about the ordering of some rules due to
specificity-ordering checks, so there is some re-ordering too.
A follow-up CL will remove our implementation of data-keyboard-focus.
Change-Id: Ifc273f7d82e16ea07e24ed2d1faa6f794a12501d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2352236
Commit-Queue: Peter Marshall <petermarshall@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Kalon Hinds <kahinds@microsoft.com>
Reviewed-by: Jack Lynch <jalyn@microsoft.com>
Reviewed-by: Brandon Goddard <brgoddar@microsoft.com>
This patch drops unnecessary -webkit- prefixes in CSS and enables
a lint check to enforce that prevent such properties from being
added in the future. Note that the use of vendor-prefixed CSS
properties is still accepted in cases where there is no standardized
and browser-supported alternative.
Bug: chromium:1104187
Change-Id: I29ae93d5a760c4f5037f20663754f448b5083235
Fixed: chromium:1031475
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2297386
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Commit-Queue: Mathias Bynens <mathias@chromium.org>
My previous CL for the CSS style fix-it dropped a CSS rule. This adds
it back.
Drive-by: Allow custom types to appear in style sheets if the custom
type starts with devtools-, and use ".-theme-preserve" (as a class
name) in the selector for dark mode.
Fixed: chromium:1101680
Bug: chromium:1083142
Change-Id: I4deef5885ce3365f8116631875d7b0212840b012
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2278470
Commit-Queue: Yang Guo <yangguo@chromium.org>
Reviewed-by: Yang Guo <yangguo@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Auto-Submit: Sigurd Schneider <sigurds@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>
This change enhances the accessibility of the Network tool Timing tab
by making the following changes:
- Add hidden global headers to give column context to screen readers
- Slight modification of color contrast for section headers (> 4.5)
- Updated "TIME" to "DURATION" to avoid confusion
- Applied ARIA heading for soft headers
- Restructured columns to remove empty table cells from being read
by a screen reader
- Added ARIA labels to waterfall column that
read the start time of the request. (Column 3 indicates the
duration of that part of the request timing).
Bug: 963183
Before: https://imgur.com/qKzqyYv
After (with screen reader): https://imgur.com/Sk6vuT6
Change-Id: Ife782e02929f2a1624fd0b827b4e1f729babd209
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1647132
Reviewed-by: Erik Luo <luoe@chromium.org>
Reviewed-by: Joey Arhar <jarhar@chromium.org>
Commit-Queue: Brandon Goddard <brgoddar@microsoft.com>
Cr-Original-Commit-Position: refs/heads/master@{#693774}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: eafc9468202520ab4df62e886f509fcadd9d190c
Peter Marshall