Commit Graph

44 Commits

Author SHA1 Message Date
Brian Vaughn 5aa967b69b
DevTools editable props tweaks (#18954)
1. Made non-editable prop text higher contrast (easier to read)
2. Also makes it stand out as different from dimmer placeholder text for "new prop"
2020-05-19 09:42:00 -07:00
Nick Reiley 7c080902ef
[DevTools] Improve HOC search UX (#18802)
Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
2020-05-15 10:37:34 -07:00
Karl Horky 2b9d7cf65f
Devtools: Show inspectedElement `key` in right pane (#18737)
* Start MVP for showing inspected element key

* Add key in other places

* Add key from backend

* Remove unnecessary hydrateHelper call

* Hide copy button when no label

* Move above props

* Revert changes to InspectedElementTree.js

* Move key to left of component name

* Updated CSS

Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
2020-05-11 13:17:13 -07:00
Brian Vaughn 36cab2720a
DevTools: Improved "native" component stacks (#18656)
* DevTools console override handles new component stack format

DevTools does not attempt to mimic the default browser console format for its component stacks but it does properly detect the new format for Chrome, Firefox, and Safari.
2020-04-21 11:46:11 -07:00
Brian Vaughn e8ac48f90b
Fix whitespace problem wiht DevTools Components search (#18527) 2020-04-07 10:28:21 -07:00
Hristo Kanchev 7785a5263e
[DevTools] - Highlight rendered by elements on hover. (#18479)
* [DevTools] - Highlight rendered by elements on hover.

* Fixed formatting issue.

* DevTools - Extracted highlight logic to custom hook. Added highlight support for rendered by elements.

* Removed unnecessary padding style

* Removed unnecessary wrapper function.

Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
2020-04-03 10:49:49 -07:00
Sebastian Markbåge 3e94bce765
Enable prefer-const lint rules (#18451)
* Enable prefer-const rule

Stylistically I don't like this but Closure Compiler takes advantage of
this information.

* Auto-fix lints

* Manually fix the remaining callsites
2020-04-01 12:35:52 -07:00
Brian Vaughn d92631eab1
Remove "es6-symbol" package from DevTools (#18397) 2020-03-26 09:31:36 -07:00
Sebastian Silbermann 756e1ea5d4
fix(react-devtools-shared): useDebugValue with complex types (#18070)
Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
2020-03-17 13:57:01 -07:00
Brian Vaughn 97a8c72bf8
Wrap Components and Profiler tabs with box-size style too (#18286)
For the browser extension, these views get rendered into portals and so they don't inherit the box-sizing style from the .DevTools wrapper element. This causes views like the Profiler commit selector to subtly break.
2020-03-11 19:12:57 -07:00
Brian Vaughn d2158d6ccb
Fix flow types (#18204)
* Added missing @flow pragma to React.js

* Fixed useContext() return type definition

* Fixed previously masked Flow errors in DevTools and react-interactions packages

* Added displayName to internal Context Flow type

* Removed Flow generic annotations for createResponder

This seems to cause a parsing error. (Not sure why.) The API is deprecated anyway so I'm being lazy for now and just adding a .
2020-03-03 12:46:24 -08:00
Brian Vaughn 71418fda3b Rearranged some DevTools Components code 2020-02-26 11:33:52 -08:00
Hristo Kanchev d166319e86
[DevTools] Added resize support for Components panel. (#18046)
* feat: DevTools - Added Resize Support.

* feat: Prettier.

* feat: DevTools - Added debug comments.

* feat: DevTools - Removed Use Memo.

* feat: DevTools - Added types.

* feat: DevTools - Extracted values to constants.

* feat: DevTools - Removed useCallback.

* feat: DevTools - Finished refactoring.

* feat: DevTools - Merging fixup.

* feat: DevTools - Prettier fix.

* feat: DevTools - Extracted code from Components fil.

* feat: DevTools - Fixed orientation change issue.

* feat: DevTools - Added flow types for reducer and refs.

* feat: DevTools - Fixed orientation change on initial load.

* Update packages/react-devtools-shared/src/devtools/views/Components/ComponentsResizer.js

* Removed unused `orientationRef`

* Fix Flow ref issue

Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
2020-02-26 11:30:42 -08:00
Sebastian Markbåge 09348798a9
Codemod to import * as React from "react"; (#18102)
* import * as React from "react";

This is the correct way to import React from an ES module since the ES
module will not have a default export. Only named exports.

* import * as ReactDOM from "react-dom"
2020-02-21 19:45:20 -08:00
Brian Vaughn 7e770dae93
Profiler tooltip tweaks (#18082)
* Moved Profiler views into Profiler folder

* Tweaked Profiler tooltip CSS styles

* Tweaked Tooltip positioning code
2020-02-19 10:58:45 -08:00
Moji Izadmehr 44e5f5e645
Add fiber summary tooltip to devtools profiling (#18048)
* Add tooltip component

* Separate logic of ProfilerWhatChanged to a component

* Add hovered Fiber info tooltip component

* Add flame graph chart tooltip

* Add commit ranked list tooltip

* Fix flow issues

* Minor improvement in filter

* Fix flickering issue

* Resolved issues on useCallbacks and mouse event listeners

* Fix lints

* Remove unnecessary useCallback
2020-02-19 09:44:31 -08:00
Murat ÇATAL cddde45806
apply changes on editablevalue on blur feature implemented (#17062)
* apply changes on editablevalue on blur feature implemented

* Removed "Undo" button and unnecessary event.preventDefault()

Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
2020-02-04 11:05:01 -08:00
Dan Abramov e706721490
Update Flow to 0.84 (#17805)
* Update Flow to 0.84

* Fix violations

* Use inexact object syntax in files from fbsource

* Fix warning extraction to use a modern parser

* Codemod inexact objects to new syntax

* Tighten types that can be exact

* Revert unintentional formatting changes from codemod
2020-01-09 14:50:44 +00:00
Dan Abramov b979db4e72
Bump Prettier (#17811)
* Bump Prettier

* Reformat

* Use non-deprecated option
2020-01-09 13:54:11 +00:00
Brian Vaughn 7e2ab87a61
DevTools: Replaced unsafe hasOwnProperty() calls (#17768)
DevTools previously called  in several places with user-defined values. This could lead to runtime errors if those values had an overriden  attribute. This commit replaces those callse with  instead.

New test cases have been added.
2020-01-03 09:34:12 -08:00
Brian Vaughn 22ef96ae63
Devtools renable copy attr context menu for firefox (#17740)
* Use exportFunction() to share clipboard copy with JS running in document/page context.

* Remove no-longer-used option to disable copy operation.
2019-12-29 13:27:44 -08:00
Maxime Bouveron 6215e1c2db Add Shift+Enter to go to previous search result (#17005) 2019-12-22 08:38:14 -08:00
Brian Vaughn 79734771cd
Disable "copy to clipboard" and "go to definition" context menu options for Firefox addon (#17668) 2019-12-20 08:31:38 -08:00
Brian Vaughn 933f6a07ca
DevTools context menu (#17608)
* Added rudimentary context menu hook and menu UI

* Added backend support for copying a value at a specific path for the inspected element

* Added backend support for storing a value (at a specified path) as a global variable

* Added special casing to enable copying undefined/unserializable values to the clipboard

* Added copy and store-as-global context menu options to selected element props panel

* Store global variables separately, with auto-incremented name (like browsers do)

* Added tests for new copy and store-as-global backend functions

* Fixed some ownerDocument/contentWindow edge cases

* Refactored context menu to support dynamic options

Used this mechanism to add a conditional menu option for inspecting the current value (if it's a function)

* Renamed "safeSerialize" to "serializeToString" and added inline comment
2019-12-18 12:12:34 -08:00
Brian Vaughn bb75a4fa89
Improved selection and toggling for props/hooks/state (#17588)
1. Enable nested values to be expanded/collapsed by clicking on values as well as keys.
2. Enable keys and values to be selectable (for copy-pasting purposes)
2019-12-17 11:28:37 -08:00
Brian Vaughn 12c000412d
Improved inspected element props with inline previews (#17579)
* Improved inspected element props with inline previews

This mimics the inline preview shown by the brower console and dramatically improves the UX when inspecting deep values. I also updated tests to add more coverage for this new functionality.

* Cleaned up the DataView vs typed array check

* Added early bailouts to DevTools when generating preview strings for iterables/objects/arrays, to avoid doing unnecessary work
2019-12-11 17:52:17 -08:00
Brian Vaughn 031a5aaffb
Show component location for selected element in bottom/right of props panel (#17567)
* Show component location info for selected element in bottom/right of props panel

* Moved RegExp declaration into function basedon PR feedback
2019-12-10 09:24:34 -08:00
Brian Vaughn 5faf377df5
Fixed a style bug in props editor (#17162) 2019-10-21 15:08:55 -07:00
Brian Vaughn fa1a326227
Update useEditableValue hook to sync external value changes (#16878)
* Update useEditableValue to mirror value cahnges

Previously, the hook initialized local state (in useState) to mirror the prop/state value. Updates to the value were ignored though. (Once the state was initialized, it was never updated.) The new hook updates the local/editable state to mirror the external value unless there are already pending, local edits being made.

* Optimistic CHANGELOG update

* Added additional useEditableValue() unit test cases
2019-09-25 10:46:27 -07:00
Brian Vaughn 9b3cde9b62
Fix DevTools v4.1 editable hook regression (#16867)
* Fixed a regression in hooks editor from a recent EditableValue change

* Fixed a reset/state bug in useEditableValue() hook and removed unnecessary useMemo()
2019-09-23 12:56:01 -07:00
Brian Vaughn 2c98af77c3
DevTools: Props editing interface tweaks (#16740)
* Fix DevTools new prop input size
* Don't allow adding new values unless an overridePropsFn function has been provided.
* Do not show empty 'none' label ablve a new prop input
2019-09-10 14:57:33 -07:00
Hristo Kanchev 709baf1fec [DevTools] Support for adding props | Improved state/props value editing (#16700)
* Extracted sanitizeForParse

* Added canAddEntries flag to InspectedElementTree

* Added EditableKey component.

* Added support to add an additional entry.

* Added support to add more complex data structures in the EditableValue component. Added support to change the dataType of the value that is being changed.

* Fixed flow error.

* Removed unneeded fragment.

* Renamed EditableKey -> EditableName

* Removed unneeded dependency

* Removed problematic props to state hook.

* Prettified changes.

* Removed unused import.

* Fixed shouldStringify check.

* Removed testing props from EditableProps.

* Made some inline tweaks
2019-09-10 13:30:43 -07:00
Hristo Kanchev 4ef6387d6e [DevTools] [Context] Legacy Context (#16617)
* Added hasLegacyContext check.

* Passed hasLegacyContext as prop to SelectedElement

* Changing context labels based on hasLegacyContext

* Fixed flow types.

* Fixed typos.

* Added tests for hasLegacyContext.

* Renamed test.

* Removed test imports.
2019-09-10 13:30:20 -07:00
Alex Rohleder 206d61f722 fix typos on react-devtools comments (#16681) 2019-09-06 07:47:44 -07:00
Brian Vaughn 7153dd516f Fixed a StyleEditor variable resolution regression 2019-08-27 12:53:38 -07:00
Brian Vaughn 8e1434e80e Added FB copyright header 2019-08-27 10:54:01 -07:00
Brian Vaughn 8c684bf7e1 Removed forked DevTools Flow types 2019-08-27 10:42:02 -07:00
Brian Vaughn 66c9fedc34 Flow fixes 2019-08-20 13:33:33 -07:00
Brian Vaughn 4da836af71 Merged changes from 4.0.0 -> 4.0.5 from DevTools fork 2019-08-20 11:34:51 -07:00
Brian Vaughn ac2e861fbe Fixed a bunch of Lint issues 2019-08-13 21:59:07 -07:00
Brian Vaughn 183f96f2ac Prettier 2019-08-13 17:58:03 -07:00
Brian Vaughn edc46d7be7 Misc Flow and import fixes
1. Fixed all reported Flow errors
2. Added a few missing package declarations
3. Deleted ReactDebugHooks fork in favor of react-debug-tools
2019-08-13 17:53:28 -07:00
Brian Vaughn 08743b1a8e Reorganized folders into packages/* 2019-08-13 15:59:43 -07:00
Brian Vaughn ec7ef50e8b Reorganized things again into packages 2019-08-13 11:37:25 -07:00