Commit Graph

4 Commits

Author SHA1 Message Date
Jared Forsyth d68776d5de interop with react devtools 2015-06-08 09:04:09 -08:00
Jared Forsyth 53b2c39cc0 select up and down the inspector hierarchy
Summary:
This allows you to select the displayed owner hierarchy, and see the styles,
props, and position.

@public

Test Plan:
Open the inspector, select something in the middle of the page. Click the
breadcrumb train in the inspector, and verify that:
- styles are reflected
- margin/padding/box is correct
- the highlight updates to show the selected item

See video as well.

[Video](https://www.latest.facebook.com/pxlcld/mqnl)

Screenshot
{F22518618}
2015-06-04 10:18:56 -08:00
Jared Forsyth b2b89c0b68 add style inspector + more margin + styles
Summary:
- make overlay transparent to avoid obscuring the app
- show style in the inspector pane
- show margin+padding values, also width/height and abs position

@public

Test Plan:
Open the inspector somewhere, start selecting things. You should see correct
padding, margin, and dimentions values; in addition to all style properties
enumerated.
2015-06-03 14:02:18 -08:00
Jared Forsyth 7be471d1fe visualize padding and margin in inspector
Summary:
This shows margin and padding visually when inspecting an element.

@public

Test Plan:
Go to the "UIExplorer", to the <View> page. Open the inspector, and start
selecting things. Padding and margin should be indicated. (Padding in dark
blue and margin in orange).
2015-06-03 12:49:19 -08:00