Address Bar

This document describes the implementation of Firefox’s address bar, also known as the quantumbar or urlbar. The address bar was also called the awesomebar until Firefox 68, when it was substantially rewritten.

The address bar is a specialized search access point that aggregates data from several different sources, including:

• Places (Firefox’s history and bookmarks system)

• Search engines (including search suggestions)

• WebExtensions

• Open tabs

Most of the address bar code lives in browser/components/urlbar. A separate and important back-end piece currently is toolkit/components/places/UnifiedComplete.jsm, which was carried over from awesomebar and has not yet been rewritten for quantumbar.

• Architecture Overview
  • The UrlbarQueryContext
  • The Model
    • UrlbarProvider
    • UrlbarMuxer
  • The Controller
  • The View
    • UrlbarInput.jsm
    • UrlbarView.jsm
  • UrlbarResult
• Utilities
  • UrlbarPrefs.jsm
  • UrlbarUtils.jsm
• Telemetry
  • Histograms
  • Scalars
  • Event Telemetry
  • Custom pings for Contextual Services
  • Other telemetry relevant to the Address Bar
  • Obsolete probes
    • Obsolete histograms
• Debugging & Logging
• Extensions & Experiments
  • WebExtensions
  • Developing Address Bar Extensions
    • Overview
    • browser.urlbar
    • browser.experiments.urlbar
    • Workflow
    • Automated Tests
    • Cookbook
    • Further Reading
  • Developing Address Bar Extension APIs
    • Built-In APIs vs. Experimental APIs
    • Adding New APIs
    • Anatomy of an API
    • Further Reading
  • Running Address Bar Extensions
  • Experiments
    • Further Reading
  • The Experiment Development Process
  • Implementing Experiments
    • Setup
    • browser.normandyAddonStudy
    • Telemetry
    • Engineering Best Practices
• Dynamic Result Types
  • Motivation
  • Dynamic Result Types
  • Getting Started
  • Implementation Steps
    • 1. Register the dynamic result type
    • 2. Register the view template
    • 3. Add the provider
    • 4. Implement the provider’s getViewUpdate method
    • 5. Style the results
      • dynamicType Row Attribute
      • Child Element Class
  • View Templates
    • Properties
    • Example
  • View Update Objects
    • Properties
    • Example
  • Accessibility
    • Example
  • Mimicking Built-in Address Bar Results
    • URL Navigation
    • Text Highlighting
  • Appendix A: Examples
  • Appendix B: Using the WebExtensions API Directly
    • 1. Register the dynamic result type
    • 2. Register the view template
    • 3. Add WebExtension event listeners
    • 4. Add an onViewUpdateRequested event listener
    • 5. Style the results
• Getting in Touch