Add panel UI

[bgins]

Summary

Problem

The devtools panel does not display Webnative debugging information.

Impact

Developers can't get useful information from the extension if we don't display it.

Solution

Implement a panel UI.

Detail

The panel UI should display information from Webnative across a few different categories.

General

• Webnative version
• App namespace

The app namespace is configured by developers and isolates the app in browser storage. For example, a developer might declare their app namespace as:

const program = await wn.program({
  namespace: { creator: "Nullsoft", name: "Winamp" }
})

It is also possible for a developer to declare an app namespace as a single string:

const program = await wn.program({
  namespace: "MySuperApp"
})

Webnative version and app namespace are always available regardless of whether a user has authed or not.

Account / User / Auth

(Leaving the category name intentionally open ended.)

• Username
• Account DID
• Agent DID

Each of these should be displayed only after a user has authed.

The account DID is the user's root agent DID. The agent DID is the DID associated with the key pair of the current device. This could be the same as the account DID if it is the device where the user registered.

File system (WNFS)

• Filesystem skeleton
• Data root CID
• Bitswap activity and connection details
• Capabilities

The Filesystem skeleton will likely be the most complex interface in the extension. The file system is a tree with "private" and "public" root branches. Inside each root branch, there may be arbitrarily nested subdirectories and files. It may be possible to draw inspiration from the way the DOM is displayed by the Chrome devtools:

Bitswap activity and connection details are TBD because we will eventually be moving away from Bitswap. Will update with more details on that soon.

Capabilities is also TBD, but it would be a list of directories or files in WNFS that the app has access to. This only applies to apps that have requested capability from the Auth Lobby.

Each of these items are only relevant after a user has authed.

Connected/Disconnected states

The browser extension connects to Webnative in a web app. We hope that the connection will be solid, but there may be times when we have lost the connection with Webnative and the developer needs to re-establish the connection.

We should display the connection state and provide a way to reconnect. We may also want to provide the developer with a way to explicitly disconnect (not sure about this one).

Our canvas

The devtools panel is displayed inside the devtools in a dedicated panel like this:

(Ignore the placeholder mouse tracking UI. We'll replace that 😄.)

The panel can be resized by draggging it up and down. The panel can also be displayed on the left or right sides of the browser window:

The side version can be resized by dragging left or right.

Finally, the devtools panel can be popped out into it's own dedicated window.

[depatchedmode]

Couple of questions:

1. Are custom webfonts supported? Or only system fonts?
2. What kind of a timeline are we looking at here?

Other than that, let's jam on this!

[bgins]

Great, thanks @depatchedmode!

1. Are custom webfonts supported? Or only system fonts?

Looks we can use custom fonts! We will want to bundle the font with the extension. The example above it a true type font, but we can probably use other formats as well.

2. What kind of a timeline are we looking at here?

Would some time in the next two to three weeks be possible?