1118692 - Refactor the markup-view UI code into shareable/reusable/swappable components

Status: RESOLVED WONTFIX

(DevTools :: Inspector, defect)

Description

[Patrick Brosset <:pbro>]

Some of the advantages of refactoring the UI code into shareable components and clearly separating them from the model are:

- better maintainability and testability,
- simpler learning curve for new contributors,
- components can be shared (i.e. displaying a DOM node in the debugger or console becomes very simple and the node is guaranteed to look/behave the same everywhere),
- components can be swapped easily, as long as they have the same signature (e.g. making it easy to swap for an HTML-like output to an HAML-like output).

Reactjs is clearly a good candidate for this. Choosing to adopt a framework like Reactjs for this project is not an easy question to answer.

I intend this bug to be used as an experiment which, hopefully, would make answering the question easier.

Comment 1

[Patrick Brosset <:pbro>]

Attachment: reactify-markup-view

This is my experiment so far.
This replaces the markup-view code completely.

90% of the features are missing, so it's a very long way from being done, but it does display something if you visit a page and *then* open the inspector (don't try to navigate or reload or anything fancy like this).

I've created a new model thing that talks to the Walker and builds an internal tree representation of the currently displayed DOM tree. Each time this internal model changes, an event is emitted, and that is used by the new markup-view to refresh itself.

The react components are split in a way that should make it easy to embed a node anywhere in the devtools, and make this node either dynamic (ability to expand it and reacting to mutations), or just static.

Just for fun, instead of the usual HTML-like output, I've implemented a very simple HAML-like component to demonstrate how easy it is to swap components once you've made sure they are simple/small/stateless enough (will include a screenshot).

Comment 2

[Patrick Brosset <:pbro>]

Attachment: markup-view-haml.png

Comment 3

[Patrick Brosset <:pbro>]

CC'ing a few people, including Irakli and James who know way more about React than me and might be interested in telling me where my patch sucks :)

Comment 4

[Patrick Brosset <:pbro>]

Attachment: reactify-markup-view

Comment 6

[Patrick Brosset <:pbro>]

WONTFIXing this. Not a priority just now. Keeping this work as a reference for later when we do migrate the markup-view panel to react.