Open Bug 1495300 (replay-polish) Opened 2 years ago Updated 11 months ago

[meta] UX Polish in Web Replay

Categories

(Core Graveyard :: Web Replay, enhancement)

enhancement
Not set
normal

Tracking

(firefox64 fixed)

REOPENED
mozilla64
Tracking Status
firefox64 --- fixed

People

(Reporter: jlast, Unassigned)

References

(Depends on 9 open bugs, Blocks 1 open bug)

Details

(Keywords: meta)

Attachments

(2 files, 1 obsolete file)

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
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?
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.
(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.
> I think it would be easier to track this in the frontend

This sounds like a good MVP option too.
Attached file Add replay icon to toolbox (obsolete) —
Depends on: 1495342
Pushed by jlaster@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/8b650bb26b71
Add paused and jump badge to console api messages r=jlast
https://hg.mozilla.org/mozilla-central/rev/8b650bb26b71
Status: NEW → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla64
Depends on: 1495910
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
Depends on: 1496468
Attachment #9013173 - Attachment is obsolete: true
Pushed by jlaster@mozilla.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/edc506b37439
Add a reload and record button. r=lsmyth
Depends on: 1496600
Depends on: 1496601
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
Flags: needinfo?(malikanshul29)
Pushed by jlaster@mozilla.com:
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"
Just fixed the test.
Flags: needinfo?(malikanshul29)
QA Contact: bhackett1024
QA Contact: bhackett1024
Summary: UX Polish → UX Polish in Web Replay
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.
Blocks: 1503703
Blocks: 1503853
Depends on: 1503863
Depends on: 1503866
Depends on: 1503869
Depends on: 1503870
Depends on: 1503921
Depends on: 1503930
Depends on: 1503936
Depends on: 1504023
Depends on: 1504025
No longer blocks: 1503703, 1503853
Depends on: 1503703, 1503853
No longer depends on: 1504023, 1504025
Blocks: replay-m1
No longer depends on: replay-m1
No longer depends on: 1503863
No longer depends on: 1503866
No longer depends on: 1503869
No longer depends on: 1503930
No longer depends on: 1503936
No longer depends on: 1503703
No longer depends on: 1503853
Alias: replay-polish
Depends on: 1504055
Depends on: 1504100
Depends on: 1504102
Depends on: 1504213
Depends on: 1504222
No longer depends on: 1504055
No longer depends on: 1503921
Depends on: 1504435
Depends on: 1510048
Depends on: 1510408
Depends on: 1510511
Depends on: 1510675
Depends on: 1510708
Depends on: 1511043
Depends on: 1511422
Depends on: 1511567
Depends on: 1511673
Depends on: 1511710
Depends on: 1581421
Depends on: 1579667
Depends on: 1581249
Depends on: 1580334
Depends on: 1504025
Depends on: 1579646
Depends on: 1578600
Depends on: 1581917
Depends on: 1581918
Depends on: 1581933
Depends on: 1580641
Depends on: 1587170
Depends on: 1587172

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
Depends on: 1589546
Keywords: meta
Summary: UX Polish in Web Replay → [meta] UX Polish in Web Replay
Product: Core → Core Graveyard
You need to log in before you can comment on or make changes to this bug.