bellbind/index.html

## index.html
<!doctype html>
<html>
  <head>
    <title>Origin Private File System Viewer</title>
    <script type="module">
      // see https://fs.spec.whatwg.org/

      const showDir = (dir, check, ul) => {
        check.addEventListener("change", ev => {
          if (check.checked) (async () => {
            // show dir entries
            for await (const h of dir.values()) {
              const li = document.createElement("li");
              ul.append(li);

              // as directory handle
              if (h.kind === "directory") {
                const label = document.createElement("label");
                const childCheck = document.createElement("input");
                childCheck.type = "checkbox";
                const childUl = document.createElement("ul");
                showDir(h, childCheck, childUl);
                label.append(childCheck, h.name);
                li.append(label, childUl);
              }

              // as file handle
              if (h.kind === "file") {
                const file = await h.getFile();
                const {lastModified, type, size} = file; // same as HTML File object (e.g. no access control)
                const info = `(type: ${type}, size: ${size}, modified: ${new Date(lastModified).toLocaleString()})`;
                li.append(h.name, " ", info);

                // text content viewer
                const button = document.createElement("button");
                button.textContent = "Open as UTF-8 text";
                li.append(button);
                const dialog = document.createElement("dialog");
                const pre = document.createElement("pre");
                const close = document.createElement("button");
                close.textContent = "close";
                close.addEventListener("click", ev => {
                  dialog.close(true);
                  ev.stopPropagation();
                });
                dialog.append(pre, close);
                button.append(dialog);
                button.addEventListener("click", ev => {
                  if (dialog.open) return;
                  (async () =>{
                    pre.textContent = await file.text(); // read as text
                    dialog.showModal();
                  })().catch(alert);
                });
              }

            }
          })().catch(alert);

          if (!check.checked) ul.innerHTML = "";
        });
      };


      const root = await navigator.storage.getDirectory();
      const rootCheck = document.querySelector("main input[type=checkbox]");
      const rootUl = document.querySelector("main ul");

      showDir(root, rootCheck, rootUl);
    </script>
    <style>
      label:has(input[type=checkbox]) ~ ul {display: none;}
      label:has(input[type=checkbox]:checked) ~ ul {display: block;}
      label:has(input[type=checkbox])::before {content: "\25b6";}
      label:has(input[type=checkbox]:checked)::before {content: "\25bc";}
      input[type=checkbox] {display: none;}
    </style>
  </head>
  <body>
    <h1><a href="https://fs.spec.whatwg.org/" target="_blank" rel="noopener">Origin Private File System</a> Viewer</h1>
    <main><label><input type="checkbox">(root directory)</label><ul></ul></main>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Origin Private File System Viewer</title>
	<script type="module">
	// see https://fs.spec.whatwg.org/

	const showDir = (dir, check, ul) => {
	check.addEventListener("change", ev => {
	if (check.checked) (async () => {
	// show dir entries
	for await (const h of dir.values()) {
	const li = document.createElement("li");
	ul.append(li);

	// as directory handle
	if (h.kind === "directory") {
	const label = document.createElement("label");
	const childCheck = document.createElement("input");
	childCheck.type = "checkbox";
	const childUl = document.createElement("ul");
	showDir(h, childCheck, childUl);
	label.append(childCheck, h.name);
	li.append(label, childUl);
	}

	// as file handle
	if (h.kind === "file") {
	const file = await h.getFile();
	const {lastModified, type, size} = file; // same as HTML File object (e.g. no access control)
	const info = `(type: ${type}, size: ${size}, modified: ${new Date(lastModified).toLocaleString()})`;
	li.append(h.name, " ", info);

	// text content viewer
	const button = document.createElement("button");
	button.textContent = "Open as UTF-8 text";
	li.append(button);
	const dialog = document.createElement("dialog");
	const pre = document.createElement("pre");
	const close = document.createElement("button");
	close.textContent = "close";
	close.addEventListener("click", ev => {
	dialog.close(true);
	ev.stopPropagation();
	});
	dialog.append(pre, close);
	button.append(dialog);
	button.addEventListener("click", ev => {
	if (dialog.open) return;
	(async () =>{
	pre.textContent = await file.text(); // read as text
	dialog.showModal();
	})().catch(alert);
	});
	}

	}
	})().catch(alert);

	if (!check.checked) ul.innerHTML = "";
	});
	};


	const root = await navigator.storage.getDirectory();
	const rootCheck = document.querySelector("main input[type=checkbox]");
	const rootUl = document.querySelector("main ul");

	showDir(root, rootCheck, rootUl);
	</script>
	<style>
	label:has(input[type=checkbox]) ~ ul {display: none;}
	label:has(input[type=checkbox]:checked) ~ ul {display: block;}
	label:has(input[type=checkbox])::before {content: "\25b6";}
	label:has(input[type=checkbox]:checked)::before {content: "\25bc";}
	input[type=checkbox] {display: none;}
	</style>
	</head>
	<body>
	<h1><a href="https://fs.spec.whatwg.org/" target="_blank" rel="noopener">Origin Private File System</a> Viewer</h1>
	<main><label><input type="checkbox">(root directory)</label><ul></ul></main>
	</body>
	</html>