Styling WebApps with Firefox

If you want to let your webapps more integrated to the system or just want to give them a stylistic touch, this post is for you. Below you can see how I edited the look and feel of my webapps so they look better into the system:

• 

• 

The idea is pretty simple: I created several Firefox profiles for each WebApp and edited how each profile looks like. This can be done by creating/editing the userChrome.css file in the directory of each profile. Using CSS you can change color, position and size of tabs, title bar, position of buttons.

So, let’s see how to do this!

Step 1: Creating new profile

Type in the URL bar:

about:profiles

Then click on “Create a New Profile”. Name the profile the way you want (I use the WebApp’s name, in this example I created a new profile called “MyApp”) and follow the instructions (which means hit Next, Next, Next!)

2. Configuring your Profile

Still in the about:profiles page, launch a new instance of Firefox using the new Profile we’ve just created by hitting the button “Launch profile in new browser”

Then, type in the address bar

about:preferences

In the General -> Startup section, check the option Restore previous session

Then go to the Privacy and Security settings. Scroll to Permissions section

Finally, go to notifications and enable notifications for your WebApp’s URL.

Now, type

about:config

Accept the risks and continue

Then, in the search bar at the top, search for toolkit.legacyUserProfileCustomizations.stylesheets and change its value to true.

3. Creating the userChrome.css file

In the about:profiles page, scroll to the information of your new profile and hit “Open Directory” button, which corresponds to the “Root Directory” property. (See image below)

Once you have the directory opened, create a new folder called “chrome” (with little c)

Create (or paste one of the files I made available at the end of the post) a “userChrome.css” file into this directory.

4. Editing the userChrome.css file

The userChrome.css file holds all the changes we will do in the look-and-feel of our profile. Below I’m sharing the css style I use for Gmail in elementaryOS. You can use it as a base and play with colors and sizes.

userChrome.css for Gmail

/* Adjust tab bar to get space first */
#TabsToolbar {
  margin-bottom: -0.1em; !important; /* Remove bottom border */
   border-left: none !important;
  box-shadow: none !important;
  background-color: #F5F5F5 !important;
  
 
}

/* Move nav bar to top left */
#nav-bar {
  
  visibility: collapse !important;
    
}


/* Move menu button to top right */
#PanelUI-button {
    margin-top: 0;
  position: fixed; /* Fixed position for menu */
  top: var(--menu-margin-top); /* Add some margin to top */
  left: 0em; /* Move it to right side (adjust for caption buttons) */
  border: none !important; /* Remove menu border */
   box-shadow: none !important;
   background-color: #000 !important;
}

.tabbrowser-tab::after, .tabbrowser-tab::before {
   border-left: none !important; /* Remove borders from inactive tabs */
   border-right: none !important; /* Remove borders from inactive tabs */
   
}

.tabbrowser-tab[visuallyselected="true"] {
  color: inherit !important; /* Use background tab text color for foreground tabs */
}

.tabbrowser-tab {
    border: none !important; /* Remove menu border */
   box-shadow: none !important;
}

.tab-background[selected=true] {
  background-color: transparent !important; /* Make selected tab bg transparent */

}

.tabbrowser-tab .tab-close-button {
  display: none !important;
}


/*.tab-line {
  -moz-box-ordinal-group: 2;
}*/

.tab-line[selected=true] {
  background-color: #D93025 !important; /* Make the line white, remove this for default color */
}


/* titlebar */
.titlebar-buttonbox-container {
  display: flex !important;
  pointer-events: none;
}
.titlebar-buttonbox {
  flex-direction: row-reverse !important;
  margin-left: 3px !important;
  top: 12px !important;
  position: fixed !important;
  display: flex !important;
  width: calc(100vw - 9px) !important;
  height: 25px !important;
  justify-content: space-between !important;
}
:root[sizemode="fullscreen"] .titlebar-buttonbox {
  display: none !important; /* fullscreen no window control buttons */
}
.titlebar-close,
.titlebar-min,
.titlebar-max,
.PanelUI-menu-button,
#wrapper-new-tab-button,
.tabs-newtab-button,
.tabbrowser-tab,
.tabbrowser-arrowscrollbox,
.titlebar-restore {
  pointer-events: auto !important; /* clickable */
}

Other reference to help you edit your userChrome.css file

If you want to tweak your Firefox in another way, check out this repository:
https://github.com/Timvde/UserChrome-Tweaks

It contains many other useful examples of how you can edit the userChrome.css file.

5. Creating a MENU entry for your WebApp

Create a new file called your_webapp_name.desktop at /home/$USERNAME/.local/share/applications Then, paste in the file the following

[Desktop Entry]
Type=Application
Name=YourWebApp
Icon=URL_TO_YOUR_ICON_FILE
NoDisplay=false
Exec=firefox -P 'NAME_OF_YOUR_PROFILE'
Terminal=false
X-GNOME-UsesNotifications=true

Sometimes you have to logout and login back to refresh the applications menu.

If you are using eOS, you can download AppEditor from AppCenter to create entries in the Applications Menu using a GUI.