DevTools: Add support for summarising amount of data in Web Storage |
||||||||
Issue descriptionVersion: 53 and above OS: All operating systems What steps will reproduce the problem? (1) Open DevTools (2) Navigate to the Application panel (3) Attempt to understand how much Web Storage is used (on desktop or mobile via remote debugging) (4) This cannot be done without significant manual effort (per storage system) What is the expected output? As developers begin to build more complex Progressive Web Apps, they are likely to utilise one or more web storage mechanisms (Local Storage, Indexed DB etc), however don't have good insight into how much data is being persisted today. This is a challenge when testing/deploying to mobile devices with limited amounts of storage available. Very few developers are aware of internal pages like chrome://indexeddb-internals/, however highlighting 'how much' data is stored in an easy to consume way would be of *huge* value. It might also be useful to offer an aggregated sum for how much overall Web Storage is being stored. Suggestions for how this could be done? Attached are two mocks for how this information could be surfaced in the Application tab. The first idea (devtools-storage-stats.png) is to turn the 'Storage' heading into it's own subpanel, offering up a simple table summarising the total storage used grouped by type. It's simple and communicates the break-downs right away. A more visual version of this could possibly use a pie chart. One could imagine applying this type of sub-panel approach to the 'Cache' heading as-well, to grok how much data is in the Service Worker Cache API. The second (devtools-storage-stats-inline.png) tries to look at inlining this information next to each storage type label in the main UI. I personally prefer the first suggestion more as it keeps the current UI as-is and relatively clean, but a UX designer would probably have a much better notion of how this feature could be neatly integrated :) What do you see instead? There is no convenient way to derive this information from the DevTools UI today. Let's try to fix it! :)
,
Jun 14 2016
I this idea a lot--I could also imagine a pie chart showing storage per origin or storage per API. Pavel, how much plumbing do we need to do to implement this?
,
Jun 15 2016
,
Jun 20 2016
,
Jul 22 2016
Bringing in @chowse for discussion.
,
Aug 30 2016
Friendly ping. Happy to help with iterating on mocks/ideas on how we might be able to proceed on this one :)
,
Aug 31 2016
Intriguing idea. The example in Comment 2 seems like low-hanging fruit. I don't see any reason we shouldn't surface it (though maybe w/o the blue text). It will need a different treatment in IndexedDB and WebSQL, which use a different UI (screenshots attached). As for showing overall storage use, I prefer the first proposal (dedicated Storage view) but I'd expect the behavior to be consistent in other headers. For example, if I click on the Local Storage heading, I'd expect to see a breakdown of domains w/ their respective storage usage.
,
Oct 6 2016
> Intriguing idea. The example in Comment 2 seems like low-hanging fruit. I don't see any reason we shouldn't surface it (though maybe w/o the blue text). It will need a different treatment in IndexedDB and WebSQL, which use a different UI (screenshots attached). I would be happy to see this functionality land with 2 without the blue text. > As for showing overall storage use, I prefer the first proposal (dedicated Storage view) but I'd expect the behavior to be consistent in other headers. For example, if I click on the Local Storage heading, I'd expect to see a breakdown of domains w/ their respective storage usage. This makes sense and I agree on consistency with the other headers. What's the next step forward on this one? :)
,
Oct 7 2016
We just submitted an EngRes proposal for someone to work on DevTools introspection of storage! Hoping to tackle this in Q4.
,
Nov 23 2016
,
Jan 5 2017
,
Jun 6 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/910a7bdf5cf34e70b2fb46bb70ad4746a0a892a3 commit 910a7bdf5cf34e70b2fb46bb70ad4746a0a892a3 Author: Eugene Ostroukhov <eostroukhov@chromium.org> Date: Tue Jun 06 21:34:01 2017 [DevTools] Display usage & quota information Adds a simple display for temporary and persistent storage information. Bug: 619521 Change-Id: Idad89ab215ba0ab6dcea2a37ef8e68d4b38d3244 Reviewed-on: https://chromium-review.googlesource.com/517920 Reviewed-by: Andrey Kosyakov <caseq@chromium.org> Reviewed-by: Dmitry Gozman <dgozman@chromium.org> Commit-Queue: Eugene Ostroukhov <eostroukhov@chromium.org> Cr-Commit-Position: refs/heads/master@{#477413} [modify] https://crrev.com/910a7bdf5cf34e70b2fb46bb70ad4746a0a892a3/content/browser/devtools/protocol/storage_handler.cc [modify] https://crrev.com/910a7bdf5cf34e70b2fb46bb70ad4746a0a892a3/content/browser/devtools/protocol/storage_handler.h [modify] https://crrev.com/910a7bdf5cf34e70b2fb46bb70ad4746a0a892a3/content/browser/devtools/protocol_config.json [add] https://crrev.com/910a7bdf5cf34e70b2fb46bb70ad4746a0a892a3/third_party/WebKit/LayoutTests/http/tests/inspector/resources/storage-view-reports-quota-expected.txt [add] https://crrev.com/910a7bdf5cf34e70b2fb46bb70ad4746a0a892a3/third_party/WebKit/LayoutTests/http/tests/inspector/resources/storage-view-reports-quota.html [modify] https://crrev.com/910a7bdf5cf34e70b2fb46bb70ad4746a0a892a3/third_party/WebKit/Source/core/inspector/browser_protocol.json [modify] https://crrev.com/910a7bdf5cf34e70b2fb46bb70ad4746a0a892a3/third_party/WebKit/Source/devtools/front_end/resources/ApplicationPanelSidebar.js [modify] https://crrev.com/910a7bdf5cf34e70b2fb46bb70ad4746a0a892a3/third_party/WebKit/Source/devtools/front_end/resources/ClearStorageView.js
,
Jun 6 2017
The first take on highlighting consumption of both temporary and persistent storage quotas looks like a good step forward! Thanks Eugene. I wondered about the discoverability of total usage in 'clear storage' but short of introducing a new sub-panel I can understand our limitations there. Thanks for working on this. Are there future iterations (based on some of the mocks that were shared around a few months back) planned?
,
Jun 6 2017
Sorry, this patch was submitted by mistake, a proper version will be coming shortly. There is active ongoing development on presenting the quota in the DevTools.
,
Jun 7 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/f3aa784ba3d16323a3b6cfe88f987fa141aa1599 commit f3aa784ba3d16323a3b6cfe88f987fa141aa1599 Author: Eugene Ostroukhov <eostroukhov@chromium.org> Date: Wed Jun 07 01:00:50 2017 Revert "[DevTools] Display usage & quota information" This reverts commit 910a7bdf5cf34e70b2fb46bb70ad4746a0a892a3. Reason for revert: <INSERT REASONING HERE> Original change's description: > [DevTools] Display usage & quota information > > Adds a simple display for temporary and persistent storage information. > > Bug: 619521 > Change-Id: Idad89ab215ba0ab6dcea2a37ef8e68d4b38d3244 > Reviewed-on: https://chromium-review.googlesource.com/517920 > Reviewed-by: Andrey Kosyakov <caseq@chromium.org> > Reviewed-by: Dmitry Gozman <dgozman@chromium.org> > Commit-Queue: Eugene Ostroukhov <eostroukhov@chromium.org> > Cr-Commit-Position: refs/heads/master@{#477413} TBR=dgozman@chromium.org,caseq@chromium.org,eostroukhov@chromium.org No-Presubmit: true No-Tree-Checks: true No-Try: true Bug: 619521 Change-Id: Ifbd83a3b466ed1c08c549f9a5e34642012a19a40 Reviewed-on: https://chromium-review.googlesource.com/526434 Reviewed-by: Dmitry Gozman <dgozman@chromium.org> Commit-Queue: Eugene Ostroukhov <eostroukhov@chromium.org> Cr-Commit-Position: refs/heads/master@{#477496} [modify] https://crrev.com/f3aa784ba3d16323a3b6cfe88f987fa141aa1599/content/browser/devtools/protocol/storage_handler.cc [modify] https://crrev.com/f3aa784ba3d16323a3b6cfe88f987fa141aa1599/content/browser/devtools/protocol/storage_handler.h [modify] https://crrev.com/f3aa784ba3d16323a3b6cfe88f987fa141aa1599/content/browser/devtools/protocol_config.json [delete] https://crrev.com/32a029d4c4d101299733eec919557b77e60ac85b/third_party/WebKit/LayoutTests/http/tests/inspector/resources/storage-view-reports-quota-expected.txt [delete] https://crrev.com/32a029d4c4d101299733eec919557b77e60ac85b/third_party/WebKit/LayoutTests/http/tests/inspector/resources/storage-view-reports-quota.html [modify] https://crrev.com/f3aa784ba3d16323a3b6cfe88f987fa141aa1599/third_party/WebKit/Source/core/inspector/browser_protocol.json [modify] https://crrev.com/f3aa784ba3d16323a3b6cfe88f987fa141aa1599/third_party/WebKit/Source/devtools/front_end/resources/ApplicationPanelSidebar.js [modify] https://crrev.com/f3aa784ba3d16323a3b6cfe88f987fa141aa1599/third_party/WebKit/Source/devtools/front_end/resources/ClearStorageView.js
,
Jun 16 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/8ce17e99b623e98ebf75c27250c936fea4b844d4 commit 8ce17e99b623e98ebf75c27250c936fea4b844d4 Author: Eugene Ostroukhov <eostroukhov@chromium.org> Date: Fri Jun 16 23:48:04 2017 [DevTools] Display usage & quota information Adds a simple display for temporary and persistent storage information. Bug: 619521 Change-Id: Ia6caabe553a4f0313fdb75d135fc021c6c19593c Reviewed-on: https://chromium-review.googlesource.com/526735 Commit-Queue: Eugene Ostroukhov <eostroukhov@chromium.org> Reviewed-by: Dmitry Gozman <dgozman@chromium.org> Reviewed-by: Andrey Kosyakov <caseq@chromium.org> Cr-Commit-Position: refs/heads/master@{#480226} [modify] https://crrev.com/8ce17e99b623e98ebf75c27250c936fea4b844d4/content/browser/devtools/protocol/storage_handler.cc [modify] https://crrev.com/8ce17e99b623e98ebf75c27250c936fea4b844d4/content/browser/devtools/protocol/storage_handler.h [modify] https://crrev.com/8ce17e99b623e98ebf75c27250c936fea4b844d4/content/browser/devtools/protocol_config.json [add] https://crrev.com/8ce17e99b623e98ebf75c27250c936fea4b844d4/third_party/WebKit/LayoutTests/http/tests/inspector/application-panel/storage-view-reports-quota-expected.txt [add] https://crrev.com/8ce17e99b623e98ebf75c27250c936fea4b844d4/third_party/WebKit/LayoutTests/http/tests/inspector/application-panel/storage-view-reports-quota.html [modify] https://crrev.com/8ce17e99b623e98ebf75c27250c936fea4b844d4/third_party/WebKit/Source/core/inspector/browser_protocol.json [modify] https://crrev.com/8ce17e99b623e98ebf75c27250c936fea4b844d4/third_party/WebKit/Source/devtools/front_end/resources/ApplicationPanelSidebar.js [modify] https://crrev.com/8ce17e99b623e98ebf75c27250c936fea4b844d4/third_party/WebKit/Source/devtools/front_end/resources/ClearStorageView.js [modify] https://crrev.com/8ce17e99b623e98ebf75c27250c936fea4b844d4/third_party/WebKit/Source/devtools/front_end/ui/ThrottledWidget.js
,
Aug 22 2017
|
||||||||
►
Sign in to add a comment |
||||||||
Comment 1 by addyo@chromium.org
, Jun 13 2016517 KB
517 KB View Download