mobile/android/docs/components.md

   1 ---
   2 layout: page
   3 title: Components
   4 permalink: /components/
   5 ---
   6
   7 ## Browser
   8
   9 ### Core components
  10
  11 Every browser will need two core components:
  12
  13 * **[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?"_)
  14 * **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](https://github.com/mozilla-mobile/firefox-android/tree/main/android-components/components/browser/engine-system) (limited feature set) and **GeckoView** ([Release](https://github.com/mozilla-mobile/firefox-android/tree/main/android-components/components/browser/engine-gecko), [Beta](https://github.com/mozilla-mobile/firefox-android/tree/main/android-components/components/browser/engine-gecko-beta) and [Nightly](https://github.com/mozilla-mobile/firefox-android/tree/main/android-components/components/browser/engine-gecko-nightly) channels) currently. The actual implementation is hidden behind [generic interfaces](https://github.com/mozilla-mobile/firefox-android/tree/main/android-components/components/concept) so that apps can build against multiple engines (e.g. based on product flavor) and so that other components work seamlessly with all implementations.
  15
  16 Other high-level browser components may depend on those core components.
  17
  18 ### Building blocks
  19
  20 The following components offer customizable building blocks for browser apps:
  21
  22 * [browser-toolbar](https://github.com/mozilla-mobile/firefox-android/tree/main/android-components/components/browser/toolbar) - A customizable browser toolbar for displaying and editing URLs, actions buttons and menus.
  23 * [browser-domains](https://github.com/mozilla-mobile/firefox-android/tree/main/android-components/components/browser/domains) - Localized and customizable domain lists for auto-completion in browsers.
  24 * [browser-errorpages](https://github.com/mozilla-mobile/firefox-android/tree/main/android-components/components/browser/errorpages) - Localized and responsive error pages for mobile browsers.
  25 * [browser-search](https://github.com/mozilla-mobile/firefox-android/tree/main/android-components/components/browser/search) - Localized search plugins and code for loading and parsing them as well as querying search engines for search suggestions.
  26 * [browser-tabstray](https://github.com/mozilla-mobile/firefox-android/tree/main/android-components/components/browser/tabstray) - A customizable tabs tray component for mobile browsers.
  27 * [browser-menu](https://github.com/mozilla-mobile/firefox-android/tree/main/android-components/components/browser/menu) - A customizable overflow menu. Can be used with _browser-toolbar_.
  28
  29 ### Features
  30
  31 Feature components connect multiple components together and implement complete browser features.
  32
  33 [List of feature components in the android-components repository](https://github.com/mozilla-mobile/firefox-android/tree/main/android-components/components/feature)
  34
  35 ## Apps
  36
  37 Components for Android apps - browsers and other apps.
  38
  39 ### UI components
  40
  41 Independent, small visual UI elements to use in applications.
  42
  43 * [ui-autocomplete](https://github.com/mozilla-mobile/firefox-android/tree/main/android-components/components/ui/autocomplete) - A user interface element for entering and modifying text with the ability to inline autocomplete.
  44 * [ui-colors](https://github.com/mozilla-mobile/firefox-android/tree/main/android-components/components/ui/colors) - The standard set of [colors](https://design.firefox.com/photon/visuals/color.html) used in the [Photon Design System](https://design.firefox.com/photon/) for Firefox products.
  45 * [ui-fonts](https://github.com/mozilla-mobile/firefox-android/tree/main/android-components/components/ui/fonts) - The standard set of fonts used by Mozilla Android products.
  46 * [ui-icons](https://github.com/mozilla-mobile/firefox-android/tree/main/android-components/components/ui/icons) - Android vector drawable versions of the [icons](https://design.firefox.com/icons/viewer/) from the [Photon Design System](https://design.firefox.com/photon/).
  47 * [ui-progress](https://github.com/mozilla-mobile/firefox-android/tree/main/android-components/components/ui/progress) - An animated progress bar following the [Photon Design System](https://design.firefox.com/photon/)..
  48 * [ui-tabcounter](https://github.com/mozilla-mobile/firefox-android/tree/main/android-components/components/ui/tabcounter) - A button that shows the current tab count and can animate state changes.
  49
  50 ### Services
  51
  52 * [service-contile](https://github.com/mozilla-mobile/firefox-android/tree/main/android-components/components/service/contile) - A library for communicating with the Contile services API.
  53 * [service-firefox-accounts](https://github.com/mozilla-mobile/firefox-android/tree/main/android-components/components/service/firefox-accounts) - A library for integrating with [Firefox Accounts](https://mozilla.github.io/application-services/docs/accounts/welcome.html).
  54 * [service-fretboard](https://github.com/mozilla-mobile/firefox-android/tree/main/android-components/components/service/fretboard) - An Android framework for segmenting users in order to run A/B tests and rollout features gradually.
  55 * [service-pocket](https://github.com/mozilla-mobile/firefox-android/tree/main/android-components/components/service/pocket) - A library for communicating with the Pocket API.
  56 * [service-glean](https://github.com/mozilla-mobile/firefox-android/tree/main/android-components/components/service/glean) - A generic library for sending telemetry pings from Android applications to Mozilla's telemetry service.
  57
  58 ## Samples
  59
  60 * [Reference Browser (full-featured browser)](https://github.com/mozilla-mobile/reference-browser) - Advanced reference browser implementation based on the browser components.
  61 * [Simple Browser](https://github.com/mozilla-mobile/firefox-android/blob/main/android-components/samples/browser) - Very basic browser implementation based on the browser components.
  62 * [Crash](https://github.com/mozilla-mobile/firefox-android/blob/main/android-components/samples/crash) - Sample integration for the [lib-crash](https://github.com/mozilla-mobile/firefox-android/blob/main/android-components/components/lib/crash/README.md) component.
  63 * [DataProtect](https://github.com/mozilla-mobile/firefox-android/blob/main/android-components/samples/dataprotect) - An app demoing how to use the [Dataprotect](https://github.com/mozilla-mobile/firefox-android/blob/main/android-components/components/lib/dataprotect/README.md) component to load and store encrypted data in SharedPreferences.
  64 * [Firefox Accounts (FxA)](https://github.com/mozilla-mobile/firefox-android/blob/main/android-components/samples/firefox-accounts) - A simple app demoing Firefox Accounts integration.
  65 * [Firefox Sync](https://github.com/mozilla-mobile/firefox-android/blob/main/android-components/samples/sync) - A simple app demoing general Firefox Sync integration, with bookmarks and history.
  66 * [Firefox Sync - Logins](https://github.com/mozilla-mobile/firefox-android/blob/main/android-components/samples/sync-logins) - A simple app demoing Firefox Sync (Logins) integration.
  67 * [Glean](https://github.com/mozilla-mobile/firefox-android/blob/main/android-components/samples/glean) - An app demoing how to use the [Glean](https://github.com/mozilla-mobile/firefox-android/blob/main/android-components/components/service/glean/README.md) library to collect and send telemetry data.
  68 * [Toolbar](https://github.com/mozilla-mobile/firefox-android/blob/main/android-components/samples/toolbar) - An app demoing multiple customized toolbars using the [browser-toolbar](https://github.com/mozilla-mobile/firefox-android/blob/main/android-components/components/browser/toolbar/README.md) component.
  69
  70 ## More
  71
  72 [List of all components in the android-components repository](https://github.com/mozilla-mobile/firefox-android/blob/main/README.md)