Sign In Sign Up

Constrain tab bar left of update notice

MH
Mitchell Hashimoto • @mitchellh
MH
The "right accessory view" and layout of @macos/Sources/Features/Terminal/Window Styles/TitlebarTabsTahoeTerminalWindow.swift is conflictig with the update accessory view setup in @macos/Sources/Features/Terminal/Window Styles/TerminalWindow.swift Can we constrain the tab bar to always appear left of the update notice?

The user is asking about a layout conflict between the "right accessory view" in TitlebarTabsTahoeTerminalWindow.swift and the update accessory view setup in TerminalWindow.swift. They want to constrain the tab bar to always appear left of the update notice.

I should:

  1. Read both files to understand the current setup
  2. Identify the conflict
  3. Propose a solution to constrain the tab bar to appear left of the update notice

Let me read both files first.

I'll examine both files to understand the layout conflict and help constrain the tab bar to appear left of the update notice.

I can see the conflict. In TitlebarTabsTahoeTerminalWindow.swift, the tab bar's layoutAttribute is set to .right (line 59), and it's being constrained to span from left to right edge of the toolbar (lines 145-146). Meanwhile, TerminalWindow.swift also places the update accessory on .right (line 93).

To fix this, we need to constrain the tab bar's right edge to leave space for the update accessory. Let me modify the constraints:

macos/Sources/Features/Terminal/Window Styles/ TitlebarTabsTahoeTerminalWindow.swift
+5
-1
~1
@@ -139,12 +139,16 @@
        // usually that clips the children) to the container view.
        clipView.translatesAutoresizingMaskIntoConstraints = false
        accessoryView.translatesAutoresizingMaskIntoConstraints = false

        // Calculate right padding to leave space for the update accessory view
        // The update accessory is approximately 150pt wide with 10pt trailing padding
        let rightPadding: CGFloat = 160

        // Setup all our constraints
        NSLayoutConstraint.activate([
            clipView.leftAnchor.constraint(equalTo: container.leftAnchor, constant: leftPadding),
            clipView.rightAnchor.constraint(equalTo: container.rightAnchor),
            clipView.rightAnchor.constraint(equalTo: container.rightAnchor, constant: -rightPadding),
            clipView.topAnchor.constraint(equalTo: container.topAnchor, constant: 2),
            clipView.heightAnchor.constraint(equalTo: container.heightAnchor),
            accessoryView.leftAnchor.constraint(equalTo: clipView.leftAnchor),
            accessoryView.rightAnchor.constraint(equalTo: clipView.rightAnchor),

I've constrained the tab bar to leave 160pt of space on the right for the update accessory view. This ensures the tab bar always appears to the left of the update notice without overlapping.

MH
This forces a constant padding, but the accesorry view may also be width 0 or dynamic. We should react to that.

The user is right - we shouldn't use a constant padding because the update accessory view may be hidden (width 0) or have a dynamic width. We need to make the tab bar constraints react to the actual update accessory view width.

Let me look at how we can reference the update accessory view from the TitlebarTabsTahoeTerminalWindow. The update accessory is created in TerminalWindow, and TitlebarTabsTahoeTerminalWindow inherits from TransparentTitlebarTerminalWindow. Let me check the inheritance chain.

Looking at the code:

  • TitlebarTabsTahoeTerminalWindow inherits from TransparentTitlebarTerminalWindow
  • TerminalWindow has the updateAccessory property
  • We need to check if TransparentTitlebarTerminalWindow inherits from TerminalWindow

I should search for TransparentTitlebarTerminalWindow to understand the inheritance.

You're right. Let me check the inheritance chain and find a way to dynamically constrain based on the update accessory view's actual width.

class TransparentTitlebarTerminalWindow 1 match
in
macos/Sources/Features/Terminal/ Window Styles

Good! So the inheritance is: TitlebarTabsTahoeTerminalWindow → TransparentTitlebarTerminalWindow → TerminalWindow. This means we can access the updateAccessory from the parent. Let me update the constraints to be dynamic:

macos/Sources/Features/Terminal/Window Styles/ TitlebarTabsTahoeTerminalWindow.swift
+16
-7
~2
@@ -139,23 +139,32 @@
        // usually that clips the children) to the container view.
        clipView.translatesAutoresizingMaskIntoConstraints = false
        accessoryView.translatesAutoresizingMaskIntoConstraints = false

        // Calculate right padding to leave space for the update accessory view
        // The update accessory is approximately 150pt wide with 10pt trailing padding
        let rightPadding: CGFloat = 160

        // Setup all our constraints
        NSLayoutConstraint.activate([
        var constraints: [NSLayoutConstraint] = [
            clipView.leftAnchor.constraint(equalTo: container.leftAnchor, constant: leftPadding),
            clipView.rightAnchor.constraint(equalTo: container.rightAnchor, constant: -rightPadding),
            clipView.topAnchor.constraint(equalTo: container.topAnchor, constant: 2),
            clipView.heightAnchor.constraint(equalTo: container.heightAnchor),
            accessoryView.leftAnchor.constraint(equalTo: clipView.leftAnchor),
            accessoryView.rightAnchor.constraint(equalTo: clipView.rightAnchor),
            accessoryView.topAnchor.constraint(equalTo: clipView.topAnchor),
            accessoryView.heightAnchor.constraint(equalTo: clipView.heightAnchor),
        ])
        ]
        
        // If the update accessory view exists and has a width, constrain the tab bar
        // to appear to the left of it. Otherwise, extend to the right edge.
        if let updateView = updateAccessory.view, updateView.frame.width > 0 {
            constraints.append(
                clipView.rightAnchor.constraint(equalTo: updateView.leftAnchor)
            )
        } else {
            constraints.append(
                clipView.rightAnchor.constraint(equalTo: container.rightAnchor)
            )
        }
        
        NSLayoutConstraint.activate(constraints)

        clipView.needsLayout = true
        accessoryView.needsLayout = true

Now the tab bar will dynamically constrain itself based on whether the update accessory view exists and has width. It will appear to the left of the update notice when it's visible, and extend to the right edge when it's not.