QuantumBar

• Because you can now select a shortcut at any time, the footer section is always displayed.
• A shortcut can be selected before or after search terms have been entered.
• If you’ve entered search terms and then you select a shortcut, your search terms are retained and new suggestions are returned.

• A close button is displayed on hover. Clicking it will remove the selected engine and return you to using your default search engine. Your search terms are retained and new suggestions are returned.
• With the insertion point between the engine and search terms, pressing backspace (delete for macOS) once will remove the selected engine and return you to using your default search engine. Your search terms are retained and new suggestions are returned.
• Hitting escape once closes the panel. Pressing escape a second time removes the engine and search terms, returning you to the default prompt or previous url.

We now have shortcuts for 3 address bar operators: *, %, ^ (bookmarks, tabs, and history):

• The bookmarks shortcut uses the filled bookmark icon with the Blue 60 color.
  • Its displayed as “Bookmarks” in the address bar.
  • The typed alias is “*”
  • The tooltip is “Bookmarks (*)”
• The tabs shortcut used the tab icon with the Teal 70 color.
  • Its displayed as “Tabs” in the address bar.
  • The typed alias is “%”
  • The tooltip is “Tabs (%)”
• The history shortcut uses the history icon with the Grey 90 color.
  • Its displayed as “History" in the address bar.
  • The typed alias is “^”
  • The tooltip is “History (^)”

Search and bookmark keywords now use the search shortcut styling. If you are typing them in the address bar, this happens once you add a space allowing Firefox to identify it.

• Typed keywords and aliases only work at the beginning of a query.
• A user-set keyword accessed from the search panel can work, like a shortcut, before or after a query has been typed.

The search engine is displayed in Blue 60, using the same system font as size as other text in the address bar. The containing box has 8px padding on all sides. It’s fill is #D6EBFF and the border uses Blue 60.

The close button is shown on hover. The icon is displayed in Gray 90 at 60%. The background is white and has a Shadow 10 on the left side.

In dark mode, the close button is Gray 10 at 60% and the background uses

When you are in search mode and click out of the address bar, we use a lighter version of the search engine indicator. There’s no box, outline, or color. It’s meant to move into the background like the rest of the address bar.

When we auto-complete a built-in search engine, let’s offer a search shortcut in the second postion. This way, you can use tab or the down arrow to lock in the shortcut in the same way you can if you have one in your top sites.