1495300 - (replay-polish) [meta] UX Polish in Web Replay

Status: RESOLVED INCOMPLETE

(Core Graveyard :: Web Replay, enhancement)

Description

[Jason Laster [:jlast]]

It would be nice to track a couple of quick ux wins that we can land in Nightly, which could help us grow the user base and test web replay internally and with partners.


- "jump to here" button in the console
- "paused here" badge in the console 
- "reload and record" button in the toolbar 
- web replay submenu contextmenu

Comment 1

[Jason Laster [:jlast]]

Brian, I can imagine a front-end solution for the pause here badge where we set it when the user jumps and clear it when the debugger resumes. I think we could do something interesting in the server as well, where on pause we check if we're paused at a console message and send that down with the pause packet. What do you think?

The "reload and record" button is slightly new behavior because we're changing the tab's mode as opposed to creating a new tab. Is that possible? How much work is that to do?

Comment 2

[Jason Laster [:jlast]]

I think some additional UX items would be:

- add telemetry for when a recording starts
- add telemetry for each new buttons
- add a "save" function to the "reload and record" button. When the user clicks the button during a recording session, it should show the "save recording" prompt.

Comment 3

[Brian Hackett [Laid off!]]

(In reply to Jason Laster [:jlast] from comment #1)
> Brian, I can imagine a front-end solution for the pause here badge where we
> set it when the user jumps and clear it when the debugger resumes. I think
> we could do something interesting in the server as well, where on pause we
> check if we're paused at a console message and send that down with the pause
> packet. What do you think?

I think it would be easier to track this in the frontend.  Tracking this in the server would require some new logic in the replaying process to tell when we are paused at an execution point that coincides with a console message.  This shouldn't be that hard, but the main advantage AFAICT is that if the user arrives at a console message via a method other than the jump button (i.e. just stepping around in the code), we would still be able to show the paused badge.  I don't know if that would be a nice/important feature, though.

> The "reload and record" button is slightly new behavior because we're
> changing the tab's mode as opposed to creating a new tab. Is that possible?
> How much work is that to do?

Yeah, this is new behavior.  I don't think it will be a huge amount of work but will start on it today to either get it done or learn more about its complexity.

Comment 4

[Jason Laster [:jlast]]

> I think it would be easier to track this in the frontend

This sounds like a good MVP option too.

Comment 5

[malikanshul29]

Attachment: Add replay icon to toolbox

Comment 6

[malikanshul29]

Attachment: Add paused and jump badge to console api messages

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/8b650bb26b71
Add paused and jump badge to console api messages r=jlast

Comment 8

[Daniel Varga [:dvarga]]

https://hg.mozilla.org/mozilla-central/rev/8b650bb26b71

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/edc506b37439
Add a reload and record button. r=lsmyth

Comment 10

[Raul Gurzau (:RaulG)]

Backed out changeset edc506b37439 (bug 1495300) for failing at /browser_toolbox_options_disable_buttons.js on a CLOSED TREE

Backout link: https://hg.mozilla.org/integration/mozilla-inbound/rev/a94aa2d9828f943cfaa275fabb5a6f6cd86d858b

Push with failures: https://treeherder.mozilla.org/#/jobs?repo=mozilla-inbound&resultStatus=testfailed,busted,exception&revision=edc506b37439bc118431d10e22159ffcf3c95ff1

Log link: https://treeherder.mozilla.org/logviewer.html#?job_id=203528834&repo=mozilla-inbound&lineNumber=2837

Log snippet: 
[task 2018-10-05T00:32:16.307Z] 00:32:16     INFO - TEST-START | devtools/client/framework/test/browser_toolbox_options_disable_buttons.js
[task 2018-10-05T00:32:17.398Z] 00:32:17     INFO - TEST-INFO | started process screentopng
[task 2018-10-05T00:32:17.870Z] 00:32:17     INFO - TEST-INFO | screentopng: exit 0
[task 2018-10-05T00:32:17.871Z] 00:32:17     INFO - Buffered messages logged at 00:32:16
[task 2018-10-05T00:32:17.872Z] 00:32:17     INFO - Adding a new tab with URL: data:text/html;charset=utf8,test for dynamically registering and unregistering tools<iframe src="data:text/plain,iframe"></iframe>
[task 2018-10-05T00:32:17.873Z] 00:32:17     INFO - Console message: [JavaScript Error: "The character encoding of the plain text document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the file needs to be declared in the transfer protocol or file needs to use a byte order mark as an encoding signature." {file: "data:text/plain,iframe" line: 0}]
[task 2018-10-05T00:32:17.875Z] 00:32:17     INFO - Tab added and finished loading
[task 2018-10-05T00:32:17.877Z] 00:32:17     INFO - Buffered messages logged at 00:32:17
[task 2018-10-05T00:32:17.881Z] 00:32:17     INFO - Selecting the options panel
[task 2018-10-05T00:32:17.883Z] 00:32:17     INFO - TEST-PASS | devtools/client/framework/test/browser_toolbox_options_disable_buttons.js | Options panel selected via selectTool method - 
[task 2018-10-05T00:32:17.885Z] 00:32:17     INFO - Buffered messages finished
[task 2018-10-05T00:32:17.889Z] 00:32:17     INFO - TEST-UNEXPECTED-FAIL | devtools/client/framework/test/browser_toolbox_options_disable_buttons.js | All of the buttons are toggleable. - Got 8, expected 10
[task 2018-10-05T00:32:17.890Z] 00:32:17     INFO - Stack trace:
[task 2018-10-05T00:32:17.892Z] 00:32:17     INFO - chrome://mochikit/content/browser-test.js:test_is:1295
[task 2018-10-05T00:32:17.895Z] 00:32:17     INFO - chrome://mochitests/content/browser/devtools/client/framework/test/browser_toolbox_options_disable_buttons.js:testToggleToolboxButtons:88

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/e1fb734d457b
Revert "Backed out changeset edc506b37439 for failing at /browser_toolbox_options_disable_buttons.js on a CLOSED TREE"

Comment 12

[Jason Laster [:jlast]]

Just fixed the test.

Comment 13

[Jason Laster [:jlast]]

Attachment: Bug 1495300 - Add a reload and record button. r=lsmyth

Comment 14

[Florens Verschelde :fvsch]

Some issues with the `webconsole/jump.svg` icon:

- missing the license comment (recently confirmed with :pbro that we should use it for each SVG icon);
- designed at 18px but rendered at 14px which is bound to be blurry on non-retina displays;
- could be optimized (there's some Sketch export cruft in there);
- hardcoded color (we should use context-fill + pass a color from the CSS, maybe `var(--object-color)` like we did for the navigation marker.

Comment 15

[Jason Laster [:jlast]]

Some notes from my conversation with Jaril

• if you're sliding through a for loop, we can show the iteration count next to the preview marker... like a tooltip....
• we should keep a shadow/ghost of where you were
• we can use a CSS animation (we have this for markers) so that selecting a frame smoothly animates the frame slider head
• when the user holds down shift/alt we can make sliding more fine grained (this is not important now)
• we can do some cool things with the marker timeline such
  • as showing markers for all the breakpoints (in addition to console logs)
  • adding similar dragging effects to the head of the timeline
  • we should improve zooming with scrolling
• the main timeline should re-calculate when the window resizes