Update our left-hand nav icons

[jonbell-lot23]

Summary

This update standardizes our icons to feel more like a family, plus makes some aesthetic improvements. Before and after:

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
devtools	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 29, 2023 7:01am

[replay-io]

E2E Tests

74 replays were recorded for 3e730d2.

0 Failed

74 Passed

• authenticated/comments-01: Test add, edit, and delete comment functionality

  expect(received).toBe(expected) // Object.is equality
  Expected: 1
  Received: 0

• authenticated/comments-02: Test shared comments and replies

  expect(received).toBe(expected) // Object.is equality
  Expected: 1
  Received: 0

• authenticated/comments-03: Comment previews

  expect(received).toBe(expected) // Object.is equality
  Expected: 1
  Received: 0

• authenticated/logpoints-01: Shared logpoints functionality
• authenticated/passport-01: Time travel

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• authenticated/passport-02: Infrared inspection

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• authenticated/passport-03: Swiss army knife

  expect(received).toBeTruthy()
  Received: false

• authenticated/passport-04: Multiplayer

  expect(received).toBe(expected) // Object.is equality
  Expected: 1
  Received: 0

• breakpoints-01: Test basic breakpoint functionality

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• breakpoints-02: Test unhandled divergence while evaluating at a breakpoint

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• breakpoints-03: Test stepping forward through breakpoints when rewound before the first one

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• breakpoints-04: catch, finally, generators, and async/await

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• breakpoints-05: Test interaction of breakpoints with debugger statements

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• breakpoints-06: Test log point in a sourcemapped file
• breakpoints-07: rewind and seek using command bar and console messages

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• breakpoints-08: should be temporarily disabled
• console_async: support console evaluations in async frames

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• console_dock_node: Should show the correct docking behavior for recordings without video
• console_dock: Should show the correct docking behavior for recordings with video
• console_errors: Test that errors and warnings from various sources are shown in the console
• console_eval: support console evaluations

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• console_warp-01: should support warping to console messages

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• console_warp-02: support pausing, warping, stepping and evaluating console messages

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• console-expressions-01: should cache input eager eval and terminal expressions per instance

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• cypress-01: Basic Test Suites panel functionality

  expect(received).toBe(expected) // Object.is equality
  Expected: true
  Received: false

• cypress-02: Test Step timeline behavior

  expect(received).toBe(expected) // Object.is equality
  Expected: true
  Received: false

• cypress-03: Test Step interactions

  expect(received).toBe(expected) // Object.is equality
  Expected: true
  Received: false

• cypress-04: Test Step buttons and menu item

  expect(received).toBe(expected) // Object.is equality
  Expected: true
  Received: false

• focus_mode-01: should filter messages as regions based on the active focus mode
• highlighter: element highlighter works everywhere

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• inspector-01: Test that scopes are rerendered

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• inspector-02: element picker and iframe behavior

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• inspector-03: Test that styles for elements can be viewed

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• inspector-04: Test that styles for elements can be viewed

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• inspector-05: Test that styles for elements can be viewed

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• inspector-06: Test that styles for elements can be viewed

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• inspector-07: Test that styles for elements can be viewed

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• logpoints-01: log-points appear in the correct order and allow time warping

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• logpoints-02: conditional log-points

  expect(received).toBe(expected) // Object.is equality
  Expected: "4/5"
  Received: "5/5"

• logpoints-03_chromium: should display event properties in the console
• logpoints-03: should display event properties in the console
• logpoints-04: should display exceptions in the console

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• logpoints-05: should auto-complete based on log point location

  expect(received).toContain(expected) // indexOf
  Expected value: "arrayGlobal"
  Received array: []

• logpoints-06: should be temporarily disabled
• logpoints-07: should use the correct scope in auto-complete

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• logpoints-08: should support jumping directly to a hit point via the capsule input
• logpoints-09: should support pending edits

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• node_console-01: Basic node console behavior

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• node_console-02: uncaught exceptions should show up

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• node_control_flow: catch, finally, generators, and async/await

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• node_logpoint-01: Basic node logpoints

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• node_logpoint-02: Node exception logpoints

  expect(received).toBe(expected) // Object.is equality
  Expected: true
  Received: false

• node_object_preview: Showing console objects in node
• node_spawn: Basic subprocess spawning

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• node_stepping-01: Test stepping in async frames and async call stacks

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• node_worker-01: make sure node workers don't cause crashes

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• object_preview-01: expressions in the console after time warping

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• object_preview-02: should allow objects in scope to be inspected

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• object_preview-03: Test previews when switching between frames and stepping

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• object_preview-04: Test scope mapping and switching between generated/original sources

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• object_preview-05: Should support logging objects as values

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• react_devtools: Test React DevTools.

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• repaint: repaints the screen screen when stepping over code that modifies the DOM

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• resizable-panels-01: Left side Toolbar should be collapsible
• scopes_rerender: Test that scopes are rerendered

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• sourcemap_stacktrace: Test that stacktraces are sourcemapped
• stacking: Element highlighter selects the correct element when they overlap

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• stepping-01: Test basic step-over/back functionality

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• stepping-02: Test fixes for some simple stepping bugs

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• stepping-03: Stepping past the beginning or end of a frame should act like a step-out

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• stepping-04: Test stepping in a frame other than the top frame

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

• stepping-05_chromium: Test stepping in pretty-printed code

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• stepping-05: Test stepping in pretty-printed code

  expect(received).toBeGreaterThan(expected)
  Expected: > 0
  Received:   0

• stepping-06: Test stepping in async frames and async call stacks

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: "false"

View test run on Replay ↗︎

Snapshot Tests

100 replays were recorded for 3e730d2.

0 Failed

100 Passed

• should add true/false keywords to the list of suggestions

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should add this keyword to the list of suggestions

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should be able to toggle side filter menu open and closed

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should be filterable on complex content

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should be filterable

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should be searchable on complex content

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should be searchable

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should display list of messages

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should display toggleable stack for errors

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should display toggleable stack for exceptions

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should display toggleable stack for traces

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should display toggleable stack for warnings

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should escape object expressions in terminal expressions

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should evaluate and render invalid terminal expressions

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should evaluate terminal expressions at an execution point

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should evaluate terminal expressions without an execution point

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should expand and inspect arrays

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should expand and inspect objects

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should hide node_modules (and unpkg) if toggled

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should log events in the console

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should re-focus the search input when CMD+F is used again

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should re-focus the terminal input when search input is hidden

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should refine string tokens to avoid unnecessarily escaping quotation marks

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should remember filter toggle preferences between reloads

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should show a button to clear terminal expressions

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should show error object stacks by default

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should show the context menu on top of other messages and the current time indicator

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should suggest type-ahead options from prototype objects as well

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should support seeking to a message execution point

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should support setting focus range via the context menu

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should support terminal expressions with line breaks

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should render nested, recursive values (as ellipses) without crashing

  expect(received).not.toBeNull()
  Received: null

• should copy arrays

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should copy dates

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should copy deep arrays and their nested properties

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should copy deep objects and their nested properties

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should copy errors

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should copy functions

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should copy html elements and text

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should copy maps

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should copy objects

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should copy primitive client values

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should copy regular expressions

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should copy sets

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should properly bucket properties for an overflowing array

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should render and inspect a Promise

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should render and inspect a Proxy

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should render and inspect arrays

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should render and inspect functions

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should render and inspect HTML elements

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should render and inspect maps

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should render and inspect objects

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should render and inspect regular expressions

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should render and inspect sets

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should render dates

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should render errors

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should render getters and setters correctly

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should render simple values

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should render sections correctly

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should show/hide object and array previews when toggled

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• scroll position should be restored when switching between sources

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should account for column breakpoints with plain text

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should account for column breakpoints

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should allow log point badge colors to be toggled

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should auto-suggestion text based on the current expression

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should expand and contract line height when log points are added and removed

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should gracefully handle invalid remote analysis

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should handle too many points to find

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should handle too many points to run analysis

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should hide results when search is closed, and remember previous search string if re-opened

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should include log points in search results

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should include log points when filtering data

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should not allow saving log points with invalid conditional

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should not allow saving log points with invalid content

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should not erase break point when logging is toggled

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should not erase log point content when breaking is toggled

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should overflow long log point text (without wrapping)

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should properly toggle breakable and loggable behaviors when there are multiple breakable positions on a line

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should remember search results count per source

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should render search results properly for lines with multiple breakable column positions

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should run local analysis for log points

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should run remote analysis for log points

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should show different background color and edit icon when log point disabled

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should support break points

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should support conditional log points

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should support custom badge styles for log points

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should support fuzzy file search

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should support jumping to a line in the active source file

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should support multiple breakable column positions on a line

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should support new lines in log points

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should support text search in the active source file

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should update the current time when the next/previous log point buttons are clicked

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should render headers for complex data correctly

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should render primitive data correctly

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• display an overflow message

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should expand and collapse sources

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should find matches in multiple sources

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should include or exclude external modules as requested

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should open a source and scroll to the correct line

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

• should reset collapsed state if search changes

  expect(received).toBe(expected) // Object.is equality
  Expected: "true"
  Received: null

View test run on Replay ↗︎

[bvaughn]

Nit: The first icon feels too close to the top. (Seems like the padding/gutter around the icon, and between each icon, should be even?)

[bvaughn]

It's late and I need to get to bed. I'll provide a more detailed accounting tomorrow.

FWIW the “Draft” PR status is good to use in this situation. It lets the reviewer know to hold off until the PR is ready 😄

[jonbell-lot23]

Nit: The first icon feels too close to the top. (Seems like the padding/gutter around the icon, and between each icon, should be even?)

Yup, there's even spacing between each icon, then the gap at the top is exactly half. This is appropriate (but open to differences of opinion of course) because it's the top of a grouping of icons. The composition needs to work against other items (the title and back arrow), so keeping the exact same spacing there could work, but isn't a given. In our case, it makes the icons look too low. (in my opinion) The other thing I tried was zero top margin so it aligns with the top of the panel, which I think can work too.

[bvaughn]

Guess we just have different subjective opinions in that regard. I think the half padding looks broken 🤷🏼 Thanks for explaining your reasoning though

[jonbell-lot23]

Guess we just have different subjective opinions in that regard. I think the half padding looks broken 🤷🏼 Thanks for explaining your reasoning though

I definitely prefer when we agree, but yeah, some things are just subjective. VS Code does a similar thing:

What do you think about removing the padding entirely so it aligns evenly with the top of the panel? I think that could work.

[bvaughn]

I definitely prefer when we agree, but yeah, some things are just subjective.

Me too! 😄 Doesn't always happen though, which is fine.

Seeing it in context, the alignment looks better bc there's space in the row above:

That being said, I think there's something funky going on with the icon's own internal vertical alignment:

Compare it to one of the other icons, which is properly centered (vertically and horizontally):

Where did the SVG paths come from?

[jonbell-lot23]

Where did the SVG paths come from?

These are from Apple's symbols library. In the case of the info, I modified their icon because it started like this:

And here's how the dimensions look on the artboard:

[bvaughn]

Looks like something went wrong during the export/import step then. Looking at the preview branch for this PR–

If I copy that icon out:

<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="h-full w-full" fill="currentColor"><path d="M12.1879 22.8578C10.8187 22.8578 9.5292 22.5952 8.3195 22.0701C7.11645 21.5517 6.05298 20.8339 5.12908 19.9167C4.21184 18.9928 3.49068 17.9294 2.96559 16.7262C2.44715 15.5165 2.18793 14.2271 2.18793 12.8579C2.18793 11.4886 2.44715 10.2025 2.96559 8.99945C3.49068 7.78974 4.21184 6.72627 5.12908 5.80903C6.04634 4.88514 7.10648 4.16397 8.30954 3.64553C9.51923 3.12044 10.8087 2.85789 12.1779 2.85789C13.5472 2.85789 14.8366 3.12044 16.0463 3.64553C17.256 4.16397 18.3195 4.88514 19.2368 5.80903C20.154 6.72627 20.8751 7.78974 21.4002 8.99945C21.9253 10.2025 22.1879 11.4886 22.1879 12.8579C22.1879 14.2271 21.9253 15.5165 21.4002 16.7262C20.8751 17.9294 20.154 18.9928 19.2368 19.9167C18.3195 20.8339 17.256 21.5517 16.0463 22.0701C14.8433 22.5952 13.5572 22.8578 12.1879 22.8578ZM12.1879 21.5717C13.391 21.5717 14.5177 21.3457 15.5677 20.8937C16.6246 20.4418 17.5519 19.8169 18.3494 19.0194C19.1537 18.2218 19.7784 17.2978 20.2238 16.2476C20.6758 15.1909 20.9018 14.0609 20.9018 12.8579C20.9018 11.6548 20.6758 10.5282 20.2238 9.478C19.7718 8.42118 19.147 7.49397 18.3494 6.69636C17.5519 5.89211 16.6246 5.26732 15.5677 4.82199C14.5177 4.37002 13.3877 4.14403 12.1779 4.14403C10.9749 4.14403 9.84492 4.37002 8.7881 4.82199C7.73792 5.26732 6.81403 5.89211 6.01642 6.69636C5.22547 7.49397 4.604 8.42118 4.15203 9.478C3.7067 10.5282 3.48403 11.6548 3.48403 12.8579C3.48403 14.0609 3.7067 15.1909 4.15203 16.2476C4.604 17.2978 5.22878 18.2218 6.02639 19.0194C6.82399 19.8169 7.74789 20.4418 8.79807 20.8937C9.84824 21.3457 10.9782 21.5717 12.1879 21.5717Z"></path><path d="M13.1374 11.8119C13.1374 11.3183 12.7373 10.9182 12.2437 10.9182C11.7502 10.9182 11.3501 11.3183 11.3501 11.8119V18.0964C11.3501 18.5899 11.7502 18.99 12.2437 18.99C12.7373 18.99 13.1374 18.5899 13.1374 18.0964V11.8119Z"></path><path d="M11.4692 8.75378C11.6819 8.95983 11.9377 9.06286 12.2369 9.06286C12.5426 9.06286 12.7985 8.95983 13.0046 8.75378C13.2173 8.54109 13.3236 8.2852 13.3236 7.9861C13.3236 7.68035 13.2173 7.42113 13.0046 7.20843C12.7985 6.99574 12.5426 6.88939 12.2369 6.88939C11.9377 6.88939 11.6819 6.99574 11.4692 7.20843C11.2565 7.42113 11.1501 7.68035 11.1501 7.9861C11.1501 8.2852 11.2565 8.54109 11.4692 8.75378Z"></path></svg>

And blow it up larger, it looks like this:

[bvaughn]

I think all of the other icons look okay, except this one is also misaligned:

<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="h-full w-full" fill="currentColor"><path d="M3.3327 11.2971C3.3327 10.3303 3.51434 9.42505 3.87762 8.5813C4.24091 7.73169 4.74481 6.98462 5.38934 6.34009C6.03387 5.69556 6.77802 5.19165 7.62177 4.82837C8.47137 4.46509 9.37958 4.28345 10.3464 4.28345C11.3132 4.28345 12.2184 4.46509 13.0622 4.82837C13.9118 5.19165 14.6589 5.69556 15.3034 6.34009C15.9479 6.98462 16.4518 7.73169 16.8151 8.5813C17.1784 9.42505 17.36 10.3303 17.36 11.2971C17.36 12.0999 17.2311 12.8616 16.9733 13.5823C16.7214 14.303 16.3698 14.9563 15.9186 15.5422L20.2165 19.8665C20.3102 19.9602 20.3806 20.0686 20.4274 20.1917C20.4802 20.3147 20.5065 20.4465 20.5065 20.5872C20.5065 20.7805 20.4626 20.9563 20.3747 21.1145C20.2927 21.2727 20.1755 21.3958 20.0231 21.4836C19.8708 21.5774 19.695 21.6243 19.4958 21.6243C19.3552 21.6243 19.2204 21.5979 19.0915 21.5452C18.9684 21.4983 18.8542 21.425 18.7487 21.3254L14.4245 16.9924C13.8503 17.4026 13.2175 17.7249 12.5261 17.9592C11.8347 18.1936 11.1081 18.3108 10.3464 18.3108C9.37958 18.3108 8.47137 18.1292 7.62177 17.7659C6.77802 17.4026 6.03387 16.8987 5.38934 16.2542C4.74481 15.6096 4.24091 14.8655 3.87762 14.0217C3.51434 13.1721 3.3327 12.2639 3.3327 11.2971ZM4.83563 11.2971C4.83563 12.0588 4.97626 12.7737 5.25751 13.4417C5.54462 14.1038 5.94012 14.6868 6.44403 15.1907C6.9538 15.6946 7.53973 16.0901 8.20184 16.3772C8.86981 16.6643 9.58466 16.8079 10.3464 16.8079C11.1081 16.8079 11.82 16.6643 12.4821 16.3772C13.1501 16.0901 13.736 15.6946 14.2399 15.1907C14.7438 14.6868 15.1393 14.1038 15.4265 13.4417C15.7136 12.7737 15.8571 12.0588 15.8571 11.2971C15.8571 10.5354 15.7136 9.82349 15.4265 9.16138C15.1393 8.49341 14.7438 7.90747 14.2399 7.40356C13.736 6.8938 13.1501 6.49829 12.4821 6.21704C11.82 5.92993 11.1081 5.78638 10.3464 5.78638C9.58466 5.78638 8.86981 5.92993 8.20184 6.21704C7.53973 6.49829 6.9538 6.8938 6.44403 7.40356C5.94012 7.90747 5.54462 8.49341 5.25751 9.16138C4.97626 9.82349 4.83563 10.5354 4.83563 11.2971Z"></path></svg>

Maybe this one is intentional, since the lower/right bit isn't as visually "heavy" as the top/left bit. Not sure.

[jonbell-lot23]

(I should point out that I spent a lot of time measuring and eyeballing, but these shapes have so many optical differences (some are wider, some are taller, etc) that I am absolutely open to feedback about aligning them better.

So in the previous comment, I'm saying "it looks ok in Figma!" but also "but maybe something broke in the code, that wouldn't be 100% surprising to me"

[edit: I wrote this before noticing the comments above. Thanks for doing a run-through on the icons, my eyes have crossed from working on this so much, I appreciate the fresh eyes and will look into tweaks]

[jonbell-lot23]

Maybe this one is intentional, since the lower/right bit isn't as visually "heavy" as the top/left bit. Not sure.

Yup, that's exactly what happened. Mathematical alignment felt off, so this was fudged for optical alignment

[bvaughn]

I'd prefer the style be moved, but this is otherwise ok.

[bvaughn]

Can you move the style (styles.iconWithTooltipButton) to the icon, since it is what you're trying to style anyway? The IconWithTooltip component is only used in on place (Header) so you should be able to just do it there:

devtools/src/ui/components/Header/Header.tsx

Line 169 in 4ec18e2

const backIcon = <div className="img arrowhead-right" style={{ transform: "rotate(180deg)" }} />;

[jonbell-lot23]

Thanks for the review, Brian!

We talked about how you're the princess and the pea, and how important that is for us. ❤️

[bvaughn]

We talked about how you're the princess and the pea, and how important that is for us. ❤️

Oh gosh! That is a good description 😅 😆

[jonbell-lot23]

I'm having trouble moving the style and I'm trying to handle other things (breakfast, picking up Chris, etc) so I'm going to squash and merge and follow up on the style improvements in a different PR. I want as many eyeballs on the new icons today as possible, especially with us under one roof at the offsite.

[jonbell-lot23]

Here's the Linear ticket for a fast-follow, once I eat breakfast: https://linear.app/replay/issue/DES-748/follow-up-on-icon-pr