Closed
Conversation
manifest, devtools html/js, cells_panel html/js
(currently with fake data)
organizing code into module updating some css
issues with Manfiest v3 TODO
with png and minor changes
initial load, reconnection displays setup for cells loadeded displays
fixing up id class for d3 nodes and cells
Contributor
Author
|
closing with #145 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Motivation and Context
This PR is an initial pass at a (chrome) devtools extension to inspect the cells directly in the browser. It allows us to traverse the cells tree, see the corresponding displays, and inspect the individual cell properties.
At the moment the functionality is limited (the focus of this PR was the setting up of the extension and integration with cells framework), but you are able to click on any tree node and see a short description (currently name and id) in the side panel, double-click to expand and collapse the tree at a specific node, and hover over a node to see the corresponding cell-ui highlight (although this is a big buggy, see below).
Devtool extension development is a touchy. I have tried to add the critical elements to the README. Please go through this as it explain how to load the extension as well as how to understand the various components of the code (some of which don't seem to do anything at first glance other than route messages from one place to another...).
Approach
The bulk of the extension if the d3 js code found in tree.js, with the other files mostly dealing with target window, background, and devtools context communication. Otherwise, I have added two small methods to
CellHandlerwhich send over cell tree data to devtools as needed.How Has This Been Tested?
In the browser.
Types of changes
Checklist:
Limitations and Issues:
There is no filtering on cell types in the tree. For example, a
Buttonand aSubscribedcell are treated the same way, even though the former has a ui equivalent whereas the latter truly does not. This also leads to issues when trying to hover over tree nodes, since DOM elements corresponding to "non-view" cells have css which becomes difficult to overwrite dynamically. This is not impossible, but we need to think about how we want to treat cell types.The current info panel displays very little, so we should do more. For this we need to think about roles of different types of cells (Subscribed, Padding, Views, etc).
Sometimes the initial position of the d3 svg div is a bit off center. In general, the entire d3 part of the
CellTreeJS should be cleaned up.Filtering on updates to the cells tree happens on the devtools panel like so, but might be better handled in the CellHandler itself.
Personally, I would like to see the underlying python code for a specific cell appearing in an editor next to the info panel, in spirit similar to ODB webtest, but we'd need to think about the best way to make that happen.