UX for adding new storage inspector items

RESOLVED WORKSFORME

Status

enhancement
P3
normal
RESOLVED WORKSFORME
3 years ago
11 months ago

People

(Reporter: ntim, Assigned: miker)

Tracking

(Blocks 1 bug, {dev-doc-complete})

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

3 years ago
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?
(Reporter)

Updated

3 years ago
Flags: needinfo?(hholmes)

Comment 1

3 years ago
See behavior of Firebug 2. This could be used as a boilerplate, at least for cookies.
(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?
Flags: needinfo?(hholmes) → needinfo?(erik.krause)
(Reporter)

Comment 3

3 years ago
Posted image fb-2-popup.png
Flags: needinfo?(erik.krause)
(Reporter)

Comment 4

3 years ago
Posted image firebug-2-menu.png
(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

3 years ago
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".
(Reporter)

Comment 7

3 years ago
(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 ?
(Reporter)

Comment 8

3 years ago
Also, it might be confusing having the row move (because of table sorting) after the user presses Enter ?
(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.)
(Reporter)

Comment 10

3 years ago
(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?
(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.
Priority: -- → P3
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.
Assignee: nobody → mratcliffe
Severity: normal → enhancement
Status: NEW → RESOLVED
Has Regression Range: --- → irrelevant
Has STR: --- → irrelevant
Last Resolved: a year ago
Resolution: --- → WORKSFORME
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.

Updated

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