Граф коммитов

15 Коммитов

Автор SHA1 Сообщение Дата
Razvan Caliman f3e06f46f3 Bug 1623906 - [devtools] Dispatch thunks from Flexbox panel React components to highlight nodes r=gl,jdescottes,nchevobbe
### Problem
There is a lot of [prop drilling](https://kentcdodds.com/blog/prop-drilling) in React components to pass down a callback that is invoked at the bottom of a long chain of components.

[onShowBoxModelHighlighterForNode()](https://searchfox.org/mozilla-central/search?path=&q=onShowBoxModelHighlighterForNode) is one such example. It is created at the [Inspector client level](https://searchfox.org/mozilla-central/rev/25d491b7924493b5d4bedc07841a1cd92f271100/devtools/client/inspector/inspector.js#1885-1908) then passed to React components for panels, then drilled down to the consumer component which invokes it. There is also some [needless duplication](https://searchfox.org/mozilla-central/source/devtools/client/inspector/layout/layout.js#85-86) with [onShowBoxModelHighlighter](https://searchfox.org/mozilla-central/search?q=onShowBoxModelHighlighter%5CW&path=&case=false&regexp=true).

### Solution

With this patch, we leverage thunks in Redux.
In Redux, you can `dispatch()`:
- actions -> an object with an action type string which is matched by reducers
- thunks -> a function which can be async and can itself dispatch actions or other thunks

Thunks are supported by middleware already set up in the DevTools Redux [createStore()](https://searchfox.org/mozilla-central/source/devtools/client/shared/redux/create-store.js#54,104) helper. During store setup, we pass `thunkOptions` to the middleware, an object with arguments which will be available to all thunks when invoked. This is where we pass in the inspector client as a thunk option so we can invoke the highlighter.

This is the replacement for prop drilling the `onShowBoxModelHighlighterForNode()` method. The same way they dispatch actions, components can now dispatch the thunk to show/hide the highlighter when they need it without direct knowledge of the `inspector`, thus satisfying the original intent of passing down the `onShowBoxModelHighlighterForNode()` callback while cleaning up the code.

### Prior art
Thunks are not something new to DevTools. They are extensively used by the WebConsole, for example:
- passing [thunk options to the store](https://searchfox.org/mozilla-central/rev/25d491b7924493b5d4bedc07841a1cd92f271100/devtools/client/webconsole/webconsole-wrapper.js#95-104)
- making use of thunk options,  [webConsoleUI and hud](https://searchfox.org/mozilla-central/source/devtools/client/webconsole/actions/autocomplete.js#14-91) in a thunk to handle autocomplete


###Useful context:
DevTools helpers
- [thunkWithOptions](https://searchfox.org/mozilla-central/source/devtools/client/shared/redux/middleware/thunk-with-options.js)
- [shared Redux createStore helper with thunks middleware](https://searchfox.org/mozilla-central/source/devtools/client/shared/redux/create-store.js#54,104)
Redux docs
- [Async Actions in Redux](https://redux.js.org/advanced/async-actions)
- [dispatch() as default prop with redux-connect](https://react-redux.js.org/using-react-redux/connect-mapdispatch#default-dispatch-as-a-prop)

Differential Revision: https://phabricator.services.mozilla.com/D79556
2020-10-29 14:35:55 +00:00
Butkovits Atila ce82eb57bc Backed out 5 changesets (bug 1623906) for node failures. CLOSED TREE
Backed out changeset 92d23f0ea155 (bug 1623906)
Backed out changeset 2af3b0ee91ac (bug 1623906)
Backed out changeset bc7e021e8d98 (bug 1623906)
Backed out changeset 362bad2b7311 (bug 1623906)
Backed out changeset 78d0de3437ab (bug 1623906)
2020-10-29 16:32:29 +02:00
Razvan Caliman a522c7d3ad Bug 1623906 - [devtools] Dispatch thunks from Flexbox panel React components to highlight nodes r=gl,jdescottes,nchevobbe
### Problem
There is a lot of [prop drilling](https://kentcdodds.com/blog/prop-drilling) in React components to pass down a callback that is invoked at the bottom of a long chain of components.

[onShowBoxModelHighlighterForNode()](https://searchfox.org/mozilla-central/search?path=&q=onShowBoxModelHighlighterForNode) is one such example. It is created at the [Inspector client level](https://searchfox.org/mozilla-central/rev/25d491b7924493b5d4bedc07841a1cd92f271100/devtools/client/inspector/inspector.js#1885-1908) then passed to React components for panels, then drilled down to the consumer component which invokes it. There is also some [needless duplication](https://searchfox.org/mozilla-central/source/devtools/client/inspector/layout/layout.js#85-86) with [onShowBoxModelHighlighter](https://searchfox.org/mozilla-central/search?q=onShowBoxModelHighlighter%5CW&path=&case=false&regexp=true).

### Solution

With this patch, we leverage thunks in Redux.
In Redux, you can `dispatch()`:
- actions -> an object with an action type string which is matched by reducers
- thunks -> a function which can be async and can itself dispatch actions or other thunks

Thunks are supported by middleware already set up in the DevTools Redux [createStore()](https://searchfox.org/mozilla-central/source/devtools/client/shared/redux/create-store.js#54,104) helper. During store setup, we pass `thunkOptions` to the middleware, an object with arguments which will be available to all thunks when invoked. This is where we pass in the inspector client as a thunk option so we can invoke the highlighter.

This is the replacement for prop drilling the `onShowBoxModelHighlighterForNode()` method. The same way they dispatch actions, components can now dispatch the thunk to show/hide the highlighter when they need it without direct knowledge of the `inspector`, thus satisfying the original intent of passing down the `onShowBoxModelHighlighterForNode()` callback while cleaning up the code.

### Prior art
Thunks are not something new to DevTools. They are extensively used by the WebConsole, for example:
- passing [thunk options to the store](https://searchfox.org/mozilla-central/rev/25d491b7924493b5d4bedc07841a1cd92f271100/devtools/client/webconsole/webconsole-wrapper.js#95-104)
- making use of thunk options,  [webConsoleUI and hud](https://searchfox.org/mozilla-central/source/devtools/client/webconsole/actions/autocomplete.js#14-91) in a thunk to handle autocomplete


###Useful context:
DevTools helpers
- [thunkWithOptions](https://searchfox.org/mozilla-central/source/devtools/client/shared/redux/middleware/thunk-with-options.js)
- [shared Redux createStore helper with thunks middleware](https://searchfox.org/mozilla-central/source/devtools/client/shared/redux/create-store.js#54,104)
Redux docs
- [Async Actions in Redux](https://redux.js.org/advanced/async-actions)
- [dispatch() as default prop with redux-connect](https://react-redux.js.org/using-react-redux/connect-mapdispatch#default-dispatch-as-a-prop)

Differential Revision: https://phabricator.services.mozilla.com/D79556
2020-10-29 14:04:25 +00:00
Razvan Caliman 59990429a0 Bug 1647989 - Add default reducer to avoid error when creating a Redux store with no reducers. r=gl
We can't create a Redux store without reducers. Redux throws an error.
It's benign and doesn't impact anything (panels load reducers on-demand before accessing them), but it's annoying to see the error in the console and in tests.

Differential Revision: https://phabricator.services.mozilla.com/D81047
2020-06-25 14:20:41 +00:00
Razvan Caliman da154ce911 Bug 1464876 - Load reducers on-demand in Inspector sidebar panels r=gl
The Inspector [loads all its panels' Redux reducers](https://searchfox.org/mozilla-central/source/devtools/client/inspector/reducers.js) up front, regardless if they're used or not.
Some of the reducers are quite hefty. It seems needless to load and parse code that's not needed.

In addition, the reducers are loaded in a different place than their corresponding actions. Actions are loaded and used in the panels, but the reducers are all loaded in the [Inpector when creating the store](https://searchfox.org/mozilla-central/rev/d69ec052bed8700af7a283e37b60b4af22734930/devtools/client/inspector/store.js#8,11). It helps reduce the cognitive load if actions and reducers are loaded together where they are used, in the sidebar panels.

This patch uses the approach described in the Redux docs to inject reducers on-demand: https://redux.js.org/recipes/code-splitting/#reducer-injection-approaches

There still are reducers which need to load immediately when the Inspector is initialized (mostly related to the Rules panel). But others, like the reducer for the Animations or Fonts panel, are loaded on-demand when the corresponding panels are visible.

For the most part, reducers are used in response to actions from their corresponding panels. However, the grid, flexbox and grid highlighter reducers are also [used  in HighlightersOverlay.js](https://searchfox.org/mozilla-central/rev/d69ec052bed8700af7a283e37b60b4af22734930/devtools/client/inspector/shared/highlighters-overlay.js#502) to provide highlighters with configuration or node context. In these cases, we load the reducers on-demand even if their corresponding panels haven't been opened yet. When the panels do get opened, the reducers are not re-loaded since they're already available.

Differential Revision: https://phabricator.services.mozilla.com/D67008

--HG--
extra : moz-landing-system : lando
2020-04-07 18:19:13 +00:00
Nicolas Chevobbe ea0dda849a Bug 1599432 - Create ObjectFront for non-primitive expression result in inspector sidebar extension. r=rpl.
The WebExtensionInspectedWindow front is modified in order
to be able to parse the eval response.
We're doing it in a similar fashion to the other fronts methods
that can return ObjectFronts: everything is handled client side,
by the front, since an evaluation result can return primitive values,
long string or grips, and we can't define this through protocol.js in
a readable manner.
Some functions and a component are renamed to better represent
what they're doing.

Differential Revision: https://phabricator.services.mozilla.com/D58939

--HG--
rename : devtools/client/inspector/extensions/components/ObjectValueGripView.js => devtools/client/inspector/extensions/components/ExpressionResultView.js
extra : moz-landing-system : lando
2020-01-14 15:55:54 +00:00
Nicolas Chevobbe d6786a8b07 Bug 1591330 - Remove LongStringClient. r=jdescottes.
The LongStringClient is removed and we replace its
usage with LongStringFront instead.
This require a few variable/function renaming, as
well as updating the mocks we use in node tests.

Switch usage to LongStringFront instead.

Differential Revision: https://phabricator.services.mozilla.com/D50579

--HG--
rename : devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/__mocks__/long-string-client.js => devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/__mocks__/string-front.js
rename : devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/component/create-long-string-client.js => devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/component/create-long-string-front.js
extra : moz-landing-system : lando
2019-10-28 16:22:06 +00:00
Nicolas Chevobbe 02cfc079ff Bug 1588999 - Rename ObjectClient to ObjectFront. r=ochameau.
The object-client.js file is now a proper protocol.js front,
but is still named after a client.
This is confusing, so we rename and move the file next to other
fronts, and update all consumers to the new terminology.

Differential Revision: https://phabricator.services.mozilla.com/D49878

--HG--
rename : devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/__mocks__/object-client.js => devtools/client/debugger/packages/devtools-reps/src/object-inspector/tests/__mocks__/object-front.js
rename : devtools/shared/client/object-client.js => devtools/shared/fronts/object.js
extra : moz-landing-system : lando
2019-10-21 12:07:10 +00:00
Nicolas Chevobbe 40ffac0251 Bug 1582697 - Don't add the task middleware by default in create-store. r=davidwalsh.
The disableTask options is renamed to enableTaskMiddleware,
which defaults to false.

This caused failure in the dom mutation breakpoint test, because
we weren't waiting until the call to the server to remove the
breakpoints were done.
It wasn't an issue before because this was handle by the task
middleware, which catch rejections.
We fix this by only dispatching the action when the breakpoints are
indeed removed. We also tweak to waitForAllElements helper to be
able to wait for a specific count of element (it used to resolve
when there was at least the specified count, which is not ideal
when trying to assert removal of an element).

Differential Revision: https://phabricator.services.mozilla.com/D47584

--HG--
extra : moz-landing-system : lando
2019-09-30 15:57:46 +00:00
Nicolas Chevobbe 63965d781c Bug 1494680 - Move inspector to newest reps bundle. r=gl.
The inspector was using an outdated Reps bundle
for some time because some non-trivial changed
were made to the ObjectInspector that we wanted
to do as a follow up for in the inspector, but never
took the time to do so.

This will become a painpoint soon as we're planning
to do changes in reps for Fission.

This patch removes the old bundle, and mov the
inspector usage of Reps to the new bundle.

We introduce a new middleware, thunk-with-options,
that is similar to thunk but cab be bound with an
options object (on which we add dispatch and getState),
that will be then passed as parameter to the actions.

Since the task middelware is executed before the thunk one,
and given that it handles async function, it would bypass
the thunk-with-action middleware, making some objectInspector
actions fail. To workaround that, we add an option to createStore
to add the ability to disable the task middleware (which isn't
needed in the inspector).

The ObjectInspector reducer is also added to the
inspector store.

Differential Revision: https://phabricator.services.mozilla.com/D46141

--HG--
extra : moz-landing-system : lando
2019-09-20 21:35:52 +00:00
Logan Smyth 6baad29f20 Bug 1550031 - Part 3: Centralize Redux store logic for various devtools. r=jlast
Differential Revision: https://phabricator.services.mozilla.com/D41122

--HG--
extra : moz-landing-system : lando
2019-08-09 01:27:53 +00:00
Julian Descottes eac312a589 Bug 1500936 - Run eslint --fix on devtools/client/inspector for comma-dangle;r=Standard8
Differential Revision: https://phabricator.services.mozilla.com/D9409

--HG--
extra : moz-landing-system : lando
2018-10-23 07:08:24 +00:00
Julian Descottes 640fe52298 Bug 1454696 - Run eslint --fix for prefer-const;r=yulia
MozReview-Commit-ID: F6xUXCgdRE4

--HG--
extra : rebase_source : 65de1b0aba412d9044b5196115f74276caa058f2
2018-06-01 12:36:09 +02:00
J. Ryan Stinnett 23ff4cc75d Bug 1443081 - Apply spacing via `eslint --fix` for DevTools. r=jdescottes
MozReview-Commit-ID: 2RVNt140Zte
2018-03-12 13:44:41 -05:00
Gabriel Luong 649f28dd88 Bug 1336198 - Part 1: Redux store should be initialized at the Inspector level. r=jdescottes
--HG--
rename : devtools/client/inspector/layout/store.js => devtools/client/inspector/store.js
2017-02-11 00:05:50 -05:00