Skip to content
This repository was archived by the owner on Jun 26, 2020. It is now read-only.

Make Elements panel feel less cluttered #1091

Merged
merged 10 commits into from
Aug 15, 2018
Merged

Make Elements panel feel less cluttered #1091

merged 10 commits into from
Aug 15, 2018

Conversation

bvaughn
Copy link
Contributor

@bvaughn bvaughn commented Aug 12, 2018 •
edited
Loading

Do not merge before PR #1069

Resolves #1079

Includes the following subjective tweaks:

  • Tweaks margins and paddings to feel less cluttered
  • Re-styles header toolbar so search feels more prominent
  • Moves "Highlight updates" and "Highlight search" options into settings popup
  • Changes attribute display behavior to only show strings/numbers/booleans and hide the rest from the tree view
  • Rather than forcing single-line elements, added improved wrapping behavior to make tree easier to see at a glance
  • Forces breadcrumb strip to only take up a single vertical line rather than wrapping
  • Improves scroll-into-view functionality to also horizontally scroll

New search toolbar and settings

settings

New element attribute wrapping behavior

wrap

Improved breadcrumbs and scroll-to behavior

breadcrumbs-and-snapping

@bvaughn
Copy link
Contributor Author

bvaughn commented Aug 13, 2018

I've re-added the breadcrumbs strip, as a single-line only (no wrap) and improved the scroll-to snapping behavior for selected items.

@gaearon
Copy link
Contributor

gaearon commented Aug 14, 2018 •
edited
Loading

A few minor things based on screen recordings above:

  • Styles appear wrong here (I mentioned on twitter but not sure if you have a chance to fix this yet)

screen shot 2018-08-14 at 6 09 09 pm

  • I dislike the "lack" of input background. It's probably not great from accessibility standpoint (low contrast) and in general I haven't seen this pattern elsewhere. Maybe it would be better if clicking transformed it into an input?

screen shot 2018-08-14 at 6 10 00 pm

@bvaughn
Copy link
Contributor Author

bvaughn commented Aug 15, 2018

The first thing you pointed out was an edge-case when the tail was clicked but then the node collapsed. It's now fixed.

As for the search input style– I like it, but...I don't feel strong enough about it to fight for it 😄so I changed its color when focused like you mentioned.

kapture 2018-08-14 at 18 28 55

gaearon
gaearon approved these changes Aug 15, 2018
View reviewed changes
Copy link
Contributor

@gaearon gaearon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Haven't looked through the code but I trust you

@bvaughn
Copy link
Contributor Author

bvaughn commented Aug 15, 2018

❤️

@bvaughn bvaughn merged commit 76fa9b8 into facebook:master Aug 15, 2018
@bvaughn bvaughn deleted the issues/1079 branch August 15, 2018 16:15
@bvaughn bvaughn mentioned this pull request Aug 20, 2018
Closed
OrDuan pushed a commit to OrDuan/react-devtools that referenced this pull request Aug 23, 2018
@bvaughn @OrDuan
Make Elements panel feel less cluttered (facebook#1091)
b89feb9 
Reimagined Settings, TreeView, and Node components.:
* Redesigned toolbar to focus more on search and remove clutter
* Move "highlight-updates" and "highlight-search" options into settings panel
* Changed attribute filtering logic to show all attributes of type number/string/bool and filter others
* Elements tree nodes wrap now for better readability
* Breadcrumbs doesn't wrap, but scrolls horizontally, to take up less space
* Margins and paddings tweaked
@miklosme miklosme mentioned this pull request Aug 24, 2018
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@gaearon gaearon gaearon approved these changes

Assignees
No one assigned
Labels
CLA Signed
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@bvaughn @gaearon @facebook-github-bot