tabmenu.css: Make showing multiple tabs optional (MR 58)

Fix #42 by adding a boolean about:config (mcf.multipletabs) option to reduce
tab width.

Fix #34 by adding another boolean about:config option
(mcf.multipletabs.showclose) to show close buttons on every tab.

README.md

@@ -13,6 +13,7 @@ This does not replace a proper implementation in
   small screen)
 * Moves the UI chrome (address- and tab-bar) to the bottom
 * Enable mobile gestures
+* Show one tab to show the page title
 * Privacy tweaks:
   * Disable search suggestions
   * Disable Firefox studies
@@ -40,6 +41,11 @@ them on your phone).
 If you don't like that the Firefox UI is moved to the bottom, you can undo this
 change by adding `mcf.addressbarontop` and set it to true in `about:config`.
 
+If you don't like the single tab mode, you can show multiple tabs in tab-bar
+by adding `mcf.multipletabs` and set it to true in `about:config`. If you want
+to have a close button on every tab, add `mcf.multipletabs.showclose` and set it
+to true.
+
 If it cannot be changed in preferences, look in
 `/etc/firefox/policies/policies.json`. You can see the active policies while
 Firefox is running in `about:policies`. The uBlock origin add-on for example,

src/userChrome/tabmenu.css

@@ -2,9 +2,18 @@
  * SPDX-License-Identifier: MPL-2.0 */
 
 @media (max-width: 700px) {
+    /* Even when not in private browsing mode, reserve space to the right of
+     * the tab bar for the private-browsing-indicator (that mask icon). This
+     * gives the tab bar a consistent width in both the regular and the private
+     * browsing mode, so the increased width hack below looks good in both. */
+    #titlebar {
+        padding-right: 30px;
+    }
+
     /* Fix private browsing mode for current Firefox >= 115 */
     #private-browsing-indicator-with-label {
-        width: 22px;
+        margin-inline: 0px !important;
+        width: 0px;
         font-size: 0;
     }
 
@@ -13,18 +22,41 @@
         display: none;
     }
 
-    /* Remove empty space at start/end */
-    .titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"] {
-        width: 0px !important;
-    }
-
-    /* Set default tabs width for small screens */
+    /* Increase tab width, to have more space for displaying the title of the
+     * website */
     #tabbrowser-tabs {
-        --tab-min-width: 75px !important;
-        --tab-max-width: 150px !important;
+        --tab-min-width: calc(100vw - 116px) !important;
         border-inline-start: 0 !important;
     }
 
+    /* Option to show multiple tabs in tab bar */
+    @media (-moz-bool-pref: "mcf.multipletabs") {
+        #titlebar {
+            padding-right: 0px !important;
+        }
+        /* Set small tabs width for small screens */
+        #tabbrowser-tabs {
+            --tab-min-width: 75px !important;
+            --tab-max-width: 150px !important;
+        }
+
+        /* Remove empty space at start/end */
+        .titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"] {
+            width: 0px !important;
+        }
+
+        #private-browsing-indicator-with-label {
+            width: 22px;
+        }
+
+        /* Optionally show close button on all tabs */
+        @media (-moz-bool-pref: "mcf.multipletabs.showclose") {
+            .tab-close-button, .close-icon, #tabbrowser-tabs[closebuttons="activetab"][orient="horizontal"] &:not([selected]) {
+                display: block !important;
+            }
+        }
+    }
+
     @media not (-moz-bool-pref: "mcf.addressbarontop") {
         /* Rotate the arrow on the "all tabs" button to point upwards, since the
          * tabs and searchbar were moved to the bottom. */