Old Chrome Bookmarks Button

About

# Old Chrome Bookmarks Button

Attempt to perfectly replicate the "Add to Bookmarks" popup last found in Chrome 63. The original was a native macOS Cocoa UI, not web-rendered.

---

## Source files used

### `chrome/app/nibs/BookmarkBubble.xib`
Interface Builder layout for the main popup (clicking the star icon).
- Window: 374 × 145 px
- Font (title "Bookmark"): 13pt — `metaFont="system"`
- Font (all other controls): 11pt — `metaFont="smallSystem"`
- Name input: height 19px, `borderStyle="bezel"`, `controlSize="small"`
- Folder picker: height 22px, `NSPopUpButton`, `bezelStyle="rounded"`, `controlSize="small"`
- Buttons (Remove, Edit..., Done): height 28px, `bezelStyle="rounded"`, `controlSize="small"`
- Done button: `keyEquivalent="\r"` — this is what makes macOS color it blue


### `chrome/app/nibs/BookmarkEditor.xib`
Interface Builder layout for the Edit Bookmark sheet.
- Window: 480 × 270 px
- Font (all controls): 13pt — `metaFont="system"`
- Name / URL inputs: height 22px, `borderStyle="bezel"`
- Folder tree: `NSOutlineView` in `NSScrollView`, height 139px, indent 16px per level
- Buttons (New folder, Cancel, Save): height 32px, `bezelStyle="rounded"`
- Save button: `keyEquivalent="\r"` — colored blue by macOS


### `chrome/browser/ui/cocoa/info_bubble_view.h`
Drawing constants for the popup bubble container.
- Corner radius: 2px — `kBubbleCornerRadius = 2.0`
- Arrow height: 8px — `kBubbleArrowHeight = 8.0`
- Arrow width: 15px — `kBubbleArrowWidth = 15.0`
- Background: pure white — `[NSColor whiteColor]`


### `chrome/browser/ui/cocoa/bookmarks/bookmark_bubble_controller.mm`
Confirmed: folder selector is `NSPopUpButton`, "Choose Another Folder…" at the bottom opens the editor sheet.


### `chrome/browser/ui/cocoa/bookmarks/bookmark_editor_base_controller.mm`
Confirmed: folder tree uses `NSTreeController` + `NSOutlineView`.


---

## Key finding

There are no image assets (PNG, shader, etc.) for any of these controls. Everything — button gradients, glow, the blue NSPopUpButton indicator — is rendered at runtime by macOS AppKit. The CSS in this extension is a manual simulation.


---

## Color matching on macOS (Display P3)

Macs with Retina displays use the **Display P3** color space. This causes a mismatch when trying to match CSS colors to a reference screenshot:

1. You write a hex color (e.g. `#2165f6`) in CSS → Chrome treats it as **sRGB**
2. macOS converts sRGB → P3 for display on screen
3. You take a screenshot → macOS saves it tagged with the **Display P3 ICC profile**
4. You open in Photoshop → it reads P3-encoded pixel values → shows a different hex (e.g. `#3d74ed`)

### Solution: use `color(display-p3 ...)` in CSS

Reference screenshots are already in P3. Pixel-sample them directly (e.g. with Python PIL), then feed those values back into CSS as P3 — bypassing the double-conversion:

```css
background: linear-gradient(
  to bottom,
  color(display-p3 0.467 0.647 0.961) 0%,
  color(display-p3 0.129 0.396 0.965) 100%
);
```

This way the chain is consistent end-to-end: reference screenshot (P3) → CSS P3 values → Chrome renders P3 → screenshot matches reference pixel-for-pixel.

### Converting hex to P3 decimal

`color(display-p3 ...)` does not accept hex — only decimal values from 0 to 1. To convert a hex color sampled from a macOS screenshot:

```
#77a5f5 → r=119, g=165, b=245 → divide each by 255 → 0.467, 0.647, 0.961
```

```css
color(display-p3 0.467 0.647 0.961)
```