components.md (8098B)
layout: page title: Components permalink: /components/
Browser
Core components
Every browser will need two core components:
- [browser-state](https://github.com/mozilla-mobile/firefox-android/tree/main/android-components/components/browser/state) - Representing the state of the browser ("What tabs are opened?", "What URLs are they pointing to?")
- browser-engine - The browser engine that transforms web pages into an interactive visual representation. The browser-engine component comes in multiple flavors. We are supporting Android's WebView (limited feature set) and GeckoView (Release, Beta and Nightly channels) currently. The actual implementation is hidden behind generic interfaces so that apps can build against multiple engines (e.g. based on product flavor) and so that other components work seamlessly with all implementations.
Other high-level browser components may depend on those core components.
Building blocks
The following components offer customizable building blocks for browser apps:
- browser-toolbar - A customizable browser toolbar for displaying and editing URLs, actions buttons and menus.
- browser-domains - Localized and customizable domain lists for auto-completion in browsers.
- browser-errorpages - Localized and responsive error pages for mobile browsers.
- browser-search - Localized search plugins and code for loading and parsing them as well as querying search engines for search suggestions.
- browser-tabstray - A customizable tabs tray component for mobile browsers.
- browser-menu - A customizable overflow menu. Can be used with browser-toolbar.
Features
Feature components connect multiple components together and implement complete browser features.
List of feature components in the android-components repository
Apps
Components for Android apps - browsers and other apps.
UI components
Independent, small visual UI elements to use in applications.
- ui-autocomplete - A user interface element for entering and modifying text with the ability to inline autocomplete.
- ui-colors - The standard set of colors used in the Photon Design System for Firefox products.
- ui-fonts - The standard set of fonts used by Mozilla Android products.
- ui-icons - Android vector drawable versions of the icons from the Photon Design System.
- ui-progress - An animated progress bar following the Photon Design System..
- ui-tabcounter - A button that shows the current tab count and can animate state changes.
Services
- service-contile - A library for communicating with the Contile services API.
- service-firefox-accounts - A library for integrating with Firefox Accounts.
- service-fretboard - An Android framework for segmenting users in order to run A/B tests and rollout features gradually.
- service-pocket - A library for communicating with the Pocket API.
- service-glean - A generic library for sending telemetry pings from Android applications to Mozilla's telemetry service.
Samples
- Reference Browser (full-featured browser) - Advanced reference browser implementation based on the browser components.
- Simple Browser - Very basic browser implementation based on the browser components.
- Crash - Sample integration for the lib-crash component.
- DataProtect - An app demoing how to use the Dataprotect component to load and store encrypted data in SharedPreferences.
- Firefox Accounts (FxA) - A simple app demoing Firefox Accounts integration.
- Firefox Sync - A simple app demoing general Firefox Sync integration, with bookmarks and history.
- Firefox Sync - Logins - A simple app demoing Firefox Sync (Logins) integration.
- Glean - An app demoing how to use the Glean library to collect and send telemetry data.
- Toolbar - An app demoing multiple customized toolbars using the browser-toolbar component.