Commit Graph
19 Commits
Author SHA1 Message Date
Jack Franklin e6dcd249e6 Inject inspectorStyle.css into the component docs
The interaction tests that have new values needed the change as the
inspectorStyle CSS changed the margins on the `body` element so some of the
tests had slightly different pixel values required when testing resizing.

Bug: chromium:1167724
Change-Id: I6569210264471f96040512e7f55158dec5c28bfd
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2635666
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
2021-01-18 16:48:16 +00:00
Jack Franklin 7a75e4617c Workflow improvements to component docs
* Add links back to the index page when viewing an example
* On a component's example page, each individual example is in a details tag, so you don't see all the iframes when you load the page. You can click the arrow to expand an individual example.

Note: should land after https://crrev.com/c/2617796 lands else it'll cause some conflicts.
Change-Id: Icd4e3e8b1e836fede9ba00cedb12794691a94138
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2617797
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
2021-01-08 16:55:37 +00:00
Jack Franklin 90b6613019 Reland "Add header context menu to data grid"
This reverts commit c2ad98d783.

Reason for revert: fixed flakey test

Original change's description:
> Revert "Add header context menu to data grid"
>
> This reverts commit 6bdb3622bd.
>
> Reason for revert: Interaction tests started failing on mac.
>
> https://ci.chromium.org/ui/p/devtools-frontend/builders/ci/Stand-alone%20Mac/2514/overview
>
> Original change's description:
> > Add header context menu to data grid
> >
> > This CL adds a default header context menu to the data grid that lists visible
> > and sortable columns much like the legacy data grid.
> >
> > Bug: 1150793
> > Change-Id: I84a8a9cc511d6be9fee1f89ba41a6e8649df54ec
> > Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2600723
> > Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
> > Reviewed-by: Paul Lewis <aerotwist@chromium.org>
>
> TBR=aerotwist@chromium.org,jacktfranklin@chromium.org
>
> Change-Id: Ic8ef16044716d922d3a37b6a8fb32e13a75dee72
> No-Presubmit: true
> No-Tree-Checks: true
> No-Try: true
> Bug: 1150793
> Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2601962
> Reviewed-by: Jan Scheffler <janscheffler@chromium.org>
> Commit-Queue: Jan Scheffler <janscheffler@chromium.org>

TBR=aerotwist@chromium.org,szuend@chromium.org,janscheffler@chromium.org,jacktfranklin@chromium.org

# Not skipping CQ checks because original CL landed > 1 day ago.

Bug: 1150793
Change-Id: Ibd352be261d2cefee6fccc4b18b438faaad57631
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2610596
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Reviewed-by: Jan Scheffler <janscheffler@chromium.org>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
2021-01-05 11:56:39 +00:00
Mathias Bynens c38abd4da4 Support AVIF in component server
Bug: chromium:1161661
Change-Id: I9d67209b299ebfb852d706543ae544b03108a6e2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2602987
Auto-Submit: Mathias Bynens <mathias@chromium.org>
Commit-Queue: Paul Lewis <aerotwist@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
2020-12-24 08:38:45 +00:00
Jan Scheffler c2ad98d783 Revert "Add header context menu to data grid"
This reverts commit 6bdb3622bd.

Reason for revert: Interaction tests started failing on mac.

https://ci.chromium.org/ui/p/devtools-frontend/builders/ci/Stand-alone%20Mac/2514/overview

Original change's description:
> Add header context menu to data grid
>
> This CL adds a default header context menu to the data grid that lists visible
> and sortable columns much like the legacy data grid.
>
> Bug: 1150793
> Change-Id: I84a8a9cc511d6be9fee1f89ba41a6e8649df54ec
> Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2600723
> Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
> Reviewed-by: Paul Lewis <aerotwist@chromium.org>

TBR=aerotwist@chromium.org,jacktfranklin@chromium.org

Change-Id: Ic8ef16044716d922d3a37b6a8fb32e13a75dee72
No-Presubmit: true
No-Tree-Checks: true
No-Try: true
Bug: 1150793
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2601962
Reviewed-by: Jan Scheffler <janscheffler@chromium.org>
Commit-Queue: Jan Scheffler <janscheffler@chromium.org>
2020-12-23 07:27:30 +00:00
Jack Franklin 6bdb3622bd Add header context menu to data grid
This CL adds a default header context menu to the data grid that lists visible
and sortable columns much like the legacy data grid.

Bug: 1150793
Change-Id: I84a8a9cc511d6be9fee1f89ba41a6e8649df54ec
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2600723
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
2020-12-22 15:43:47 +00:00
Jack Franklin e02962c02f Fix double serving of files in component server
Now the server can serve from the tests directory, it will sometimes get
two requests for the same file, one prefixed with front_end and the
other not. If that happens the server now redirects the request such
that we only ever serve each file once and the browser doesn't
double-execute a module.

Change-Id: I14b44aad8b16d1c3f2f787082c70532a8f8776e9
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2599746
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Paul Lewis <aerotwist@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
2020-12-21 16:39:36 +00:00
Jack Franklin d034512dc4 Component docs can load test helpers
Most of the time we won't need this fully fledged environment, but for
some things (such as context menus, guess what I'm working on right now
:D) we do need a faked out environment to enable these features to run
when we run the component in isolation in the component docs.

Note: while this CL contains no component docs changes that take
advantage of it, I've tested locally with context menus in the data grid
and this change does work.

Fixed: 1148323
Change-Id: Ic8c508840a20b6d0f0e72fd7019a16271f04bea6
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2597313
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
2020-12-21 09:59:36 +00:00
Jack Franklin b36ad7e1d1 [Interaction tests] fix running in out/Release
On the bots these tests will run in out/Release but the component server
logic for figuring out the path to the gen directory was wrong; it
navigated up from its position into the root dir, and then back in to
`out/TARGET`. Rather than do that, we instead just walk up from the
scripts dir until we end up in the out/TARGET directory. That way
regardless of if we run in out/Default or out/Release, the script will
find the right directory.

Bug: 1153281
Change-Id: I1d369e47b9931ade60bc86ff52aea7105f10cefd
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2575086
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Paul Lewis <aerotwist@chromium.org>
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
2020-12-07 10:35:50 +00:00
Jack Franklin 086ccd5a7a Enable test_suite to take a configurable server type.
As part of the work to enable Puppeteer component tests, we need to
configure the test suite to run either the hosted mode server or the
component docs server. This CL updates it to take a flag, and makes some
updates to the component docs server, which now has to run either
directly or in the out/Default/gen directory depending on how it is run.

I suspect I'll make a follow up CL to always run the component server in
out/Default/gen, but for now enabling it to detect its context is the
quickest way to unblock running it in tests. The next CL will add a
component test suite that can run a basic test against the component doc
server, but I have manually verified locally that I can run tests
against that server.

Bug: 1153281
Change-Id: I55bda4edd0a983d03bfecff0446b0f3e3a008b52
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2562707
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
2020-11-27 12:00:26 +00:00
Jack Franklin b599716ad0 [Component Docs]: fix bad server listing
Now the component docs have some TS that gets compiled, the docs server
was listing out tsconfig and build files when it was supposed to only
list component directories. This fixes that and also tidies up the list
of links by removing underscores - a quick drive by fix to make it nicer
to look at!

Change-Id: Id9f05894a235f376cfd8a7ea98c5bf179c006869
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2560945
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
2020-11-26 11:30:53 +00:00
Jack Franklin 3642900e6d Load new theme colours in the component docs.
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>
2020-11-25 16:26:10 +00:00
Jack Franklin c1501227b3 Component docs server only lists HTML files
Fix the component docs server to only generate iFrame examples of HTML files,
allowing any helper files (e.g. helper scripts/CSS/imgs/etc) to be placed
alongside the examples without being linked to.

Fixed: 1132846
Change-Id: I9680f001bda4fb2f00eebc275729e66ac62f4189
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2443615
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
2020-10-02 10:53:00 +00:00
Jack Franklin 4738bc7ad7 Fix typo in component server comment
Kateryna raised this as a very valid nit in the original CL and I completely
missed it before landing!

TBR=kprokopenko@google.com

Change-Id: I1fd70cfe804b28f20a24cbe32ab20dc89567d6b5
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2415991
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
2020-09-17 09:06:28 +00:00
Jack Franklin 9d4ecf75c3 Fix loading images in components server
In Devtools-Frontend we load images without a leading slash, e.g.
url(Images/checker.png). This works within devtools, but breaks this
component server as the path ends up as
/component_docs/my_component/Image/checker.png. So we check if the path
ends in Images/*.* and if so, remove anything before it. Then it will be
resolved correctly.

Fixed: 1128914
Change-Id: I476165d16b19713b3c095d5969fac95a5d26a678
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2414190
Reviewed-by: Kateryna Prokopenko <kprokopenko@google.com>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
2020-09-16 14:23:37 +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
Jack Franklin 12ba06cc91 Update component_docs README
Some of the steps have changed since this was written.

Change-Id: I0ac49ab852a28109b335ff19c7c2f43d4329f7ca
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2306157
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Jan Scheffler <janscheffler@chromium.org>
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Jan Scheffler <janscheffler@chromium.org>
2020-07-20 11:35:27 +00:00
Jack Franklin 279564ea9f Add ElementsBreadcrumbs component with examples
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>
2020-07-06 15:12:21 +00:00
Jack Franklin 1557a1c167 Components dev server
This introduces the components server that we will use to view
components locally.

Design doc:
https://docs.google.com/document/d/1P6qtACf4aryfT9OSHxNFI3okMKt9oUrtzOKCws5bOec/edit?pli=1

Change-Id: I6cd7588f045c3cd46e57f1f44441ffa95f0b70bb
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2199081
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
2020-06-08 14:53:56 +00:00