Bug 175485 (WebInspectorCanvasTab) - Web Inspector: [META] Create Canvas tab and top-level overview
Summary: Web Inspector: [META] Create Canvas tab and top-level overview
Status: NEW
Alias: WebInspectorCanvasTab
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Matt Baker
Keywords: InRadar
Depends on: 176560 190546 172623 175223 175274 175283 175711 176571 177419 177604 177606 178046 178185 178188 178302 178711 178714 178744 178767 178797 178798 178799 178800 178801 178802 178803 178804 178805 178806 178807 178814 179070 179072 179183 179329 179330 179346 179347 179807 180129 180509 180594 180596 180598 180736 180839 181706 181769 181865 182597 182667 182950 182995 183015 183650 185152 185153 188807 189860 190026 190305 190306 190365 190367 190482 190483 190484 190497 190525 190856 191016 191553 191566 192189 192454 192761 193830 194684 194685 194687 194950 195298 195311 195732 195828 196135 196136 196413 198952 198953 198955
Blocks: WebInspectorCanvasRecording 188808
  Show dependency treegraph
Reported: 2017-08-11 10:36 PDT by Devin Rousso
Modified: 2019-06-17 22:26 PDT (History)
8 users (show)

See Also:

[Image] WIP Mockup (390.77 KB, image/png)
2017-08-11 10:36 PDT, Devin Rousso
no flags Details
[Image] Mockup - canvas overview (335.07 KB, image/jpeg)
2017-08-18 09:22 PDT, Matt Baker
no flags Details
[Image] Mockup - recording in progress (89.17 KB, image/png)
2017-08-18 09:33 PDT, Matt Baker
no flags Details
[Image] Mockup - canvas with recordings (93.49 KB, image/png)
2017-08-18 09:37 PDT, Matt Baker
no flags Details
[Image] Mockup - canvas recordings menu (433.38 KB, image/png)
2017-08-18 09:43 PDT, Matt Baker
no flags Details
[Image] Mockup - recording content view (362.47 KB, image/jpeg)
2017-08-18 09:48 PDT, Matt Baker
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Devin Rousso 2017-08-11 10:36:52 PDT
Created attachment 317935 [details]
[Image] WIP Mockup

Comment 1 Joseph Pecoraro 2017-08-17 16:47:05 PDT
I think you'll want to sync up with Matt Baker. I know some mock-ups were passed around.
Comment 2 Devin Rousso 2017-08-17 19:10:29 PDT
(In reply to Joseph Pecoraro from comment #1)
> I think you'll want to sync up with Matt Baker. I know some mock-ups were
> passed around.
From what he's told me, the plan is to upload them here once they are finalized.  I also have a very hacky/rough diff that creates the content shown in the mockup.

Comment 3 Matt Baker 2017-08-17 22:53:36 PDT
New art added here:

Web Inspector: Add icons for various Canvas UI elements
Comment 4 Matt Baker 2017-08-18 09:22:34 PDT
Created attachment 318508 [details]
[Image] Mockup - canvas overview

New UI elements:
- Flex layout of canvas cards
- Recording icon and label shown at the bottom of the card if recordings exist
- On hover, card shows the refresh and record controls in titlebar

- The mockup labels the tab "Canvas Overview", but I think the label should use "Canvas" or "Canvases", and not change with the context. Tab labels don't change with context elsewhere.
- A good name for this view would be CanvasOverviewContentView.
Comment 5 Matt Baker 2017-08-18 09:33:45 PDT
Created attachment 318510 [details]
[Image] Mockup - recording in progress

New UI elements:
- When the user presses record, the whole bar can turn red so it’s very clear that we are recording. The record button also turns to the stop square. This is similar to what we do in Visual Tab Picker in Safari.
- If we want to show additional recording status), we can show it in the red title bar: frames captured, memory used (MB), etc.

Clicking record on the canvas card could do two things:
1) Change the status of the card, stay on canvas overview
2) Open recording content view immediately
   - Show a progress view of some kind?
   - Canvas card would still show red titlebar/recording UI, since it's possible to navigate back to the overview while a recording is in progress.

The first approach has the benefit of being less surprising, and lends itself to showing "in progress" UI better than the recording content view. Since we only permit one recording at a time, recording controls on other cards should be disabled until the recording completes.
Comment 6 Matt Baker 2017-08-18 09:37:50 PDT
Created attachment 318511 [details]
[Image] Mockup - canvas with recordings

New UI elements:
- After a recording has completed for a canvas, we can badge the Recordings icon to show that a new recording has been completed.
- Once all recordings for the canvas have been viewed, remove the badge
Comment 7 Matt Baker 2017-08-18 09:43:03 PDT
Created attachment 318512 [details]
[Image] Mockup - canvas recordings menu

New UI elements:
- If there are recordings for a canvas, the Recordings button will show up. Clicking it will show a list of recordings and allow removing them.
- The recording icon and "Recordings" label should comprise a single clickable element, for purposes of invoking the popup menu.
Comment 8 Matt Baker 2017-08-18 09:48:43 PDT
Created attachment 318513 [details]
[Image] Mockup - recording content view

New UI elements:
- Instead of having a back button to go back to the overview which could be confusing, a prominent “Canvas Overview” button has been placed before the scrubber.

- The mockup changes the tab label to reflect the open recording. As noted previously, I think the label should not change with the context. Indicating the current canvas and/or canvas recording should be done by adding a path hierarchy (similar to Timelines), with the "Overview" button as the root.
- A good name for this view would be CanvasRecordingContentView.
Comment 9 Devin Rousso 2017-08-18 17:14:00 PDT
These look incredible!!!

As a side note, what page are you inspecting to get the different canvases, or is it just an image as part of the mockup?  It seems like it'd be a good test page :P
Comment 10 Alan Sien Wei Hshieh 2017-08-22 20:43:18 PDT
Sadly these were just part of the comps :(
Comment 11 Devin Rousso 2017-08-22 23:28:15 PDT
(In reply to Alan Sien Wei Hshieh from comment #10)
> Sadly these were just part of the comps :(
...you're telling me that Pikachu isn't real? 😭
Comment 12 Radar WebKit Bug Importer 2017-08-23 12:13:39 PDT