1279602 - UX for adding new storage inspector items

Status: RESOLVED WORKSFORME

(DevTools :: Storage Inspector, enhancement, P3)

Description

[Tim Nguyen :ntim]

We need a way to add all kinds of Storage items. Some specific questions to ask for UX-wise:
- for cookies, do we ask the user to complete all possible fields ? If not, do we provide a sensible default value ?
- how do we add indexeddb databases (eg. sidebar child items)
- how do we surface this in the UI ? (I would say via a toolbar button and the context menu)

Helen, what's your take on this?

Comment 1

[Erik Krause]

See behavior of Firebug 2. This could be used as a boilerplate, at least for cookies.

Comment 2

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

(In reply to Tim Nguyen :ntim from comment #0)
> We need a way to add all kinds of Storage items. Some specific questions to
> ask for UX-wise:
> - for cookies, do we ask the user to complete all possible fields ? If not,
> do we provide a sensible default value ?
I think your first instinct is correct—in our form, we should have inputs with prefilled placeholder values that the user can choose (or not choose) to change. For cookies, I think we probably want some "+" in this toolbar, like in the Inspector: http://cl.ly/420c242m432u

It could add a new row to the top where the user can edit the values by tabbing, perhaps? 

1. Hit "+"
2. Adds new row, user focus now in first column, first row,
3. User can edit cell and tab to complete other cells, which have placeholders.

> - how do we add indexeddb databases (eg. sidebar child items)
I think the most natural thing would actually be a right-click in the sidebar area. What do you think Tim?

Erik, any possibility you could attach a screenshot of Firebug 2? I'm on Firebug 2.0.17 but it seems like it's just applying the Firebug theme to current Firefox devtools. Unless you're talking about an adding UI in Firebug that's not in the Storage tool?

Comment 3

[Tim Nguyen :ntim]

Attachment: fb-2-popup.png

Comment 4

[Tim Nguyen :ntim]

Attachment: firebug-2-menu.png

Comment 5

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

(In reply to Tim Nguyen :ntim from comment #4)
> Created attachment 8764333 [details]
> firebug-2-menu.png

Thanks Tim!

Seems like they map exactly to the table data—are you all right with my proposal above?

Comment 6

[Erik Krause]

Firebug 2 just uses a dialog box to enter or edit all the values. However, I find the in-place editing the devtools provide very usable. IMHO it's better to follow this direction.

BTW.: Firebug 2 is a separate extension. Firebug 3 is a theme for the devtools. If you have 2.0.17 you should see a small bug icon. If not just right click anywhere on a page and choose "inspect with Firebug".

Comment 7

[Tim Nguyen :ntim]

(In reply to Helen V. Holmes (:helenvholmes) (:✨)(pls ni?) from comment #5)
> (In reply to Tim Nguyen :ntim from comment #4)
> > Created attachment 8764333 [details]
> > firebug-2-menu.png
> 
> Thanks Tim!
> 
> Seems like they map exactly to the table data—are you all right with my
> proposal above?

Sounds good! What if the user just hits enter without typing anything in the first field ?

Comment 8

[Tim Nguyen :ntim]

Also, it might be confusing having the row move (because of table sorting) after the user presses Enter ?

Comment 9

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

(In reply to Tim Nguyen :ntim from comment #7)
> (In reply to Helen V. Holmes (:helenvholmes) (:✨)(pls ni?) from comment #5)
> > (In reply to Tim Nguyen :ntim from comment #4)
> > > Created attachment 8764333 [details]
> > > firebug-2-menu.png
> > 
> > Thanks Tim!
> > 
> > Seems like they map exactly to the table data—are you all right with my
> > proposal above?
> 
> Sounds good! What if the user just hits enter without typing anything in the
> first field ?

I think we should have reasonable defaults as placeholders as you suggested in comment #1, so if a user just hits "enter", there aren't any errors and our reasonable-default-cookie gets created.

(In reply to Tim Nguyen :ntim from comment #8)
> Also, it might be confusing having the row move (because of table sorting)
> after the user presses Enter ?

Totally valid. Is this to say that if the user was filtering rows/had their rows sorted by a certain metric, the row might automatically jump?

My suggest here would be that we could use the Inspector's orange flash to move and then show its new location: https://cloud.githubusercontent.com/assets/1720093/16113366/d3dbb8be-33b3-11e6-8454-1ec624762c68.gif

Or, we could have it transform to its new position so the user actually sees it moving. (This one probably has some odd edge cases if it has to slide, say, 300 rows down, but I imagine it could be done.)

Comment 10

[Tim Nguyen :ntim]

(In reply to Helen V. Holmes (:helenvholmes) (:✨)(pls ni?) from comment #9)
> (In reply to Tim Nguyen :ntim from comment #7)
> > (In reply to Helen V. Holmes (:helenvholmes) (:✨)(pls ni?) from comment #5)
> > > (In reply to Tim Nguyen :ntim from comment #4)
> > > > Created attachment 8764333 [details]
> > > > firebug-2-menu.png
> > > 
> > > Thanks Tim!
> > > 
> > > Seems like they map exactly to the table data—are you all right with my
> > > proposal above?
> > 
> > Sounds good! What if the user just hits enter without typing anything in the
> > first field ?
> 
> I think we should have reasonable defaults as placeholders as you suggested
> in comment #1, so if a user just hits "enter", there aren't any errors and
> our reasonable-default-cookie gets created.
That should work.

> (In reply to Tim Nguyen :ntim from comment #8)
> > Also, it might be confusing having the row move (because of table sorting)
> > after the user presses Enter ?
> 
> Totally valid. Is this to say that if the user was filtering rows/had their
> rows sorted by a certain metric, the row might automatically jump?
> 
> My suggest here would be that we could use the Inspector's orange flash to
> move and then show its new location:
> https://cloud.githubusercontent.com/assets/1720093/16113366/d3dbb8be-33b3-
> 11e6-8454-1ec624762c68.gif
> 
> Or, we could have it transform to its new position so the user actually sees
> it moving. (This one probably has some odd edge cases if it has to slide,
> say, 300 rows down, but I imagine it could be done.)
Should work for the sorting case. Now that I think of it, what if the newly added cookie isn't matched by the filter query ? Does it simply disappear?

Comment 11

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

(In reply to Tim Nguyen :ntim from comment #10)
> > Or, we could have it transform to its new position so the user actually sees
> > it moving. (This one probably has some odd edge cases if it has to slide,
> > say, 300 rows down, but I imagine it could be done.)
> Should work for the sorting case. Now that I think of it, what if the newly
> added cookie isn't matched by the filter query ? Does it simply disappear?

In the console we have a "Filtered" message. Does the Storage panel have this? http://cl.ly/1o2u3H2H0J2K

If a user adds a row that is filtered out, we could fade it out and display this message above that cell.

Comment 12

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

This was implemented a long time ago by adding double-click to the storage table entries. Read-only entries have a slight alpha to differentiate them from editable cells.

Comment 13

[Chris Mills [:cmills]]

I've checked the documentation, and I think most of the new storage stuff discussed here (e.g double click to edit) are already covered. I've just added a small section to cover the "Add" and "Refresh" buttons:

https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector#Add_and_refresh_storage

Let me know if you think anything else is missing here.