Skip to content

Instantly share code, notes, and snippets.

@MikeRatcliffe

MikeRatcliffe/Storage Panel Fission.md

Last active December 17, 2019 20:23
Show Gist options
  • Save MikeRatcliffe/59fbb67a048a14ddb01e783868bea0c8 to your computer and use it in GitHub Desktop.
Save MikeRatcliffe/59fbb67a048a14ddb01e783868bea0c8 to your computer and use it in GitHub Desktop.
Download ZIP
Storage Panel Fission
Raw
Storage Panel Fission.md

Storage Panel Fission and Migration to Application Panel

Plan

We have decided to make a number of architectural changes to the Storage Panel to simplify the process of migrating to fission. Most of the original code can be reused but a number of changes need to be made in order to prepare the code for migration.

We will first make a number of changes to the Storage Panel and then migrate it to the application panel (and to fission).

These changes can be summarised as follows:

Milestone 1: Fission-compatible Client/Server

  • Replace the observer approach with a simple refresh button.
  • Change the indexedDB actor to use indexedDB.databases() instead of direct file access.
  • Stop using class inheritance and move the actors out into their own files.
  • Create a simple skeleton storage inspector inside the application panel
  • Migrate each panel to the application panel.
  • Make use of TargetList for fission compatibility.

Milestone 2: Basic UI

For UX

  • Persist visited origins: When debugging storage between redirecting pages and iframes, I want an option to persist all known origins, so that I can see which storage was created or accessed even though the pages are gone. We currently drop pages that no longer exist.

  • Refresh button along with option to refresh every X seconds.

  • Add or edit cookie, localStorage and sessionStorage: At the moment we just do this in the table but using a form in the sidebar to add, view and edit an item would allow better presentation of data and allow us to use date pickers etc. We can only do this for cookies, localStorage and sessionStorage because we know which data types to expect.

  • Double-keyed storage: Double-keyed storage refers to first party isolation of storage items. In a nutshell this means that such storage is actually keyed by the URL of the browser window then the iframe URL and then the storage item name.

    If site1.com and site2.com both had iframes containing site3.com and site3 had a cookie named "myCookie" we would have 2 independant cookies:

    • site1.com -> site3.com -> myCookie
    • site2.com -> site3.com -> myCookie

    Showing this in the tree makes sense but with a lot of iframes it could get very messy.

  • Storage Dashboard: When storing complex data, I want to see where data is kept and how much, so that I can monitor my quota and inspect the biggest buckets. I would expect to see the following if a storage item is selected but not a domain e.g. cookies:

    1. The space taken by the current cookies on the page.
    2. The available to the current cookies on the page.
    3. The total space used by cookies in the whole browser.
    4. The total space available to cookies in the whole browser.

  • Should we combine sessionStorage, localStorage into 1 table?

  • Create a simple skeleton storage inspector inside the application panel

    • This should be a split view containing the storage tree structure and a simple message for each storage type.

Steps / Bugs

Independent

Sequential

Notes

@juliandescottes
Copy link

Bug xxxxxxx - Disable storage inspector tests when fission enabled.

Normally all tests failing with fission are already disabled: see "fail-if = fission" in https://searchfox.org/mozilla-central/source/devtools/client/storage/test/browser.ini . Do we really need to skip additional tests?

@MikeRatcliffe
Copy link
Author

@juliandescottes I was assuming so because e.g. the indexedDB storage inspector tests failed for me the last time I tried with Fission enabled but they are not marked as fail-if = fission. You are right though... it seems like these tests are somehow passing at the moment so life is good ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment