1713316 - IndexedDB DevTools does not load more than 50 items

Status: RESOLVED FIXED

(DevTools :: Storage Inspector, defect, P2)

Description

[manuforcen]

Attachment: Screenshot of DevTools showing only 50 items, when about 1500 items are stored.

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0

Steps to reproduce:

Working with IndexedDB DevTools in a big screen.

Actual results:

When working in a big screen with DevTools on the left (the display shows more than 50 items), scroll event does not trigger, so Firefox won't load more items. The only way to make this work is to make the window smaller in order to start scrolling

Expected results:

There should be a button to load more values, or start loading more values.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Storage: IndexedDB' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Julian Descottes [:jdescottes]]

Feels like this should be re-prioritized.

Comment 3

[Julian Descottes [:jdescottes]]

Honza to reproduce and investigate.

Comment 4

[Jan Honza Odvarko [:Honza] (always need-info? me)]

The issue is easily reproducible using the following Test case + STRs

1. Load http://odvarko.com/tests/fission/case2/odvarko.com.html
2. Open DevTools docked to a side and select the Storage panel
3. Maximize the browser window to get maximum vertical space in the Storage panel
4. Select "Session Storage -> http://odvarko.com" entry in the left panel
5. Use "Add to Session Storage" button to create > 60 items
6. Reopen DevTools and again select "Session Storage -> http://odvarko.com"
7. You should see just 50 items (suprisingly 52 sometimes)

You can reproduce the same with other data type (e.g. Cookies as well)

1. The storage data table is automatically populated when a host is selected in the left panel:
   https://searchfox.org/mozilla-central/rev/3a1b5e963e92d478b2b4c0f0ddbbefd23aacc05e/devtools/client/storage/ui.js#1188

2. Fetching data is done in fetchStorageObjects (with the reason set to REASON.POPULATE)
   https://searchfox.org/mozilla-central/rev/3a1b5e963e92d478b2b4c0f0ddbbefd23aacc05e/devtools/client/storage/ui.js#865

3. A packet is sent to the server side to fetch the data here
   https://searchfox.org/mozilla-central/rev/3a1b5e963e92d478b2b4c0f0ddbbefd23aacc05e/devtools/shared/protocol/Front/FrontClassWithSpec.js#46

4. The packet is handed on the server side here:
   https://searchfox.org/mozilla-central/rev/3a1b5e963e92d478b2b4c0f0ddbbefd23aacc05e/devtools/server/actors/storage.js#388
   Since no options.size is provided (when populating the table with data) the default is 50 (no matter how big is the table widget on the screen)
   https://searchfox.org/mozilla-central/rev/3a1b5e963e92d478b2b4c0f0ddbbefd23aacc05e/devtools/server/actors/storage.js#72

5. When the user scrolls to the bottom of the table the logic handles the scroll event and fetches 50 more items (fetching them using reason REASON.NEXT_50_ITEMS)
   https://searchfox.org/mozilla-central/rev/3a1b5e963e92d478b2b4c0f0ddbbefd23aacc05e/devtools/client/storage/ui.js#1395
   https://searchfox.org/mozilla-central/rev/3a1b5e963e92d478b2b4c0f0ddbbefd23aacc05e/devtools/client/storage/ui.js#1400

Since there is no scrollbar (in the scenario described above), the user can't trigger the scrollevent and there is no way to fetch the rest of the data. The workaround is to make the table widget smaller to force the scrollbar to appear.

Possible solutions

1. Quick and dirty: We can increase the default from 50 to 100

2. Proper solution: When populating the table with data (reason REASON.POPULATE) we can provide options.size dynamically calculated based on the current height of the table widget. We should also handle "onresize" event on the data table and fetch more data if there is more visible vertical space.

Honza

Comment 5

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Mike, could this be a good first bug? Or perhaps good-second-bug?

Comment 6

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

I'll add this to my queue because there are a lot of edge cases where this could get hairy.

Comment 7

[Julian Descottes [:jdescottes]]

Interestingly we fixed two similar bugs a few years ago (and we have mochitests for both):

• https://bugzilla.mozilla.org/show_bug.cgi?id=1476647
• https://bugzilla.mozilla.org/show_bug.cgi?id=1434579

One fixes a server issue which prevented to return more than 50 items, the other fixes scrolling when toolbox height is too big.

Comment 8

[Julian Descottes [:jdescottes]]

Oh ok it's really the edge case where we don't have a scrollbar for 50 items. I can't even get that on my screen unless I zoom out DevTools :) But I only have 1080 pixels to work with. The proposed solutions in comment #4 sound good!

Comment 9

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

There is also option 3: If there is no overflow just grab batches of 50 items until we have overflow... this way we don't care about the size.

I'll have a play.

Comment 10

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

Attachment: Bug 1713316 - IndexedDB DevTools does not load more than 50 items r=#devtools-reviewers

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/fc0c3830d019
IndexedDB DevTools does not load more than 50 items r=devtools-reviewers,jdescottes

Comment 12

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/fc0c3830d019