Move clear button to top left corner in toolbars

RESOLVED FIXED in Firefox 48

Status

defect
P1
normal
RESOLVED FIXED
4 years ago
11 months ago

People

(Reporter: hholmes, Assigned: jsnajdr)

Tracking

unspecified
Firefox 48
Dependency tree / graph

Firefox Tracking Flags

(firefox48 fixed)

Details

(Whiteboard: [devtools-ux])

Attachments

(2 attachments, 1 obsolete attachment)

Posted image clear.svg
This was originally brought up in Uservoice here: https://ffdevtools.uservoice.com/forums/246087-firefox-developer-tools-ideas/suggestions/7411159-clear-button-design

Main argument is that the "clear" button used to clear logs in both the Network and Console tabs aren't placed in the same place, which is bad UX and confusing. Suggestion from bgrins is the top right for each of those panels, which makes sense to me.

Second argument is that it might be a good candidate for an icon for localization reasons. I've attached an icon I've seen used elsewhere that I think could work for this.
Whiteboard: [devtools-ux]
+1, this will certainly help with new tools ( eg websocket monitor ) that need to clear lists and tables as well.
Priority: -- → P1
So I double checked on the netmonitor, and there is already a top-rightmost button which shows up when there are requests visible - the expander that opens the details view.  And it feels like it needs to be rightmost because you press the button to collapse the view that opens next to it when you are inspecting a single request.  I think the expander should actually be a 'collapser' only and appear inside the details view instead of being always visible, but that's probably another issue.

In the meantime we could potentially have '.. | Domain | Type | Transferred | Size | Timeline | [clear] | [expander]
(In reply to Brian Grinstead [:bgrins] from comment #3)
> So I double checked on the netmonitor, and there is already a top-rightmost
> button which shows up when there are requests visible - the expander that
> opens the details view.  And it feels like it needs to be rightmost because
> you press the button to collapse the view that opens next to it when you are
> inspecting a single request.  I think the expander should actually be a
> 'collapser' only and appear inside the details view instead of being always
> visible, but that's probably another issue.

So uh, please entertain the question, but why would anyone want to clear all of the logs in the Network monitor anyway? What's the use case there? (I assume people /do/ use it because of the two uservoice comments, but I don't understand why someone would want to clear it in the first place.)
(In reply to Helen V. Holmes (:helenvholmes) (:✨) from comment #4)
> (In reply to Brian Grinstead [:bgrins] from comment #3)
> > So I double checked on the netmonitor, and there is already a top-rightmost
> > button which shows up when there are requests visible - the expander that
> > opens the details view.  And it feels like it needs to be rightmost because
> > you press the button to collapse the view that opens next to it when you are
> > inspecting a single request.  I think the expander should actually be a
> > 'collapser' only and appear inside the details view instead of being always
> > visible, but that's probably another issue.
> 
> So uh, please entertain the question, but why would anyone want to clear all
> of the logs in the Network monitor anyway? What's the use case there? (I
> assume people /do/ use it because of the two uservoice comments, but I don't
> understand why someone would want to clear it in the first place.)

I guess if you had a page that does requests after the initial load and they want a clean slate for watching that stuff.  If so, that could be a failure of our current UI.
I'll take a first pass at this
Assignee: nobody → bgrinstead
Status: NEW → ASSIGNED
(In reply to Brian Grinstead [:bgrins] from comment #5)
> (In reply to Helen V. Holmes (:helenvholmes) (:✨) from comment #4)
> > So uh, please entertain the question, but why would anyone want to clear all
> > of the logs in the Network monitor anyway? What's the use case there? (I
> > assume people /do/ use it because of the two uservoice comments, but I don't
> > understand why someone would want to clear it in the first place.)
> 
> I guess if you had a page that does requests after the initial load and they
> want a clean slate for watching that stuff.  If so, that could be a failure
> of our current UI.

Would this possibly be better captured using a filter instead of a clear?
Posted patch clear-button-WIP.patch (obsolete) — Splinter Review
Helen, I'd like your feedback about this work in progress for the 'clear' button.  Especially the netmonitor, where I changed the behavior for the expand/collapse of the details view so that it's a clear button if nothing is selected or a collapse button if something is.  And removed the ability to 'expand' with nothing selected.  Also the webconsole and perf tool are updated with this new icon.
Attachment #8682259 - Flags: ui-review?(hholmes)
Jeff, here's a push with binaries of the work in progress changes: https://treeherder.mozilla.org/#/jobs?repo=try&revision=6ce12dfb3d2c
(In reply to Brian Grinstead [:bgrins] from comment #8)
> Created attachment 8682259 [details] [diff] [review]
> clear-button-WIP.patch
> 
> Helen, I'd like your feedback about this work in progress for the 'clear'
> button.  Especially the netmonitor, where I changed the behavior for the
> expand/collapse of the details view so that it's a clear button if nothing
> is selected or a collapse button if something is.  And removed the ability
> to 'expand' with nothing selected.  Also the webconsole and perf tool are
> updated with this new icon.

So, my thoughts:

I'm feeling /okay/ about the sidebar making the clear button disappear; I do wonder if maybe people will hate us for it, but I don't mind it at the moment. The one thing I would like to see is a toggle on double select of the same element (like, I could click again to unselect the element and close the sidebar). I think this is not related to this bug though, just something I'm noticing because I happening to be playing with the netmonitor right now.

Console + Perf tools look rad to me!
(In reply to Helen V. Holmes (:helenvholmes) (:✨) from comment #10)
> (In reply to Brian Grinstead [:bgrins] from comment #8)
> > Created attachment 8682259 [details] [diff] [review]
> > clear-button-WIP.patch
> > 
> > Helen, I'd like your feedback about this work in progress for the 'clear'
> > button.  Especially the netmonitor, where I changed the behavior for the
> > expand/collapse of the details view so that it's a clear button if nothing
> > is selected or a collapse button if something is.  And removed the ability
> > to 'expand' with nothing selected.  Also the webconsole and perf tool are
> > updated with this new icon.
> 
> So, my thoughts:
> 
> I'm feeling /okay/ about the sidebar making the clear button disappear; I do
> wonder if maybe people will hate us for it, but I don't mind it at the
> moment. The one thing I would like to see is a toggle on double select of
> the same element (like, I could click again to unselect the element and
> close the sidebar). I think this is not related to this bug though, just
> something I'm noticing because I happening to be playing with the netmonitor
> right now.
> 
> Console + Perf tools look rad to me!

Thanks for checking it out.  The clicking to deselect thing is something I hadn't thought about, but it seems like it could be really handy so you can avoid needing to click the little button.

I was unsure if the clear button disappearing on the sidebar thing would cause an uprising.. I can't think of a better place to put it and it felt alright to me when navigating around a bit.  Jeff, any thoughts?  See also comments 8 / 9
Flags: needinfo?(jgriffiths)

Comment 12

4 years ago
I think we should move the filters on top of the netmonitor table, as a toolbar, so we can be consistent with the console, which also has the filtering toolbar on top. It will also allow having both toolbar buttons (pane toggle and clear) on the same toolbar.

Also, about the clear icon, I'm not sure about using that "forbidden" sign, I usually associate that sign to blocking or forbidding something. I would rather use a trashcan icon.
(In reply to Tim Nguyen [:ntim] from comment #12)
> I think we should move the filters on top of the netmonitor table, as a
> toolbar, so we can be consistent with the console, which also has the
> filtering toolbar on top. It will also allow having both toolbar buttons
> (pane toggle and clear) on the same toolbar.
> 
> Also, about the clear icon, I'm not sure about using that "forbidden" sign,
> I usually associate that sign to blocking or forbidding something. I would
> rather use a trashcan icon.

I'd be alright in general with moving the filters to the top of the toolbar to match webconsole, although I don't think the webconsole filters controls are great in general (those filter dropdowns are a little unconventional and you can't figure out exactly what's being filtered until you click to open them).  I think the netmonitor in general could use some thought about how the info is presented
(In reply to Brian Grinstead [:bgrins] from comment #13)
> I'd be alright in general with moving the filters to the top of the toolbar
> to match webconsole, although I don't think the webconsole filters controls
> are great in general (those filter dropdowns are a little unconventional and
> you can't figure out exactly what's being filtered until you click to open
> them).  I think the netmonitor in general could use some thought about how
> the info is presented

I agree, but it definitely doesn't really have much bearing on this bug imo.
(In reply to Brian Grinstead [:bgrins] from comment #11)
> (In reply to Helen V. Holmes (:helenvholmes) (:✨) from comment #10)
> > (In reply to Brian Grinstead [:bgrins] from comment #8)
> > > Created attachment 8682259 [details] [diff] [review]
> > > clear-button-WIP.patch
> > > 
> > > Helen, I'd like your feedback about this work in progress for the 'clear'
> > > button.  Especially the netmonitor, where I changed the behavior for the
> > > expand/collapse of the details view so that it's a clear button if nothing
> > > is selected or a collapse button if something is.  And removed the ability
> > > to 'expand' with nothing selected.  Also the webconsole and perf tool are
> > > updated with this new icon.
> > 
> > So, my thoughts:
> > 
> > I'm feeling /okay/ about the sidebar making the clear button disappear; I do
> > wonder if maybe people will hate us for it, but I don't mind it at the
> > moment. The one thing I would like to see is a toggle on double select of
> > the same element (like, I could click again to unselect the element and
> > close the sidebar). I think this is not related to this bug though, just
> > something I'm noticing because I happening to be playing with the netmonitor
> > right now.
> > 
> > Console + Perf tools look rad to me!
> 
> Thanks for checking it out.  The clicking to deselect thing is something I
> hadn't thought about, but it seems like it could be really handy so you can
> avoid needing to click the little button.
> 
> I was unsure if the clear button disappearing on the sidebar thing would
> cause an uprising.. I can't think of a better place to put it and it felt
> alright to me when navigating around a bit.  Jeff, any thoughts?  See also
> comments 8 / 9

I think it's pretty weird to have it on the right side, other tools tend to have it on the left.
Flags: needinfo?(jgriffiths)
(In reply to Jeff Griffiths (:canuckistani) (:⚡︎) from comment #15)
> > I was unsure if the clear button disappearing on the sidebar thing would
> > cause an uprising.. I can't think of a better place to put it and it felt
> > alright to me when navigating around a bit.  Jeff, any thoughts?  See also
> > comments 8 / 9
> 
> I think it's pretty weird to have it on the right side, other tools tend to
> have it on the left.

By 'other tools' you mean other browser's devtools?  For our existing tools the clear button is:

Console: Top Middle (or right-ish depending on resolution)
Perf: Top Left-ish
Netmonitor: Bottom Right

The issue right now with moving them all to the top left is that it seems the netmonitor is going to need some reorganization to get it there (possibly moving it's toolbar and filter controls up above the table).  Also, I'm not sure if it should be further left than the 'start recording' button in the Perf tool (space we tend to reserve for the 'do action' button in measurement tools), so maybe in that case it's position wouldn't need to change for perf tool.

Maybe this would benefit from further UX treatment.  Like, if we could have an ideal end state for the button / toolbar locations on these tools then we could work backwards and decide what makes sense to do now vs what we should put off and ship in a bigger refactor.
(In reply to Brian Grinstead [:bgrins] from comment #16)
> (In reply to Jeff Griffiths (:canuckistani) (:⚡︎) from comment #15)
...
> > I think it's pretty weird to have it on the right side, other tools tend to
> > have it on the left.
> 
> By 'other tools' you mean other browser's devtools?  

Yes - I suspect the problem we're trying to solve here is the switching cost papercut of coming from chrome and not being able to find a clear button where you expect it.

...

> Maybe this would benefit from further UX treatment.  Like, if we could have
> an ideal end state for the button / toolbar locations on these tools then we
> could work backwards and decide what makes sense to do now vs what we should
> put off and ship in a bigger refactor.

I would like to solve this once and for all, maybe not immediately, but each panel is too different - it's a terrible thing if there is a switching cost between devtools panel let alone for people coming from other browsers. The clear button is really just the tip of the iceberg.
OK, ni? Helen to help sort through this as per Comment 17.  I think the actual location of the clear button isn't too big of a deal wrt switching costs (it's not a primary feature on any tool) but I do want it to be consistent within our tools.  It is a tip of the iceberg though.. maybe we are bumping into a set of work that has to do with more of a framework level redesign where we need a consistent style guide for tools.  But I also don't want to block incremental progress on a huge project if we don't need to, so that's something to consider also.
Flags: needinfo?(hholmes)
Unassigning in the mean time
Assignee: bgrinstead → nobody
Status: ASSIGNED → NEW
(In reply to Jeff Griffiths (:canuckistani) (:⚡︎) from comment #17)
> Yes - I suspect the problem we're trying to solve here is the switching cost
> papercut of coming from chrome and not being able to find a clear button
> where you expect it.
This is 100% valid; my recommendation would be to chunk this up so that we can have consistency at least while we figure out how to solve the problem of UX treatment across all of these panels. 

> I would like to solve this once and for all, maybe not immediately, but each
> panel is too different - it's a terrible thing if there is a switching cost
> between devtools panel let alone for people coming from other browsers. The
> clear button is really just the tip of the iceberg.
This is super true; but again, I think that we shouldn't prevent having at least cross-panel consistency while we figure out cross-browser consistency. Jeff, does this sound good to you?
Flags: needinfo?(hholmes) → needinfo?(jgriffiths)
(In reply to Helen V. Holmes (:helenvholmes) (:✨) from comment #20)
> (In reply to Jeff Griffiths (:canuckistani) (:⚡︎) from comment #17)
...
> > I would like to solve this once and for all, maybe not immediately, but each
> > panel is too different - it's a terrible thing if there is a switching cost
> > between devtools panel let alone for people coming from other browsers. The
> > clear button is really just the tip of the iceberg.
> This is super true; but again, I think that we shouldn't prevent having at
> least cross-panel consistency while we figure out cross-browser consistency.
> Jeff, does this sound good to you?

It sure does.
Flags: needinfo?(jgriffiths)
Assuming you'd still like this bug Brian, I'm gonna re-assign it back to you now that we have at least a short-term plan.
Assignee: nobody → bgrinstead
Attachment #8682259 - Flags: ui-review?(hholmes) → ui-review+

Updated

4 years ago
See Also: → 1223037
See Also: → 1170617
Blocks: 1242296
See Also: → 1247485
Duplicate of this bug: 1247485
Unassigning since I'm not going to work on this soon
Assignee: bgrinstead → nobody
Component: Developer Tools → Developer Tools: Framework
Priority: P1 → P2
Summary: Clear Button Inconsistently Placed → Move clear button to top left corner in toolbars (webconsole and netmonitor)
Priority: P2 → P1

Updated

3 years ago
Summary: Move clear button to top left corner in toolbars (webconsole and netmonitor) → Move clear button to top left corner in toolbars
(Assignee)

Comment 25

3 years ago
After bug 1223037 (network toolbar moved to top) got landed - there is even more inconsistency: netmonitor uses an icon button (with the circle symbol), while other tools keep using a button with text label "Clear". I got annoyed enough to solve it all with this patch. It moves all clear icons to the left, and uses the icon everywhere. Console, Canvas, Performance, Memory, Network.
Attachment #8734329 - Flags: review?(bgrinstead)
(Assignee)

Updated

3 years ago
Attachment #8682259 - Attachment is obsolete: true
(Assignee)

Updated

3 years ago
Assignee: nobody → jsnajdr
See Also: → 1251256
Comment on attachment 8734329 [details] [diff] [review]
Move clear button to top left corner in toolbars

Review of attachment 8734329 [details] [diff] [review]:
-----------------------------------------------------------------

Code changes look fine to me, thanks!  Helen, what do you think about this?
Attachment #8734329 - Flags: ui-review?(hholmes)
Attachment #8734329 - Flags: review?(bgrinstead)
Attachment #8734329 - Flags: review+
Comment on attachment 8734329 [details] [diff] [review]
Move clear button to top left corner in toolbars

I agree, looks great!

I'll mark it for check-in.
Attachment #8734329 - Flags: ui-review?(hholmes) → ui-review+

Comment 30

3 years ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/4683436610b9
Status: NEW → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 48

Updated

3 years ago
Depends on: 1261049

Updated

11 months ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.