This reverts commit 2d8ad76070a840ce3821f3d28e55cd952f7640c0.
Reason for revert: Grouping would break alphabetical sort, which is controversial.
Original change's description:
> DevTools: prepare Computed sidebar for groups
>
> Computed sidebar
> - Removes even/odd striping
> - Extracts a function to build a property's TreeElement
>
> Bug: 929536
> Change-Id: I727cf1efa5ac65277a046b52575f35102323c38f
> Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1548446
> Reviewed-by: Joey Arhar <jarhar@chromium.org>
> Commit-Queue: Erik Luo <luoe@chromium.org>
> Cr-Commit-Position: refs/heads/master@{#648029}
TBR=luoe@chromium.org,jarhar@chromium.org
# Not skipping CQ checks because original CL landed > 1 day ago.
Bug: 929536
Change-Id: Icec233a91c07b2b864830df6419690911070101a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1565380
Reviewed-by: Erik Luo <luoe@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#650149}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 37893dee61d4f8d4a23c0d23bd36dbd4ef6d893c
This change adds 4 new performance histograms for the DevTools using the
prefix 'DevTools.Launch':
- DevTools.Launch.Console
- DevTools.Launch.Elements
- DevTools.Launch.Network
- DevTools.Launch.Sources
These histograms measure the time between the DevTools window being
shown during 'DevToolsWindow::ToggleDevToolsWindow' and a point in each
tool that corresponds to the 'ready' state as seen by a user. These end
points are unique to each tool but are as follows:
- Console: At the end of the ConsolePrompt constructor
- Elements: At the end of _updateMetrics when the styles panel has
been populated for the initially selected node
- Network: After the panel is shown
- Sources: After the NetworkNavigatorView has been loaded
These tools were chosen as they represent the most popular in terms of
usage and will allow us to identify any significant performance impact
in the time taken to launch the DevTools when these panels open by
default.
To see time captured by the histograms in terms of a perf trace for
each tool please take a look at the following screenshots:
https://imgur.com/a/rcAgQ8h
In the traces you can see that the end marker for each load is at the
end of the trace near first meaningful paint, and just as the user
will see the content of the tool render fully.
To accomplish the histograms, a new native function has been added to
the DevTools ui bindings/embedder classes called
'recordPerformanceHistogram'. Along with the plumbing and a new helper
function in the frontend javascript Host.UserMetrics file called
'panelLoaded'
When the frontend javascript loads, it will store the initial panel to
be loaded from the preferences. Once that panel has been created and
the appropriate loaded marker has been hit, the duration of the launch
will be calculated using performance.now(). That duration is then sent
to the native code which will fire the appropriate histogram via the
'UMA_HISTOGRAM_TIMES' macros.
The mechanism is similar to the existing one used for enumerated
histograms and can be expanded to fire additional performance histograms
in the future.
Also added a new test for user-metrics to ensure that the panelLoaded
function will correctly record the histograms.
Change-Id: Ib9f0bf80c651231d6d2e308bee36c1a1223f04db
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1506388
Reviewed-by: Tom Sepez <tsepez@chromium.org>
Reviewed-by: Ilya Sherman <isherman@chromium.org>
Reviewed-by: Pavel Feldman <pfeldman@chromium.org>
Commit-Queue: James Lissiak <jalissia@microsoft.com>
Cr-Original-Commit-Position: refs/heads/master@{#644407}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 296f6b12650bd5e38eaf1fe0987c46910fe2d6eb
Some properties including filter/*gradient have functions as values.
CSS autocomplete shows their function names as suggestions
(blur, brightness). In this CL, autocomplete suggests full preset
samples (blur(1px)) so that intermediate suggestions apply visibly
meaningful changes to the page.
Bug: 931145
Change-Id: I4f693b200cb49f5fdf8f428c03154e136c7a8ed2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1466284
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#640575}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: beaedbdb329d74e1d1b9a0166508e0a3f7f632f5
In the Styles sidebar pane, user agent style sections:
- Properties within an inherited section that do not contribute to
the cascade (not inheritable) are hidden.
- Non-matching selector pieces are hidden.
The goal is to reduce visual noise in the UI without affecting style
debugging.
Screenshot: https://imgur.com/a/2s5wIn8
Bug: 929536
Change-Id: Icaea2edcbb8560273469605f263449edd51bade2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1500775
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#638731}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 0904d89a819c13da89694b59ab5de08d184845c5
This patch simplifies DOMPath.js by using CSS.escape to produce
valid CSS identifiers, instead of a custom (and subtly broken)
implementation.
Similarly, instead of custom logic, JSON.stringify is now used to
produce valid JavaScript string literals.
Bug: chromium:930625
Change-Id: I4462cca6b41ae1a0b1232c4517e02fb171bbccad
Reviewed-on: https://chromium-review.googlesource.com/c/1464719
Commit-Queue: Andrey Lushnikov <lushnikov@chromium.org>
Reviewed-by: Andrey Lushnikov <lushnikov@chromium.org>
Auto-Submit: Mathias Bynens <mathias@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#631337}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 39d011cffef144bc7cf3d019c248c8032e9fe5d2
This reverts commit 9a60a25d0462306a5dcaeb390fbbca9ea22cdb03.
Reason for revert: This broke a lot of focus related logic
in the Elements panel
Bug: 920518
Original change's description:
> DevTools: Fix focus when selecting to the left of treeitems
>
> The mousedown listener in ElementsTreeOutline was moving focus, but
> not consuming the event. The event then propagated to the treeoutline
> element itself, which stole focus.
>
> Change-Id: I2de2001175f4029cd94880297c460ff4c90b845a
> Reviewed-on: https://chromium-review.googlesource.com/c/1387688
> Reviewed-by: Pavel Feldman <pfeldman@chromium.org>
> Commit-Queue: Joel Einbinder <einbinder@chromium.org>
> Cr-Commit-Position: refs/heads/master@{#618423}
TBR=pfeldman@chromium.org,einbinder@chromium.org
# Not skipping CQ checks because original CL landed > 1 day ago.
Change-Id: I1407655b9a6ca03a2f110f87b7b9d2f98795ef53
Reviewed-on: https://chromium-review.googlesource.com/c/1450512
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Commit-Queue: Joel Einbinder <einbinder@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#628528}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: bb79864925df7a5c7b61bcb1d35696e0fcbd6eb2
Before, pressing 'H' or 'Ctrl+L' on ANY panel would perform the
action (hide selected element, clear console). This CL makes both
shortcuts execute only when the respective panel/view is showing.
This allows 'Ctrl+L' to focus Omnibox when Console is not visible.
Bug: 915676
Change-Id: Ie5ef04786fcd240a393524f429cb45a3951cd5d0
Reviewed-on: https://chromium-review.googlesource.com/c/1405701
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#622211}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: a858d1d9aa7a2043f87f538d6d61aa174c3fbe01
The mousedown listener in ElementsTreeOutline was moving focus, but
not consuming the event. The event then propagated to the treeoutline
element itself, which stole focus.
Change-Id: I2de2001175f4029cd94880297c460ff4c90b845a
Reviewed-on: https://chromium-review.googlesource.com/c/1387688
Reviewed-by: Pavel Feldman <pfeldman@chromium.org>
Commit-Queue: Joel Einbinder <einbinder@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#618423}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 9a60a25d0462306a5dcaeb390fbbca9ea22cdb03
Panel switching and page reloading could trigger re-focusing the
ElementsTreeOutline, producing unwanted node overlays.
In this CL
- Trees highlight nodes when selection changes (pre-Nov behavior),
instead of highlight on focusin
- Hide node highlight when focus moves to non-highlightable elements
- Console will use a custom method to select and ensure the node is
highlighted
Bug: 913084
Change-Id: I8b56b77c0aa8c34f5f7a819434510d549b139650
Reviewed-on: https://chromium-review.googlesource.com/c/1368770
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#616197}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 3905efccbdcf2eb872d1c6a2ba652a58c12486f5
To reveal and select a node, we would call 'onpopulate' on all of its
ancestors without a TreeElement, which ensured that the node's own
TreeElement would be constructed.
When a parent has 500+ children, extra nodes are lazily built after
clicking a "Show more" button. To allow revealing hidden nodes,
this CL expands the limit if a parent is already populated.
Bug: 890632
Change-Id: Ia7b916c21baf5b35dbce8a26eca1681c9bb0b243
Reviewed-on: https://chromium-review.googlesource.com/c/1320569
Commit-Queue: Erik Luo <luoe@chromium.org>
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#613231}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: eda6f1d4f188141803cf61559826f9582d2b95b0
Switching windows or using the Element picker may focus the DevTools
area with relatedTarget=null. In these cases, re-applying node
highlight is not needed.
Bug: 905252
Change-Id: Ie3ae228c9cc404f16598ff428d9e593bb90e33e5
Reviewed-on: https://chromium-review.googlesource.com/c/1336910
Commit-Queue: Andrey Lushnikov <lushnikov@chromium.org>
Reviewed-by: Andrey Lushnikov <lushnikov@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#608541}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: bb1a4687d53112eba231613f92d018c116850eaf
The main ElementsTreeOutline in ElementsPanel is wired to DOMModel
updates, but ETOutlines in Console / elsewhere are not.
In the unwired case, nodes in the tree may have null `children()`.
This can result in internal errors.
Bug: 896445
Change-Id: Ie903fdddb76b31a5460ce2dd4b753be7ba7eeb56
Reviewed-on: https://chromium-review.googlesource.com/c/1286860
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#607419}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 3cef24e0462f8521e4e5341196b0beba9d505cf7
This patch introduces a new 'Copy js path' option to the context
menu that allows to get a JavaScript reference to the object
in the DOM Tree. This comes handy when dealing with Shadow DOM
trees.
R=dgozman
Change-Id: I07a77597f88b6cc500baed8ae9ee097b35d79b4f
Reviewed-on: https://chromium-review.googlesource.com/c/1300756
Commit-Queue: Andrey Lushnikov <lushnikov@chromium.org>
Reviewed-by: Aleksey Kozyatinskiy <kozyatinskiy@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#606723}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: be8b1dc6dcc9c479f3df1aa11bf542e3a9790ae7
Introduces a common interface between ElementsTreeOutlines and
ObjectPropertiesSections. This allows both to be keyboard navigable
in Console.
Bug: 865674
Change-Id: I405d161692147374827918cce2369d129620a9fd
Reviewed-on: https://chromium-review.googlesource.com/c/1275225
Commit-Queue: Erik Luo <luoe@chromium.org>
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#604855}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: de8a9c26f6a4e28bc14e613e0d97cae69aef749b
Clients will need to render a generic object/DOMNode, and
be able to call `select()` to select the first child in the
resulting TreeOutline. This CL:
- Turns Common.Renderer > UI.Renderer
- Returns a tree, so interested clients can use it
Bug: 865674
Change-Id: Id877537a3c8713b99d34e6a4558037e0c8b3a111
Reviewed-on: https://chromium-review.googlesource.com/c/1298023
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#604637}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 3ea41c834168b61e1e2c1b32d23d1775f9ddbe71
Typing 'h' in text inputs with 'maxLength' may produce key events
without producing the 'input' event. This scenario leads DevTools to
allow shortcut-defined actions that are normally suppressed.
This CL replaces suppression logic with a simpler condition:
"if a key might trigger input, and we are editing, do not run action"
Bug: 833340
Change-Id: I75c5c0dd49c9f5b1624122345459438fc1d976f3
Reviewed-on: https://chromium-review.googlesource.com/c/1265837
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#600859}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: a51492da19a2a90fc44f5b0df3151e2f5c6c8346
Previously we would listen to a blur event coming out of the HTML editor
to know when to commit the text. To prevent an internal focus change
we would cancel mousedown events inside the editor. This confused
codemirror, which expects focus to have moved after a right click
and messed up its text selection color.
This patch removes the mousedown canceling, and checks relatedTarget
on the focus event to only commit when focus leaves the editor.
Bug: 894372
Change-Id: Id29f26c75d9f5a12c52679c3cd947987d2b8779e
Reviewed-on: https://chromium-review.googlesource.com/c/1277810
Commit-Queue: Joel Einbinder <einbinder@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#599015}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: a62fbc18b5720d0653ef2c023510c340d1d9b42d
If the user is trying to select the text of a css selector, we should
not interrupt them by editing the selector. This is consistent with
what we do for css properties.
Bug: 880269
Change-Id: I9ed162ba478195c9c9f2601347ee644c42aea39e
Reviewed-on: https://chromium-review.googlesource.com/c/1269521
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Commit-Queue: Joel Einbinder <einbinder@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#597959}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 05ecf99c77cb8f76366ef504845a4e7bc761c7be
Instead of showing offset, naturalW/H in image preview popover,
- Rendered size: better than 'offset', which includes unwanted
padding, border.
- Intrinsic size: based on the natural size when loaded by DevTools
without any density descriptor, also the original resource size.
OffsetW/H is no longer shown, but info available in the box model
and overlay highlight.
Bug: 788114, 801218
Change-Id: I6ec08c5bcd62c0cb3d8815a1d7079cccb022ef5d
Reviewed-on: https://chromium-review.googlesource.com/c/1256072
Reviewed-by: Andrey Lushnikov <lushnikov@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#597404}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: a73757aba48e30c90833b13576c15fba83c90f77
Erik Luo