Jump to content

Firefox: Difference between revisions

From postmarketOS Wiki
Baonks81 (talk | contribs)
Tags: mobile edit mobile web edit
Baonks81 (talk | contribs)
Tags: mobile edit mobile web edit
Line 44: Line 44:
To ensure that it kicked in check <code>about:support</code>, graphics->compositing should become '''OpenGL'''.
To ensure that it kicked in check <code>about:support</code>, graphics->compositing should become '''OpenGL'''.


== Hide tabs toolbar ==
== Hide tabs toolbar and navbar ==


Open firefox, search and install [https://addons.mozilla.org/en-US/firefox/addon/panorama-view/ Panorama View addons] (or whatever tabs view addons). Enter URL about:support, choose Open Directory at Profile Directory. Edit chrome/userChrome.css(if it doesn't exist, you can create one)
Open firefox, search and install [https://addons.mozilla.org/en-US/firefox/addon/panorama-view/ Panorama View addons] (or whatever tabs view addons). Enter URL about:support, choose Open Directory at Profile Directory. Edit chrome/userChrome.css(if it doesn't exist, you can create one)
Tabs Toolbar and navbar on top:
<syntaxhighlight lang="css">
/* Hide tabs toolbar */
#TabsToolbar {
  visibility: collapse !important;
}
/* Hide navbar */
#nav-bar {
  /* customize this value. */
  --navbar-margin: -30px;
  margin-top: var(--navbar-margin);
  margin-bottom: 0;
  z-index: -100;
  transition: all 0.3s ease !important;
  opacity: 0;
}
#navigator-toolbox:focus-within > #nav-bar,
#navigator-toolbox:hover > #nav-bar
{
  margin-top: 0;
  margin-bottom: var(--navbar-margin);
  z-index: 100;
  opacity: 1;
}
</syntaxhighlight>
Tabs Toolbar and navbar on bottom:
<syntaxhighlight lang="css">
<syntaxhighlight lang="css">
/* Hide tabs toolbar */
/* Hide tabs toolbar */
#TabsToolbar {
#TabsToolbar {
   visibility: collapse !important;
   visibility: collapse !important;
}
/* Hide navbar */
#nav-bar {
  /* customize this value. */
  --navbar-margin: -30px;
  margin-top: 0;
  margin-bottom: var(--navbar-margin);
  z-index: -100;
  transition: all 0.3s ease !important;
  opacity: 0;
}
#navigator-toolbox:focus-within > #nav-bar,
#navigator-toolbox:hover > #nav-bar
{
  margin-top: var(--navbar-margin);
  margin-bottom: 0;
  z-index: 100;
  opacity: 1;
}
}
</syntaxhighlight>
</syntaxhighlight>

Revision as of 08:40, 15 December 2021

Alt text
Firefox running on Phosh with mobile-config-firefox

postmarketOS ships the desktop version of Firefox as default in Phosh and Plasma Mobile, the mobile and privacy friendly configuration from mobile-config-firefox. To remove this configuration, uninstall the mobile-config-firefox package.

Webapps

To create webapps for use with Firefox, the following shell script can be used. It generates a separate Firefox profile for isolation, and adds a desktop entry that opens the corresponding site as a single-site browser (without a url-bar).

#!/usr/bin/env bash
# Create firefox profile
set -e
name=$1
url=$2
# Ugly, copy-pasted from SO
simple_name=$(echo "$name" | awk '{print tolower($0)}' | sed 's/ //g')
echo "Creating webapp $name, using $url."

firefox -CreateProfile $simple_name
profile_dir=$(find ~/.mozilla/firefox/ -maxdepth 1 | grep $simple_name)
echo 'user_pref("browser.ssb.enabled",true);' > $profile_dir/user.js

# Create desktop entry
cat >~/.local/share/applications/$simple_name.desktop <<EOL
[Desktop Entry]
Exec=firefox -P $simple_name --ssb $url
Icon=/home/user/.local/share/applications/$simple_name.png
Type=Application
Terminal=false
Name=$name
StartupNotify=true
StartupWMClass=firefox
EOL

# Get icon
wget $url/favicon.ico -O /tmp/favicon.ico
convert /tmp/favicon.ico /tmp/favicon.png
mv /tmp/favicon.png .local/share/applications/$simple_name.png ||
mv /tmp/favicon-0.png .local/share/applications/$simple_name.png
rm /tmp/favicon*.png

Save this script as /add-webapp.sh, and mark it as executable. Running the command ./add-webapp.sh "Hacker News" "https://news.ycombinator.com" will create a launcher shortcut to Hacker News.

Harware accelerated rendering

To make firefox on pinephone/pinetab/pb/pbp smoother you need to change layers.acceleration.force-enabled to true in about:config. To ensure that it kicked in check about:support, graphics->compositing should become OpenGL.

Hide tabs toolbar and navbar

Open firefox, search and install Panorama View addons (or whatever tabs view addons). Enter URL about:support, choose Open Directory at Profile Directory. Edit chrome/userChrome.css(if it doesn't exist, you can create one)

Tabs Toolbar and navbar on top:

/* Hide tabs toolbar */
#TabsToolbar {
   visibility: collapse !important;
}

/* Hide navbar */
#nav-bar {
  /* customize this value. */
  --navbar-margin: -30px;

  margin-top: var(--navbar-margin);
  margin-bottom: 0;
  z-index: -100;
  transition: all 0.3s ease !important;
  opacity: 0;
}

#navigator-toolbox:focus-within > #nav-bar,
#navigator-toolbox:hover > #nav-bar
{
  margin-top: 0;
  margin-bottom: var(--navbar-margin);
  z-index: 100;
  opacity: 1;
}

Tabs Toolbar and navbar on bottom:

/* Hide tabs toolbar */
#TabsToolbar {
   visibility: collapse !important;
}

/* Hide navbar */
#nav-bar {
  /* customize this value. */
  --navbar-margin: -30px;

  margin-top: 0;
  margin-bottom: var(--navbar-margin);
  z-index: -100;
  transition: all 0.3s ease !important;
  opacity: 0;
}

#navigator-toolbox:focus-within > #nav-bar,
#navigator-toolbox:hover > #nav-bar
{
  margin-top: var(--navbar-margin);
  margin-bottom: 0;
  z-index: 100;
  opacity: 1;
}

Customize Toolbar to edit Panorama View first icon showing on navigation bar

See also