1220208 - Move clear button to top left corner in toolbars

Status: RESOLVED FIXED

(DevTools :: Framework, defect, P1)

Description

[Helen V. Holmes (:helenvholmes) (:✨)]

Attachment: 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.

Comment 1

[Brian Grinstead [:bgrins]]

Another similar uservoice request: https://ffdevtools.uservoice.com/forums/246087-firefox-developer-tools-ideas/suggestions/6695619-the-clear-button-is-in-a-different-spot-on-conso

Comment 2

[Jeff Griffiths (:canuckistani) (:⚡︎)]

+1, this will certainly help with new tools ( eg websocket monitor ) that need to clear lists and tables as well.

Comment 3

[Brian Grinstead [:bgrins]]

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]

Comment 4

[Helen V. Holmes (:helenvholmes) (:✨)]

(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.)

Comment 5

[Brian Grinstead [:bgrins]]

(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.

Comment 6

[Brian Grinstead [:bgrins]]

I'll take a first pass at this

Comment 7

[Helen V. Holmes (:helenvholmes) (:✨)]

(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?

Comment 8

[Brian Grinstead [:bgrins]]

Attachment: 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.

Comment 9

[Brian Grinstead [:bgrins]]

Jeff, here's a push with binaries of the work in progress changes: https://treeherder.mozilla.org/#/jobs?repo=try&revision=6ce12dfb3d2c

Comment 10

[Helen V. Holmes (:helenvholmes) (:✨)]

(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!

Comment 11

[Brian Grinstead [:bgrins]]

(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

Comment 12

[Tim Nguyen :ntim]

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.

Comment 13

[Brian Grinstead [:bgrins]]

(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

Comment 14

[Helen V. Holmes (:helenvholmes) (:✨)]

(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.

Comment 15

[Jeff Griffiths (:canuckistani) (:⚡︎)]

(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.

Comment 16

[Brian Grinstead [:bgrins]]

(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.

Comment 17

[Jeff Griffiths (:canuckistani) (:⚡︎)]

(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.

Comment 18

[Brian Grinstead [:bgrins]]

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.

Comment 19

[Brian Grinstead [:bgrins]]

Unassigning in the mean time

Comment 20

[Helen V. Holmes (:helenvholmes) (:✨)]

(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?

Comment 21

[Jeff Griffiths (:canuckistani) (:⚡︎)]

(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.

Comment 22

[Helen V. Holmes (:helenvholmes) (:✨)]

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.

Comment 24

[Brian Grinstead [:bgrins]]

Unassigning since I'm not going to work on this soon

Comment 25

[Jarda Snajdr [:jsnajdr]]

Attachment: Move clear button to top left corner in toolbars

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.

Comment 26

[Jarda Snajdr [:jsnajdr]]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=c85fe9f3bb9f

Comment 27

[Brian Grinstead [:bgrins]]

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?

Comment 28

[Helen V. Holmes (:helenvholmes) (:✨)]

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.

Comment 29

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/4683436610b9

Comment 30

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/4683436610b9