This CL creates a new <devtools-linkifier> component that will eventually
replace the legacy linkifier code.
For now this component only supports taking a string URL, but in time (and as we
need) we can extend it to support all the inputs that the legacy Linkifier code
uses.
It works by emitting an event that is picked up by the legacy linkifier and
threaded through the legacy system.
Bug: 1149403
Change-Id: I76023052d818ab0f296db887fb03d6761ca4796b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2558297
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Alfonso Castaño <alcastano@google.com>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
This CL updates the component docs server so it automatically injects the new
colour variables (which are part of the dark mode work) into the server. It
contains the following changes:
1. Pulling out the new colours into a new CSS file,
`ui/themeColors.css`, which contain all the new definitions.
2. Injecting that new file where we inject `inspectorStyles.css`
currently.
3. Updating the component docs server to intercept any requests to load
an HTML example file, read the HTML contents and inject a `<style>`
tag to load in the theme colours.
4. Additionally we now provide a small bit of JS that adds a handy
button to toggle light/dark mode without needing to dive into the dev
tools.
Fixed: 1152774
Change-Id: Ia2df0e00315dfeb532570ea5634fa54677337f76
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2560941
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
`TextUtils.FilterParser` is commonly used to parse user input into a
series of filters. This CL updates the new data-grid-controller so it
can take the result of parsing user input into an array of parsed
filters. This means we can hook it up to existing input boxes in
DevTools and unblocks us landing the new data grid into the protocol
monitor.
Bug: 1125968
Change-Id: I45896796d7e7cc720d22c48b65325fb099115da8
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2560237
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
One of the features we need to support in the new DataGrid is a context
menu to hide/show columns. Therefore in preparation this CL updates the
API for a `column` from just the `hidden` field to `visible` and
`hideable`. The former denotes if the column is visible or not, and
`hideable` denotes if the user can hide/show it via the context menu.
There's no user facing change here, just type changes in preparation for
future work.
Bug: 1150793, 1125968
Change-Id: Idfa95a27aab741388548e10ff83263c6b7338724
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2550075
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Previously the whole Uint8Array needed to be passed down to the
linear memory inspector for rendering. This CL adds a
memoryOffset field to the Linear Memory Inspector to indicate
that the passed array is not complete and starts at the
given offset. If more data needs to be passed on a
navigation event (page, history), an event is triggered
to request the required data to be passed down.
Bug: chromium:1110202
Change-Id: Ide8cf2d85c1d31573d0c86a96968880e89a24ad8
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2534192
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Kim-Anh Tran <kimanh@chromium.org>
This CL introduces the new DataGrid component, and is split into two:
- DataGrid, which is a "plain" component that takes data and renders it.
- DataGridController, which is a "smart" component that can take the
data and manipulate it (e.g. sorting), before passing it into a DataGrid
to be rendered.
These components are not feature complete in that they do not support
all features of the incumbent `DataGrid.js` but they are not designed
to. The goal here is to land the initial data-grid components, and then
work on using them in DevTools (as part of the protocol monitor). At
that point we can extend functionality by seeing what is missing and
testing in DevTools, rather than testing in isolation.
This CL includes the implementation, unit tests and component
documentation examples of the functionality that does exist, along with
a README explaining the two components and when to use each one.
Bug: 1125966
Change-Id: I1b5c9a0174c4563be64b5b4adcc8251d1498b55d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2461772
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Reviewed-by: Andres Olivares <andoli@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
This will make it possible to reuse this component in other new-style
web components like CSSVarSwatch (which, today, duplicates the logic).
The ColorSwatch has a number of different consumers today that require
different things from it. I looked at all these consumers and based on
them defined an API that should work for everything:
- renderColor: which accepts either a parsed color or a string to be
parsed as well as an optional format (or flag to use the format from the
user settings) and an optional tooltip.
- swatch-click event: to alert consumers when the swatch is clicked, so
they can hook up the colorpicker to it.
- format-changed event: to alert consumers when the swatch is
shift-clicked so they can react to the new format.
This component has 1 slot that consumers can use to display the color
value as text.
This is useful mostly for the Styles pane. Indeed, the way properties
are edited in that pane relies on them having an available textContent.
So the color string needs to be in the light DOM, not only in the shadow
DOM.
This is why you'll see the slotted element being updated when the format
changes.
Bug: 1137438
Change-Id: I27b757e63a54be2899d9d6b0e94d1af54f3ee22d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2480042
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
Reviewed-by: Shane Clifford <shanejc@microsoft.com>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Changhao Han <changhaohan@chromium.org>
- removed mentions of someIcon in the code.
- unified the source for styles and (subjective) made the data flow
more top-down.
- added support for changing the icon color via CSS as I have started
to use it and it is not always possible to change it via JS + it feels
like setting the color can be done without a rerender.
Follow-ups:
- explicit API for masked and background image components
- setting colors only via CSS?
Change-Id: I3b15dc3a1b1039a59fd5e2c5e8d2136e696f7989
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2489422
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
The flakey tests on Windows exposed a bug where:
* We render and click the right button to scroll
* The code that ensures the active node is in view runs, and tries to
scroll the active element into view.
These two actions would conflict with each other. On Linux/Mac and our Windows
bots, it seems the right scroll "wins" and the tests pass. However, on Windows
10 the right scroll is overriden by scrolling the active node into view, and
therefore the test fails.
The fix we landed on is to flag if the user has manually scrolled the
crumbs, and gate the scrolling active node into view logic on that. If
the user manually scrolls, we effectively cede control and let them
control the scrolling. When we get an update (e.g. a new active selected
node), we take back control.
Additionally, the resize observer was being far too aggressive in its behaviour
(just trigger a re-render), so that's been updated to check explicitly just if
the scroll buttons need to be hidden/shown after a render. This caused a bug
when running tests in Windows where it would also cause scroll conflicts. It's
not a bug I think users would ever have hit, but one that the tests hit because
they do things so much quicker than a user actually would (e.g. render + click
button in same frame). There are tests added for the resize observer behaviour.
Change-Id: Iedf4cbe5bef652d16fc80a0e7c0b3b45a95ebbfa
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2449984
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Add a web component called PieChart2. The old non-component version
is called PieChart already. We'll replace it with this one once it lands
and then remove the original PieChart and rename this one.
Switch over one user of PieChart (TimelineUIUtils) to use the new
version.
Add tests and examples to the component server.
Change-Id: I563059e0322739d533a95155735fcafbe414e815
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2339562
Commit-Queue: Peter Marshall <petermarshall@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
This CL ships the new elements breadcrumbs component to production,
replacing the old legacy breadcrumbs with the new custom element that
we've built to replace it.
Note that I haven't renamed the file from `NewElementsBreadcrumbs`. I wanted to
keep the diff on this CL clear and easy to follow. I plan to follow this up
with another CL that does the renaming.
Light mode & dark mode screenshots: https://imgur.com/a/UyF4ktY
Change-Id: I5c3df09456101ce03072f3eeb27f6a1c568cf9c7
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2297395
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
This CL adds the `ElementsBreadcrumbs` component and documentation to
the component server.
Important: this CL *does not add the component to the UI*. That will be
done in a follow up CL once this has shipped and we have done some other
infrastructure work that is currently blocking components going into
production.
This is also why the file is called `NewElementsBreadcrumbs`, to avoid a
nameclash with `ElementsBreadcrumbs.js`. In the CL that puts this
component into production I will change the filename as the clashing
won't be an issue.
Change-Id: I8039d314ba02c834c3f8ec26f9bdb547858aa2dd
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2236405
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
Jack Franklin
