I think this issue stems from some circular logic when it comes to setting width.
startLayoutBreakout sets the width of the expanded megabar based on the width of the textbox. The width of the selected textbox is based on
The issue is that the Urlbar is already selected by the time
startLayoutBreakout is called, leading to the circle. The CSS first can't find
--urlbar-width so it sets width to some minimum width (on my machine, it's 235px). Then
--urlbar-width to that minimum width, since that's how big the textbox is in its current selected state. Sure enough, modifying this line to
width: calc(var(--urlbar-width, 700px) + 2 * @urlbarBreakoutExtend@);
means the focused Urlbar is 700px on new window opens instead of 235px.
Dao, do you know of some way we can defer the focus-on-new-window behaviour until after
startLayoutBreakout can be called? That way,
--urlbar-width will be correctly set to the width of the full (unfocused) Urlbar. Alternatively, do you know where the call to focus the Urlbar on a new window is, so we could set
--urlbar-width just before?