oddsdk / odd-devtools Goto Github PK
View Code? Open in Web Editor NEWAn extension to help developers use the Webnative SDK
License: Apache License 2.0
An extension to help developers use the Webnative SDK
License: Apache License 2.0
When more than one tab is open, the devtools will stop working in all but the last opened tab.
Developers can only use the devtools in one tab at a time.
Keep a map of ports from the background script to each devtools instance.
Filter messages in each devtools instance include only messages from its associated tab.
The current implementation of the browser extension only receives messages from Webnative when a developer has the Webnative devtools panel open.
Developers will miss messages if they navigate to another panel in the devtools interface.
Move message reception to the devtools page.
The devtools page is kept alive while the developer has the devtools open. Handling messages here will let developers navigate around the devtools interface freely.
This change will require an update to when we connect and disconnect from Webnative. We have a couple of options:
The direction of time in the event log is not clear to all users.
Users are not always certain in which order events occurred.
Add some indication of the ordering to the event log entries.
The Chrome Web Store has stopped accepting new Manifest V2 extensions as of January 17, 2022: https://developer.chrome.com/docs/extensions/mv3/intro/#start-the-conversion
We will not be able to publish the extension to the Chrome Web Store.
Upgrade the existing extension code to Manifest V3.
The devtools logs many messages, which can get a bit noisy. Text-based filtering can help developers focus on a specific message type, directory, or file.
Without filtering, a developer will need to look through unrelated events to find the events they want.
Add text-based filtering on message types and values in event payloads.
Looks like we can do this pretty easily:
Eg I was able to add this debug code in devtools.js and it worked:
browser.devtools.panels.onThemeChanged.addListener(() => {
console.log('theme changed?', browser.devtools.panels.themeName)
})
When selecting the devtools panel in Firefox, a duplicate panel is created.
Many unnecessary panels are created.
The panels are created when importing the devtools script in the panel to access stores. Remove the import and keep a separate copy of stores in the panel script.
Currently as you widen the browser window the Namespace and Event columns scale their width out - this is probably unnecessary, the columns can probably be fixed width even?
When a developer closes the devtools, messages they have observed are lost.
Developers will lose context if the close the devtools and have to start over.
Store messages in extension storage. Reload them each time the devtools are opened.
Add a clear messages button to let developers erase history if they want to.
Browser extension marketplaces request a project description and privacy policy when publishing an extension. We don't have these yet.
We can't publish without them.
Write up a project description and privacy policy. We can add the project description as the opening section of the README. We'll add the privacy policy as a separate document in the repo.
@bgins I think we've got a cold start problem if we choose to keep the needed permissions as optional. We should investigate whether we can detect if permissions have been granted from the extension at run time, and advise the user that the extension will not be functional without them enabled.
OR, is it possible to just make all the permissions we need, requested at install time? I feel like for a developer audience this will be fine.
The devtools check for connection when opened, but not on navigating to a new domain.
The devtools will sometimes show a connected status when they are not.
Set the connected status to false on every page load. Set connected on receiving a message from Webnative.
On reloading the page or returning from the Fission Auth Lobby, the connection with Webnative will be dropped.
Some events may be missed and developers will need to reconnect with Webnative.
Store a flag to indicate connection state in extension storage. Check the flag and reconnect as needed.
The extension does not communicate with Webnative.
The extension does not fulfill its primary purpose of debugging Webnative without this feature.
Implement a communication layer to interact with Webnative.
The extension can communicate with Webnative by a couple of methods:
window.navigator
)Webnative can only communicate with the extension using window post messages. We can check that the post messages are from the page where the extension's content script was injected by checking the event.source
when receiving a window post message.
Side note: Chrome supports an externally_connectable
API that allows a page to send messages directly using the extension runtime. Firefox does not support this feature yet so we can discard it as an option for now.
We will start the interaction between the extension and Webnative when a developer opens the Webnative devtools panel. The extension will signal to Webnative that it is ready to connect.
We could call a function put onto the global scope by Webnative or send a window post message to Webnative. I think calling a function would be preferable because it is a direct communication between the extension and Webnative. A window post message could be received elsewhere.
Webnative should send a connected
window post message to the extension to confirm the connection. We can't directly target the extension with a window post message, but we can tag messages so the extension can ignore any other window post noise.
The connected
message could look like:
{
id: 'webnative-message',
type: 'connected'
}
We could go further configure Webnative with a unique id
sent by the extension when it connects. For example
{
id: 'webnative-61728e0e-d3ee-4eea-93ff-c4d9a9ab493a',
type: 'connected'
}
The main benefit here would be to ignore spoofed messages sent by another window poster. Not actually sure if we have a privacy or security concern, so a unique id
might be overkill.
We should add a disconnect as well. The extension might disconnect when the developer is not viewing the Webnative devtools panel. Also, Webnative may want to signal to the extension that it has disconnected because something went wrong.
Disconnect could be implemented in roughly the same way as connect. Webnative adds a disconnect function to the global scope that the extension can call. When called, Webnative responds with a disconnect
message like:
{
id: 'webnative-message',
type: 'disconnected'
}
Data messages are sent from Webnative to the extension. See #2 for a list of data we would like to send.
We will send data messages as window post messages, and we can use a similar format to the other messages with an added data
field:
{
id: 'webnative-message',
type: 'data',
data: {
// various bits of data
}
}
The data
that we send must be JSON serializable because the message will pass through extension messaging APIs.
It's pretty common in other tools to be able to copy raw JSON out to use in an editor.
The state object currently displays information about the state of the app, file system, user, and ODD SDK. It's a bit overloaded, which led one user to ask "this is the state of what?"
Users are uncertain about the information they are presented, which makes the extension more difficult to use.
We can improve this by doing the following:
In addition, we may want to:
dataRootCID
as publishedRootCID
root
as localRootCID
The devtools panel displays connect and disconnect messages.
These messages are emitted on connect and disconnect with Webnative. They don't have much value for developers and create unnecessary noise.
Don't add these messages to the event store.
The devtools panel does not display Webnative debugging information.
Developers can't get useful information from the extension if we don't display it.
Implement a panel UI.
The panel UI should display information from Webnative across a few different categories.
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.
(Leaving the category name intentionally open ended.)
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.
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.
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).
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.
The ODD Devtools extension provides developers a devtools panel with information for debugging their ODD applications.
It should display the following information:
The information should only be exposed when the developer has set debug
to true
when initializing an ODD program.
Firefox sometimes displays the not connected view when it appears to have actually connected.
The not connected view blocks the event log, which makes the extension unusable in some cases. The bug is intermittent, so sometimes refreshing the web page helps.
Increase the timeout before we assume the connection failed. The timeout is currently one second. We can probably increase this to two seconds.
The design specs have been updated with an adjusted ODD SDK theme and new icons. Let's update the theme per the new spec in https://www.figma.com/file/rxwUX03SEZ1o4lqfOvlszW/ODD-Devtools-Specs.
Browser extensions have incompatibilities across different browsers.
Targeting multiple browsers will be challenging to maintain manually.
Set up a build using Vite that emits builds that will work in each target browser. At the moment, the main incompatibility is that Firefox does not yet support service workers for Manifest V3 extensions.
Targeting multiple browsers is the primary motivation, but adding a build will also give us:
We should prepare the extension and publish it to the Chrome Web Store and to Firefox add-ons.
Tasks include:
Submission of Manifest V3 extensions to addons.mozilla.org requires a pre-selected extension ID.
We cannot publish without one.
Add an extension ID to the Firefox manifest as described in https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings
The devtools display a "Not connected" indicator but do not explain what devs can do to address it.
Devs might be confused and not know how to get the devtools working.
Add a "Not connected" view that is displayed after a short delay with configuration instructions. Not that the delay is because it takes the devtools a moment to connect to the ODD SDK, and we don't want to prematurely show an error page.
We should add issue and PR templates to the project. Should be able to borrow these from https://github.com/fission-codes/rust-template with some minor tweaks.
When testing I unconsciously tried to use up/down arrow keys to get to a next or previous event in the UI.
This should probably also work for when the keyboard focus is set to the Namespace column.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.