Tim van der Lippe
19a45dfd55
Remove is_legacy_javascript_entrypoint
...
This removes the now-obsolete is_legacy_javascript_entrypoint build flag,
which was used as part of the devtools_entrypoint migration.
This uncovered that accessibility was still using devtools_pre_built
and a file was missing from the GRD variable.
R=aerotwist@chromium.org ,jacktfranklin@chromium.org
Fixed: 1101738
Change-Id: Ie1556ccc1d1563c855417de18e896308de0cfe19
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2356305
Reviewed-by: Paul Lewis <aerotwist@chromium.org >
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org >
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org >
2020-08-28 12:32:29 +00:00
Patrick Brosset
6b329fd516
Grid: Move the list of grids below settings in the Layout pane
...
There can be many grids on a page, which means a lot of scrolling is
required to access the settings in the Layout panel.
Also the settings section is really small, so moving it up top won't
make it considerably harder to access the grids.
Before: https://imgur.com/yfoFGmA.jpg
After: https://imgur.com/nOwhC1D.jpg
Bug: 1122493
Change-Id: I0d42527ca35de32468656ac440415dd226fc06e2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2379215
Reviewed-by: Jose Leal <joselea@microsoft.com >
Reviewed-by: Changhao Han <changhaohan@chromium.org >
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com >
2020-08-28 08:06:58 +00:00
Tim van der Lippe
80d8265054
[globals] self.UI.inspectorView
...
R=szuend@chromium.org
Bug: 1058320
Change-Id: If282650f584d4db45c0a6260e102f044791f759d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2379692
Reviewed-by: Simon Zünd <szuend@chromium.org >
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org >
2020-08-27 14:16:55 +00:00
Changhao Han
f51d07946b
Add UMA for showing sidebar panes
...
Backend CL: https://crrev.com/c/2378025
Bug: chromium:1119895
Change-Id: I5c24b4b49437cea977bcdddc6327cb3702fa88c4
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2377585
Reviewed-by: Mathias Bynens <mathias@chromium.org >
Reviewed-by: Patrick Brosset <patrick.brosset@microsoft.com >
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org >
Commit-Queue: Changhao Han <changhaohan@chromium.org >
2020-08-27 12:02:55 +00:00
Tim van der Lippe
82bfa12e5b
[globals] Migrate extensionServer to instance method
...
R=szuend@chromium.org
Bug: 1058320, 1122000
Change-Id: I1d9e614321d8c1303ad83388c019c15b83d393a6
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2376813
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org >
Reviewed-by: Philip Pfaffe <pfaffe@chromium.org >
Reviewed-by: Simon Zünd <szuend@chromium.org >
Auto-Submit: Tim van der Lippe <tvanderlippe@chromium.org >
2020-08-27 10:46:55 +00:00
Andres Olivares
b850e12b0b
Fix bug causing 'Computed frames' move slightly towards right side when checking/unchecking the 'Show all' check box.
...
The disappearance of the scrollbar of the styles pane caused the component to offset to the right. The 'overflow'property in the style of the component was set to 'scroll' so the bar will always show.
Fixed: 1112681
Change-Id: Ic84c4deaff914be6c68b2b4ce1ce223c67352f2f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2367354
Auto-Submit: Andres Olivares <andoli@chromium.org >
Commit-Queue: Andres Olivares <andoli@chromium.org >
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org >
2020-08-27 05:22:05 +00:00
Christy Chen
447a462be3
[Elements] Update hideSearchHighlights codepath
...
this._treeElementForNode(searchResult.node) is the combined of the two lines that get removed in this CL.
Even though they are basically the same, this CL change it to use the one-line solution for two reasons:
1. To match how the currentSearchHighlights is done (also calls the one-line solution here https://source.chromium.org/chromium/chromium/src/+/master:third_party/devtools-frontend/src/front_end/elements/ElementsPanel.js;drc=d1a00aacb9ad57775cee6cff5e0dac11b7e1ca59;l=650?originalUrl=https:%2F%2Fcs.chromium.org%2F ), so the highlight/un-highlight codepath could be more consistent
2. So we dont need extra steps here to guard against the unhandled exception when treeOutline is null in the two-line solution
Bug: 1121459
Change-Id: I680a2e0fbcf141fbea85c7030752b6ce0dd4a30c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2374285
Reviewed-by: Patrick Brosset <patrick.brosset@microsoft.com >
Reviewed-by: Michael Liao <michael.liao@microsoft.com >
Commit-Queue: Christy Chen <chrche@microsoft.com >
2020-08-27 03:45:15 +00:00
Alex Rudenko
b77998026e
Simplify the grid tooling settings
...
This CL simplifies the Layout settings for grids according to the
latest design.
Screenshot: https://i.imgur.com/g31WbOz.png
Backend CL: https://crrev.com/c/2367833
Bug: 1109177
Change-Id: Ibbba60cc80aa5bc0903ca386e41b6c81fdcd4f0c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2366793
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org >
Reviewed-by: Patrick Brosset <patrick.brosset@microsoft.com >
Reviewed-by: Mathias Bynens <mathias@chromium.org >
2020-08-26 10:45:25 +00:00
Christy Chen
78e04aa483
[Elements]: Fixing issue when searchConfig is unexpectedly undefined
...
In ElementsPanel.js, when jumpToNextSearchResult() or jumpToPreviousSearchResult() is called, this._searchConfig can be undefined which cause the next callstack _performSearch to throw unhandled exceptions when attempting to get searchConfig.query at this line https://source.chromium.org/chromium/chromium/src/+/master:third_party/devtools-frontend/src/front_end/elements/ElementsPanel.js;drc=d1a00aacb9ad57775cee6cff5e0dac11b7e1ca59;l=510?originalUrl=https:%2F%2Fcs.chromium.org%2F
The reason that this._searchConfig can be undefined is mentioned in this bug https://bugs.chromium.org/p/chromium/issues/detail?id=1078578 . In this case ElementsPanel.searchCanceled deleted the searchConfig before _preformSearch.
Bug: 1121086
Change-Id: I71d28c530d228647e518144e8fcdff17001f869e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2371749
Reviewed-by: Jose Leal <joselea@microsoft.com >
Reviewed-by: Michael Liao <michael.liao@microsoft.com >
Commit-Queue: Christy Chen <chrche@microsoft.com >
2020-08-25 03:27:56 +00:00
Jesus David Garcia Gomez
a121324490
Hide color picker on scroll
...
This CL fixes an issue with the color picker in overlay going
outside of the DevTools scrolling. See: https://i.imgur.com/O6YZeKv.gif
This CL mimics the behavior of the scrollbar, hiding the color picker
when scrolling. See: https://i.imgur.com/HgfomZP.gif
Bug: 1116327
Change-Id: Id520e9253d4d4e8aab106d2cf642e8ee2c265d7f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2367357
Reviewed-by: Mathias Bynens <mathias@chromium.org >
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org >
Reviewed-by: Brian Cui <brcui@microsoft.com >
Commit-Queue: Jesus David Garcia Gomez <jegarc@microsoft.com >
2020-08-24 21:25:16 +00:00
Patrick Brosset
d996f5589a
Allow horizontal scrolling in the Elements tree
...
The Elements tree does not scroll horizontally for now.
In most cases, it's good, because some nodes tend to be quite long, and
it's better to have them wrap on multiple lines so you can still see
everything at once without constantly scrolling left and right (which,
depending on the mouse/trackpad device you use, can be difficult).
However, we often run in cases where the lack of horizontal scrollbar is
a problem:
- long attribute values, such as urls wrap in places where it doesn't
make much sense and are harder to read
- more importantly: some web pages have deeply nested DOM trees, so much
that after a point, the nodes have so much left indentation that they
have no space left to the right to display any content. So you can be in
situations where a node is displayed 1 character at a time, over many
lines. Or even worse, certain nodes are not visible anymore.
This change removes the overflow-x:hidden CSS property so the Elements
panel can scroll if needed.
The change still retains the nodes' abilities to wrap (using
word-break: normal; make them wrap at word boundaries only) so in a lot
of cases, nothing will change for users.
However, this also introduces a minimum width for every node in the tree
which will force the horizontal scrollbar to appear after a point, and
will make sure each node has at least that much horizontal space to
display content.
Before/after example screenshot: https://imgur.com/MPO04CU.jpg
Bug: 880265
Change-Id: Ia3bfc1476868ce31ab8ac2f0d8adc59c61894d90
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2366972
Reviewed-by: Kalon Hinds <kahinds@microsoft.com >
Reviewed-by: Changhao Han <changhaohan@chromium.org >
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com >
2020-08-24 20:04:26 +00:00
Peter Marshall
de3fee7783
css: Remove our implementation of data-keyboard-focus
...
The web platform has :focus-visible now which does this for us.
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
A previous CL changed all of our CSS selectors over to rely on
focus-visible instead.
For the use cases where we called markAsFocusedByKeyboard() manually
from UI components, these still work as intended because the
:focus-visible implementation tracks this for us so manually
focusing the element with .focus() will still result in :focus-visible.
The elementIsFocusedByKeyboard() calls were replaced by checking if
:focus-visible is on the element or not. This is not a very good way
to do this, but fixing it is outside the scope of this CL.
Change-Id: I429adf7b1e7d8a8f2520cc75d0e8a0e50cfada32
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2352239
Commit-Queue: Peter Marshall <petermarshall@chromium.org >
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org >
Reviewed-by: Kalon Hinds <kahinds@microsoft.com >
Reviewed-by: Brandon Goddard <brgoddar@microsoft.com >
2020-08-24 14:18:41 +00:00
Peter Marshall
9a3d85fa0b
css: Use :focus-visible instead of our custom data-keyboard-focus
...
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 >
2020-08-24 07:58:42 +00:00
Peter Marshall
fa88d70d52
Always show :focus-visible options
...
We checked if this existed before because it was behind a flag.
With M86 this now ships by default.
Change-Id: I0ea3b13ab61b26bb1e16526d58202927d8d15c45
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2352710
Commit-Queue: Peter Marshall <petermarshall@chromium.org >
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org >
2020-08-24 07:48:47 +00:00
Changhao Han
0a98cc54ea
Implements grouped Computed styles in the Computed tab
...
Design doc: https://goo.gle/devtools-computed-styles
Screencast: https://imgur.com/a/n8Y7jXH
Updated screencast for expanding by default: https://imgur.com/a/0CUnlch
Bug: chromium:1096230, chromium:1084673, chromium:1106251
Change-Id: Ib6f22de5f96cb7e35fe60730c186cbde7d2905fe
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2360377
Reviewed-by: Changhao Han <changhaohan@chromium.org >
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org >
Reviewed-by: Mathias Bynens <mathias@chromium.org >
Commit-Queue: Changhao Han <changhaohan@chromium.org >
2020-08-21 21:30:00 +00:00
Alex Rudenko
5d93c7e064
Move Layout pane to the 3rd position in the sidebar
...
This CL makes the Layout pane more prominent by moving it to the
3rd position in the sidebar.
Screenshot: https://i.imgur.com/MOwlx6q.png
Bug: 1109177
Change-Id: I4837644d815eee8a57848bd4a92501556d56f4dd
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2366732
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org >
Reviewed-by: Mathias Bynens <mathias@chromium.org >
Reviewed-by: Changhao Han <changhaohan@chromium.org >
Reviewed-by: Patrick Brosset <patrick.brosset@microsoft.com >
Reviewed-by: Brandon Goddard <brgoddar@microsoft.com >
2020-08-21 07:49:37 +00:00
Alex Rudenko
7529de9714
Show grid elements across iframes
...
This CL adds subscriptions to all DOM models in order to display
grid nodes for all iframes found on the page (including out-of-process
ones).
Bug: 1109177
Change-Id: Ifa4962969793b4e173cd4d15612afd43be957edd
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2366795
Reviewed-by: Mathias Bynens <mathias@chromium.org >
Reviewed-by: Brandon Goddard <brgoddar@microsoft.com >
Reviewed-by: Changhao Han <changhaohan@chromium.org >
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org >
2020-08-21 07:47:57 +00:00
Tim van der Lippe
b36c2d9991
Revert "Remove Properties subpane from Elements panel"
...
This reverts commit 5f6928b957https://docs.google.com/document/d/16-PSJSb6BE9Wx2Nn9rYtQOCiDa9-cLwr3R7gk0MirvM/edit?usp=sharing
> Screenshot: https://imgur.com/a/v4wYE3R
>
> R=aerotwist@chromium.org
>
> Change-Id: I137d3f338e4b99ef4de15ced618007991da172ef
> Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2157037
> Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org >
> Auto-Submit: Tim van der Lippe <tvanderlippe@chromium.org >
> Reviewed-by: Paul Lewis <aerotwist@chromium.org >
Change-Id: I03e2bc62feab1b5399e055d6f8d01eef51927c88
Fixed: 1105205, 1116085
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2366782
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org >
Reviewed-by: Yang Guo <yangguo@chromium.org >
2020-08-20 13:14:05 +00:00
Jack Franklin
314b8c8aea
Fix empty function bodies in component bridges
...
If we have a helper method that returns data, TS will moan about there
not actually being a return in the function body. Adding code that
throws an error fixes this and is safe as this bridge code is never
executed, it exists to satisfy our compilers.
Change-Id: Iff34733adac4267ff04aff1ba0bb58a38c71dd6b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2366794
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org >
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org >
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org >
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org >
2020-08-20 09:54:55 +00:00
Alex Rudenko
320d83cddb
Fix LayoutPane icon appearance in dark mode
...
Fixed the Reveal element icon in the dark mode and, as a drive-by,
extracts LayoutPane's CSS into a separate file (+ 1 problem fixed
by CSS linter).
Bug: 1109177
Change-Id: Iaa02d93aae6f74aab520e70093584870e4fa5c46
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2364356
Reviewed-by: Mathias Bynens <mathias@chromium.org >
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org >
2020-08-20 06:47:24 +00:00
Alex Rudenko
550dc4dab5
Extract node text into separate component
...
This CL extracts the node text (e.g., tag#id.class1.class2) into
a separate component and uses it in LayoutPane and ElementsBreadcrumbs.
Bug: 1109177
Change-Id: I933e99f4600ff8b59e737f1f5d25405377790395
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2362580
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org >
Reviewed-by: Mathias Bynens <mathias@chromium.org >
Reviewed-by: Changhao Han <changhaohan@chromium.org >
2020-08-20 06:32:04 +00:00
Sigurd Schneider
bf71b9b910
Add HeavyAd adorner in Elements panel
...
Screenshot: https://imgur.com/a/7fmxlj1
Bug: chromium:1095617, chromium:1109726
Change-Id: I2cefe92936ee89e151ab7613c354a4f561c78ff3
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2302602
Commit-Queue: Sigurd Schneider <sigurds@chromium.org >
Reviewed-by: John Delaney <johnidel@chromium.org >
Reviewed-by: Changhao Han <changhaohan@chromium.org >
2020-08-19 16:54:58 +00:00
Tim van der Lippe
d1a00aacb9
[globals] self.UI.context
...
R=jacktfranklin@chromium.org
Bug: 1058320
Change-Id: Icc1d806782e7624fff02e719670a2cca59070ddd
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2364594
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org >
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org >
2020-08-19 16:24:38 +00:00
Tim van der Lippe
177c0b260b
[globals] UI.ActionRegistry
...
R=jacktfranklin@chromium.org
Bug: 1058320
Change-Id: I86fdc670c6667f37bfced2d9068106ec553d2210
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2364370
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org >
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org >
Auto-Submit: Tim van der Lippe <tvanderlippe@chromium.org >
2020-08-19 15:24:18 +00:00
Jack Franklin
560b983ff5
Disable ESLint on bridge files
...
They are auto-generated so we don't really need to worry about linting them.
Change-Id: If56aa522507ffb513a5e2b16cc8aab3cb938a504
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2362575
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org >
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org >
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org >
2020-08-18 16:56:38 +00:00
Jack Franklin
fb0426e172
Rename Element => LayoutElement in LayoutPane
...
`Element` clashes with the TypeScript built-in and the bridge generation
gets confused now we have code to tell it that `Element` is a built-in
type.
I will work on a CL that errors when generating these bridges so that
this is spotted.
Change-Id: Ie6cb79bed29803728277233b4eb7ea53a8ff7af8
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2362568
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org >
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org >
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org >
2020-08-18 13:43:48 +00:00
Alex Rudenko
21a9ca3799
Add a button to reveal the element to the Layout pane
...
Screenshot: https://i.imgur.com/vmq7XEZ.png
Bug: 1109177
Change-Id: Ib23d775890952651681d2e81c00db5d94a9741b8
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2360017
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org >
Reviewed-by: Mathias Bynens <mathias@chromium.org >
Reviewed-by: Changhao Han <changhaohan@chromium.org >
2020-08-18 07:10:18 +00:00
Patrick Brosset
78fa1f578a
Remove the previewed class when pressing Escape in the .cls pane
...
When typing new classes in the .cls pane, they get applied to the
selected element as you type, in order to be previewed live.
However, if you press Escape, the classes go away from the .cls pane
but they stay on the element itself.
They should not.
This change fixes that by making sure we re-apply the active classes
when this happens.
It also adds a new e2e test for the .cls panel.
Gif of the fix: https://imgur.com/BjDiEQY.gif
Bug: 1114726
Change-Id: If5823db63c504e3502513bd09e9a82c0cfa0d612
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2354238
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org >
Reviewed-by: Tony Ross <tross@microsoft.com >
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com >
2020-08-17 16:01:46 +00:00
Patrick Brosset
4c7d5ed732
Layout: Remove the Grid Border setting from the layout pane
...
The grid border setting isn't something we think users are going to
need to configure when highlighting grids in the page.
It's useful to have this ability at the CDP level so we can create
interesting grid visualizations from elsewhere.
Bug: 1116367
Change-Id: Iaeadc2c01237f0ea8197569203459149676d2d64
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2355612
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com >
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org >
2020-08-17 14:56:46 +00:00
Alex Rudenko
0e97afad48
Add Node change listeners to Layout pane
...
This CL adds listeners for DOMNode changes to the Layout pane.
Bug: 1109177
Change-Id: I13e0ae67117772b8ce6e05d27aea04b0575e207f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2354103
Reviewed-by: Changhao Han <changhaohan@chromium.org >
Reviewed-by: Patrick Brosset <patrick.brosset@microsoft.com >
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org >
2020-08-14 12:38:17 +00:00
Patrick Brosset
bf746e6480
Layout: Display class/id-less elements just with their tagname
...
When an element has no classes or ids, the Layout panel was still
previewing it as div. (with the dot at the end).
Now, with this change, we make sure that no empty classes are generated
in the UI.
Before: https://imgur.com/L0Gn7p5.jpg
After: https://imgur.com/nsdcUQF.jpg
Bug: 1116353
Change-Id: I2d8bb67f43bd003a3f80cd8c960c8a7d1e8d7992
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2355316
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org >
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com >
2020-08-14 09:09:42 +00:00
Alex Rudenko
ba962c6aff
Regenerate bridge for LayoutPane
...
This CL regenerates the bridge file for Layout pane
given recent improvements in the generator.
Change-Id: Id12f209c3188c2db30c738d93d74524d9503b9bf
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2354100
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org >
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org >
2020-08-14 09:08:37 +00:00
Patrick Brosset
0bfb94c8ce
Force a screen reader pause between a tag name and attributes
...
When focused on a <div id="..."> element in the Elements panel, a screen
reader will announce "divid", which is confusing.
This change adds an aria-label to the tag name part of the previewed
element. This forces screen readers to announce the tag name separately
from the attributes.
With this change, screen readers will announce "div", then pause, then
announce "id".
Worth noting though: the word "div" will be spelled out (at least on
Windows Narrator) as "D" "I" "V". I guess that's expected as div is not
a word. Other tags such as span, body, script will be read as normal
words. However I wouldn't expect that to be the case for the tag html,
so I'm inclined to think that spelling out div too isn't a problem.
Bug: 1115449
Change-Id: I479f38c2db6ea5c068ecacf4c9a482f8cc8168a3
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2351163
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com >
Reviewed-by: Brandon Goddard <brgoddar@microsoft.com >
Reviewed-by: Jack Lynch <jalyn@microsoft.com >
2020-08-14 08:22:07 +00:00
Changhao Han
cd45b42b02
Fix adorner dark mode styles
...
I've also moved the dark-mode-related style out to the host because
this .theme-with-dark-background is more of the host's styling logic,
and shouldn't be the logic of Adorner.
screencast: https://imgur.com/a/SHXloTg
Bug: chromium:1116310
Change-Id: I0647c7b6b97042f4c6a4257dc746b4be6f641c6f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2354102
Commit-Queue: Changhao Han <changhaohan@chromium.org >
Commit-Queue: Mathias Bynens <mathias@chromium.org >
Auto-Submit: Changhao Han <changhaohan@chromium.org >
Reviewed-by: Mathias Bynens <mathias@chromium.org >
2020-08-14 06:41:54 +00:00
Changhao Han
c71a9c2930
Enable real-time grid adorner
...
Grid design doc: https://docs.google.com/document/d/1W40pBHV9NearidljNYiXNAT15zsxCgoVXlKYolkW9-E/edit
Backend CL: https://crrev.com/c/2246587
Screencast: https://imgur.com/a/tONHmbE
Bug: chromium:1066772, chromium:1047356
Change-Id: Iaf742678e016949bc9c73f639f2a4865a7c66b4c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2352715
Commit-Queue: Changhao Han <changhaohan@chromium.org >
Reviewed-by: Mathias Bynens <mathias@chromium.org >
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org >
2020-08-13 17:39:30 +00:00
Jack Franklin
a22614c51d
Regenerate all bridge files
...
* Adds a MANUALLY_EDITED_BRIDGE note on LayoutPane pending improved enum supports.
* Makes the regen script run clang-format to avoid diffs that are only formatting.
Change-Id: Ie5768c24a61bb3809b6bf337348d604aa4c17cd2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2354099
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org >
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org >
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org >
2020-08-13 14:42:01 +00:00
Alex Rudenko
034db88ad6
Show list of grid elements in Layout pane
...
This CL adds a list of grid elements to the Layout pane and
synchronises the overlay state with adorners. The ability to navigate
to an element or configure the colors will be done in follow-up CLs.
Screenshot: https://i.imgur.com/y8bsLzk.png
Bug: 1109177
Change-Id: I7700a37e1e8b03b48e3e4394f3e6c95a41d543f0
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2352712
Reviewed-by: Patrick Brosset <patrick.brosset@microsoft.com >
Reviewed-by: Changhao Han <changhaohan@chromium.org >
Reviewed-by: Mathias Bynens <mathias@chromium.org >
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org >
2020-08-13 13:48:40 +00:00
Simon Zünd
86c9a71349
Revert "Remove the previewed class when pressing Escape in the .cls pane"
...
This reverts commit 2b36c8eb3ehttps://logs.chromium.org/logs/devtools-frontend/buildbucket/cr-buildbucket.appspot.com/8872113825677060768/+/steps/E2E_tests/0/stdout
Times out "consistently" at "The Classes pane can add multiple classes at once".
Original change's description:
> Remove the previewed class when pressing Escape in the .cls pane
>
> When typing new classes in the .cls pane, they get applied to the
> selected element as you type, in order to be previewed live.
> However, if you press Escape, the classes go away from the .cls pane
> but they stay on the element itself.
> They should not.
>
> This change fixes that by making sure we re-apply the active classes
> when this happens.
> It also adds a new e2e test for the .cls panel.
>
> Gif of the fix: https://imgur.com/BjDiEQY.gif
>
> Bug: 1114726
> Change-Id: I393243b469b416b7fd001a096cda08aa10e8bce2
> Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2346775
> Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com >
> Reviewed-by: Jack Franklin <jacktfranklin@chromium.org >
> Reviewed-by: Tony Ross <tross@microsoft.com >
TBR=tross@microsoft.com ,jacktfranklin@chromium.org ,patrick.brosset@microsoft.com
Change-Id: I07d13d65bcc7b387b20997ee60437253378d5fa4
No-Presubmit: true
No-Tree-Checks: true
No-Try: true
Bug: 1114726
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2352717
Reviewed-by: Simon Zünd <szuend@chromium.org >
Commit-Queue: Simon Zünd <szuend@chromium.org >
2020-08-13 06:06:11 +00:00
Patrick Brosset
2b36c8eb3e
Remove the previewed class when pressing Escape in the .cls pane
...
When typing new classes in the .cls pane, they get applied to the
selected element as you type, in order to be previewed live.
However, if you press Escape, the classes go away from the .cls pane
but they stay on the element itself.
They should not.
This change fixes that by making sure we re-apply the active classes
when this happens.
It also adds a new e2e test for the .cls panel.
Gif of the fix: https://imgur.com/BjDiEQY.gif
Bug: 1114726
Change-Id: I393243b469b416b7fd001a096cda08aa10e8bce2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2346775
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com >
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org >
Reviewed-by: Tony Ross <tross@microsoft.com >
2020-08-12 15:33:47 +00:00
Jack Franklin
a3a4d042ed
Rename newBreadcrumbs => breadcrumbs
...
They've been landed long enough that I think this is a safe change to make!
Change-Id: I0d64c0dc30ea407b66acb84b87c5bd2096944490
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2352232
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org >
Commit-Queue: Simon Zünd <szuend@chromium.org >
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org >
Reviewed-by: Simon Zünd <szuend@chromium.org >
2020-08-12 14:08:47 +00:00
Changhao Han
d2454323cb
TS-componentize Computed tab's style property and style trace elements
...
This also helps future work, for example, Computed style grouping,
to be TS-componentized as well.
Bug: chromium:1106251, chromium:1096230
Change-Id: I2f8a977f4e3f701905354cb4edb15702cb8cd2a3
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2336723
Commit-Queue: Changhao Han <changhaohan@chromium.org >
Reviewed-by: Paul Lewis <aerotwist@chromium.org >
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org >
Reviewed-by: Mathias Bynens <mathias@chromium.org >
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org >
2020-08-11 13:52:51 +00:00
Alex Rudenko
a39d214440
Layout pane
...
This CL adds a new layout panel to the sidebar in Elements. Currently,
the pane only displays CSS Grid settings. In the future, the list of
all CSS grids will show up above the settings. The new panel is behind
the CSS Grid experiment flag.
Screenshot: https://i.imgur.com/T5Kd5Wi.png
Bug: 1109177
Change-Id: I7b5620ce6818df68d1f9cb36975be3679ca16837
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2317315
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org >
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org >
Reviewed-by: Paul Lewis <aerotwist@chromium.org >
Reviewed-by: Changhao Han <changhaohan@chromium.org >
Reviewed-by: Brandon Goddard <brgoddar@microsoft.com >
Reviewed-by: Patrick Brosset <patrick.brosset@microsoft.com >
Reviewed-by: Peter Müller <petermueller@chromium.org >
Reviewed-by: Mathias Bynens <mathias@chromium.org >
2020-08-11 05:46:01 +00:00
Jack Franklin
7ab2274db3
getStyleSheets helper for components
...
The `getStyleSheets` helper provides an API for new components to read CSS from
the runtime cache and get back a stylesheet (or multiple in the case of theme
patching) that they can then adopt into the shadow root.
Long term we don't want to tie ourselves to this way of doing CSS, but at least
by providing an API for it we can swap out the implementation without requiring
large rewrites for any of the components we build.
Change-Id: Id72dcb449701f11a524e91742bc095721e62d0db
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2339557
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org >
Reviewed-by: Paul Lewis <aerotwist@chromium.org >
2020-08-10 10:59:55 +00:00
Simon Zünd
c7ca0c4966
Remove pre-built from issues/BUILD.gn
...
Drive-by: Remove unused pre-built imports.
Change-Id: I821ba3ad9b7d16bbbcd09fa8c476f81915f94598
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2335063
Commit-Queue: Simon Zünd <szuend@chromium.org >
Auto-Submit: Simon Zünd <szuend@chromium.org >
Reviewed-by: Paul Lewis <aerotwist@chromium.org >
2020-08-10 10:21:56 +00:00
Paul Lewis
6d4ebb2006
Reland "Reland "Updates elements to devtools_module""
...
This reverts commit 340bd16cd304858cf7ddhttps://ci.chromium.org/p/devtools-frontend/builders/ci/Stand-alone%20Linux/2582
>
> To reproduce locally, check out the commit before this revision,
> do a clean build, then check out this revision, and do a build.
> This will succeed but rewrite source files (which it shouldn't).
>
>
> Original change's description:
> > Reland "Updates elements to devtools_module"
> >
> > This reverts commit 22d876ca0281e818fad8https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2329779
> > > > Reviewed-by: Jack Franklin <jacktfranklin@chromium.org >
> > > > Commit-Queue: Paul Lewis <aerotwist@chromium.org >
> > >
> > > TBR=aerotwist@chromium.org ,jacktfranklin@chromium.org
> > >
> > > Change-Id: I3e36a1520e34be3ce1779ecdf2b4cead6a293971
> > > No-Presubmit: true
> > > No-Tree-Checks: true
> > > No-Try: true
> > > Bug: 1101738
> > > Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2332815
> > > Reviewed-by: Paul Lewis <aerotwist@chromium.org >
> > > Commit-Queue: Paul Lewis <aerotwist@chromium.org >
> >
> > TBR=aerotwist@chromium.org ,jacktfranklin@chromium.org
> >
> > # Not skipping CQ checks because this is a reland.
> >
> > Bug: 1101738
> > Change-Id: Ia0d06bb75f2610459f4d0b31ff6b770b1031d982
> > Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2335060
> > Reviewed-by: Paul Lewis <aerotwist@chromium.org >
> > Reviewed-by: Jack Franklin <jacktfranklin@chromium.org >
> > Commit-Queue: Paul Lewis <aerotwist@chromium.org >
>
> TBR=aerotwist@chromium.org ,jacktfranklin@chromium.org
>
> Change-Id: Iabfbe2aad94033078eac41338d64ca069f49332f
> No-Presubmit: true
> No-Tree-Checks: true
> No-Try: true
> Bug: 1101738
> Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2335273
> Reviewed-by: Sigurd Schneider <sigurds@chromium.org >
> Commit-Queue: Sigurd Schneider <sigurds@chromium.org >
TBR=sigurds@chromium.org ,aerotwist@chromium.org ,jacktfranklin@chromium.org
# Not skipping CQ checks because this is a reland.
Bug: 1101738
Change-Id: I42579d6cac06ec45377789253588ba94ee72a226
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2336715
Commit-Queue: Paul Lewis <aerotwist@chromium.org >
Reviewed-by: Paul Lewis <aerotwist@chromium.org >
2020-08-10 09:15:45 +00:00
Changhao Han
1f94e6098d
Toggle adorner state before click callback to sync state correctly
...
Bug: chromium:1066772, chromium:1047356
Change-Id: I4a044b0e84c66f1fa8e61549d0e69287a27760b7
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2339559
Commit-Queue: Changhao Han <changhaohan@chromium.org >
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com >
Auto-Submit: Changhao Han <changhaohan@chromium.org >
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org >
Reviewed-by: Patrick Brosset <patrick.brosset@microsoft.com >
2020-08-06 15:33:27 +00:00
Patrick Brosset
112a132f0a
Grid: Handle separate row/col color and dash and highlight on grid-template hover
...
This is based on the following backend change:
https://chromium-review.googlesource.com/c/chromium/src/+/2302230/
The feature that this change allows is for users to hover over
grid-template-rows and grid-template-columns. When doing so, the rows and
columns get highlighted in the page, accordingly.
The backend CL emits separate information for rows and cols to make this
possible, so this frontend change contains overlay updates to deal with
this.
This frontend change also contains the necessary code to do the on-hover
highlight.
2 ideas for follow-up changes:
* Only showing the explicitly defined lines when hovering
over grid-template-rows/columns, since those are the ones defined by
these properties.
* Show the track sizing labels and line name labels when those do land
since these are also defined by grid-template-rows/columns properties.
Change-Id: I0fed00f16a060fcba303a25e2d47d2d7df06bf5c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2302429
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org >
Reviewed-by: Brandon Goddard <brgoddar@microsoft.com >
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com >
2020-08-04 13:37:04 +00:00
Sigurd Schneider
340bd16cd3
Revert "Reland "Updates elements to devtools_module""
...
This reverts commit 04858cf7ddhttps://ci.chromium.org/p/devtools-frontend/builders/ci/Stand-alone%20Linux/2582
To reproduce locally, check out the commit before this revision,
do a clean build, then check out this revision, and do a build.
This will succeed but rewrite source files (which it shouldn't).
Original change's description:
> Reland "Updates elements to devtools_module"
>
> This reverts commit 22d876ca0281e818fad8https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2329779
> > > Reviewed-by: Jack Franklin <jacktfranklin@chromium.org >
> > > Commit-Queue: Paul Lewis <aerotwist@chromium.org >
> >
> > TBR=aerotwist@chromium.org ,jacktfranklin@chromium.org
> >
> > Change-Id: I3e36a1520e34be3ce1779ecdf2b4cead6a293971
> > No-Presubmit: true
> > No-Tree-Checks: true
> > No-Try: true
> > Bug: 1101738
> > Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2332815
> > Reviewed-by: Paul Lewis <aerotwist@chromium.org >
> > Commit-Queue: Paul Lewis <aerotwist@chromium.org >
>
> TBR=aerotwist@chromium.org ,jacktfranklin@chromium.org
>
> # Not skipping CQ checks because this is a reland.
>
> Bug: 1101738
> Change-Id: Ia0d06bb75f2610459f4d0b31ff6b770b1031d982
> Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2335060
> Reviewed-by: Paul Lewis <aerotwist@chromium.org >
> Reviewed-by: Jack Franklin <jacktfranklin@chromium.org >
> Commit-Queue: Paul Lewis <aerotwist@chromium.org >
TBR=aerotwist@chromium.org ,jacktfranklin@chromium.org
Change-Id: Iabfbe2aad94033078eac41338d64ca069f49332f
No-Presubmit: true
No-Tree-Checks: true
No-Try: true
Bug: 1101738
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2335273
Reviewed-by: Sigurd Schneider <sigurds@chromium.org >
Commit-Queue: Sigurd Schneider <sigurds@chromium.org >
2020-08-03 14:47:19 +00:00
Paul Lewis
04858cf7dd
Reland "Updates elements to devtools_module"
...
This reverts commit 22d876ca0281e818fad8https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2329779
> > Reviewed-by: Jack Franklin <jacktfranklin@chromium.org >
> > Commit-Queue: Paul Lewis <aerotwist@chromium.org >
>
> TBR=aerotwist@chromium.org ,jacktfranklin@chromium.org
>
> Change-Id: I3e36a1520e34be3ce1779ecdf2b4cead6a293971
> No-Presubmit: true
> No-Tree-Checks: true
> No-Try: true
> Bug: 1101738
> Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2332815
> Reviewed-by: Paul Lewis <aerotwist@chromium.org >
> Commit-Queue: Paul Lewis <aerotwist@chromium.org >
TBR=aerotwist@chromium.org ,jacktfranklin@chromium.org
# Not skipping CQ checks because this is a reland.
Bug: 1101738
Change-Id: Ia0d06bb75f2610459f4d0b31ff6b770b1031d982
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2335060
Reviewed-by: Paul Lewis <aerotwist@chromium.org >
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org >
Commit-Queue: Paul Lewis <aerotwist@chromium.org >
2020-08-03 14:01:07 +00:00
Paul Lewis
22d876ca02
Revert "Updates elements to devtools_module"
...
This reverts commit 81e818fad8https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2329779
> Reviewed-by: Jack Franklin <jacktfranklin@chromium.org >
> Commit-Queue: Paul Lewis <aerotwist@chromium.org >
TBR=aerotwist@chromium.org ,jacktfranklin@chromium.org
Change-Id: I3e36a1520e34be3ce1779ecdf2b4cead6a293971
No-Presubmit: true
No-Tree-Checks: true
No-Try: true
Bug: 1101738
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2332815
Reviewed-by: Paul Lewis <aerotwist@chromium.org >
Commit-Queue: Paul Lewis <aerotwist@chromium.org >
2020-08-03 11:24:30 +00:00
Tim van der Lippe
