Summary: There is no reason to have a context menu rendered by react for each item in the tree, its pretty wastefull. It also means less props drilled to the tree node
Reviewed By: lblasa
Differential Revision: D41872778
fbshipit-source-id: b13491a310c03334d7f3056207f5de23d20c3e61
Summary:
1. only useValue from tree root
2. Pass down props for ui state instead subscribing ad hoc
3. Pass down callbacks, instead of updating atoms ad hoc.
4. Create ui actions object holding api, will use this later on in the vizualizer as some of the same
In general its more verbose but with memoizing perf should be fine should hopefully be easier to reason about components and what they can do as things are more explicit
Hopefully this serves as a general template for how to organise the react code going forward
Reviewed By: lblasa
Differential Revision: D41872490
fbshipit-source-id: 94a33b0e951c04df367ba102fa0a097d4a0389cd
Summary:
This is temporary solution to get to parity with the old plugin. In future would like to make this more flexible on the desktop side
Additionally getData was renamed to getAttributes for consistency
Reviewed By: lblasa
Differential Revision: D41845248
fbshipit-source-id: 50e94a7712f5d42938229134e212cef5d379475d
Summary: While moving mouse and changing hover state react render is under 1ms due to subscribing to state rather than passing hover as prop to all components
Reviewed By: lblasa
Differential Revision: D41838168
fbshipit-source-id: c9b3334adc44df5018e0a785684a2883aeb3bab1
Summary: The old implementation would always rerender on every operation (select, hover etc) and was quite slow for large hierachies
Reviewed By: lblasa
Differential Revision: D41838166
fbshipit-source-id: 1270841027926440a9c1f1a846d3aedc75ffe8bf
Summary:
The root view resolver will always find all root views but there was a bug in the listrootviews method. The code was very complex and most of the code seemed to be unneeded. Its now working. The listrootviews method now just returns teh contents of the observable array.
The reason we needed this is that Certain activities dont seem to tracked by the listener we add to `registerActivityLifecycleCallbacks` Its as if there is a floating decor with no activity. One example in FB4a is clicking on a notification in the notifications panel
Reviewed By: lblasa
Differential Revision: D41522791
fbshipit-source-id: b49b0104ddf758f097e1fd3f9ac6588de2d3646e
Summary:
This change adds a small feedback alert banner. It will have a link to our workplace feedback group.
Additionally, it asks engineers to record their sessions.
Reviewed By: LukeDefeo
Differential Revision: D41531851
fbshipit-source-id: 7ec8ca79350e7a84ab0532065bc57187ef0055ba
Summary:
Attributes Inspector didn't have support for inspectable arrays.
This change addresses an issue with the inspectable itself and adds basic support to it in the visualiser.
Reviewed By: LukeDefeo
Differential Revision: D41522879
fbshipit-source-id: f9cad42470541039c8157477b0fe9bc58f18f1ba
Summary: also made the controls component full width to push down the visualiser
Reviewed By: lblasa
Differential Revision: D41548665
fbshipit-source-id: 2bca527e70c92bc0ded120e51a0880f76f7cca87
Summary: This was causing the hover state to linger which is now quite noticable in the tree
Reviewed By: lblasa
Differential Revision: D41548249
fbshipit-source-id: cdf8ed434aa064dba05ebf31773bedaef18ba007
Summary: With the previous approach it was hard to read the name of the node, this should be a lot clearer. The tool top comes in a after a delay, the reason for this is because when i tried without a delay when you moved the mouse fast a ton of tooltips would appear and disappear when you passed over diffferent nodes and it was very distracting. 200ms seems to be about the sweet spot
Reviewed By: lblasa
Differential Revision: D41548248
fbshipit-source-id: 76460347730d5b1d2e968984e845be0c65255456
Summary: There were a few subtleties around what to the auto expanding / collapsing for active children but otherwise this is quite straightforward
Reviewed By: lblasa
Differential Revision: D41548252
fbshipit-source-id: c153d00210d859463a51753dadf2e5aabeb7ea35
Summary:
Remove checkbox as we currently don't support editing values.
Instead replace with a simple 'TRUE', 'FALSE' text.
Reviewed By: antonk52
Differential Revision: D41532898
fbshipit-source-id: d4af37e30eb21ab761c39cb4ae45337247c80c9d
Summary: Should be a bit easier to see what UI state we are holding at the plugin instance level
Reviewed By: lblasa
Differential Revision: D41498272
fbshipit-source-id: 6d88086766efd9c39f71be7e2ce32c5058494c96
Summary: We have to do a couple of odd things to get the context menu items to behave. The code was duplicated between tree and visualizer. This custom component removes duplication and makes the approach a bit clearer (via js doc)
Reviewed By: antonk52
Differential Revision: D41495718
fbshipit-source-id: ec98d5101e636a2c9034c656d29991d4fe348762
Summary: Added context menu to visualizer similar to what we have on the tree
Reviewed By: lblasa
Differential Revision: D41494948
fbshipit-source-id: 0cfa4c98b7a68462a7103ed1ce9eaaff8c99aeee
Summary: Mouse over event still fires for the dom nodes behind the context menu modal. This will cause state changes and rerenders. Some of the state the context menu depends on can change so it would cause the context menu items to change while its stil open. Now we dont fire those hover state changes while context menu active
Reviewed By: lblasa
Differential Revision: D41494947
fbshipit-source-id: 17918f15d74230d9c7070a4de7a0a0ce10a08001
Summary: If a node has a global negative offset (e.g from a view pager) its position will be outside of the visualizors bounds and could potentially be where the tree is. The user doesnt see the wireframes since overflow hidden is on the parent node. A situation can arise where when the mouse is over the tree the hit test returns an offscreen node and causes us to hover a random node rather than the tree node hover effect taking place. We are just adding a guard to say if the mouse is outside the dom rect for the root visualization node than dont run the hit test
Reviewed By: lblasa
Differential Revision: D41493001
fbshipit-source-id: ea7974de7f2b80126d52490526a21e2a3b487d3d
Summary: Introduced an outer div which is the size of the real root node so that focusing doesnt shift the UI.
Reviewed By: antonk52
Differential Revision: D41492999
fbshipit-source-id: 336104e5d18d773953e0a58a699acc7660c4045f
Summary: Added context menu to tree nodes that 'focuses' a node. This will make the node the root of the tree. Focus state can be removed again via context menu but we could add a permanent button in the future
Reviewed By: lblasa
Differential Revision: D41493002
fbshipit-source-id: 43ec7a25aeea0b169cbcbb1ac20ac22ea893fee2
Summary: In order to support focus mode we need to have only 1 snapshot. In practice this is the case but we are making this more apparant in this diff.
Reviewed By: lblasa
Differential Revision: D41493003
fbshipit-source-id: 19ed7213d15adaea4732f4ec60309efa8dae6f94
Summary: Out of the box the library search has some issues. when search matches it steals focus from the input. Eventually we want to customise the rendering of the tree items anyway so this lays the foundation for taht
Reviewed By: antonk52
Differential Revision: D41336524
fbshipit-source-id: 194f67023edd0675cd9bd8d6134260439c6b2785
Summary:
There was an issue whereas snapshots were not properly rendered on retina devices.
After running a few tests, the issue seems to be solved by changing the snapshot format from jpeg to png.
Reviewed By: antonk52
Differential Revision: D41520939
fbshipit-source-id: 1563fe89162e41f71418357a7e58caaf46581f04
Summary:
^
IMHO, this is a better name.
... and secretly make it enabled by default
Reviewed By: LukeDefeo
Differential Revision: D41495973
fbshipit-source-id: f287a4beadb70587ff43ac896213a20746dd8c22
Summary:
Before this change, color inspector used a color picker that showed: color, rgba, hex.
The problem is that engineers have to click on it to see these values.
This change leaves the picker as is, but presents both hex and rgba inlined within the inspector thus avoiding extra interactions.
Reviewed By: antonk52
Differential Revision: D41495740
fbshipit-source-id: c8af01e3060d2e6725295418293b1e30679c1b1f
Summary:
^
In this case, the unknown value, which is a text will be displayed as sent by the client.
Reviewed By: antonk52
Differential Revision: D41494094
fbshipit-source-id: 9295e3f7e055a8ce9b430137600108a4cdf32c90
Summary: Due to litho component instances being immutable we are able to process them later if we hold on to the instance. We have added a Maybe deferred type which sort of resembles a Monad. It wraps a value which may or may not be calculated later.
Reviewed By: lblasa
Differential Revision: D41474251
fbshipit-source-id: 2ba6e688518dba55cf4aa5ba53f390a92cf0921f
Summary:
Enumeration used to be a type containing a single property value of type string.
The InspectableEnum is a type that had an Enumeration value and possible values.
As we removed possible values from the enum value, this structure no longer serves its purpose.
Reviewed By: antonk52
Differential Revision: D41400874
fbshipit-source-id: e5c2d1e15ee9b3074ddd69f75ee9b8150d44379f
Summary:
As metadata got split from attributes, raw data became harder to read.
This change annotates raw data with attribute names to ease readability and thus usability.
Reviewed By: antonk52
Differential Revision: D41400622
fbshipit-source-id: 8bebb2bd368490b9d7a2b4435749cdf0570b7571
Summary: If there are no attributes for a given section, display a 'No data available' message rather than having an empty panel.
Reviewed By: antonk52
Differential Revision: D41400252
fbshipit-source-id: 0337702f638b9b917e6b3be5962838d2eb15c20d
Summary:
Previously we would only consider a node hit if the nouse pos was inside every parents. There are a few reason why this isnt ideal:
1. Fragments are return 0 bounds
2. Many hierachys (particually in litho ) have nonsensical strucutres where your parent may have hieght 0, or children overflow parents bounds. Therefore it was impossible to select many nodes but unclear why
Reviewed By: lblasa
Differential Revision: D41304499
fbshipit-source-id: d75c8060f71fa0b972f136cb11258b62a9c98ebc
Summary:
There are situations where multiple siblings overlap and they are both hit. Previously we picked the first one in the hierachy. Now we produce a list of hit children. The list will not have 2 nodes in the same ancestor path.
We store the hovered nodes as a list as we may want to present a modal in future to ask user which node they indented to select. That said simply sorting nodes by area seems to give decent results so we can start with this
Reviewed By: lblasa
Differential Revision: D41220271
fbshipit-source-id: 643a369113da28e8c4749725a7aee7aa5d08c401
Summary:
The Dom events for the divs that are very close together were not firing correctly causing the old implementation to not track the hovered node correctly. This was really frustrating trying to select a node amongst many close neighbours.
The new approach uses the mouse x,y position and performs a hit test. Currently we do a dfs looking for the first deepest child that interests the mouse x,y. In a future diff we will extract a list when there are multiple candidates.
Hovered node was removed from react props since both the tree and visualisor depend on it meaning when hover state changes the whole app is rerendered. Instead we have moved hover state to an atom which is subscribed to by each visualsation node. Only if the old or new value matches the particular nodes id do we set state. The viz nodes were memo'd to prevent children renderning. The result is that for a hover change at most 2 nodes out of the 500 or so will rerender.
I attempted to do the same with the tree but it wasnt working with the controlled tree environment + focus state. The perf seems fine as is so will leave it for now
Reviewed By: lblasa
Differential Revision: D41218324
fbshipit-source-id: 7f80bcee256abad2689a88d7e209f92417aab672
Summary: This structure makes sense for the vizualiser which itself is a nested structure. It also saves the awkward branch of there is no key in the map.
Reviewed By: lblasa
Differential Revision: D40670371
fbshipit-source-id: 6c1b960a77749be9e8a193decf6b8d50ce6c7968
