Old Chrome Bookmarks Button

# 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) ```