Creating a Simple browser with Mozilla Android Components.
At Mozilla, we have multiple teams that work on different Android browsers like Focus, Firefox for Amazon fire TV, Firefox Amazon’s Echo Show, and Rocket. Those are all are browsers with different use cases but with similar behavior in common, with the goal of sharing functionality across products and rapid iteration creating new browsers the Android Components project was born.
The Android Components is a set of reusable pieces of software that allows you to mix and match different components to create browsers without having to reinvent the wheel every time.
In simple, words Android Components is a set of Lego blocks that you can easily combine together to create browsers. We have a large array of components to cater different needs from UI to bare bone interfaces to allow you to integrate your own implementations for completed flexibility.
Android Components is a project in continuous development, we have many components that are in active development, and many more that are coming. You can know the status of each component, for the prefix-colored circle in front of the name of each component.
For this blog post, we’re going to focus our attention on creating a Simple browser using Android Components. All the source code is available on this GitHub repository, for every step that we achieve there is separated branch, this way you can see the diff between each step.
Imagine that you want to create a new browser and you need a toolbar and a web view to render content, instead of creating everything from scratch and doing the hard work, a wise choice could be to use browser-toolbar, browser-engine-gecko, browser-engine-servo or browser-engine-system components, that have all the behavior that you are going to need pre-baked in.
To have a bit of context, let’s dive in what a web browser does and how we can achieve the same using Components.
What’s a web browser?
A browser is an application that allows us to browse web pages. Every time that you access an URL many things happened behind the scene:
2. After you hit the enter key, this URL goes through a loading process that involves fetching the URL, downloads the associated content normally an HTML file then, this content goes to a web engine who is responsible for interpreting these files (rendering) and giving us back our shiny web page.
Note: The HTML file is the skeleton of our web page, it contains everything that will define how our web page is layout (HTML tags), looks (CSS) and behave (JavaScript).
Let’s see how we can do the same with Android Components.
Let’s get our hands dirty!
The first thing that we’re going to need is a ToolBar where we can type URLs.
1.ToolBar (Source Code).
A toolbar is a UI component that allows us to capture user typing interactions, like handling an URL, showing suggestions or trigger a search.
Also It can be a container for other widgets, that help the user to perform common tasks like navigating back and forward or reloading the actual page.
Luckily for us, the Android Components team has done all the heavy lifting 🏋️♀️ for us, building a component called browser-toolbar that allow us to just include a toolbar widget and customize it to our needs. By the way, all these nice images above are from it!
To include any component first, we need to add the Maven Mozilla URL to our repositories block in the root build.gradle file.
And add the browser-toolbar component dependency:
You can find the latest version of components here.
Note: All the component are segregate by modules, this way you only need to include just what you need 😉.
Now we can add our toolbar ui.
Now our browser has a ToolBar 😍 yay.
🤔 wait a minute, the URL doesn’t load 😅, lets the toolbar does the right thing.
Note: You can find more advanced uses and examples of a toolbar in our Toolbar Sample app.
2. Web Engine (Source Code)
As I mentioned above in a web browser the component that takes cares of taking a URL and renders it into a website is called web engine. There are multiple web engines implementations but at the moment, Android Components offers support for Gecko, Servo, and Blink(Android Web View).
Android Components offers an abstraction layer called concept-engine (API Docs) that is a set of interfaces that allow us to switch between web engine implementations without getting crazy in the process 🤪.
Let’s add concept-engine dependency
Also let’s add a concrete web engine implementation, in this case Gecko 🦎.
Источник
Mozilla Mobile
Pinned Loading
Firefox for Android
Firefox for iOS
Firefox Focus for iOS
Firefox Focus: The privacy browser — Browse like no one’s watching.
A collection of Android libraries to build browsers or browser-like applications.
A full-featured browser reference implementation using Mozilla Android Components.
A fast, secure and easy to use VPN. Built by the makers of Firefox.
22 Updated Dec 5, 2021
Firefox for Android
72 Updated Dec 5, 2021
Firefox Focus: The privacy browser — Browse like no one’s watching.
11 Updated Dec 5, 2021
A full-featured browser reference implementation using Mozilla Android Components.
0 Updated Dec 4, 2021
A collection of Android libraries to build browsers or browser-like applications.
35 Updated Dec 4, 2021
Firefox Focus for iOS
8 Updated Dec 4, 2021
Firefox for iOS
32 Updated Dec 4, 2021
1 Updated Dec 3, 2021
Tools for the performance team that don’t fit into other repositories
3 Updated Dec 1, 2021
Gradle Plugin that tracks the API of an Android library and helps maintain backward compatibility.
0 Updated Nov 30, 2021
People
Top languages
Most used topics
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Источник
Firefox android source code
Firefox for Android
Fenix (internal codename) is the all-new Firefox for Android browser, based on GeckoView and Mozilla Android Components.
Please read the Community Participation Guidelines and the Bugzilla Etiquette guidelines before filing an issue. This is our professional working environment as much as it is our bug tracker, and we want to keep our workspace clean and healthy.
Guide to Contributing (New contributors start here!)
Matrix: #fenix:mozilla.org channel (We’re available Monday-Friday, GMT and PST working hours). Related channels:
Check out the project wiki for more information.
Localization happens on Pontoon. Please get in touch with delphine (at) mozilla (dot) com directly for more information.
Beginners! — Watch out for Issues with the «Good First Issue» label. These are easy bugs that have been left for first timers to have a go, get involved and make a positive contribution to the project!
I want to open a Pull Request!
We encourage you to participate in this open source project. We love Pull Requests, Bug Reports, ideas, (security) code reviews or any other kind of positive contribution.
Since we are a small team, however, we do not have the bandwidth to review unsolicited PRs. Please follow our Pull Request guidelines, or we may close the PR.
To make it easier to review, we have these PR requirements:
- Every PR must have exactly one issue associated with it.
- Write a clear explanation of what the code is doing when opening the pull request, and optionally add comments to the PR.
- Make sure there are tests — or ask for help on how the code should be tested in the Issue!
- Keep PRs small and to the point. For extra code-health changes, either file a separate issue, or make it a separate PR that can be easily reviewed.
- Use micro-commits. This makes it easier and faster to review.
- Add a screenshot for UX changes (this is part of the PR checklist)
As a small team, we have to prioritize our work, and reviewing PRs takes time. We receive lots of PRs every day, so if you can keep your PRs small, it helps our small team review and merge code faster, minimizing stale code.
Keep in mind that the team is very overloaded, so PRs sometimes wait for a very long time. However this is not for lack of interest, but because we find ourselves in a constant need to prioritize certain issues/PRs over others. If you think your issue/PR is very important, try to popularize it by getting other users to comment and share their point of view.
I want to file an issue!
Great! We encourage you to participate in this open source project. We love Pull Requests, Bug Reports, ideas, (security) code reviews or any other kind of positive contribution.
To make it easier to triage, we have these issue requirements:
- Please do your best to search for duplicate issues before filing a new issue so we can keep our issue board clean.
- Every issue should have exactly one bug/feature request described in it. Please do not file meta feedback list tickets as it is difficult to parse them and address their individual points.
- Feature Requests are better when they’re open-ended instead of demanding a specific solution -ie “I want an easier way to do X” instead of “add Y”
- Issues are not the place to go off topic or debate. If you have questions, please join the #fenix:mozilla.org channel.
- Please always remember our Community Participation Guidelines
- Please do not tag specific team members to try to get your issue looked at faster. We have a triage process that will tag and label issues correctly in due time. If you think an issue is very severe, you can ask about it in Matrix.
Please keep in mind that even though a feature you have in mind may seem like a small ask, as a small team, we have to prioritize our planned work and every new feature adds complexity and maintenance and may take up design, research, marketing, product, and engineering time. We appreciate everyone’s passion but we will not be able to incorporate every feature request or even fix every bug. That being said, just because we haven’t replied, doesn’t mean we don’t care about the issue, please be patient with our response times as we’re very busy.
- Android SDK
- To run command line tools, you’ll need to configure Java: see our how-to guide.
- Clone or Download the repository:
- Import the project into Android Studio or build on the command line:
If this errors out, make sure that you have an ANDROID_SDK_ROOT environment variable pointing to the right path.
Make sure to select the correct build variant in Android Studio. See the next section.
Make sure to select «Default APK» under Installation Options inside Run/Debug configuration: see this bug.
For general development, we recommend the debug build variant. Here’s an explanation of each variant:
- debug: the default for developers, similar to most other Android apps. It is debuggable, uses a Nightly GeckoView with debug symbols, adds tools like LeakCanary for troublingshooting, and does not strip unused code.
- nightly: what we ship to the Firefox Nightly channel, using GeckoView Nightly.
- beta: what we ship to the Firefox Beta channel, using GeckoView Beta. It is more stable than nightly.
- release: what we ship as Firefox for Android, using GeckoView Release. It is the most stable.
nightly, beta, and release are unsigned and debuggable=false by default. If you want these variants to be:
Performance Build Variants
For accurate performance measurements, read this section!
To analyze performance during local development build a production variant locally (this could either be the Nightly, beta or release). Otherwise, you could also grab a pre-existing APK if you don’t need to test some local changes. Then, use the Firefox profiler to profile what you need!
For more information on how to use the profiler or how to use the build, refer to this how to measure performance with the build
If you want to run performance tests/benchmarks in automation or locally use a production build since it is much closer in behavior compared to what users see in the wild.
Before you can install any release builds, You will need to sign production build variants: see Automatically signing release builds for details.
Known disabled-by-default features
Some features are disabled by default when Fenix is built locally. This can be problematic at times for checking performance since you might want to know how your code behaves with those features. The known features that are disabled by default are:
- Sentry
- Adjust
- Mozilla Location Services (also known as MLS)
- Firebase Push Services
- Telemetry (only disabled by default in debug builds)
- Nimbus
To reduce review turn-around time, we’d like all pushes to run tests locally. We’d recommend you use our provided pre-push hook in config/pre-push-recommended.sh . Using this hook will guarantee your hook gets updated as the repository changes. This hook tries to run as much as possible without taking too much time.
Before you can run the hook, you’ll need to configure Java properly because it relies on command line tools: see our how-to guide.
To add it on Mac/Linux, run this command from the project root:
or for Windows run this command using the Command Prompt with administrative privileges:
or using PowerShell:
To push without running the pre-push hook (e.g. doc updates):
Note: If while pushing you encounter this error «Could not initialize class org.codehaus.groovy.runtime.InvokerHelper» and are currently on Java14 then downgrading your Java version to Java13 or lower can resolve the issue
Steps to downgrade Java Version on Mac with Brew:
- Install Homebrew (https://brew.sh/)
- run brew update
- To uninstall your current java version, run sudo rm -fr /Library/Java/JavaVirtualMachines/
- run brew tap homebrew/cask-versions
- run brew search java
- If you see java11, then run brew install java11
- Verify java-version by running java -version
You can speed up local development by setting a few helper flags available in local.properties . Some flags will make it easy to work across multiple layers of the dependency stack — specifically, with android-components, geckoview or application-services.
Automatically sign release builds
To sign your release builds with your debug key automatically, add the following to
With this line, release build variants will automatically be signed with your debug key (like debug builds), allowing them to be built and installed directly through Android Studio or the command line.
This is helpful when you’re building release variants frequently, for example to test feature flags and or do performance analyses.
Building debuggable release variants
Nightly, Beta and Release variants are getting published to Google Play and therefore are not debuggable. To locally create debuggable builds of those variants, add the following to
Setting raptor manifest flag
To set the raptor manifest flag in Nightly, Beta and Release variants, add the following to
Auto-publication workflow for android-components and application-services
If you’re making changes to these projects and want to test them in Fenix, auto-publication workflow is the fastest, most reliable way to do that.
In local.properties , specify a relative path to your local android-components and/or application-services checkouts. E.g.:
Once these flags are set, your Fenix builds will include any local modifications present in these projects.
In order to build successfully, you need to check out a commit in the dependency repository that has no breaking changes. The two best ways to do this are:
Using Nimbus servers during local development
If you’re working with the Nimbus experiments platform, by default for local development Fenix configures Nimbus to not use a server.
If you wish to use a Nimbus server during local development, you can add a https:// or file:// endpoint to the local.properties file.
Testing experimental branches should be possible without a server.
Specify a relative path to your local mozilla-central checkout via dependencySubstitutions.geckoviewTopsrcdir , and optional a path to m-c object directory via dependencySubstitutions.geckoviewTopobjdir .
If these are configured, local builds of GeckoView will be used instead of what’s configured in Dependencies.kt. For more details, see https://firefox-source-docs.mozilla.org/mobile/android/geckoview/contributor/geckoview-quick-start.html#include-geckoview-as-a-dependency
See notes on building successfully in the android-components auto-publication section.
Источник