UX for adding new storage inspector items

NEW
Unassigned

Status

()

Firefox
Developer Tools: Storage Inspector
P3
normal
a year ago
11 months ago

People

(Reporter: ntim, Unassigned)

Tracking

(Blocks: 2 bugs, {dev-doc-needed})

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

a year 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

a year ago
Flags: needinfo?(hholmes)

Comment 1

a year 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

a year ago
Created attachment 8764331 [details]
fb-2-popup.png
Flags: needinfo?(erik.krause)
(Reporter)

Comment 4

a year ago
Created attachment 8764333 [details]
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

a year 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

a year 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

a year 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

a year 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

Updated

11 months ago
Blocks: 991806
Keywords: dev-doc-needed
You need to log in before you can comment on or make changes to this bug.