ui/Tooltip.js overrides the HTMLElement prototype to override the
title property. Rather than using this property, we shoul be
calling Tooltip.install directly. This makes sure that new
components are not relying on the behavior of the legacy
prototype patching.
These usages have been manually audited using the following regexes:
Search: ([\S]+)\.title = ([^;]+);
Replace: UI.Tooltip.Tooltip.install($1, $2);
Note that there are classes in DevTools that also have a title
property. Most notably `TreeElement`. We should not be replacing
these, as they do not inherit from HTMLElement. Luckily, we are
running TypeScript to make sure we don't call `Tooltip.install`
with a non-HTMLElement.
A follow-up CL will clean up the getters.
R=jacktfranklin@chromium.org
Bug: 1150762
No-presubmit: True
Change-Id: I5928e75c70293531849e0576f4fb2a2a8b3e02d2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2555060
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Auto-Submit: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
When calling console.table on native JavaScript objects, the _buildTableMessage method looks the use the 'valuePreview.properties' array as the values to pass into console.table. Some native javascript objects present the 'valuePreview.properties' as an empty array causing no data to be passed or displayed. To account for this, a second condition is added which preserves the original functionality of the method, and asks if the 'properties' array is empty, use the object 'default values'.
Bug: chromium:1057090
Change-Id: I99e97aeb79a184a1101003e1ad5d2a04dce63439
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2481736
Commit-Queue: Sigurd Schneider <sigurds@chromium.org>
Reviewed-by: Sigurd Schneider <sigurds@chromium.org>
This CL makes the type property on SDK.ConsoleModel.ConsoleMessage read-
only and refactors the ConsoleViewMessage to remove the console.table
related logic to the derived class ConsoleTableMessageView.
Bug: chromium:1140516
Change-Id: I18cb3fa938da40ddf024df7ca01025fec6396585
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2498231
Reviewed-by: Wolfgang Beyer <wolfi@chromium.org>
Commit-Queue: Sigurd Schneider <sigurds@chromium.org>
This patch replaces unwelcoming language with better terms.
Generally, the following replacements are made:
- whitelist → allowlist
- blacklist → blocklist
However, in some cases where “whitelist” was used as part of the
function name (e.g. `isWhitelistedProperty`) it felt more natural to
simplify the name (i.e. `isAllowedProperty` instead of the slightly
awkward `isAllowlistedProperty`).
This patch does not change third_party dependencies nor Lighthouse.
It also leaves `setWhitelistedShortcuts` for now, since renaming that
requires changes in Blink.
Change-Id: I56712d15b32b6a4259ccb333de6edd5fc62ee03f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2238229
Reviewed-by: Yang Guo <yangguo@chromium.org>
Commit-Queue: Mathias Bynens <mathias@chromium.org>
This CL changes references to self.Common.settings (the global
instance of SDK.Common.Settings) over to
Common.Settings.Settings.instance(). To keep both TypeScript and
Closure happy we must make a method on the Settings class itself,
since it only allows private constructors to be accessed by static
methods on the class.
Bug: 1058320
Change-Id: I04afc8caf64acf29cdda13ef03ad05cfff4786a1
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2091450
Commit-Queue: Paul Lewis <aerotwist@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
When the content size in ObjectPropertiesSection exceeds a given value, UIUtils.createExpandableText was previously used to provide 'Show More' and 'Copy' buttons inline with the abbreviated text.
This CL eliminates createExpandableText and introduces the ObjectPropertyValue and ExpandableTextPropertyValue classes. These classes live in ObjectPropertiesSection.js (as opposed to UIUtils) since they are closely related to ObjectPropertiesSection / ObjectPropertyTreeElement.
Previously, value element factory methods in ObjectPropertiesSection returned raw elements which limited options for an accessibility implementation. Now, these factory methods return an ObjectPropertyValue instance or ExpandableTextPropertyValue when applicable.
ObjectPropertyValue is a wrapper around basic property value types. ExpandableTextPropertyValue extends ObjectPropertyValue and replaces createExpandableText.
ExpandableTextPropertyValue implements UI.ContextMenu.Provider so that the components that own instances of these classes can add 'Show more' and 'Copy' buttons to the context menu, ensuring that expandable text functionality is keyboard accessible.
This CL also makes changes visual changes to expandable text including making the 'Copy' and 'Show more' adornments smaller relative to the property text and only showing abbreviated text inside the property tooltip.
Before: https://gyazo.com/517cfe9eef7b62da8c35c3253a7a38c0
After: https://gyazo.com/0345babe8b983e04e4cd25d76fcca5ee
Change-Id: Ia24ad2ef64840932eb2deb4bc7e6c83dbc454758
To verify:
run the following in the DevTools console:
console.log({
longstring: [...Array(5000).keys()].join('')
})
The resulting object displayed in the console will use ObjectPropertiesSection with expandable text.
Open the context menu on the longstring property to test the change.
Change-Id: Ia24ad2ef64840932eb2deb4bc7e6c83dbc454758
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1958580
Commit-Queue: Connor Moody <connor.moody@microsoft.com>
Reviewed-by: Robert Paveza <Rob.Paveza@microsoft.com>
Issue:
- Data grids in DevTools do not have an aria-label
- There are a ton of DataGrid parameters and adding one is messy
Changes:
- Naming all data grids
- Created DataGrid.Datagrid.Parameters type to hold data grid parameters (including a required gridName field)
Bug: 963183
Change-Id: I83b130d468fb80034be264b45b86b799f650e978
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1891652
Commit-Queue: Michael Liao <michael.liao@microsoft.com>
Reviewed-by: Robert Paveza <Rob.Paveza@microsoft.com>
Issue: Keyboard accessibility in console is inconsistent when datagrids are present.
Shift + Tab in console prompt takes you to the last console message, beyond which arrow keys let you navigate through console messages.
When console.table creates datagrids, the original tabIndex for these is 0, which immediately take focus on shift+tab. This has now been updated to -1, since keyboard focus is not needed in console datagrids. Sorting functionality is still keyboard accessible using context menu key.
Gif: https://imgur.com/a/jlGCoFg
Bug: 963183
Change-Id: I5996505724f66530b8e4f73379e7d196eb3d013f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1873358
Reviewed-by: Lorne Mitchell <lomitch@microsoft.com>
Commit-Queue: Anubha Mathur <anubmat@microsoft.com>
Make all console message anchor source links keyboard accessible by
adding the anchor element to the _selectableChildren array in the
ConsoleViewMessage UI component which will use _selectableChildren to
manage keyboard navigation and focus.
This is required to meet WCAG 2.1.1 Keyboard success criteria.
See: https://www.w3.org/WAI/WCAG21/quickref/#keyboard
For the tests I added an additional ArrowUp or ArrowDown to move focus
to the original desired target under test, occasionally I would include
the content of the source link in the test's expected results for
additional guards against regressions.
on the previous message, then use the up and down arrow keys to navigate
between visible links within the console messages.
Screenshot: https://i.imgur.com/ZUDFsUV.png
Gif: https://i.imgur.com/UlhVhwn.gifv
Test: Put focus in the console input, then use Shift + Tab to set focus
Bug: 963183
Change-Id: I8e094506adeed099a2b0c1b81c4b4394f83129a6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1638137
Commit-Queue: John Emau <John.Emau@microsoft.com>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Yang Guo <yangguo@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#702981}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 5b7e51e53cf3209007d9cb43e28f292d38c90810
Tim van der Lippe
