1410351 - Make it more obvious when requests are paused in the netmonitor

Status: RESOLVED FIXED

(DevTools :: Netmonitor, defect, P3)

Description

[Tim Nguyen :ntim]

Right now, pausing the request simply changes the pause icon to play. It would be nice to add a message saying "requests are paused, click the play icon to unpause" or make the play button more visible (blue/red background to the button for example).

Comment 1

[[e-mail]]

Victoria, we recently introduce the play/pause network request icon at top left side of netmonitor,
Can you help find a proper way to enhance its usability, ex via adding color to the button, or make the hover tooltip more instructive?

Comment 2

[Tim Nguyen :ntim]

I'm thinking the netmonitor could have a big "Unpause" button like the performance tool (Start recording performance) or the memory tool (take snapshot)

Comment 3

[Victoria Wang [:victoria]]

Attachment: Proposed Netmonitor toolbar changes

I like the idea of making the play button a solid blue. I'm assuming this is a situation where most people will be aware that they've paused the recording, and will only need a subtle nudge to remember to restart it. (If this is a situation in which people will totally forget about pausing, and get confused about why they aren't seeing items roll in, we may need a stronger indicator, like a "Paused" message somewhere).

(This is sort of off-topic, but also in the mockup is a bunch of ideas related to the global settings/toolbar refresh I'm working on right now - would love to discuss it more. One of the changes it proposes is moving the play/pause away from the clear button to keep the destructive action separated from other elements.

Comment 4

[Victoria Wang [:victoria]]

Attachment: Play icon

Play button SVG attached

Comment 5

[Victoria Wang [:victoria]]

Attachment: Pause button

Bolder pause button SVG attached

Comment 6

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Attachment: Bug 1410351 - Make it more obvious when requests are paused in the netmonitor;

Review commit: https://reviewboard.mozilla.org/r/198084/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/198084/

Comment 7

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Attachment: icons.png

@Victoria: thanks for the icons!

The play icon looks good, but the pause icon is somehow too much bold, so I am using he original pause icon. See my attached screenshot. Does it look ok? Or should I use the bold one?

Honza

Comment 8

[Victoria Wang [:victoria]]

Oh wow, haha, it's not supposed to be that bold :). It should look about the same as the ones in this mockup, with 2px wide lines: https://pbs.twimg.com/media/DOIygzoUMAEN3ml.jpg:large

Maybe it's enlarged? The icon should be 7px by 10px. I could add more blank space to the graphic but, but it's probably better to just display it at 7x10 and add a little spacing around it if needed for centering.

Comment 9

[Victoria Wang [:victoria]]

Also, in your screenshot, it looks like the Play button could be centered a bit better - it's a bit too far to the left.

Comment 10

[Tim Nguyen :ntim]

All our icons are within a 16x16 square :)

Comment 11

[Victoria Wang [:victoria]]

Ah thanks Tim - I will just fix the icons to be in 16x16 so everything can be consistent!

Comment 12

[Victoria Wang [:victoria]]

Attachment: play 16x16

Comment 13

[Victoria Wang [:victoria]]

Attachment: pause 16x16

Comment 14

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8926835 [details]
Bug 1410351 - Make it more obvious when requests are paused in the netmonitor;

https://reviewboard.mozilla.org/r/198084/#review203576

Thanks Victoria & Honza!

I've verified that new icons are displayed properly on toolbox and launchpad. Please make sure try is green before landing. Thanks!

Comment 15

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Try is green:
https://treeherder.mozilla.org/#/jobs?repo=try&revision=1da0631113c54f634ece1260aebba4a92a7066cb

Honza

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e18bb1a3d095
Make it more obvious when requests are paused in the netmonitor; r=rickychien

Comment 17

[Cosmin Sabou [:CosminS]]

Backed out changeset e18bb1a3d095 (bug 1410351) for build bustage on duplicate files: https://hg.mozilla.org/integration/autoland/rev/8dde15bbb4d8

https://treeherder.mozilla.org/#/jobs?repo=autoland&revision=e18bb1a3d0958fe7e6f05524c417005680cb37ed&filter-resultStatus=testfailed&filter-resultStatus=busted&filter-resultStatus=exception&filter-resultStatus=runnable

Comment 18

[Jan Honza Odvarko [:Honza] (always need-info? me)]

@Cosmin: I can't see the problem. Do you know whhat files are duplicated?

Honza

Comment 19

[Tim Nguyen :ntim]

Comment on attachment 8926835 [details]
Bug 1410351 - Make it more obvious when requests are paused in the netmonitor;

https://reviewboard.mozilla.org/r/198084/#review204488

::: devtools/client/netmonitor/src/assets/icons/pause.svg:4
(Diff revision 1)
> +<!-- This Source Code Form is subject to the terms of the Mozilla Public
> +   - License, v. 2.0. If a copy of the MPL was not distributed with this
> +   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
> +<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b">

This file is the same as devtools/client/themes/images/pause.svg

You can remove the file you've added, and simply change devtools/client/themes/images/pause.svg

Comment 20

[Cosmin Sabou [:CosminS]]

Thanks Tim for answering that. I was off duty and didn't see the comment until now.

Comment 21

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Comment on attachment 8926835 [details]
Bug 1410351 - Make it more obvious when requests are paused in the netmonitor;

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/198084/diff/1-2/

Comment 22

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Thanks Tim!

Fixed, trying to land again...

Honza

Comment 23

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c7416b8613b6
Make it more obvious when requests are paused in the netmonitor; r=rickychien

Comment 24

[Andrei Ciure[:aciure]]

https://hg.mozilla.org/mozilla-central/rev/c7416b8613b6

Comment 25

[Mohammad Maruf Rahman]

I can reproduce this issue with Nightly 58.0a1 (2017-10-20)on Windows 10 pro, 64 Bit!

This bug's fix is verified with latest Nightly!

Build ID 	20171122220056
User Agent 	Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:59.0) Gecko/20100101 Firefox/59.0