Bug 175485 (WebInspectorCanvasTab)

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

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

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

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.

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.

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

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.

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.

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

Sadly these were just part of the comps :(

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

<rdar://problem/34040798>