Having the autocomplete element live outside of the components shadow
dom breaks accessibility of the editor. The console editor references
the autocomplete element by id through aria-activedescendant and
aria-controls but the id does not resolve as the editor is encapsulated
in shadow dom.
Bug: 1314078, 1314101
Change-Id: I414dbb7829bd2a1c6a0b1127422a0398263a598d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3581034
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Commit-Queue: Johan Bay <jobay@chromium.org>
Some labels of the checkboxes in the console settings didn't have titles
that explained the setting with a tooltip. This CL adds them for those
that were lacking.
Took the opportunity to introduce a helper function to extract and
remove redundant code.
Fixed: 1246785
Change-Id: Ic64234f580d137e739d80988a924533991fbe1b1
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3568993
Reviewed-by: Danil Somsikov <dsv@chromium.org>
Commit-Queue: Andres Olivares <andoli@chromium.org>
The live expression editor in the Console tab didn't commit the live
expression when hitting 'Enter', but was adding new lines instead. That
was quite different from other parts of the DevTools UI. Instead the
user would have to hit 'Ctrl-Enter'. This CL changes the editor to also
commit on 'Enter' (leaving the 'Ctrl-Enter' shortcut as well for now).
Fixed: chromium:1260744
Change-Id: I1cf54f26508be43cc8f6ffb915c577898bc6df93
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3563077
Commit-Queue: Benedikt Meurer <bmeurer@chromium.org>
Auto-Submit: Benedikt Meurer <bmeurer@chromium.org>
Reviewed-by: Danil Somsikov <dsv@chromium.org>
Commit-Queue: Danil Somsikov <dsv@chromium.org>
In https://crrev.com/c/3477109 the logic for the escape keybinding was
updated to hide the argument hints tooltip. However, this also overwrote
the default escape keybinding for the console panel. That's because we
returned `true` (which signals CodeMirror to stop propagation of
keybindings) regardless of the tooltip was open or not.
Now, we store the state of the tooltip and when we want to attempt to
close the tooltip, we check if it was actually opened. If it wasn't, we
return `false`, which means that the default escape keybinding behavior
is triggered. However, if we can find it, we close the tooltip as we did
before.
R=yangguo@chromium.org
Fixed: 1300115
Change-Id: I8ea5a490365b0f67e0f50056724d2fe495d2338b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3484203
Auto-Submit: Tim Van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Yang Guo <yangguo@chromium.org>
Commit-Queue: Tim Van der Lippe <tvanderlippe@chromium.org>
The console prompt is one of two places (the other being the edit
breakpoint prompt) that uses arguments hints. However, when the user
would show the arguments hints and be finished with it (e.g. hitting
escape or entering a command), they wouldn't properly hide.
The functionality is implemented in `cursor_tooltip`, which defines
the two view effects that trigger opening/closing the tooltip. However,
there was no outside access to these effects and they were not hooked
up to the corresponding view (in this case residing in `ConsolePrompt.ts`).
To make sure that the ConsolePrompt doesn't learn too much about the
inner workings of the text editor, we expose a separate function on
the JavaScript functionality of the editor. It dispatches the close
effect on the view, which ensures that the arguments hints tooltip
is properly hidden. This is also true for entering a command,
which is implemented in `handleEnter`.
Lastly, update the internal cursor_tooltip plugin to use private methods,
to clearly denote what is part of the public API (`update`) and what
isn't (the rest).
R=yangguo@chromium.org
Fixed: 1299196, 1299186
Change-Id: I650c25f42564be8992a849b6b8deefff51ff7826
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3477109
Auto-Submit: Tim Van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Yang Guo <yangguo@chromium.org>
Commit-Queue: Yang Guo <yangguo@chromium.org>
This is a first step towards evaluating expressions with source map
resolution in the console.
This patch only replaces single variables expressions with the name
inferred from the source map. The feature is behind a flag because it is
still far from being usable (e.g., no support for more complex
expressions, auto-complete, partial expression evaluation, fallback UI,
etc.).
Bug: chromium:1297047
Change-Id: I5d4a233f65cf27112c370eeb81c509cd3e14623d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3461558
Reviewed-by: Benedikt Meurer <bmeurer@chromium.org>
Reviewed-by: Kim-Anh Tran <kimanh@chromium.org>
Commit-Queue: Jaroslav Sevcik <jarin@chromium.org>
This CL changes how we render SyntaxErrors in the DevTools console.
SyntaxErrors don't contain a stack frame with the source position
where exactly the SyntaxError is. This is because V8 throws
SyntaxErrors while parsing, not at runtime. At most, the top-most
stack frame is a call to 'eval'.
This CL uses the info from `Runtime.getExceptionDetails` to append
the source location of the error to the console message.
Screenshot: https://imgur.com/a/x5HP11q
Please note that the Runtime.getExceptionDetails info is only
available when DevTools was already open when the script fails
to parse. This is because the inspector does not cache failed
parse events (opposed to successful script parses).
R=bmeurer@chromium.org
Bug: 1066909
Change-Id: Ibf013d978c13970a688326d9afb9bf0bb14eff99
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3461550
Reviewed-by: Benedikt Meurer <bmeurer@chromium.org>
Commit-Queue: Simon Zünd <szuend@chromium.org>
DevTools UI should behave like browser UI. Therefore interactive UI
elements should not need to change the mouse cursor to a hand with
pointing finger.
In particular, this CL removes `cursor: pointer` for
- toolbar icons
- buttons
- panel tabs (vertical and horizontal)
- issues hint icon
- computed styles
- Trust token delete button
- adorners
- data grid header for sorting
- code folding marker in CodeMirror
- animation previews
- DOM tree guttor '...' menu
- elements bread crumbs overflow buttons
- color blocks in CSS Overview
- device preset bars
- devices list items
- network request header and payload views
- Media panel
- delete buttons for watch expression and event listeners
Bug: 1291516
Change-Id: I182c43a43b94de31d1d8f2db4cd7831e82c535bb
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3447411
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Commit-Queue: Yang Guo <yangguo@chromium.org>
Until now, console group titles were always shown despite filter.
Now, a console message is shown if:
- its message content matches the filter
- the title of the group (or parent group, grand-parent group, etc.
matches the filter.
If a console message is shown, then the group it belongs to
(including parent group, grand-parent group, etc.) are also shown.
Fixed: 1068788
Change-Id: I04f280b185d183bd9992b9b65ef9a9d20da0a36f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3364094
Reviewed-by: Benedikt Meurer <bmeurer@chromium.org>
Commit-Queue: Yang Guo <yangguo@chromium.org>
Previously the DevTools console had some very limited support for ANSI
color codes, and only a single code could take effect at any point in
time (i.e. it was impossible to control both foreground and background
color at the same time).
With this change, we're adding support for controlling the font weight
and style, as well as the text decoration, via the respective ANSI color
codes. We also support setting foreground and background color via RGB
codes now. And there's support to reset individual display attributes or
all of them together.
All of this is implemented as state that is maintained between and
updated by ANSI color codes, so that you can now appropriately set both
the background and the foreground color.
The colors used were updated to make sense for the browser (i.e. some of
the color names used before weren't even valid in CSS). Now this is
using the standard VGA palette (including the brownish yellow color
trick).
Fixed: chromium:1282837
Bug: chromium:1282076
Change-Id: I3a1f9ef0de539cac595a2122e5eaf790fae04858
Doc: https://bit.ly/devtools-console-ansi-support
Before: https://imgur.com/aEhEUIe.png
After: https://imgur.com/PvjHOlZ.png
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3358537
Reviewed-by: Kim-Anh Tran <kimanh@chromium.org>
Commit-Queue: Benedikt Meurer <bmeurer@chromium.org>
In the `Linkifier` we'd previously try to make the `anchor` look like
the `fallbackAnchor` in place when a target was disposed, but that
for example missed the event handlers (i.e. they were still in place
afterwards). Since we already have the `fallbackAnchor` constructed
it's straight forward to just put it in place of the `anchor` in the
DOM tree.
Also don't override the `cursor` for `.devtools-link` in console
messages, but stick to the (system wide) defaults, which ensures that
links that aren't supposed to be clickable (have the `preventClick`
option set to a trueish value) don't change to a `pointer` cursor
even inside the Console panel.
Fixed: chromium:1272413
Bug: chromium:1270248, chromium:1271078
Change-Id: Ib3ee739b1e4742667072a7c2d4ab4fd30847a1de
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3295526
Reviewed-by: Kim-Anh Tran <kimanh@chromium.org>
Commit-Queue: Kim-Anh Tran <kimanh@chromium.org>
Auto-Submit: Benedikt Meurer <bmeurer@chromium.org>
The legacy datagrid expects all users of its API to call `.asWidget`,
but doesn't actually enforce doing that. The `ConsoleViewMessage`
wasn't calling `.asWidget`, as it doesn't use a proper widget structure
itself.
Instead, we can manually recreate the widget with a shadowroot boundary,
so that the styles can properly be injected. Additionally, we need
to carry over the `objectValue` styles that `ConsoleView` also injects
in its root.
R=alexrudenko@chromium.org
Bug: 1271191
Change-Id: If9934ef54d51a961d8c0df7f02b96c7d9b0a5b92
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3291585
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Auto-Submit: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
This effectively undoes the work-around for crbug/1211255 (which landed
as https://crrev.com/c/2910096), and which was made ineffective partly
by the fix for crbug/1271105, and replaces it with an easier (less
intrusive) solution: Instead of special casing promise rejection errors
from live expressions in console message grouping, we instead make sure
to properly await live expression results, which avoids the uncaught
promise rejection problem, and properly reports asynchronous errors
inside the live expression list (just like it's already the case for
synchronous errors).
Before: https://imgur.com/LjlDZtY.png
After: https://imgur.com/UBXAsYb.png
Fixed: chromium:1211255
Bug: chromium:1271105, chromium:1270248, chromium:1271078
Change-Id: Iee845047c93403bc6dc2ac7343e89fc149c8f968
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3289771
Auto-Submit: Benedikt Meurer <bmeurer@chromium.org>
Commit-Queue: Kim-Anh Tran <kimanh@chromium.org>
Reviewed-by: Kim-Anh Tran <kimanh@chromium.org>
Kateryna Prokopenko
