Bug 175485 – Web Inspector: [META] Create Canvas tab and top-level overview

• Status: NEW
• Component: Web Inspector

[Devin Rousso]

Created attachment 317935 [details]
[Image] WIP Mockup

.

[Joseph Pecoraro]

I think you'll want to sync up with Matt Baker. I know some mock-ups were passed around.

[Devin Rousso]

(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.

<https://devinrousso.com/code/WebKit/Graphics.diff>

[Matt Baker]

New art added here:

Web Inspector: Add icons for various Canvas UI elements
<https://webkit.org/b/175711>

[Matt Baker]

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


Notes:
- 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.

[Matt Baker]

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.

Notes:
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.

[Matt Baker]

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

[Matt Baker]

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.

[Matt Baker]

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.

Notes:
- 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.

[Devin Rousso]

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

[Alan Sien Wei Hshieh]

Sadly these were just part of the comps :(

[Devin Rousso]

(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? 😭

[Radar WebKit Bug Importer]

<rdar://problem/34040798>