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 CL fixes an apparent focus issue in the Elements Event Listener
sidebar pane. When the event listener tree outline was made
keyboard accessible, it was given focus by default when navigating
to the event listener pane from a mouse click.
However, since the tree was not keyboard
focused or marked focus-visible, it appears that the Event Listener
tab is still focus.
The fix removes the focus method from the widget, which causes focus
to remain on the tabbed pane header, which was the previous behavior.
This does not change the keyboard navigation, as keyboard only users
would still use arrows to nav the Event Listener
tab pane and then tab into it. This is the same behavior as the
Styles pane.
Before video in the bug
After: https://imgur.com/2g7W9MC
Bug: 1114604
Change-Id: I103dccef37bfe605e6093bb0f0d4104e3670da14
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2351165
Reviewed-by: Jack Lynch <jalyn@microsoft.com>
Reviewed-by: Jose Leal <joselea@microsoft.com>
Commit-Queue: Brandon Goddard <brgoddar@microsoft.com>
As part of the initial seeding of the OWNERS, the automated scripts added
myself as OWNERS to pretty much every single folder in `front_end/`. This
is an artifact of the widespread infrastructure I have done, with in
particular the ES Modules migration that touched every single file in
DevTools.
In the past few weeks, several times I have received CLs were I was asked
to perform a domain review on the feature in question. Most of the time,
I have no knowledge of that particular feature.
To reduce confusion and roundtrips asking for different domain reviewers,
I removed myself as explicit OWNERS of these files. Note that I can still
use my INFRA_OWNERS to land changes, but as usual these are infra-only.
E.g. these will include the larger refactorings that span multiple features,
but not a single feature in particular.
I have kept myself OWNERS of folders that are part of the core
architecture of DevTools, as I am comfortable reviewing these as domain
reviewer.
R=yangguo@chromium.org,aerotwist@chromium.org
Change-Id: Ib1be70b97c5395498795b4b28ce7001731305d41
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2282516
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Commit-Queue: Yang Guo <yangguo@chromium.org>
Auto-Submit: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Yang Guo <yangguo@chromium.org>
This patch makes it so that all module.json files use the same
consistent indentation that matches .editorconfig and the rest
of the codebase. At the request of reviewers, one such file
(front_end/emulated_devices/module.json) has been excluded
from this patch. It will be reformatted in a separate CL.
Note that this patch does not “roll CodeMirror”, although a
pre-commit hook forces me to include that phrase in the commit
message because the module.json file in the relevant folder is
modified.
Bug: chromium:1070492
Change-Id: Ib31ed5232461e2f80bf05f31105fc919f6639b0a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2127007
Commit-Queue: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Simon Zünd <szuend@chromium.org>
This CL fixes an issue where focus being on a checkbox in the event
listener breakpoints pane prevents keydown events from being handled by
its parent treeElement, forcing the user to shift-tab to focus the tree
element and navigate the breakpoints tree. Since checkboxes are input
elements, UIUtils.isEditing() returns true if one is focused (preventing
treeElement._treeKeyDown from handling it). To keep the fix simple, I'm
just adding focus listeners to the checkboxes that focus their
treeElements. Pressing space on a treeElement toggles its checkbox, so
all functionality that you would have from focusing a checkbox is
preserved.
Screencasts from the bug: https://drive.google.com/drive/folders/11_47xiS-aMNXXQwvMP-9Or4Dr_QaZFdi?usp=sharing
Bug: 1058338
Change-Id: I4bbcbae29eb0b5dcdaf677388eca2f33be8ceab5
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2088117
Reviewed-by: Robert Paveza <Rob.Paveza@microsoft.com>
Reviewed-by: Brian Cui <brcui@microsoft.com>
Commit-Queue: Jack Lynch <jalyn@microsoft.com>
This CL changes references to self.SDK.targetManager (the global
instance of SDK.SDKModel.TargetManager) over to
SDK.SDKModel.TargetManager.instance(). To keep both TypeScript and
Closure happy we must make a method on the TargetManager class itself,
since it only allows private constructors to be accessed by static
methods on the class.
Bug: 1058320
Change-Id: I6ca35024c21cf24254fd6273138a1ab3e163ee00
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2088092
Commit-Queue: Paul Lewis <aerotwist@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
This CL fixes an issue where one or both of the two instances of the DOM
breakpoints pane (in Sources and Elements) fail to update when a
breakpoint is hit. There's a video in the linked bug showing more
specific repro steps, but the issue stems from three different
extensions in browser_debugger.json that reference
DOMBreakpointsSidebarPane: two views and a ContextFlavorListener. Unlike
every other view in the devtools, these ones define a factoryName rather
than a className. This makes the devtools create separate instances for
each rather than using runtime.sharedInstance(), which breaks
UI.Context._dispatchFlavorChange(), which does rely on
runtime.sharedInstance().
In order to make _dispatchFlavorChange() work properly with both the
Elements and Sources panel views, I replaced their factoryNames with
classNames, i.e. made them share an instance. Some minor changes to
ContainerWidget and _ExpandableContainerWidget were needed to make sure
the shared instance actually shows up where needed, but everything now
works as expected. An alternative would be to rework
Extension.instance() and ContextFlavorListener, but that seems more
invasive.
Bug: 973251
Change-Id: I288dea794518605f8f93c28c7826372dbaea2e1f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1984805
Commit-Queue: Jack Lynch <jalyn@microsoft.com>
Reviewed-by: Robert Paveza <Rob.Paveza@microsoft.com>
The Chromium/Google style guides does not enforce curly braces for
single-line if-statements, but does strongly recommend doing so. Adding
braces will improve code readability, by visually separating code
blocks. This will also prevent issues where accidental additions are
pushed to the "else"-clause instead of in the if-block.
This CL also updates the presubmit `eslint` to run the fix with the
correct configuration. It will now fix all issues it can fix.
Change-Id: I4b616f21a99393f168dec743c0bcbdc7f5db04a9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1821526
Commit-Queue: Tim Van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Yang Guo <yangguo@chromium.org>
Reviewed-by: Jeff Fisher <jeffish@microsoft.com>
Cr-Original-Commit-Position: refs/heads/master@{#701070}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 7e0bdbe2d7f9fc2386bfaefda3cc29c66ccc18f9
Since the current localization system uses a unique ID for each string that
is calculated based on the the md5 hash of the string, each string
in the grdp files needs to be unique. However, there are strings in the
frontend that appear multiple times. When such strings are moved across
folders, sometimes a seemingly random grdp file is changed by the autofix
script. (See https://crrev.com/c/1683826 for an example)
This CL introduces shared_strings.grdp, a file dedicated for strings that
are shared across folders/grdp files. Instead of putting these strings in
the grdp files that come first when sorted alphabetically, they live in
shared_strings.grdp and have common descriptions among all instances of
such strings. This way if shared strings need to be moved, it's more clear
what's going on.
Note that this CL contains a lot of changes that are generated automatically
(e.g. shared strings are removed from their current locations), so here's
the list of actual changes that need to be reviewed:
* shared_strings.grdp file is added to front_end/langpacks and front_end/langpacks/
devtools_ui_strings.grd
* path to shared_strings.grdp is added to scripts/localization_utils/localization_utils.js
* in scripts/localization_utils/check_localized_strings.js, the parser marks
strings that appear more than once as shared and set the target grdp file to be
shared_strings.grdp
* shared_strings.grdp file is checked by scripts/check_localizability.js for
localizability violations
* shared_strings.grdp messages have common descriptions added
Bug: 941561
Change-Id: I00db23854656509f2f03988e70adc0109b6e09d6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1800918
Reviewed-by: Yang Guo <yangguo@chromium.org>
Commit-Queue: Mandy Chen <mandy.chen@microsoft.com>
Cr-Original-Commit-Position: refs/heads/master@{#697667}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: d10bf7c5a97cf9184866c1117935c199bacf7ff3
Added DOM breakpoint accessibility testing. Slightly
modified the structure of the DOM Breakpoints list DOM (but
didn't alter its display) for more specificity in the CSS.
The test here is a little bit more involved than most of the
tests in the Elements pane, primarily because the process of
launching the DOM breakpoints list and creating them is a
bit more involved than other components of the tool.
Bug: 963183
Change-Id: I2543331f81d1ba96a7a0ddb6ca31dba214a1761a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1683826
Commit-Queue: Junyi Xiao <juxiao@microsoft.com>
Reviewed-by: Erik Luo <luoe@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#693957}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 06042315a66654aaa9a200f4b32179334f021518
Jack Franklin