Make it more obvious when requests are paused in the netmonitor

RESOLVED FIXED in Firefox 59

Status

defect
P3
normal
RESOLVED FIXED
2 years ago
10 months ago

People

(Reporter: ntim, Assigned: Honza)

Tracking

unspecified
Firefox 59

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(7 attachments)

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).
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?
Flags: needinfo?(victoria)
I'm thinking the netmonitor could have a big "Unpause" button like the performance tool (Start recording performance) or the memory tool (take snapshot)
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.
Flags: needinfo?(victoria)
Posted image Play icon
Play button SVG attached
Posted image Pause button
Bolder pause button SVG attached
Posted image 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
Flags: needinfo?(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.
Flags: needinfo?(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.
All our icons are within a 16x16 square :)
Ah thanks Tim - I will just fix the icons to be in 16x16 so everything can be consistent!
Posted image play 16x16
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!
Attachment #8926835 - Flags: review?(rchien) → review+
Pushed by jodvarko@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/e18bb1a3d095
Make it more obvious when requests are paused in the netmonitor; r=rickychien
@Cosmin: I can't see the problem. Do you know whhat files are duplicated?

Honza
Flags: needinfo?(odvarko) → needinfo?(csabou)
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
Thanks Tim for answering that. I was off duty and didn't see the comment until now.
Flags: needinfo?(csabou)
Thanks Tim!

Fixed, trying to land again...

Honza
Pushed by jodvarko@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/c7416b8613b6
Make it more obvious when requests are paused in the netmonitor; r=rickychien
https://hg.mozilla.org/mozilla-central/rev/c7416b8613b6
Status: NEW → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 59
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
QA Whiteboard: [bugday-20171122]
Product: Firefox → DevTools
Assignee: nobody → odvarko
You need to log in before you can comment on or make changes to this bug.