1762332 - Add a way to inspect "Origin Private File System" (OPFS) files

Status: NEW

(DevTools :: General, enhancement, P3)

Description

[Nicolas Chevobbe [:nchevobbe]]

From Element:

jesup: Once we have OPFS, it makes sense to have some way to inspect the files in the OPFS. Especially since there's no guarantee that there's even a disk directory containing them, or they might be encrypted or otherwise not 1:1 the data seen by the site (we might add a header, for example). At minimum we need some way to locate the files on disk (especially if we store them with no modification). Better would be some way to browser, extract and import data from the OPFS (and this is especially important if we encrypt or modify the data, or if we store (some) of the data in a database, etc.

Looks like something we could put in the Storage panel

asuth: I think our API precedent with the Cache API is likely good here, which is to specifically have a ChromeOnly constructor on the relevant interface that allows devtools/tests to create its own copy of the underlying API to use with the principal of the site, as done with CacheStorage :
We can also add other ChromeOnly methods on the interfaces as appropriate where devtools needs something special. As opposed to creating new XPCOM interfaces just for devtools.

Comment 1

[Thomas Steiner]

Attachment: OPFS Explorer extension

Comment 2

[Thomas Steiner]

I have implemented a browser extension that's running in Firefox. Once the OPFS is supported, this should allow you to inspect the OPFS file tree.

• Source code: https://github.com/tomayac/opfs-explorer
• Demo: https://tomayac.github.io/opfs-explorer/

Comment 3

[Brian Grinstead [:bgrins]]

(In reply to Thomas Steiner from comment #2)

I have implemented a browser extension that's running in Firefox. Once the OPFS is supported, this should allow you to inspect the OPFS file tree.

• Source code: https://github.com/tomayac/opfs-explorer
• Demo: https://tomayac.github.io/opfs-explorer/

Cool, thanks for sharing :). For reference, I was able to get it installed and running in nightly with:

git clone [e-mail]:tomayac/opfs-explorer.git
about:config -> extensions.backgroundServiceWorker.enabled
about:debugging#/runtime/this-firefox -> Load temporary addon (select opfs-explorer/manifest.json)

However once I open https://tomayac.github.io/opfs-explorer/ and open the devtools it ends up stuck in " ⏳ Analyzing Origin Private File System" state. I'm assuming this will work once the implementation is further along.

Comment 4

[Thomas Steiner]

However once I open https://tomayac.github.io/opfs-explorer/ and open the devtools it ends up stuck in " ⏳ Analyzing Origin Private File System" state. I'm assuming this will work once the implementation is further along.

Yes, same here. In Chrome, you can run DevTools in a separate window and then inspect DevTools with DevTools, which allows you to see what's going on in the DevTools extension. Not sure how or if this works in Firefox; the Chrome flow didn't work. It's hard to figure out what's going on. FWIW, I get a NS_ERROR_NOT_IMPLEMENTED cb0ff996-311b-499f-9a43-d48d96e10f3e:12 error on the console when I try to open https://tomayac.github.io/opfs-explorer/. The demo at https://sqlite-wasm-opfs.glitch.me/ seems to work according to the output and also doesn't throw the error, but it doesn't try to create an OPFS folder structure, which the other demo does.

Comment 5

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

Yes, same here. In Chrome, you can run DevTools in a separate window and then inspect DevTools with DevTools,

Firefox has Browser Toolbox [1] - DevTools toolbox that can be used to inspect/debug Firefox UI including DevTools.
Does it help you with your case?

[1] https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/index.html

Comment 6

[Tom S. (please needinfo tschuster)]

NS_ERROR_NOT_IMPLEMENTED is caused by createWritable, which requires the dom.fs.writable_file_stream.enabled pref to be set to work.