Bug 1495300 (replay-polish)

UX Polish in Web Replay

REOPENED
Unassigned

Status

()

enhancement
REOPENED
9 months ago
7 months ago

People

(Reporter: jlast, Unassigned)

Tracking

(Depends on 3 bugs, Blocks 1 bug)

unspecified
mozilla64
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox64 fixed)

Details

Attachments

(2 attachments, 1 obsolete attachment)

Reporter

Description

9 months ago
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
Reporter

Comment 1

9 months ago
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?
Reporter

Comment 2

9 months ago
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.
Reporter

Comment 4

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

This sounds like a good MVP option too.

Comment 5

9 months ago
Posted file Add replay icon to toolbox (obsolete) —
Depends on: 1495342
Depends on: replay-m1

Comment 7

9 months ago
Pushed by jlaster@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/8b650bb26b71
Add paused and jump badge to console api messages r=jlast

Comment 8

9 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/8b650bb26b71
Status: NEW → RESOLVED
Closed: 9 months ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla64
Reporter

Updated

9 months ago
Depends on: 1495910
Reporter

Updated

9 months ago
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
Reporter

Updated

9 months ago
Depends on: 1496468
Attachment #9013173 - Attachment is obsolete: true

Comment 9

9 months ago
Pushed by jlaster@mozilla.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/edc506b37439
Add a reload and record button. r=lsmyth
Reporter

Updated

9 months ago
Depends on: 1496600
Reporter

Updated

9 months ago
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)

Comment 11

9 months ago
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"
Reporter

Comment 12

9 months ago
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.
Reporter

Updated

8 months ago
Blocks: 1503703
Reporter

Updated

8 months ago
Blocks: 1503853
Reporter

Updated

8 months ago
Depends on: 1503863
Reporter

Updated

8 months ago
Depends on: 1503866
Reporter

Updated

8 months ago
Depends on: 1503869
Reporter

Updated

8 months ago
Depends on: 1503870
Reporter

Updated

8 months ago
Depends on: 1503921
Reporter

Updated

8 months ago
Depends on: 1503930
Reporter

Updated

8 months ago
Depends on: 1503936
Reporter

Updated

8 months ago
Depends on: 1504023
Reporter

Updated

8 months ago
Depends on: 1504025
Reporter

Updated

8 months ago
No longer blocks: 1503703, 1503853
Depends on: 1503703, 1503853
No longer depends on: 1504023, 1504025
Reporter

Updated

8 months ago
Blocks: replay-m1
No longer depends on: replay-m1
Reporter

Updated

8 months ago
No longer depends on: 1503863
Reporter

Updated

8 months ago
No longer depends on: 1503866
Reporter

Updated

8 months ago
No longer depends on: 1503869
Reporter

Updated

8 months ago
No longer depends on: 1503930
Reporter

Updated

8 months ago
No longer depends on: 1503936
Reporter

Updated

8 months ago
No longer depends on: 1503703
Reporter

Updated

8 months ago
No longer depends on: 1503853
Reporter

Updated

8 months ago
Alias: replay-polish
Reporter

Updated

8 months ago
Depends on: 1504055
Reporter

Updated

8 months ago
Depends on: 1504100
Reporter

Updated

8 months ago
Depends on: 1504102
Reporter

Updated

8 months ago
Depends on: 1504213
Reporter

Updated

8 months ago
Depends on: 1504222
Reporter

Updated

8 months ago
No longer depends on: 1504055
Reporter

Updated

8 months ago
No longer depends on: 1503921
Reporter

Updated

8 months ago
Depends on: 1504435
Reporter

Updated

7 months ago
Depends on: 1510048
Reporter

Updated

7 months ago
Depends on: 1510408
Depends on: 1510511
Depends on: 1510675
Depends on: 1510708
Reporter

Updated

7 months ago
Depends on: 1511043
Reporter

Updated

7 months ago
Depends on: 1511422
Reporter

Updated

7 months ago
Depends on: 1511567
Reporter

Updated

7 months ago
Depends on: 1511673
Reporter

Updated

7 months ago
Depends on: 1511710
You need to log in before you can comment on or make changes to this bug.