Bug 175485 (WebInspectorCanvasTab)

Summary: Web Inspector: [META] Create Canvas tab and top-level overview
Product: WebKit Reporter: Devin Rousso <drousso>
Component: Web InspectorAssignee: Matt Baker <mattbaker>
Status: NEW ---    
Severity: Normal CC: bburg, drousso, hshieh, inspector-bugzilla-changes, joepeck, mattbaker, mjs, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: All   
OS: All   
Bug 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    
Bug Blocks: 173807, 188808    
Description Flags
[Image] WIP Mockup
[Image] Mockup - canvas overview
[Image] Mockup - recording in progress
[Image] Mockup - canvas with recordings
[Image] Mockup - canvas recordings menu
[Image] Mockup - recording content view none

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