Commit Graph

53 Commits

Author SHA1 Message Date
Sidharth Guglani
d0a3cb5f74 Add button to navigate to Yoga Performance Plugin from Layout Inspector
Summary:
Add button in layout inspector to navigate to yoga performance plugin for analyzing a particular component.
We send component id in payload to yoga plugin which then uses to highlight the corresponding component in yoga plugin

Reviewed By: davidaurelio

Differential Revision: D16561301

fbshipit-source-id: 950fb3ea501283fec0a3036fb2796c178014f1f5
2019-08-07 06:17:24 -07:00
Sara Valderrama
f591475f85 A few mini-fixes for the accessibility layout inspector
Summary:
- fix mutual selection of elements in ax and non-ax tree (simplifies linkedNode logic as well)
- remove unneeded extraInfo attributes (focused, nonAXwithAXchild, & hasAXNode were not/no longer being used)
- use 50/50 fixed width view for trees when both are visible

Reviewed By: jknoxville

Differential Revision: D16390355

fbshipit-source-id: bbf9ea887f8f1035df8b4b0562ddcc4de291f004
2019-08-01 22:03:26 -07:00
Sidharth Guglani
5a6d978536 Search with both name and id of the component in layout inspector and handle deeplinkpayload
Summary:
deepLinkPayload is passed as initialQuery to Search component and in componentDidMount we perform search if initially query is defined.

This does not handle the case if node is not present in the layout inspector tree.

Reviewed By: danielbuechele

Differential Revision: D15874343

fbshipit-source-id: c604baea16838f07e8f8bfc0f1e67c5e830dfe97
2019-06-19 09:08:10 -07:00
Daniel Büchele
1d3559c759 Remove beta bar from layout plugin
Summary: I though I already did this, when releasing it. Apparently not.

Reviewed By: jknoxville

Differential Revision: D14854810

fbshipit-source-id: 4da61866925e06a415bfaed0f48e5434e769ec39
2019-04-10 10:33:41 -07:00
Pascal Hartig
b20d0a4c8b Add headless option to dump on disconnect
Summary:
This adds an optional exit strategy that reacts to the client disconnecting rather than a `SIGINT` which can be used for integration tests.

`MiddlewareAPI` is a subset of `Store` and required to work here.

Annoyingly, it's not quite clear to me why this does not work as part of an event loop cycle and requires a `setTimeout`. This doesn't have any negative effects and works in the same way that the SIGINT interruption works, but it's a bit of an eyesore.

Reviewed By: danielbuechele

Differential Revision: D14622111

fbshipit-source-id: e2caca056e478428d977565dc9bc09eefca4230c
2019-03-28 06:53:57 -07:00
Daniel Büchele
a54b02b583 release v2
Summary:
- Moving the new layout plugin from `layout2` to `layout`.
- updating dependencies
- removed beta toolbar

Reviewed By: passy

Differential Revision: D14519490

fbshipit-source-id: d184767e767e1717368f66e2bda2af318b7e63c9
2019-03-19 06:47:06 -07:00
Pascal Hartig
3141b954bf Run prettier fix
Summary: Should also fix the build.

Reviewed By: jknoxville

Differential Revision: D14477777

fbshipit-source-id: 01fcfb2321c9b7a12acdf079473d91b6805d4dda
2019-03-15 05:13:30 -07:00
Daniel Büchele
9bf41f7bb7 add GK
Summary:
Users passing the GK `flipper_layout_inspector_new` will see then new layout inspector instead of the old one.

Hopefully users won't realize that they are on the new Layout Inspector. To make them aware of it, I added a bar on the bottom linking to the support group that is used for the GK.

Reviewed By: jknoxville

Differential Revision: D14100392

fbshipit-source-id: 78d561a3ab8ac035e5b439799c395901be086b1b
2019-02-18 05:17:52 -08:00
John Knox
e33e2d4d06 Unify Logger interface usage
Summary:
Unified all imports of Logger. Some were called LogManager before.
Now the fb-stub and the fb variants use the same interface.
Constructor of Logger is no longer exposed so it can't be initialized twice, unless in the case you're explicitly using the fb variant, which has extra functionality.

Reviewed By: danielbuechele

Differential Revision: D14083929

fbshipit-source-id: 9b61a06e1264d5f142b5a9188465c99deaf18193
2019-02-14 09:23:41 -08:00
John Knox
3caa0da887 Use call instead of send
Summary: Going to deprecate send, so changing these to call so the plugins can respond to errors.

Reviewed By: passy

Differential Revision: D14066981

fbshipit-source-id: 440563f1bf1a1a145fcfd0e6f36af63bf27836ed
2019-02-14 05:18:19 -08:00
Daniel Büchele
500007ccca use perf_hooks
Summary:
We were using `window.performance` to measure performance. This was because the equivalent node.js API `perf_hooks` wasn't available in the electron version we were using back then.
However, `perf_hooks` has landed in electron meanwhile, so I am moving to this API, as it works for the headless version and jest tests, too.

This allows us to delete the babel transform that was used for node-based tests, where the browser API was replaced with the node API

Reviewed By: jknoxville

Differential Revision: D13860133

fbshipit-source-id: cf1395004fac046dd55751ff465af494173b2cbf
2019-01-29 09:32:05 -08:00
Daniel Büchele
1fc73ad2fb update plugin's package.json
Summary:
For all plugins:
- move static fields `title`, `id` and `icon` to `package.json`
- adds "bugs" field for all plugins containing links to support groups/oncalls.

Reviewed By: priteshrnandgaonkar

Differential Revision: D13417286

fbshipit-source-id: 7b341176915f3ed7b473b95c1d879f21d7d634ef
2018-12-18 10:36:35 -08:00
Brett Lavalla
4954d018d0 Add litho accessibility rendering to Flipper accessibility mode
Summary: This is a re-do of D9720987.  Now that the Litho version has been bumped to 20 in D12838684, this diff can land safely.

Reviewed By: danielbuechele

Differential Revision: D12969979

fbshipit-source-id: b12d14e3b292d8cd110967f84f770f3725a800de
2018-11-10 00:05:44 -08:00
Hilal Alsibai
21a18d3e53 Pass real client to sidebar extension factory functions
Summary: This allows sidebar extensions to have more information as to whether they should be enabled or not

Reviewed By: danielbuechele

Differential Revision: D12930405

fbshipit-source-id: 649d3f01da1c535f7d60b7b525b012a888ea78e0
2018-11-06 11:30:35 -08:00
Pascal Hartig
0a6dbfcf3e Bump flow version
Reviewed By: priteshrnandgaonkar

Differential Revision: D12839991

fbshipit-source-id: 1dcca0a0bc682bf24430c7313d4af14b87cfc44d
2018-10-30 17:04:50 -07:00
Pritesh Nandgaonkar
2ee2dfacfe Back out "[DO NOT LAND until Litho open source version includes rerenderForAccessibility] add litho accessibility rendering to Flipper accessibility mode [2/2]"
Summary: Original commit changeset: 000a7413fcbe

Reviewed By: passy

Differential Revision: D12821473

fbshipit-source-id: 5fa369cc48f074414b04e4786d5bd634158598a6
2018-10-29 06:20:47 -07:00
Brett Lavalla
21c0b3ad0e add litho accessibility rendering to Flipper accessibility mode [2/2]
Summary: Completes D9667222 to allow force rendering of accessibility in litho when an accessibility service is not actually running.

Reviewed By: ikenwoo

Differential Revision: D9720987

fbshipit-source-id: 000a7413fcbe775a525ca3aca64443c3669cdf9e
2018-10-27 23:35:50 -07:00
Daniel Büchele
086ab0188b rename fill attribute
Summary:
We were using `fill={true}` as an attribute to make flexbox containers fill the entire available space.

However, `fill` is an HTML attribute (see: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill) This caused warnings printed to the console.

This diff renames the attribute to `grow` with is also more in line with the Flexbox terminology.

Reviewed By: priteshrnandgaonkar

Differential Revision: D10488389

fbshipit-source-id: ed8553c6203cdf6df94d26c731164ecec4c9fbd2
2018-10-22 09:54:59 -07:00
Daniel Büchele
71458b97b3 fixing plugin imports
Summary:
Plugins need to be self-contained. The can not require any dependency from Flipper's main app. This was a soft requirement before, but with the new version of metro, we now make this a hard requirement.

This speeds up plugin compile times, because only the files in the plugin's folder are watched and not all of Flipper's files. Moreover, this ensures "plugins" are real plugins and can be added and removed and are not mixed with the apps core.

Reviewed By: passy

Differential Revision: D9940735

fbshipit-source-id: 47e120429fc3c4c985731478ffa35c3359ff78f9
2018-09-20 04:27:48 -07:00
Daniel Büchele
df0a0da744 DetailSidebar
Summary:
- rename `SonarSidebar` to `DetailSidebar`
- rename portal id from `#sonarSidebar` to `#detailSidebar`

Reviewed By: passy

Differential Revision: D9851703

fbshipit-source-id: 2d904d17b0c6255a2ec3a79f0ada9bf621693c2e
2018-09-18 07:01:16 -07:00
Daniel Büchele
66e77075be Rename package to 'flipper'
Summary:
- rename package `'sonar'` > `'flipper'`
- rename package `'sonar-static'` > `'flipper-static'`
- rename package export from `window.Sonar` to `window.Flipper`

Reviewed By: passy

Differential Revision: D9851181

fbshipit-source-id: 34d4447c3b287496b3d20ddb54471ce777ec74e1
2018-09-18 07:01:16 -07:00
Daniel Büchele
2e2924c979 SonarPlugin > FlipperPlugin
Summary:
Renaming:
- `SonarPlugin` > `FlipperPlugin`
- `SonarBasePlugin` > `FlipperBasePlugin`
- `SonarDevicePlugin` > `FlipperDevicePlugin`

Reviewed By: passy

Differential Revision: D9851075

fbshipit-source-id: d59df6952a42eb493c86c38895216c9985f1e14b
2018-09-18 07:01:16 -07:00
Sara Valderrama
73759e71db add litho accessibility rendering to Flipper accessibility mode [1/2]
Summary:
Litho renders differently based on whether applicable accessibility services are enabled. In Flipper's accessibility mode this will be forced (with the option to turn it off) so that you don't have to be running an accessibility service to actually see what someone running an accessibility service would.

Here's an example video of what the re-rendering does (this also happens on toggle of accessibility mode, this is just the settings option to force it):

{F137856647}

Reviewed By: jknoxville

Differential Revision: D9667222

fbshipit-source-id: 292353d89f07734f1e525f795b1d7daf4130e203
2018-09-07 14:58:00 -07:00
Pascal Hartig
07650d0627 Remove unused fixmes
Summary: Looks like some flow-disables were no longer necessary.

Reviewed By: jknoxville

Differential Revision: D9700398

fbshipit-source-id: 5514c16294624c1bed1d3818f9e271b07e320803
2018-09-07 06:12:18 -07:00
Sara Valderrama
d26779cd16 Update Tooltip implementation for Flipper
Summary:
Basic tooltips available. Use is:

  <Tooltip
     title="This is what will show up inside the tooltip"
     options={{ // can include any or none of these (if not included default will be used)
        position, // 'above', 'below', 'toRight', or 'toLeft'
        showTail, // whether or not tooltip should have tail
        delay, // how long to wait on hover before showing tooltip
        // supported css properties
        backgroundColor,
        color,
        maxWidth,
        width,
        borderRadius,
        padding,
        lineHeight,
     }}>
     <ElementTooltipWillShowUpFor/>
  </Tooltip>

Reviewed By: danielbuechele

Differential Revision: D9596287

fbshipit-source-id: 233b1ad01b96264bbc1f62f3798e3d69d1ab4bae
2018-09-04 10:44:12 -07:00
Sara Valderrama
364883f661 Live update sidebar with click and focus accessibility events
Summary: Lets AX inspector live update the sidebar when a view is clicked (state may change) or accessibility focus changes (previously only updated the sidebar live if it became the focused element).

Differential Revision: D9489376

fbshipit-source-id: 8959f722370ce1d3a622b24c7b049b03f0d662e6
2018-08-24 09:42:02 -07:00
Daniel Büchele
726966fdc0 convert to emotion
Summary:
My benchmarks have shown react-emotion to be faster than the current implementation of `styled`. For this reason, I am converting all styling to [emotion](https://emotion.sh).

Benchmark results:
{F136839093}

The syntax is very similar between the two libraries. The main difference is that emotion only allows a single function for the whole style attribute, whereas the old implementation had functions for every style-attirbute.

Before:
```
{
  color: props => props.color,
  fontSize: props => props.size,
}
```

After:
```
props => ({
  color: props.color,
  fontSize: props.size,
})
```

Reviewed By: jknoxville

Differential Revision: D9479893

fbshipit-source-id: 2c39e4618f7e52ceacb67bbec8ae26114025723f
2018-08-23 09:42:18 -07:00
Sara Valderrama
7852a3886b Accessibility Inspector open-sourcing move and documentation
Summary: Replaces AXElementsInpector with normal inspector implementation, removes gating from external builds. Adds documentation to https://fbflipper.com/docs/layout-plugin.html.

Reviewed By: passy

Differential Revision: D9438713

fbshipit-source-id: 18616c6cbab339bf474d116cac128e1d4a5fc2be
2018-08-22 14:57:44 -07:00
Sara Valderrama
7acf0ff9af Remove sidebar extensions from accessibility inspector
Summary: Sidebar extensions are automatically added to main inspector sidebar but kept from accessibility side menu.

Reviewed By: xiphirx

Differential Revision: D9438644

fbshipit-source-id: 47a9cc630117e15be3368d78f2396f02796c998d
2018-08-22 09:58:23 -07:00
Hilal Alsibai
1aee2cdaa3 Pass the Layout plugin's logger to the sidebar and sidebar extensions
Summary: Lets the sidebar + sidebar extensions log custom events

Reviewed By: danielbuechele

Differential Revision: D9411001

fbshipit-source-id: 37704e805eda56347cd95c155f81ad31b34bd508
2018-08-21 02:58:33 -07:00
Sara Valderrama
c428de3948 Tooltips added on hover for AX sidebar
Summary: Adds on hover descriptions for some of the more esoteric properties in the accessibility sidebar panel such as accessibility-focused and all the talkback derived properties. Also change talkback-focusable and talkback-ignored to both be talkback-focusable.

Differential Revision: D9381676

fbshipit-source-id: 55ce854da24241a7c89b0c122c4c3ebd77438dbb
2018-08-20 09:41:46 -07:00
Sara Valderrama
656044ce69 AX tree expands with main tree on search (cannot search ax tree yet)
Summary: AX tree will now stay in sync with the main tree when searching. Also allows user to completely erase search (previously had left one letter highlighted in the tree even if entire query was erased).

Reviewed By: danielbuechele

Differential Revision: D9276721

fbshipit-source-id: 5272bb9cf3400ad3eb9d16bf438b0e5d4b551c6a
2018-08-13 13:28:10 -07:00
Sara Valderrama
bf863c3922 Logging added for ax mode and updated to fix console warnings
Summary: Added logging for accessibility functionality (both usage and performance). Fix to prevent trackTimeSince calls from not matching up to the correct marks. Fix to prevent recursive onElementExpanded calls from mismatching also.

Reviewed By: danielbuechele

Differential Revision: D9229790

fbshipit-source-id: d20f08719d2c4f9a35c9c71a492619ce5538d204
2018-08-10 14:57:30 -07:00
Sara Valderrama
047b6ed7b7 Expand AX tree when clicking-to-inspect
Summary: Adds expanding functionality to ax tree when click-to-inspect is used. Highlight/selection priority is given to the ax tree if in ax mode and the main tree otherwise.

Reviewed By: danielbuechele

Differential Revision: D9206028

fbshipit-source-id: 364b3cfc2e68dbce6006c36002353295aa7cdd07
2018-08-08 09:11:55 -07:00
Sara Valderrama
c07d8c14a4 Add icon to show which elements in ax tree are talkback-focusable
Summary: Puts an accessibility icon next to any elements in the ax tree that may be focused on when talkback is running to show that they are "accessibility-focusable". When any sidebar values are changed, the icon will show up/disappear accordingly.

Reviewed By: danielbuechele

Differential Revision: D9171781

fbshipit-source-id: f3b42624988aaef22040ac3325d745a12f0622db
2018-08-07 09:42:27 -07:00
Sara Valderrama
1fb2c4ee76 Add focus option to context menu in the accessibility tree
Summary: Allow user to open the context menu on an element in the ax tree and request accessibility focus to that element. If the element is focusable (and talkback or another accessibility service is running), accessibility focus will change to that element, if not, it will not change anything.

Differential Revision: D9162382

fbshipit-source-id: 5dda9b87a2cc6eba4130e3feee978b5fa38ac9f1
2018-08-07 09:42:27 -07:00
Sara Valderrama
fc7f949daf Click to inspect works with TalkBack
Summary: Allow click to inspect to work when Talkback is running (normal tree expands as usual although ax tree doesn't expand yet). Override onHover of Touchoverlay and onRequestSendAccessibilityEvent in viewRoot to prevent talkback focus when in Click to Inspect mode. Also update layout inspector to persist isSearchActive to prevent build up of TouchOverlayViews when navigating between plugins (which happened if leaving the layout inspector while in Click to Inspect mode).

Reviewed By: danielbuechele

Differential Revision: D9153446

fbshipit-source-id: f76982e8f8cea1e7b7e4c6b9bf73632d101222ef
2018-08-06 16:54:20 -07:00
Phoomraphee Luenam
2c48afdf04 Implement AlignmentMode in layoutplugin
Summary:
Add a Button to toggle alignment lines on Sonar interface.

Call sonar plugin in java, sending isAlignmentMode flag.

Changed API for setHighlighted to include alignment mode flag.

Button design to be added in future diffs by @[100003260904633:maximg]

Reviewed By: danielbuechele

Differential Revision: D9123749

fbshipit-source-id: 01c299f299be30dbb695bfb1d8007d63c27643d5
2018-08-06 07:41:48 -07:00
Sara Valderrama
ff0b045bde Allow for multiple view roots, include accessibility focus changing between view roots
Summary: Ax mode now works with multiple view roots/windows, accessibility focus is also updated when new windows are opened.

Reviewed By: danielbuechele

Differential Revision: D9121844

fbshipit-source-id: 1da9327f5d6a784793db8076c2ad2d84e860ac1c
2018-08-02 09:41:26 -07:00
Sara Valderrama
30a19901ee Cleanup js in layout inspector, add check for ios
Summary: Clean up javascript. Add a check to remove ax mode toggle if using ios. Add safety check for extraInfo where it hasn't been added yet.

Reviewed By: danielbuechele

Differential Revision: D9070574

fbshipit-source-id: 49ac781c01ea47239d6c24089976497371973726
2018-08-01 13:41:43 -07:00
Hilal Alsibai
a8138984f9 Fix undefined references
Summary: If the app youre inspecting doesnt have extra ax info then the layout inspector has a bad time

Reviewed By: sjkirby

Differential Revision: D9038286

fbshipit-source-id: e3c1736cba13b870cf7ff648377c822fba4446d0
2018-07-31 04:14:49 -07:00
Sara Valderrama
33e6538477 Highlight the current talkback-focused element in the accessibility tree
Summary: Highlights the element corresponding to the view talkback is focused on in green in the ax tree (and updates live as talkback moves).

Reviewed By: blavalla

Differential Revision: D9021542

fbshipit-source-id: c3bf6f5625aacb0cd054032b33a50541b88b2eaf
2018-07-31 04:14:49 -07:00
Sara Valderrama
41f4478a74 Basic mutual highlighting for Litho components
Summary: Shows basic relationship between the AX and nonAX tree litho nodes. When a litho component is selected from the nonAX tree, it's corresponding hostView or lithoView (root of the component tree) is highlighted in the AX tree giving priority to the hostView if it exists. If a hostView is selected in the AX tree, it's corresponding component is selected in the non-AX tree. If a lithoView is selected from the AX tree, it's corresponding lithoView is highlighted in the non-AX tree. This means that each hostView has a one-to-one highlighting between the two trees but lithoViews will have many nodes in the main tree that map to one node in the AX tree (which is accurate to litho components rendering but we may need to change in the future if it is not clear).

Reviewed By: jknoxville

Differential Revision: D8972205

fbshipit-source-id: d136f5b594d0ac1b66a82b35dc7b085186829fc4
2018-07-25 10:19:37 -07:00
Sara Valderrama
c57e6e4396 Expand trees together - including fragments, not including litho components
Summary: When expanding one tree, the other tree also expands. This expanding jumps over fragments (which are not in the accessibility tree) so that the trees can stay in sync even when there are extra wrappers in the main tree. Need to figure out functionality for litho components (these simply don't expand together right now since the relationship between the trees at these nodes are less obvious).

Differential Revision: D8943229

fbshipit-source-id: 289c3511a6495508b45a62da13ae4c50209e6118
2018-07-25 10:19:37 -07:00
Pascal Hartig
6a7a580db3 Import "Fix some typos (it's vs its)" (#175)
Summary:
Original author: noahsark769

Closes https://github.com/facebook/Sonar/pull/175

Reviewed By: jknoxville

Differential Revision: D8989724

fbshipit-source-id: 8e1c09196b0c6c0d0fb0446a2a4a595d09f21652
2018-07-25 07:18:54 -07:00
Sara Valderrama
1c5ecce667 NodeInfo tree working (besides litho nodes)
Summary: The second tree has access to all AX NodeInfo properties (they are not in the sidebar yet). Infrastructure set up to customize displayed information bassed on what is most useful. Descriptors for views updated to include AX functionality and non-view descriptors AX functions defaulted to null/empty. Non-view nodes (like Fragments, Window, Appication) no longer included in AX tree. Corresponding nodes will be highlighted (although not expanded) on click in either tree.

Differential Revision: D8795800

fbshipit-source-id: cf2333f69bfecca3ff84aae62681c684dfa14bf3
2018-07-12 09:33:21 -07:00
Sara Valderrama
9e673a07a8 Small updates to Layout Extension code (committing to keep separate from larger changes)
Summary: Changed AXVisible checking, added AX specific hover

Reviewed By: danielbuechele

Differential Revision: D8795383

fbshipit-source-id: bb10b9e860629cfd385d97e79587c76460b516bc
2018-07-12 09:33:21 -07:00
Sam Goldman
51741a2741 Update Sonar from 0.69.0 to 0.70.0
Summary:
All the new errors were missing annotation errors. I fixed as many as I could
by adding annotations. For the rest I added a $FlowFixMe suppression type.

Reviewed By: nmote

Differential Revision: D8756267

fbshipit-source-id: a69b6e21525b9b12e582ff18dcb1eeea584abb2a
2018-07-06 16:04:19 -07:00
Sara Valderrama
d8cf48d750 Two-tree view up and running, separately interactive/editable
Summary: Added duplicate view tree (will be replaced with accessibility node tree eventually). Can toggle ax mode on and off and interact with each tree individually to view/change properties.

Reviewed By: danielbuechele

Differential Revision: D8717557

fbshipit-source-id: 1109ccafd49b6958ee7a70c2e8851ed8351516ae
2018-07-05 16:19:29 -07:00
Sara Valderrama
917376db6d basic layout edits
Summary: Include toggle button, trees/sidebar not separately interactive

Reviewed By: danielbuechele

Differential Revision: D8680613

fbshipit-source-id: 3bc52b66881abc56ea5cc0955f8237509d039fc4
2018-07-05 16:19:28 -07:00