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>
This patch lifts CSS declarations for the Network Waterfall column to
body and uses ThemeSupport to handle evaluating computed styles instead
of NetworkWaterfallColumn.
In a follow-up CL I will rebind the Network Waterfall column variables
to the appropriate system colors in order to support high contrast.
Bug: 961126
Change-Id: I9503e4ff16745aad05e8c751faad0d4d1e1d8dcf
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2120016
Commit-Queue: Kalon Hinds <kahinds@microsoft.com>
Reviewed-by: Brandon Goddard <brgoddar@microsoft.com>
This CL fixes an issue that causes the network Log area to receive
a focus indicator when the "Learn More" link is focused/clicked.
This issue was caused because the logic to trigger the focus ring
on the network log area assumed the only focusable content within the
container was the DataGrid. It previously showed the ring whenever
focus was within the container and the datagrid did not have a request
selected.
Now it only shows if the datagrid receives focus and does not have
a node selected.
(Note that this focus logic was included because the
waterfall column is not part of the Datagrid)
Before: https://imgur.com/2cGS207
After: https://imgur.com/LzEDWBW
Bug: 1056138
Change-Id: I5c1f5fd03b5ed674f27c5b591fc76cfa4d46d165
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2120649
Reviewed-by: Jose Leal <joselea@microsoft.com>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Commit-Queue: Brandon Goddard <brgoddar@microsoft.com>
This is a reland of cef170cfe5
The change accidentally deleted a line that allowed for the overview timeline
highlighting of the currently selected node. This has been fixed.
Original change's description:
> Network A11y: Improve keyboarding experience of Network tool Datagrid
>
> This changes builds off of
> https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1881219
> in order to improve the keyboard accessibility
> of the Network tool Datagrid.
>
> Previously, the network tool ties selection of a node in the grid
> directly to opening the request sidepane. This makes it challenging for
> keyboard only users to view and navigate the network tool datagrid
> columns.
>
> This change separates selection from opening the sidepane, and fixes
> styling issues that affect the columns that were previously hidden
> behind the sidepane when a node is selected. Selected nodes are
> highlighted in the grid, and are "activated" using the enter key
> or a click in the primary column to open the sidepane.
>
> Before: https://imgur.com/U1PG6Hr
>
> After: https://imgur.com/eXgDE9D
>
> Bug: 963183
>
> Change-Id: I2c2629670624e807adb4cd9e9e9b75cdafbae7a5
> Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1881592
> Commit-Queue: Brandon Goddard <brgoddar@microsoft.com>
> Reviewed-by: Lorne Mitchell <lomitch@microsoft.com>
> Reviewed-by: Jan Scheffler <janscheffler@chromium.org>
Bug: 963183
Change-Id: I4dfd0a67cd1fce6e6dd8066ceb84841d21191ef3
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1896256
Reviewed-by: Lorne Mitchell <lomitch@microsoft.com>
Commit-Queue: Brandon Goddard <brgoddar@microsoft.com>
This changes builds off of
https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1881219
in order to improve the keyboard accessibility
of the Network tool Datagrid.
Previously, the network tool ties selection of a node in the grid
directly to opening the request sidepane. This makes it challenging for
keyboard only users to view and navigate the network tool datagrid
columns.
This change separates selection from opening the sidepane, and fixes
styling issues that affect the columns that were previously hidden
behind the sidepane when a node is selected. Selected nodes are
highlighted in the grid, and are "activated" using the enter key
or a click in the primary column to open the sidepane.
Before: https://imgur.com/U1PG6Hr
After: https://imgur.com/eXgDE9D
Bug: 963183
Change-Id: I2c2629670624e807adb4cd9e9e9b75cdafbae7a5
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1881592
Commit-Queue: Brandon Goddard <brgoddar@microsoft.com>
Reviewed-by: Lorne Mitchell <lomitch@microsoft.com>
Reviewed-by: Jan Scheffler <janscheffler@chromium.org>
Until now, selected but not focused items with a
network error in the network pane where not distingushable
from items without a network error. This patch fixes
the problem by keeping the font red.
Bug: chromium:843014
Change-Id: I66b3d1b6466120beb13ad4380c44a8e94971c0f5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1821783
Reviewed-by: Yang Guo <yangguo@chromium.org>
Commit-Queue: Jan Scheffler <janscheffler@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#699708}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: fe8fa95baf39bae8a31c34a1bd8f08bd87163116
Until now, selected but not focused items with a
network error in the network pane where not distingushable
from items without a network error. This patch fixes
the problem by keeping the font red.
Bug: chromium:843014
Change-Id: I43097fdcd41b3fe4e7a4c893f1b61f9cd3dbeebf
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1787501
Commit-Queue: Yang Guo <yangguo@chromium.org>
Reviewed-by: Yang Guo <yangguo@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#696774}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: b3d552e5c70b6902d6e2b727ed957fb9e77862e9
Mathias Bynens
