mirror of
https://github.com/zen-browser/surfer.git
synced 2025-07-08 09:20:01 +02:00
🔀 Merge main into reduce-packages
I regret not rebasing
This commit is contained in:
TrickyPR
commit
a2cfce72d5
39 changed files with 883 additions and 314 deletions
26
README.md
26
README.md
|
|
@ -1,7 +1,7 @@
|
|||
<div align="center">
|
||||
|
||||
<p align="center">
|
||||
<img width="98" src="https://twemoji.maxcdn.com/v/13.0.1/svg/1f4e6.svg"/>
|
||||
<img width="98" src="https://raw.githubusercontent.com/microsoft/fluentui-emoji/main/assets/Package/3D/package_3d.png"/>
|
||||
</p>
|
||||
|
||||
# Gluon
|
||||
|
|
@ -34,7 +34,7 @@ yarn global add gluon-build
|
|||
|
||||
## Documentation
|
||||
|
||||
Documentation is available on [Github pages](https://lepton-browser.github.io/build/) or in the docs folder of this repository.
|
||||
Documentation is available on [docs.gluon.dev](https://docs.gluon.dev) or in the docs folder of this repository.
|
||||
|
||||
## Licencing notes
|
||||
|
||||
|
|
@ -52,10 +52,22 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|||
|
||||
This program downloads and modifies Firefox. [Follow their license](https://hg.mozilla.org/mozilla-central/file/tip/LICENSE) when distributing your program.
|
||||
|
||||
### Tweemoji
|
||||
### Logo
|
||||
|
||||
The package icon is from tweemoji.
|
||||
The package icon is from [Microsoft's Fluent Emoji](https://github.com/microsoft/fluentui-emoji). There is an [ongoing conversation](https://github.com/microsoft/fluentui-emoji/issues/18) regarding the license.
|
||||
|
||||
Copyright 2020 Twitter, Inc and other contributors
|
||||
Code licensed under the MIT License: http://opensource.org/licenses/MIT
|
||||
Graphics licensed under CC-BY 4.0: https://creativecommons.org/licenses/by/4.0/
|
||||
```
|
||||
MIT License
|
||||
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
```
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ build_search_index = true
|
|||
highlight_code = true
|
||||
|
||||
[extra]
|
||||
logo = "https://twemoji.maxcdn.com/v/13.0.1/svg/1f4e6.svg"
|
||||
logo = "https://raw.githubusercontent.com/microsoft/fluentui-emoji/main/assets/Package/3D/package_3d.png"
|
||||
release = "https://api.github.com/repos/pulse-browser/gluon/releases/latest"
|
||||
|
||||
[author]
|
||||
|
|
|
|||
150
docs/content/getting-started/fileStructure.md
Normal file
150
docs/content/getting-started/fileStructure.md
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
+++
|
||||
title = "Understanding the file structure"
|
||||
weight = 10
|
||||
+++
|
||||
|
||||
# Understanding the file structure
|
||||
|
||||
Lets take a look at the file structure of your project. It should look something like this:
|
||||
|
||||
```filesystem
|
||||
├─ .gitignore
|
||||
├─ gluon.json
|
||||
├─ configs
|
||||
│ ├─ common
|
||||
│ │ └─ mozconfig
|
||||
│ ├─ linux
|
||||
│ │ └─ mozconfig
|
||||
│ ├─ macos
|
||||
│ │ └─ mozconfig
|
||||
│ └─ windows
|
||||
│ └─ mozconfig
|
||||
├─ src
|
||||
│ ├─ README.md
|
||||
│ └─ browser
|
||||
│ └─ themes
|
||||
│ ├─ custom
|
||||
│ │ ├─ linux
|
||||
│ │ │ └─ linux.inc.css
|
||||
│ │ ├─ macos
|
||||
│ │ │ └─ macos.inc.css
|
||||
│ │ ├─ shared
|
||||
│ │ │ └─ shared.inc.css
|
||||
│ │ └─ windows
|
||||
│ │ └─ windows.inc.css
|
||||
│ ├─ linux
|
||||
│ │ ├─ browser-css.patch
|
||||
│ │ └─ jar-mn.patch
|
||||
│ ├─ osx
|
||||
│ │ ├─ browser-css.patch
|
||||
│ │ └─ jar-mn.patch
|
||||
│ ├─ shared
|
||||
│ │ ├─ browser-shared-css.patch
|
||||
│ │ └─ jar-inc-mn.patch
|
||||
│ └─ windows
|
||||
│ ├─ browser-css.patch
|
||||
│ └─ jar-mn.patch
|
||||
├─ .gluon
|
||||
│ └─ ...
|
||||
└─ engine
|
||||
└─ ...
|
||||
```
|
||||
|
||||
Whilst this may seem large (especially if you look inside of the `engine`) directory, it is all fairly manageable.
|
||||
|
||||
## gluon.json
|
||||
|
||||
The primary configuration file for your project is the `gluon.json` file. This is where you will put information about your browser so Gluon can build it correctly. It should look something like this:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "Gluon Example Browser",
|
||||
"vendor": "Fushra",
|
||||
"appId": "dev.gluon.example",
|
||||
"binaryName": "gluon-example-browser",
|
||||
|
||||
"version": {
|
||||
"product": "firefox",
|
||||
"version": "102.0.1"
|
||||
},
|
||||
|
||||
"buildOptions": {
|
||||
"windowsUseSymbolicLinks": false
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Up the top of the config file, we have general information about the browser you are building. This includes its name, the vendor creating it, its appId, and the name of the binary that will be output.
|
||||
|
||||
The `version` key is used to specify information about the product you are building. `product` is the Firefox branch you are building against. `version` is the version of Firefox you are building against, which will vary with the branch. Here `firefox` refers to the stable branch of Firefox.
|
||||
|
||||
`buildOptions` provides a number of internal toggles for how Gluon builds your project.
|
||||
|
||||
## Configs
|
||||
|
||||
The configs folder stores a combination of config files that are required by Firefox and assets required by Gluon. By default there are only [`mozconfig` files](https://firefox-source-docs.mozilla.org/build/buildsystem/mozconfigs.html), Gluon should generate most parts of this config for you. The only part that you will need to change is the source control repo:
|
||||
|
||||
```bash
|
||||
ac_add_options --with-app-name=${binName}
|
||||
export MOZ_USER_DIR="${name}"
|
||||
export MOZ_APP_VENDOR="${vendor}"
|
||||
export MOZ_APP_BASENAME=${binName}
|
||||
export MOZ_APP_PROFILE=${binName}
|
||||
export MOZ_APP_DISPLAYNAME="${name}"
|
||||
export MOZ_MACBUNDLE_ID=${appId}
|
||||
export MOZ_DISTRIBUTION_ID=${appId}
|
||||
|
||||
# Uncomment if builds are too resource hungry
|
||||
# mk_add_options MOZ_MAKE_FLAGS="-j4"
|
||||
# ac_add_options --enable-linker=gold
|
||||
|
||||
# Misc
|
||||
export MOZ_STUB_INSTALLER=1
|
||||
export MOZ_INCLUDE_SOURCE_INFO=1
|
||||
export MOZ_SOURCE_REPO=https://github.com/dothq/browser-desktop # <-- Change this!
|
||||
export MOZ_SOURCE_CHANGESET=${changeset}
|
||||
```
|
||||
|
||||
This directory is also where you would put [branding assets for your browser](/guides/branding)
|
||||
|
||||
## src/
|
||||
|
||||
The source folder contains all of the modifications that you have made to Firefox. These come in two types, inserted files (and folders) and patches. Both of these are applied using the `gluon import` command.
|
||||
|
||||
Inserted files are just files (and folders) that you have inserted into the Firefox source code. These will overwrite existing files if they already exist. On Linux and MacOS, these are symlinked so when you change a file in `src/`, the change will be mirrored in Firefox's source code instantly. On Windows, you will need to run `gluon import` for these changes to apply.
|
||||
|
||||
Patches are changes to Firefox's files. As a rule of thumb, you should prefer splitting new content into a new file rather than using patches, but there are times when you must modify Firefox's source code. Each of these patch files are just git patch files:
|
||||
|
||||
```patch
|
||||
diff --git a/browser/themes/linux/jar.mn b/browser/themes/linux/jar.mn
|
||||
index 404a88b218c652afac0cb2004676d22da53d48f3..5a4668ef2970dd773536907f51f3e7e7e3e023cb 100644
|
||||
--- a/browser/themes/linux/jar.mn
|
||||
+++ b/browser/themes/linux/jar.mn
|
||||
@@ -6,7 +6,7 @@ browser.jar:
|
||||
% skin browser classic/1.0 %skin/classic/browser/
|
||||
#include ../shared/jar.inc.mn
|
||||
skin/classic/browser/sanitizeDialog.css
|
||||
- skin/classic/browser/browser.css
|
||||
+* skin/classic/browser/browser.css
|
||||
skin/classic/browser/contextmenu.css (../shared/contextmenu.css)
|
||||
skin/classic/browser/monitor-base.png
|
||||
skin/classic/browser/monitor-border.png
|
||||
```
|
||||
|
||||
In this patch, you can see that I am adding a `*` to the start of a line. You generate these patches by modifying the file in the `engine/` directory and running `gluon export` to export your changes to the src directory. Be careful, if you do not export your changes, they will not be saved and will not work on other developer's computers or yours after an update!
|
||||
|
||||
```sh
|
||||
gluon export browser/themes/linux/jar.mn
|
||||
```
|
||||
|
||||
## engine/
|
||||
|
||||
The engine directory contains all of Firefox's source code. It is massive - around 15GB in size (around 11GB of that are build assets from when you run `gluon build`). I am not able to provide a full explanation of the contents of the directory.
|
||||
|
||||
However, most of the changes you will want to make will be in `engine/browser/`, which contains the source code for the browser's UI. Here are some of the important directories inside of the `engine/browser/` directory:
|
||||
|
||||
- [`engine/browser/base/content`](https://searchfox.org/mozilla-central/source/browser/base/content): These contain the xhtml files that make up a majority of the browser's ui
|
||||
- [`engine/browser/components`](https://searchfox.org/mozilla-central/source/browser/components): This contains some self-contained UI features, like screenshots, uitours, downloads, etc.
|
||||
- [`engine/browser/themes`](https://searchfox.org/mozilla-central/source/browser/themes): Here lies most of the browsers CSS. See [Customizing Your Browser's UI](/getting-started/userchrome) for more information.
|
||||
|
||||
One of the best ways to find what you are looking for and get to know the code base is by searching it. However, if you try and search through it on your computer you are in for a world of pain. Instead, I recommend you use [SearchFox](https://searchfox.org), which is significantly faster.
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
+++
|
||||
title = "Overview"
|
||||
title = "Setting up your project"
|
||||
weight = 5
|
||||
+++
|
||||
|
||||
|
|
@ -31,26 +31,62 @@ yarn global add gluon-build@next
|
|||
# Note: Linux and mac users may have to run the above command with sudo
|
||||
```
|
||||
|
||||
Now create a git repo and clone it to your local machine. Then run `gluon setup-project` inside of that repo. This will ask you a variety of questions in relation to your project setup. Firstly, the release of the browser you want to bind to.
|
||||
Now create a git repo and clone it to your local machine. Then run the following:
|
||||
|
||||
- `Firefox nightly`: Updates every 12 hours, making it almost impossible to keep up to date **(not recommended)**
|
||||
- `Firefox beta`: Updates every 4 weeks. It will have unresolved bugs **(not recommended)**
|
||||
- `Firefox developer edition`: Tracks firefox beta **(not recommended)**
|
||||
- `Firefox stable`: Releases around every 4 weeks, however has most of the bugs from beta fixed
|
||||
- `Firefox extended support release (newer)`: The latest extended support release. Releases around once every 8 stable cycles (mozilla isn't clear on this). Receives regular small security patches and bug fixes, but no large breaking changes (e.g. [proton](https://www.omgubuntu.co.uk/2021/02/try-firefox-proton-redesign-ubuntu)) between releases.
|
||||
- `Firefox extended support release (newer)`: The oldest supported extended support release. Maximum security and stability, but will lose support sooner than the newer extended support release.
|
||||
```sh
|
||||
gluon setup-project
|
||||
```
|
||||
|
||||
Pulse Browser currently uses the stable releases, and keeping up to date can be a struggle with a small development team.
|
||||
This will ask you a variety of questions in relation to your project setup. Firstly, the release of the browser you want to bind to.
|
||||
|
||||
Then next is the version of the browser you want to use. By default melon will populate this with the latest version available, which we recommend using.
|
||||
```
|
||||
? Select a product to fork › - Use arrow-keys. Return to submit.
|
||||
❯ Firefox stable
|
||||
Firefox extended support (older)
|
||||
Firefox extended support (newer)
|
||||
Firefox developer edition (Not recommended)
|
||||
Firefox beta (Not recommended)
|
||||
```
|
||||
|
||||
Next it will ask for the name of your browser. Avoid references to Firefox or other Mozilla brands if you can.
|
||||
You can change what version you are bound to at any time. Pulse Browser currently uses the stable releases, but if you want a lower workload, the newer Extended Support releases might be good for you.
|
||||
|
||||
Then next is the version of the browser you want to use. By default melon will populate this with the latest version available, which we recommend using. Simply click enter to accept.
|
||||
|
||||
```
|
||||
? Enter the version of this product › 102.0.1
|
||||
```
|
||||
|
||||
Next it will ask for the name of your browser. Avoid references to Firefox or other Mozilla brands, as this is likely to lead to trademark and copyright issues down the road.
|
||||
|
||||
```
|
||||
? Enter a product name › Gluon Example Browser
|
||||
```
|
||||
|
||||
The binary name is the name that your program will be run from. We recommend that you add `-browser` to the end to [avoid conflicts with common utilities](https://github.com/dothq/browser/issues/604).
|
||||
|
||||
```
|
||||
? Enter the name of the binary › gluon-example-browser
|
||||
```
|
||||
|
||||
Vendor is the company (or solo developer) who is creating the browser.
|
||||
|
||||
```
|
||||
? Enter a vendor › Fushra
|
||||
```
|
||||
|
||||
The appid follows reverse dns naming conventions. For example, Fushra owns the domain `fushra.com`, so our browser is `com.fushra.browser.desktop`. If you do not have a domain, you can use your username / psudomim as the appid, e.g. `trickypr.watermelon`.
|
||||
|
||||
Next you need to chose a starting template for your browser. You can go with userchrome, where you apply css changes to firefox or custom html, where you have to write everything (tabs, navigation, search boxes) yourself. We generally recommend userchrome for new users, as it has the lowest learning curve. Additionally, you can chose to use no template.
|
||||
```
|
||||
? Enter an appid › dev.gluon.example
|
||||
```
|
||||
|
||||
Next you need to chose a starting template for your browser. If you know what you are doing, you can go with `None` and configure it how you like. Otherwise, we recommend you stick with `UserChrome`.
|
||||
|
||||
```
|
||||
? Select a ui mode template › - Use arrow-keys. Return to submit.
|
||||
None
|
||||
❯ User Chrome (custom browser css, simplest)
|
||||
```
|
||||
|
||||
Now you have created the directory structure for your project, you can build it for the first time. First, ask melon to download the firefox source.
|
||||
|
||||
|
|
@ -81,3 +117,34 @@ Now you can finally start the browser!
|
|||
```sh
|
||||
gluon run
|
||||
```
|
||||
|
||||
## Common errors
|
||||
|
||||
Here are some common errors that you might run into whilst running `gluon build` and some potential fixes.
|
||||
|
||||
### Anything to do with `wasm-ld`
|
||||
|
||||
On Arch linux, there were two errors that were thrown:
|
||||
|
||||
```
|
||||
Executable "wasm-ld" doesn't exist!
|
||||
wasm-ld: error: cannot open /usr/lib/clang/{CLANG_VERSION}/lib/wasi/libclang_rt.builtins-wasm32.a: No such file or directory
|
||||
```
|
||||
|
||||
On Linux, I fixed the first error by installing `ldd`:
|
||||
|
||||
```sh
|
||||
apt-get install lld-7 # Debian
|
||||
apt-get install lld-8 # Ubuntu
|
||||
apk add lld # Alpine
|
||||
pacman -S lld # Arch
|
||||
dnf install lld # Fedora
|
||||
```
|
||||
|
||||
The second error was fixed by installing the associated wasm libraries:
|
||||
|
||||
```sh
|
||||
sudo pacman -Syu wasi-libc wasi-libc++ wasi-compiler-rt
|
||||
```
|
||||
|
||||
You will need to port the above command to your distrobution. If you do not care about the improved security of sandboxed libraries, you can simply disable them by adding the following to ``
|
||||
|
|
|
|||
|
|
@ -1,73 +1,22 @@
|
|||
+++
|
||||
title = "Userchrome"
|
||||
title = "Customizing Your Browser's UI"
|
||||
weight = 15
|
||||
+++
|
||||
|
||||
This page will explain the process for applying custom css (or userchrome) to your new browser. I expect you to have already setup gluon as described in the overview and have something that looks like the following on your screen.
|
||||
# Customizing Your Browser's UI
|
||||
|
||||
|
||||
If you have already setup your project, you should have a working version of firefox that you built yourself:
|
||||
|
||||
The firefox window shown above is constructed from (x)html, styled with css and made dynamic with javascript. This means that the entire browser can be styled with custom css, called userchrome.
|
||||
|
||||
|
||||
If you selected the userchrome option when setting up the project, gluon will have already created the theme files for you. `src/browser/themes/custom/shared/shared.inc.css` will be included on all platforms, whilst platform specific styles will be included from similar files in `src/browser/themes/custom`.
|
||||
Just like Electron apps, the entire Firefox ui is an (x)html page that is styled with css. This makes the process of giving our browser an identity very easy.
|
||||
|
||||
Additionally, firefox has an equivalent to "inspect element", but for the browser. Click on the hamburger menu, select "More tools", then "Browser toolbox" to open it.
|
||||
Because it is just web technologies, we can use debugging tools (like inspect element) to understand what changes we want to make to the browser. You can open these debugging tools by pressing the keyboard shortcut `CTRL + ALT + SHIFT + I` (`CMD + OPTION + SHIFT + I` on MacOS).
|
||||
|
||||
|
||||
|
||||
|
||||
## A touch of design
|
||||
Because this is a more visual process, the rest of this tutorial is going to be in this video:
|
||||
|
||||
This tutorial will attempt to replicate the design of [SimpleFox by Miguel R. Ávila](https://github.com/migueravila/SimpleFox), without copying its code. I would recommend creating your own visual identity for your browser.
|
||||
<iframe id="youtube" src="https://www.youtube-nocookie.com/embed/HVwgh4FPU5A" title="YouTube video player" frameborder="0" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture" allowfullscreen></iframe>
|
||||
|
||||
## Squaring the tabs
|
||||
|
||||
Firefox's proton made the tabs hover, with mixed reception. Let's reverse that.
|
||||
|
||||
Using the select tool (top left of the browser toolbox) select the active tab and look for what element provides the background. In this case it is the `.tab-background` element.
|
||||
|
||||
You can scroll down to find the code where the border radius is set. In firefox 91, this is:
|
||||
|
||||
```css
|
||||
.tab-background {
|
||||
border-radius: var(--tab-border-radius);
|
||||
margin-block: var(--tab-block-margin);
|
||||
}
|
||||
```
|
||||
|
||||
Firefox uses css variables for a lot of its properties, meaning we can make the tabs square by setting the border radius to 0. Here, the margin, which makes the tabs "float is set", so setting it to zero will cause them to stop floating. This can be done by adding the following line to `src/browser/themes/custom/shared/shared.inc.css`:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--tab-border-radius: 0 !important;
|
||||
--tab-block-margin: 0 !important;
|
||||
}
|
||||
```
|
||||
|
||||
Rebuilding the browser, the tabs are now slightly closer to how we want them.
|
||||
|
||||
|
||||
|
||||
There is this weird padding to the left of the active tab. This is caused by the following css:
|
||||
|
||||
```css
|
||||
.tabbrowser-tab {
|
||||
min-height: var(--tab-min-height);
|
||||
padding-inline: 2px !important;
|
||||
}
|
||||
```
|
||||
|
||||
As mozilla are using `!important` here, we have to use [css priority](https://marksheet.io/css-priority.html) to override it, rather than simply creating our own style with `!important`.
|
||||
|
||||
```css
|
||||
#tabbrowser-arrowscrollbox .tabbrowser-tab {
|
||||
padding-inline: 0 !important;
|
||||
}
|
||||
```
|
||||
|
||||
Now, I want to remove the "Nightly" pill in the search bar, along with the background of it. Using the browser toolbox, we can figure out that we have to hide `#identity-icon-box`, remove the border on `#urlbar-background` and set `--toolbar-field-background-color` to the value of `--toolbar-bgcolor`.
|
||||
|
||||
|
||||
|
||||
I encourage you to experiment and customize your browser to fit what you want your browser to be.
|
||||
|
||||
The source code for this tutorial can be found [here](https://github.com/trickypr/watermelon)
|
||||
This is the end of the guided section of the documentation. You should now have enough knowledge to modify Firefox as you want. There are more guides that you might find useful on the left sidebar, in no particular order.
|
||||
|
|
|
|||
|
|
@ -1,79 +0,0 @@
|
|||
+++
|
||||
title = "Windows"
|
||||
weight = 10
|
||||
+++
|
||||
|
||||
# Working with windows
|
||||
|
||||
Building Firefox Forks are nowhere near as easy on Windows as it is on Linux or Macos. This guide will walk you through the basics of setting up on Windows.
|
||||
|
||||
There are some important notes for before you get started. Firstly, it is recommenced that you have at least 4GB of ram, preferably more than 8GB. You will need more than 40GB of space on your storage device and Windows 10 and 11 are the only two [tier-1](https://firefox-source-docs.mozilla.org/build/buildsystem/supported-configurations.html#build-hosts) windows hosts.
|
||||
|
||||
## Installing Dependencies
|
||||
|
||||
The first thing you will need to do is install Microsoft's c++ build tools. You will need to download [Build Tools for Visual Studio 2022](https://visualstudio.microsoft.com/downloads/#build-tools-for-visual-studio-2022). The following will need to be need installed:
|
||||
|
||||
- **In the _Workloads_ tab**
|
||||
- Desktop development with C++
|
||||
- **In the _Individual components_ tab**
|
||||
- Windows 10 SDK (at least 10.0.19041.0).
|
||||
- C++ ATL for v143 build tools (x86 and x64).
|
||||
|
||||
You will need to install [MozillaBuild](https://ftp.mozilla.org/pub/mozilla.org/mozilla/libraries/win32/MozillaBuildSetup-Latest.exe). This provides a number of unix tools including a terminal similar to bash which can be initialized by `C:\mozilla-build\start-shell.bat`.
|
||||
|
||||
Next, [install Git](https://git-scm.com/download/win). You will need to set the following specific options on install to ensure high performance:
|
||||
|
||||
- Configuring the line ending conversions must be: Checkout as-is, commit as-is
|
||||
- Enable experimental built-in file system monitor
|
||||
|
||||
Install [NodeJS](https://nodejs.org/en/download/current/) on your system. This should also install chocolatey. If it does not, install it manually. To install the final two dependancies, run:
|
||||
|
||||
```sh
|
||||
npm install --global yarn
|
||||
choco install make
|
||||
```
|
||||
|
||||
## Setting up an existing repo
|
||||
|
||||
Next, you should clone down your repo. From here, install all of the necessary dependencies with yarn.
|
||||
|
||||
```sh
|
||||
yarn
|
||||
```
|
||||
|
||||
Next, download the firefox source code for Firefox to engine. Note that on windows this can take between 20 - 30 minutes, most of the time being spent with initialize.
|
||||
|
||||
```sh
|
||||
gluon download
|
||||
```
|
||||
|
||||
From here, you will need to use mach to bootstrap your system.
|
||||
|
||||
```batch
|
||||
cd engine
|
||||
.\mach boostrap
|
||||
```
|
||||
|
||||
Now you are ready to import, build and run your browser.
|
||||
|
||||
```batch
|
||||
gluon import
|
||||
gluon build
|
||||
gluon run
|
||||
```
|
||||
|
||||
Exporting changes will work as per usual.
|
||||
|
||||
## Additional packages required for releasing
|
||||
|
||||
If you are creating binaries to target windows, you will need nsis (which mach calls `makensisu` for some reason, even though the binary is `makensis`):
|
||||
|
||||
```powershell
|
||||
choco install nsis
|
||||
```
|
||||
|
||||
Note that you will also have to provide a path to nsis on your system. For mine it is:
|
||||
|
||||
```sh
|
||||
export MAKENSISU="C:\\Program Files (x86)\\NSIS\\Bin\\makensis.exe"
|
||||
```
|
||||
52
docs/content/guides/autoUpdates.md
Normal file
52
docs/content/guides/autoUpdates.md
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
+++
|
||||
title = "Automatic updates"
|
||||
weight = 20
|
||||
+++
|
||||
|
||||
# Automatic updates
|
||||
|
||||
> **Note**
|
||||
> Automatic updates only works for browsers using GitHub to host their binaries.
|
||||
|
||||
Mozilla provides an automatic update service that can be used by anyone building a Firefox fork or any other application that depends on Mozilla toolkit.
|
||||
|
||||
Attached to your "brand", you will need to include information regarding that brand's release. For example, Pulse has the following information attached to its alpha brand.
|
||||
|
||||
```json
|
||||
{
|
||||
...,
|
||||
"brands": {
|
||||
...,
|
||||
"alpha": {
|
||||
...,
|
||||
|
||||
"release": {
|
||||
"displayVersion": "1.0.0-a.17",
|
||||
"github": {
|
||||
"repo": "pulse-browser/browser"
|
||||
},
|
||||
"x86": {
|
||||
"windowsMar": "windows.mar",
|
||||
"macosMar": "macosIntel.mar",
|
||||
"linuxMar": "linux.mar"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
The release key includes both the latest version (`displayVersion`) and release info. In this case, binaries are released to github. For `x86`, we provide a number of `.mar` files for each platform. `.mar` files are "Mozilla Archives" and are used to distribute updates.
|
||||
|
||||
When creating update manifests, they will point to [the release tagged `displayVersion`](https://github.com/pulse-browser/browser/releases/tag/1.0.0-a.17). The update manifests tell Mozilla's updater to download the update manifest with the version that corresponds with the file name above. So an x86 linux computer will download the `linux.mar` file and use that to update.
|
||||
|
||||
## Creating MAR files and update manifests
|
||||
|
||||
Both `.mar` files and the update manifests are automatically created by running `gluon package`. This will generate a number of files in the `dist` directory.
|
||||
|
||||
An `output.mar` will be included in the root, which you should rename to the appropriate platform. For example, `linux.mar` for linux. This should be included with your GitHub release.
|
||||
|
||||
Update manifests are stored in the `dist/update` directory. The contents of this directory should be uploaded to a webserver (e.g. GitHub Pages or S3) such that their root is at `/updates/browser/`.
|
||||
|
||||
You will then need to set the `updateHostname` in `gluon.json` to the url of your update server. For Pulse, this is `updates.pulsebrowser.app`. You may also need to change the update server specified [here](https://searchfox.org/mozilla-central/rev/560b7b1b174ed36912b969eee0c1920f3c59bc56/build/moz.build#94).
|
||||
47
docs/content/guides/branding.md
Normal file
47
docs/content/guides/branding.md
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
+++
|
||||
title = "Branding your browser"
|
||||
weight = 15
|
||||
+++
|
||||
|
||||
# Branding your browser
|
||||
|
||||
Before you ship your browser, you will want to include your own branding, rather than just using Mozilla's template branding. Gluon will automatically generate branding once you configure it correctly.
|
||||
|
||||
## Creating a brand
|
||||
|
||||
You will first need to add a `brands` key within your `gluon.json`. For example:
|
||||
|
||||
```json
|
||||
{
|
||||
...
|
||||
"brands": {
|
||||
"stable": {
|
||||
"backgroundColor": "#2B2A33",
|
||||
"brandShorterName": "Pulse",
|
||||
"brandShortName": "Pulse Browser",
|
||||
"brandFullName": "Pulse Browser"
|
||||
}
|
||||
},
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
More information regarding the available keys for this config object can be found in the [reference section](/reference/config/#brands).
|
||||
|
||||
You will then need to create the folder `config/branding/<brand_name>`. In here, you will need to add a high-resolution `logo.png` (which will then be downscaled on import) and a `MacOSInstaller.svg` file, which will be used as the background for the macOS dmg file.
|
||||
|
||||
When you add or change a brand, you will need to reimport your changes and specify the brand to target using `gluon set brand`.
|
||||
|
||||
## Specifying which brand to target
|
||||
|
||||
You can specify the brand that you want to build for using the `gluon set brand <brand_name>` command. For example:
|
||||
|
||||
```sh
|
||||
gluon set brand stable
|
||||
```
|
||||
|
||||
Note that once you have set a new brand, you will need to rebuild your browser for changes to take effect:
|
||||
|
||||
```sh
|
||||
gluon build
|
||||
```
|
||||
49
docs/content/guides/windows.md
Normal file
49
docs/content/guides/windows.md
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
+++
|
||||
title = "Preparing Windows"
|
||||
weight = 0
|
||||
+++
|
||||
|
||||
# Preparing Windows
|
||||
|
||||
Building on windows is significantly more complex than building on macos or linux. This guide will walk you through preparing your Windows machine for building a Firefox fork. Before building, you should be aware that [only Windows 10 or 11 are officially supported](https://firefox-source-docs.mozilla.org/build/buildsystem/supported-configurations.html#build-hosts), but you might be able to get other versions to work.
|
||||
|
||||
## Installing Dependencies
|
||||
|
||||
The first thing you will need to do is install Microsoft's c++ build tools. You will need to download [Build Tools for Visual Studio 2022](https://visualstudio.microsoft.com/downloads/#build-tools-for-visual-studio-2022). The following will need to be need installed:
|
||||
|
||||
- **In the _Workloads_ tab**
|
||||
- Desktop development with C++
|
||||
- **In the _Individual components_ tab**
|
||||
- Windows 10 SDK (at least 10.0.19041.0).
|
||||
- C++ ATL for v143 build tools (x86 and x64).
|
||||
|
||||
> **Note:**
|
||||
> If this guide ever gets out of date, you can get the latest build requirements from [Mozilla's docs](https://firefox-source-docs.mozilla.org/setup/windows_build.html#system-preparation)
|
||||
|
||||
You will need to install [MozillaBuild](https://ftp.mozilla.org/pub/mozilla.org/mozilla/libraries/win32/MozillaBuildSetup-Latest.exe). Next, [install Git](https://git-scm.com/download/win). You will need to set the following specific options on install to ensure high performance:
|
||||
|
||||
- Configuring the line ending conversions must be: Checkout as-is, commit as-is
|
||||
- Enable experimental built-in file system monitor
|
||||
|
||||
Install [NodeJS](https://nodejs.org/en/download/current/) on your system. This should also install chocolatey. If it does not, [install it manually](https://docs.chocolatey.org/en-us/choco/setup). To install the final two dependencies, run:
|
||||
|
||||
```sh
|
||||
npm install --global yarn
|
||||
choco install make
|
||||
```
|
||||
|
||||
You should be good to return back to the main [Getting Started docs](/getting-started/overview)
|
||||
|
||||
## Additional packages required for releasing
|
||||
|
||||
If you are creating binaries to target windows, you will need nsis (which mach calls `makensisu` for some reason, even though the binary is `makensis`):
|
||||
|
||||
```powershell
|
||||
choco install nsis
|
||||
```
|
||||
|
||||
Note that you will also have to provide a path to nsis on your system. For mine it is:
|
||||
|
||||
```sh
|
||||
export MAKENSISU="C:\\Program Files (x86)\\NSIS\\Bin\\makensis.exe"
|
||||
```
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
+++
|
||||
title = "Notes"
|
||||
weight = 3
|
||||
sort_by = "weight"
|
||||
+++
|
||||
5
docs/content/reference/_index.md
Normal file
5
docs/content/reference/_index.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
+++
|
||||
title = "Reference"
|
||||
weight = 4
|
||||
sort_by = "weight"
|
||||
+++
|
||||
318
docs/content/reference/config.md
Normal file
318
docs/content/reference/config.md
Normal file
|
|
@ -0,0 +1,318 @@
|
|||
+++
|
||||
title = "`gluon.json` Reference"
|
||||
weight = 0
|
||||
+++
|
||||
|
||||
# gluon.json Reference
|
||||
|
||||
This reference guide may get out dated. If you need to check something, you can read [the config interface type](https://github.com/pulse-browser/gluon/blob/main/src/utils/config.ts#L96).
|
||||
|
||||
## name
|
||||
|
||||
This is the name of the product that is to be built.
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "Pulse Browser"
|
||||
}
|
||||
```
|
||||
|
||||
## vendor
|
||||
|
||||
The name of the company that is building the browser
|
||||
|
||||
```json
|
||||
{
|
||||
"vendor": "Fushra"
|
||||
}
|
||||
```
|
||||
|
||||
## appId
|
||||
|
||||
A reverse DNS identifier for the browser
|
||||
|
||||
```json
|
||||
{
|
||||
"appId": "com.fushra.browser"
|
||||
}
|
||||
```
|
||||
|
||||
## binaryName
|
||||
|
||||
The name of the output binary.
|
||||
|
||||
```json
|
||||
{
|
||||
"binaryName": "pulse-browser"
|
||||
}
|
||||
```
|
||||
|
||||
## updateHostname
|
||||
|
||||
The host of the update server for updating. This is configured as part of the build command
|
||||
|
||||
```json
|
||||
{
|
||||
"updateHostname": "updates.pulsebrowser.app"
|
||||
}
|
||||
```
|
||||
|
||||
## license
|
||||
|
||||
Information about the license the browser will be under. This is used by the Gluon license checker to ensure files have the MPL header if specified.
|
||||
|
||||
Specification:
|
||||
|
||||
```ts
|
||||
interface LicenseConfig {
|
||||
/**
|
||||
* What license you intend to put your project under. Currently MPL is the
|
||||
* only one supported by the license checker, but if you want implement more
|
||||
* please feel free to open a pull request.
|
||||
*
|
||||
* To disable the license checker, set this type to `unknown`
|
||||
*/
|
||||
licenseType: 'MPL-2.0' | 'unknown'
|
||||
/**
|
||||
* Files to be ignored by the license checker. For default values see the
|
||||
* `defaultConfig` variable in the config.ts file
|
||||
*
|
||||
* These should be rejex tests because compiled regex tests are **really**
|
||||
* fast which will stop the license checker from becoming absurdly slow with
|
||||
* larger projects
|
||||
*/
|
||||
ignoredFiles: string[]
|
||||
}
|
||||
```
|
||||
|
||||
Example:
|
||||
|
||||
```json
|
||||
{
|
||||
"licenseType": "MPL-2.0",
|
||||
"ignoredFiles": [".*\\.json"]
|
||||
}
|
||||
```
|
||||
|
||||
Commands that maybe used:
|
||||
|
||||
```sh
|
||||
gluon license-check
|
||||
gluon lc # Alias
|
||||
```
|
||||
|
||||
## version
|
||||
|
||||
Provides information to gluon about the product and version that Gluon is responsible for managing.
|
||||
|
||||
Specification:
|
||||
|
||||
```typescript
|
||||
enum SupportedProducts {
|
||||
Firefox = 'firefox',
|
||||
FirefoxESR = 'firefox-esr',
|
||||
FirefoxESRNext = 'firefox-esr-next',
|
||||
FirefoxDev = 'firefox-dev',
|
||||
FirefoxBeta = 'firefox-beta',
|
||||
FirefoxNightly = 'firefox-nightly',
|
||||
}
|
||||
|
||||
interface VersionConfig {
|
||||
/**
|
||||
* What branch of firefox you are forking. e.g. stable ('firefox'), dev ('firefox-dev')
|
||||
* , esr ('firefox-esr') etc.
|
||||
*
|
||||
* For use in code, use {@link SupportedProducts}
|
||||
*/
|
||||
product: SupportedProducts
|
||||
/**
|
||||
* The version of the selected product you are forking
|
||||
*/
|
||||
version?: string
|
||||
}
|
||||
```
|
||||
|
||||
Example
|
||||
|
||||
```json
|
||||
{
|
||||
"version": {
|
||||
"product": "firefox",
|
||||
"version": "102.0.1"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## buildOptions
|
||||
|
||||
These are flags that change how parts of Gluon operate.
|
||||
|
||||
### windowsUseSymbolicLinks
|
||||
|
||||
When set to `true`, symbolic links will be enabled on Windows. From internal testing, this appears to fail on a majority of computers
|
||||
|
||||
## addons
|
||||
|
||||
An index for each addon. These will be downloaded and configured as part of the `download` step that gluon performs. You can download extensions from AMO, Github or any URL. Note that the furha-robot will only be able to provide update checking to AMO and Github Extensions.
|
||||
|
||||
Specification:
|
||||
|
||||
```typescript
|
||||
export interface GithubAddonInfo {
|
||||
platform: 'github'
|
||||
id: string
|
||||
repo: string
|
||||
version: string
|
||||
fileGlob: string
|
||||
}
|
||||
|
||||
export interface AMOAddonInfo {
|
||||
platform: 'amo'
|
||||
id: string
|
||||
amoId: string
|
||||
version: string
|
||||
}
|
||||
|
||||
export interface UrlAddonInfo {
|
||||
platform: 'url'
|
||||
version: string
|
||||
id: string
|
||||
url: string
|
||||
}
|
||||
|
||||
export type AddonInfo = GithubAddonInfo | AMOAddonInfo | UrlAddonInfo
|
||||
|
||||
type addons = Record<string, AddonInfo>
|
||||
```
|
||||
|
||||
Example:
|
||||
|
||||
```json
|
||||
{
|
||||
"addons": {
|
||||
"ublock": {
|
||||
"platform": "github",
|
||||
"id": "uBlock0@raymondhill.net",
|
||||
"repo": "gorhill/uBlock",
|
||||
"version": "1.43.0",
|
||||
"fileGlob": "uBlock0_*.firefox.signed.xpi"
|
||||
},
|
||||
"tabliss": {
|
||||
"platform": "amo",
|
||||
"id": "extension@tabliss.io",
|
||||
"amoId": "850407",
|
||||
"version": "2.6.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Commands that use this:
|
||||
|
||||
```sh
|
||||
gluon download
|
||||
gluon updates-addons # Generates update manifests for addons
|
||||
```
|
||||
|
||||
## brands
|
||||
|
||||
These are different distrobutions, for example, beta and stable.
|
||||
|
||||
Specification:
|
||||
|
||||
```typescript
|
||||
export interface ReleaseInfo {
|
||||
/**
|
||||
* The version of your output product. E.g. 1.3.5
|
||||
*/
|
||||
displayVersion: string
|
||||
github?: {
|
||||
repo: string
|
||||
}
|
||||
|
||||
x86?: {
|
||||
windowsMar?: string
|
||||
macosMar?: string
|
||||
linuxMar?: string
|
||||
}
|
||||
}
|
||||
|
||||
export interface BrandInfo {
|
||||
backgroundColor: string
|
||||
brandShorterName: string
|
||||
brandShortName: string
|
||||
brandFullName: string
|
||||
release: ReleaseInfo
|
||||
}
|
||||
|
||||
type brands = Record<string, BrandInfo>
|
||||
```
|
||||
|
||||
Example:
|
||||
|
||||
```json
|
||||
{
|
||||
"brands": {
|
||||
"stable": {
|
||||
"backgroundColor": "#2B2A33",
|
||||
"brandShorterName": "Pulse",
|
||||
"brandShortName": "Pulse Browser",
|
||||
"brandFullName": "Pulse Browser",
|
||||
"release": {
|
||||
"displayVersion": "1.0.0",
|
||||
"github": {
|
||||
"repo": "pulse-browser/browser"
|
||||
},
|
||||
"x86": {
|
||||
"windowsMar": "windows.mar",
|
||||
"macosMar": "macosIntel.mar",
|
||||
"linuxMar": "linux.mar"
|
||||
}
|
||||
}
|
||||
},
|
||||
"beta": {
|
||||
"backgroundColor": "#2B2A33",
|
||||
"brandShorterName": "Pulse",
|
||||
"brandShortName": "Pulse Browser",
|
||||
"brandFullName": "Pulse Browser Beta",
|
||||
"release": {
|
||||
"displayVersion": "1.0.0-b.0",
|
||||
"github": {
|
||||
"repo": "pulse-browser/browser"
|
||||
},
|
||||
"x86": {
|
||||
"windowsMar": "windows.mar",
|
||||
"macosMar": "macosIntel.mar",
|
||||
"linuxMar": "linux.mar"
|
||||
}
|
||||
}
|
||||
},
|
||||
"alpha": {
|
||||
"backgroundColor": "#2B2A33",
|
||||
"brandShorterName": "Pulse",
|
||||
"brandShortName": "Pulse Browser",
|
||||
"brandFullName": "Pulse Browser Alpha",
|
||||
"release": {
|
||||
"displayVersion": "1.0.0-a.16",
|
||||
"github": {
|
||||
"repo": "pulse-browser/browser"
|
||||
},
|
||||
"x86": {
|
||||
"windowsMar": "windows.mar",
|
||||
"macosMar": "macosIntel.mar",
|
||||
"linuxMar": "linux.mar"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Commands:
|
||||
|
||||
```sh
|
||||
gluon build
|
||||
gluon package
|
||||
gluon updates-browser
|
||||
gluon set brand <brand_name>
|
||||
```
|
||||
|
|
@ -19,6 +19,11 @@ body {
|
|||
max-width: 800px;
|
||||
}
|
||||
|
||||
iframe#youtube {
|
||||
aspect-ratio: 16 / 9;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
@ -95,6 +100,11 @@ pre {
|
|||
}
|
||||
}
|
||||
|
||||
.language-filesystem {
|
||||
// Compact should be as compressed as possible
|
||||
line-height: 0.95em;
|
||||
}
|
||||
|
||||
code {
|
||||
font: $code_font;
|
||||
}
|
||||
|
|
|
|||
BIN
docs/static/images/userchrome/001_Vanilla_firefox.png
vendored
Normal file
BIN
docs/static/images/userchrome/001_Vanilla_firefox.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
BIN
docs/static/images/userchrome/002_Browser_Toolbox.png
vendored
Normal file
BIN
docs/static/images/userchrome/002_Browser_Toolbox.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 599 KiB |
|
|
@ -9,7 +9,12 @@ import { BUILD_TARGETS, CONFIGS_DIR, ENGINE_DIR } from '../constants'
|
|||
import { internalMozconfg } from '../constants/mozconfig'
|
||||
import { log } from '../log'
|
||||
import { patchCheck } from '../middleware/patch-check'
|
||||
import { configDispatch, dynamicConfig, stringTemplate } from '../utils'
|
||||
import {
|
||||
BrandInfo,
|
||||
configDispatch,
|
||||
dynamicConfig,
|
||||
stringTemplate,
|
||||
} from '../utils'
|
||||
|
||||
const platform: Record<string, string> = {
|
||||
win32: 'windows',
|
||||
|
|
@ -96,8 +101,8 @@ const applyConfig = async (os: string) => {
|
|||
|
||||
// We need to install the browser display version inside of browser/config/version.txt
|
||||
// and browser/config/version_display.txt
|
||||
const brandingConfig = config.brands[brandingKey]
|
||||
const version = brandingConfig.release.displayVersion || '1.0.0'
|
||||
const brandingConfig: BrandInfo | undefined = config.brands[brandingKey]
|
||||
const version = brandingConfig?.release?.displayVersion || '1.0.0'
|
||||
|
||||
log.debug(`Writing ${version} to the browser version files`)
|
||||
writeFileSync(join(ENGINE_DIR, 'browser/config/version.txt'), version)
|
||||
|
|
|
|||
|
|
@ -232,6 +232,8 @@ export interface IBrandingPatch extends IMelonPatch {
|
|||
}
|
||||
|
||||
export function get(): string[] {
|
||||
if (!existsSync(BRANDING_DIR)) return []
|
||||
|
||||
return readdirSync(BRANDING_DIR).filter((file) =>
|
||||
lstatSync(join(BRANDING_DIR, file)).isDirectory()
|
||||
)
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { copyFile } from 'node:fs/promises'
|
|||
import { join, dirname } from 'node:path'
|
||||
|
||||
import prompts from 'prompts'
|
||||
import { bin_name } from '..'
|
||||
|
||||
import { log } from '../log'
|
||||
import {
|
||||
|
|
@ -41,21 +42,31 @@ export async function setupProject(): Promise<void> {
|
|||
name: 'product',
|
||||
message: 'Select a product to fork',
|
||||
choices: [
|
||||
{ title: 'Firefox stable', value: SupportedProducts.Firefox },
|
||||
{
|
||||
title: 'Firefox extended support',
|
||||
title: 'Firefox stable',
|
||||
description: 'Releases around every 4 weeks, fairly stable',
|
||||
value: SupportedProducts.Firefox,
|
||||
},
|
||||
{
|
||||
title: 'Firefox extended support (older)',
|
||||
description:
|
||||
'The extended support version of Firefox. Will receive security updates for a longer period of time and less frequent, bigger, feature updates',
|
||||
value: SupportedProducts.FirefoxESR,
|
||||
},
|
||||
{
|
||||
title: 'Firefox developer edition (Not recommended)',
|
||||
description: 'Tracks firefox beta, with a few config tweaks',
|
||||
value: SupportedProducts.FirefoxDevelopment,
|
||||
},
|
||||
{
|
||||
title: 'Firefox beta (Not recommended)',
|
||||
description: 'Updates every 4 weeks. It will have unresolved bugs',
|
||||
value: SupportedProducts.FirefoxBeta,
|
||||
},
|
||||
{
|
||||
title: 'Firefox Nightly (Not recommended)',
|
||||
description:
|
||||
'Updates daily, with many bugs. Practically impossible to track',
|
||||
value: SupportedProducts.FirefoxNightly,
|
||||
},
|
||||
],
|
||||
|
|
@ -65,7 +76,7 @@ export async function setupProject(): Promise<void> {
|
|||
|
||||
const productVersion = await getLatestFF(product)
|
||||
|
||||
const { version, name, appId, vendor, ui } = await prompts([
|
||||
const { version, name, appId, vendor, ui, binaryName } = await prompts([
|
||||
{
|
||||
type: 'text',
|
||||
name: 'version',
|
||||
|
|
@ -78,6 +89,12 @@ export async function setupProject(): Promise<void> {
|
|||
message: 'Enter a product name',
|
||||
initial: 'Example browser',
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
name: 'binaryName',
|
||||
message: 'Enter the name of the binary',
|
||||
initial: 'example-browser',
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
name: 'vendor',
|
||||
|
|
@ -99,16 +116,16 @@ export async function setupProject(): Promise<void> {
|
|||
choices: [
|
||||
{
|
||||
title: 'None',
|
||||
description:
|
||||
'No files for the ui will be created, we will let you find that out on your own',
|
||||
value: 'none',
|
||||
},
|
||||
{
|
||||
title: 'User Chrome (custom browser css, simplest)',
|
||||
title: 'UserChrome',
|
||||
value: 'uc',
|
||||
},
|
||||
{
|
||||
title: 'Custom html',
|
||||
value: 'html',
|
||||
},
|
||||
// TODO: We also need to add extension based theming like the version
|
||||
// used in Pulse Browser
|
||||
],
|
||||
},
|
||||
])
|
||||
|
|
@ -117,22 +134,16 @@ export async function setupProject(): Promise<void> {
|
|||
name,
|
||||
vendor,
|
||||
appId,
|
||||
binaryName,
|
||||
version: { product, version },
|
||||
buildOptions: {
|
||||
generateBranding: false,
|
||||
windowsUseSymbolicLinks: false,
|
||||
},
|
||||
}
|
||||
|
||||
await copyRequired()
|
||||
|
||||
if (ui === 'html') {
|
||||
await copyOptional([
|
||||
'customui',
|
||||
'toolkit-mozbuild.patch',
|
||||
'confvars-sh.patch',
|
||||
])
|
||||
} else if (ui === 'uc') {
|
||||
if (ui === 'uc') {
|
||||
await copyOptional(['browser/themes'])
|
||||
}
|
||||
|
||||
|
|
@ -146,11 +157,19 @@ export async function setupProject(): Promise<void> {
|
|||
gitignoreContents = readFileSync(gitignore).toString()
|
||||
}
|
||||
|
||||
gitignoreContents += '\n.dotbuild/\nengine/\nfirefox-*/\nnode_modules/\n'
|
||||
gitignoreContents +=
|
||||
'\n.dotbuild/\n.gluon\nengine/\nfirefox-*/\nnode_modules/\n'
|
||||
|
||||
writeFileSync(gitignore, gitignoreContents)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
|
||||
log.success(
|
||||
'Project setup complete!',
|
||||
'',
|
||||
`You can start downloading the Firefox source code by running |${bin_name} download|`,
|
||||
'Or you can follow the getting started guide at https://docs.gluon.dev/getting-started/overview/'
|
||||
)
|
||||
} catch (e) {
|
||||
log.error(e)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -169,7 +169,7 @@ export async function generateBrowserUpdateFiles() {
|
|||
'@type': 'complete',
|
||||
'@URL': completeMarURL,
|
||||
'@hashFunction': 'sha512',
|
||||
'@hashValue': marHash,
|
||||
'@hashValue': await marHash,
|
||||
'@size': await getSize(marPath),
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -68,6 +68,14 @@ export interface ReleaseInfo {
|
|||
}
|
||||
}
|
||||
|
||||
export interface BrandInfo {
|
||||
backgroundColor: string
|
||||
brandShorterName: string
|
||||
brandShortName: string
|
||||
brandFullName: string
|
||||
release: ReleaseInfo
|
||||
}
|
||||
|
||||
export interface GithubAddonInfo {
|
||||
platform: 'github'
|
||||
id: string
|
||||
|
|
@ -131,20 +139,10 @@ export interface Config {
|
|||
version?: string
|
||||
}
|
||||
buildOptions: {
|
||||
generateBranding: boolean
|
||||
windowsUseSymbolicLinks: boolean
|
||||
}
|
||||
addons: Record<string, AddonInfo>
|
||||
brands: Record<
|
||||
string,
|
||||
{
|
||||
backgroundColor: string
|
||||
brandShorterName: string
|
||||
brandShortName: string
|
||||
brandFullName: string
|
||||
release: ReleaseInfo
|
||||
}
|
||||
>
|
||||
brands: Record<string, BrandInfo>
|
||||
}
|
||||
|
||||
export const defaultBrandsConfig = {
|
||||
|
|
@ -168,7 +166,6 @@ export const defaultConfig: Config = {
|
|||
product: SupportedProducts.Firefox,
|
||||
},
|
||||
buildOptions: {
|
||||
generateBranding: true,
|
||||
windowsUseSymbolicLinks: false,
|
||||
},
|
||||
addons: {},
|
||||
|
|
|
|||
|
|
@ -1,12 +1,9 @@
|
|||
ac_add_options --with-branding=${brandingDir}
|
||||
ac_add_options --with-app-name=${binName}
|
||||
export MOZ_USER_DIR="${name}"
|
||||
export MOZ_APP_VENDOR="${vendor}"
|
||||
export MOZ_APP_BASENAME=Dot
|
||||
export MOZ_APP_BASENAME=${binName}
|
||||
export MOZ_APP_PROFILE=${binName}
|
||||
export MOZ_APP_DISPLAYNAME="${name}"
|
||||
export MOZ_BRANDING_DIRECTORY=${brandingDir}
|
||||
export MOZ_OFFICIAL_BRANDING_DIRECTORY=${brandingDir}
|
||||
export MOZ_MACBUNDLE_ID=${appId}
|
||||
export MOZ_DISTRIBUTION_ID=${appId}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
diff --git a/browser/confvars.sh b/browser/confvars.sh
|
||||
index 92871c9516f98e065c5240a4a1cc7ead1de8ef9d..f9c515c48b67ee581e1280d587de5cdcf380002f 100755
|
||||
--- a/browser/confvars.sh
|
||||
+++ b/browser/confvars.sh
|
||||
@@ -26,7 +26,7 @@ if test "$OS_ARCH" = "WINNT"; then
|
||||
fi
|
||||
fi
|
||||
|
||||
-BROWSER_CHROME_URL=chrome://browser/content/browser.xhtml
|
||||
+BROWSER_CHROME_URL=chrome://customui/content/browser.html
|
||||
|
||||
# MOZ_APP_DISPLAYNAME will be set by branding/configure.sh
|
||||
# MOZ_BRANDING_DIRECTORY is the default branding directory used when none is
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css
|
||||
index ac03145433960f8abcfad5f285545843f02e7f1e..108dc7b290206be7158e914f2760226cb2c219ea 100644
|
||||
index ed31817d9e2be619d0d3e8f3b51a6e6d29ff22c3..711073553c5f1aff54337526985d2076facb8cba 100644
|
||||
--- a/browser/themes/linux/browser.css
|
||||
+++ b/browser/themes/linux/browser.css
|
||||
@@ -6,6 +6,8 @@
|
||||
@@ -7,6 +7,8 @@
|
||||
|
||||
@namespace html url("http://www.w3.org/1999/xhtml");
|
||||
|
||||
+%include ../custom/linux/linux.inc.css
|
||||
+
|
||||
%include ../shared/browser.inc.css
|
||||
/**
|
||||
* We intentionally do not include browser-custom-colors.inc.css,
|
||||
* We intentionally do not include browser-custom-colors.css,
|
||||
* instead choosing to fall back to system colours and transparencies
|
||||
|
|
|
|||
13
template/src/browser/themes.optional/linux/jar-mn.patch
Normal file
13
template/src/browser/themes.optional/linux/jar-mn.patch
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
diff --git a/browser/themes/linux/jar.mn b/browser/themes/linux/jar.mn
|
||||
index 404a88b218c652afac0cb2004676d22da53d48f3..5a4668ef2970dd773536907f51f3e7e7e3e023cb 100644
|
||||
--- a/browser/themes/linux/jar.mn
|
||||
+++ b/browser/themes/linux/jar.mn
|
||||
@@ -6,7 +6,7 @@ browser.jar:
|
||||
% skin browser classic/1.0 %skin/classic/browser/
|
||||
#include ../shared/jar.inc.mn
|
||||
skin/classic/browser/sanitizeDialog.css
|
||||
- skin/classic/browser/browser.css
|
||||
+* skin/classic/browser/browser.css
|
||||
skin/classic/browser/contextmenu.css (../shared/contextmenu.css)
|
||||
skin/classic/browser/monitor-base.png
|
||||
skin/classic/browser/monitor-border.png
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css
|
||||
index 01036f1e2e08f2a033c439ed6796668704e39b02..0e07dc2ae161c0dca88c634577c4788755bf2324 100644
|
||||
index f9860d3e66e8db7ee32d073bfe48704d16a47106..da0c36b7413aa910b2fd339e2735fcce744f5a4e 100644
|
||||
--- a/browser/themes/osx/browser.css
|
||||
+++ b/browser/themes/osx/browser.css
|
||||
@@ -4,6 +4,8 @@
|
||||
@@ -7,6 +7,8 @@
|
||||
|
||||
@namespace html url("http://www.w3.org/1999/xhtml");
|
||||
|
||||
+%include ../custom/macos/macos.inc.css
|
||||
+
|
||||
%include ../shared/browser.inc.css
|
||||
%include ../shared/browser-custom-colors.inc.css
|
||||
|
||||
:root {
|
||||
--toolbar-non-lwt-bgcolor: -moz-dialog;
|
||||
--toolbar-non-lwt-textcolor: -moz-dialogtext;
|
||||
|
|
|
|||
13
template/src/browser/themes.optional/osx/jar-mn.patch
Normal file
13
template/src/browser/themes.optional/osx/jar-mn.patch
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
diff --git a/browser/themes/osx/jar.mn b/browser/themes/osx/jar.mn
|
||||
index 6245c67a8d2957e301f9888603f504ce091fb70c..0288241dcb3e9e4603df36b04e1f6b476e935a30 100644
|
||||
--- a/browser/themes/osx/jar.mn
|
||||
+++ b/browser/themes/osx/jar.mn
|
||||
@@ -6,7 +6,7 @@ browser.jar:
|
||||
% skin browser classic/1.0 %skin/classic/browser/
|
||||
#include ../shared/jar.inc.mn
|
||||
skin/classic/browser/sanitizeDialog.css
|
||||
- skin/classic/browser/browser.css
|
||||
+* skin/classic/browser/browser.css
|
||||
skin/classic/browser/browser-custom-colors.css (../shared/browser-custom-colors.css)
|
||||
skin/classic/browser/pageInfo.css
|
||||
skin/classic/browser/customizableui/panelUI.css (customizableui/panelUI.css)
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
diff --git a/browser/themes/shared/browser.inc.css b/browser/themes/shared/browser.inc.css
|
||||
index b345560225ee8619524481c4570540746be9fcba..cafddff0e4febe056fceb35d705f3ef43cc08b1f 100644
|
||||
--- a/browser/themes/shared/browser.inc.css
|
||||
+++ b/browser/themes/shared/browser.inc.css
|
||||
@@ -2,6 +2,8 @@
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
+%include ../custom/shared/shared.inc.css
|
||||
+
|
||||
%include downloads/indicator.inc.css
|
||||
%include addons/extension-controlled.inc.css
|
||||
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css
|
||||
index 946807ef8623b49c2ad9c72374a38be2942ca012..1ceda5f77b57d34d841e141bf5ac531b68f44189 100644
|
||||
--- a/browser/themes/shared/browser-shared.css
|
||||
+++ b/browser/themes/shared/browser-shared.css
|
||||
@@ -24,6 +24,8 @@
|
||||
|
||||
@namespace html url("http://www.w3.org/1999/xhtml");
|
||||
|
||||
+%include ../custom/shared/shared.inc.css
|
||||
+
|
||||
:root {
|
||||
--toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
|
||||
--toolbar-bgimage: var(--toolbar-non-lwt-bgimage);
|
||||
13
template/src/browser/themes.optional/shared/jar-inc-mn.patch
Normal file
13
template/src/browser/themes.optional/shared/jar-inc-mn.patch
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
diff --git a/browser/themes/shared/jar.inc.mn b/browser/themes/shared/jar.inc.mn
|
||||
index 4a88a1cc318d25e441d1925e5d6b845f86b8dcd8..ddec0dd93c621bce15f36a25e0423ec5563d2082 100644
|
||||
--- a/browser/themes/shared/jar.inc.mn
|
||||
+++ b/browser/themes/shared/jar.inc.mn
|
||||
@@ -16,7 +16,7 @@
|
||||
skin/classic/browser/addon-notification.css (../shared/addon-notification.css)
|
||||
skin/classic/browser/autocomplete.css (../shared/autocomplete.css)
|
||||
skin/classic/browser/blockedSite.css (../shared/blockedSite.css)
|
||||
- skin/classic/browser/browser-shared.css (../shared/browser-shared.css)
|
||||
+* skin/classic/browser/browser-shared.css (../shared/browser-shared.css)
|
||||
skin/classic/browser/ctrlTab.css (../shared/ctrlTab.css)
|
||||
skin/classic/browser/light-dark-overrides.css (../shared/light-dark-overrides.css)
|
||||
skin/classic/browser/error-pages.css (../shared/error-pages.css)
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css
|
||||
index 2cb1a094bc42d045992bf42ccd4c79e89795d971..c2fab339d4ddb7dd394d73f686c1b6e569d2a1be 100644
|
||||
index fe2eaa0ef90733894fc026e694beae4a079d78c4..f3be10989da624b9a8b50923cbb5e583d6006726 100644
|
||||
--- a/browser/themes/windows/browser.css
|
||||
+++ b/browser/themes/windows/browser.css
|
||||
@@ -4,6 +4,8 @@
|
||||
@@ -8,6 +8,8 @@
|
||||
|
||||
@namespace html url("http://www.w3.org/1999/xhtml");
|
||||
|
||||
+%include ../custom/windows/windows.inc.css
|
||||
+
|
||||
%include ../shared/browser.inc.css
|
||||
%include ../shared/browser-custom-colors.inc.css
|
||||
%filter substitution
|
||||
:root {
|
||||
--toolbar-non-lwt-bgcolor: -moz-dialog;
|
||||
--toolbar-non-lwt-textcolor: -moz-dialogtext;
|
||||
|
|
|
|||
13
template/src/browser/themes.optional/windows/jar-mn.patch
Normal file
13
template/src/browser/themes.optional/windows/jar-mn.patch
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
diff --git a/browser/themes/windows/jar.mn b/browser/themes/windows/jar.mn
|
||||
index 9133c04c3062b00ef801f18a932e0a0933625560..b993c0a7fcd6777ee64a076fd843d7c572088746 100644
|
||||
--- a/browser/themes/windows/jar.mn
|
||||
+++ b/browser/themes/windows/jar.mn
|
||||
@@ -6,7 +6,7 @@ browser.jar:
|
||||
% skin browser classic/1.0 %skin/classic/browser/
|
||||
#include ../shared/jar.inc.mn
|
||||
skin/classic/browser/sanitizeDialog.css
|
||||
- skin/classic/browser/browser.css
|
||||
+* skin/classic/browser/browser.css
|
||||
skin/classic/browser/browser-custom-colors.css (../shared/browser-custom-colors.css)
|
||||
skin/classic/browser/browser-aero.css
|
||||
skin/classic/browser/contextmenu.css (../shared/contextmenu.css)
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html id="browser-window" chromemargin="0,2,2,2" windowtype="navigator:browser">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Welcome to the browser</title>
|
||||
|
||||
<link rel="stylesheet" href="css/browser.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="grid">
|
||||
<div>
|
||||
<img width="98" src="https://twemoji.maxcdn.com/v/13.0.1/svg/1f349.svg"/>
|
||||
</div>
|
||||
<div>
|
||||
<h1>Good, you are setup!</h1>
|
||||
<p>You chose the option to customize the html of the browser. This means you inherit none of the UI or logic firefox has in relation to tabs, etc. I wish you the best of luck!</p>
|
||||
<button id="launchDevTools">Launch dev tools</button>
|
||||
<button onclick="window.location.reload()">Reload chrome</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module" src="scripts/browser.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
body {
|
||||
background-color: #333333;
|
||||
color: white;
|
||||
font-family: sans-serif;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
height: 100%;
|
||||
align-content: center;
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
browser.jar:
|
||||
% content customui %content/customui/ contentaccessible=yes
|
||||
content/customui/browser.html (browser.html)
|
||||
content/customui/css/ (css/**/**)
|
||||
content/customui/scripts/ (scripts/**/**)
|
||||
|
|
@ -1 +0,0 @@
|
|||
JAR_MANIFESTS += ["jar.mn"]
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import { launchDevTools } from './devtools.js'
|
||||
|
||||
document.getElementById('launchDevTools').addEventListener('click', launchDevTools)
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
const launcher = ChromeUtils.import(
|
||||
"resource://devtools/client/framework/browser-toolbox/Launcher.jsm"
|
||||
).BrowserToolboxLauncher
|
||||
|
||||
export function launchDevTools() {
|
||||
launcher.init()
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
diff --git a/toolkit/toolkit.mozbuild b/toolkit/toolkit.mozbuild
|
||||
index fd9903bac5b07c655ee77c94f8f795b6773676ad..3127dc35fd8793b91ddd437f30b1917f6eff29ce 100644
|
||||
--- a/toolkit/toolkit.mozbuild
|
||||
+++ b/toolkit/toolkit.mozbuild
|
||||
@@ -202,3 +202,6 @@ if CONFIG['ENABLE_TESTS']:
|
||||
|
||||
if CONFIG['FUZZING']:
|
||||
DIRS += ['/tools/fuzzing']
|
||||
+
|
||||
+# Custom UI toolkit
|
||||
+DIRS += ['/customui']
|
||||
|
|
@ -2,10 +2,12 @@
|
|||
"compilerOptions": {
|
||||
/* Visit https://aka.ms/tsconfig.json to read more about this file */
|
||||
/* Basic Options */
|
||||
// "incremental": true, /* Enable incremental compilation */
|
||||
"target": "es2019" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
|
||||
"incremental": true /* Enable incremental compilation */,
|
||||
"target": "es2020" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
|
||||
"module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
|
||||
// "lib": [], /* Specify library files to be included in the compilation. */
|
||||
"lib": [
|
||||
"es2020"
|
||||
] /* Specify library files to be included in the compilation. */,
|
||||
// "allowJs": true, /* Allow javascript files to be compiled. */
|
||||
// "checkJs": true, /* Report errors in .js files. */
|
||||
// "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue