🔀 Redesign the UI (#68)

Author: trickypr

src/browser/base/content/browser-sidebar-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/browser-sidebar.js b/browser/base/content/browser-sidebar.js
-index eb1ee9e2b868fa06af4ed88e1d54583cd4196880..faa86a8037a36652e8507d631354e11a7852db07 100644
+index eb1ee9e2b868fa06af4ed88e1d54583cd4196880..4a4f2e926d2954003cd4b8cbacc318dc820f8cc8 100644
 --- a/browser/base/content/browser-sidebar.js
 +++ b/browser/base/content/browser-sidebar.js
 @@ -2,10 +2,14 @@
@@ -179,7 +179,54 @@ index eb1ee9e2b868fa06af4ed88e1d54583cd4196880..faa86a8037a36652e8507d631354e11a
    /**
     * Opens the switcher panel if it's closed, or closes it if it's open.
     */
-@@ -575,21 +681,31 @@ var SidebarUI = {
+@@ -457,6 +563,10 @@ var SidebarUI = {
+     return this._show(commandID).then(() => {
+       this._loadSidebarExtension(commandID);
+ 
++      // Pulse: Reset sidebar margin to zero to allow for correct animations to 
++      // take place (adapted from dot browser, se below)
++      this._box.style.marginLeft = '0px'
++
+       if (triggerNode) {
+         updateToggleControlLabel(triggerNode);
+       }
+@@ -552,6 +662,25 @@ var SidebarUI = {
+ 
+     this.selectMenuItem("");
+ 
++    // The below code was, in part, based on Dot Browser's source code
++    // https://github.com/dothq/browser-desktop/blob/3c6b992af8946e1c30180cc824a78d4bb85ba868/patches/browser-base-content-browser-sidebar-js.patch#L183
++
++    // Pulse Browser: Helper stuff for sidebar animation. We can fake sliding in
++    // and out by changing the left margin to be a negative value. Then, inside
++    // of our css code, we can animate it to close.
++    this._box.style.marginLeft = `${-Math.abs(this._box.getBoundingClientRect().width)}px`
++    
++    // We want to fully set it to hidden to slightly improve browser performance
++    // when it is hidden. Note that this replaces some of Mozilla's code that
++    // would generally be down below
++    setTimeout(() => {
++      this._box.hidden = true
++      this._splitter.hidden = true
++
++      this._box.removeAttribute("checked")
++    }, 170);
++
++
+     // Replace the document currently displayed in the sidebar with about:blank
+     // so that we can free memory by unloading the page. We need to explicitly
+     // create a new content viewer because the old one doesn't get destroyed
+@@ -560,9 +689,6 @@ var SidebarUI = {
+     this.browser.setAttribute("src", "about:blank");
+     this.browser.docShell.createAboutBlankContentViewer(null, null);
+ 
+-    this._box.removeAttribute("checked");
+-    this._box.hidden = this._splitter.hidden = true;
+-
+     let selBrowser = gBrowser.selectedBrowser;
+     selBrowser.focus();
+     if (triggerNode) {
+@@ -575,21 +701,31 @@ var SidebarUI = {
     * none if the argument is an empty string.
     */
    selectMenuItem(commandID) {

src/browser/extensions/tabliss/manifest-json.patch

@@ -0,0 +1,15 @@
+diff --git a/browser/extensions/tabliss/manifest.json b/browser/extensions/tabliss/manifest.json
+index b22be5737d450e9f7fa2c55dac44432505e293f4..2e6fc77ad046544fb3dda676ff29323326458f06 100644
+--- a/browser/extensions/tabliss/manifest.json
++++ b/browser/extensions/tabliss/manifest.json
+@@ -13,6 +13,10 @@
+   "chrome_url_overrides": {
+     "newtab": "index.html"
+   },
++  "chrome_settings_overrides": {
++    // Pulse: We want tabliss to appear on the home screen as well as new tabpages
++    "homepage": "index.html"
++  },
+   "icons": {
+     "32": "icons/32.png",
+     "48": "icons/48.png",

src/browser/themes/addons/shared/shared.inc.css

@@ -9,6 +9,13 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 %include ./macos.inc.css
 %endif
 
+/* Pulse specific variables */
+:root {
+  --tab-rounding-size: 8px;
+  --tab-rounding-size-neg: -8px;
+}
+
+
 :root {
   /* Colors */
   --gradient-orientation: 90deg;
@@ -22,25 +29,23 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
   --tab-block-margin: 0 !important; /* The padding around each tab. In proton, this is what makes them float */
   --tab-border-radius: 0 !important; /* The border radius of the tab */
   --tab-padding-inline: 0 !important; /* Padding to the left and right of the tab. **Focus Browser custom** */
+  
+  --toolbarbutton-border-radius: 4px;
 
   /* Toolbar area */
   --toolbar-field-border-color: transparent !important; /* The border color of the search input */
-  --toolbarbutton-border-radius: 0 !important; /* The border radius of the search input */
-  --urlbar-icon-border-radius: 0 !important; /* The border radius of the identity box icon */
 
   /* App Menu styling */
-  --arrowpanel-menuitem-border-radius: 0 !important; /* The border radius of the app menu items */
-  --arrowpanel-border-radius: 0 !important; /* The border radius of the app menu */
   --panel-separator-zap-gradient: var(
     --gradient
   ) !important; /* The gradient used for the app menu separator */
 
   /* Panel variables */
-  --panel-footer-item-border-radius: 0; /* The border radius of the panel footer items */
+  --panel-footer-item-border-radius: 8px; /* The border radius of the panel footer items */
 
   /* Bookmark panel */
-  --bookmark-panel-image-border-radius: 0; /* The border radius of the bookmark panel image */
-  --bookmark-panel-favicon-border-radius: 0; /* The border radius of the bookmark panel favicon */
+  --bookmark-panel-image-border-radius: 8px; /* The border radius of the bookmark panel image */
+  --bookmark-panel-favicon-border-radius: 8px; /* The border radius of the bookmark panel favicon */
   --bookmark-panel-menulist-padding: 5px;
   --bookmark-panel-input-border-radius: 0; /* The border radius of the bookmark panel input */
   --bookmark-panel-border-radius: var(
@@ -50,33 +55,118 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
   /* Custom elements */
 
   /* Menulist */
-  --menulist-border-radius: 0; /* The border radius of the menulist */
+  --menulist-border-radius: 8px; /* The border radius of the menulist */
 
   /* Dialog variables */
-  --dialog-border-radius: 0; /* The border radius of the dialog */
+  --dialog-border-radius: 8px; /* The border radius of the dialog */
 
   /* Make the tabs a touch wider */
-  --tab-min-height: 40px;
+  --tab-min-height: 38px;
+}
+
+#tabs-newtab-button .toolbarbutton-icon {
+  width: 24px;
+  height: 24px;
+  margin-left: 8px;
+  padding: 4px !important;
+}
+
+.toolbarbutton-icon, .tab-close-button  {
+  border-radius: 4px !important;
 }
 
 .container.infobar::before {
   --gradient-orientation: 0;
   background-image: var(--gradient) !important;
 }
 
+/* ========================================================================== */
+/* Tab style */
+
+/* BUG GH#54: The container color does not show up in the pulse theme */
+.tabbrowser-tab {
+  border-top: 2px solid var(--identity-tab-color);
+}
+
+.tab-background[selected="true"]::before, .tab-background[selected="true"]::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  
+  background-size: cover;
+  color: var(--lwt-selected-tab-background-color);
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+
+  width: var(--tab-rounding-size);
+  height: var(--tab-rounding-size);
+}
+
+.tab-background[selected="true"]::before {
+  background-image: url("chrome://global/skin/icons/tab-rising-edge.svg");
+  left: var(--tab-rounding-size-neg);
+}
+
+.tab-background[selected="true"]::after {
+  background-image: url("chrome://global/skin/icons/tab-falling-edge.svg");
+  right: var(--tab-rounding-size-neg);
+}
+
 #tabbrowser-arrowscrollbox .tabbrowser-tab {
   /* Specifies the padding to the left and right of the tab */
   padding-inline: var(--tab-padding-inline) !important;
 }
 
+/* ========================================================================== */
+/* Sidebar tabs */
+.sidebar-item-background[checked="true"]::before, .sidebar-item-background[checked="true"]::after {
+  content: "";
+  position: absolute;
+  right: 0;
+
+  background-size: cover;
+  color: var(--lwt-selected-tab-background-color);
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+
+  width: var(--tab-rounding-size);
+  height: var(--tab-rounding-size);
+
+  /* HACK: Stops the hoverstate from the next tab over from intersecting with the current tab */
+  z-index: 10;
+}
+
+.sidebar-item-background[checked="true"]::before {
+  background-image: url("chrome://global/skin/icons/tab-rising-edge.svg");
+  top: var(--tab-rounding-size-neg);
+}
+
+.sidebar-item-background[checked="true"]::after {
+  background-image: url("chrome://global/skin/icons/tab-falling-edge.svg");
+  bottom: var(--tab-rounding-size-neg);
+  transform: rotate(180deg);
+}
+
+/* =========================================================================- */
+/* General sidebar stuff */
+.sidebar-splitter {
+  border-style: none;
+}
+
 /* Panel footer styles */
 .panel-footer > button {
   /* The border radius of the panel footer items */
   border-radius: var(--panel-footer-item-border-radius);
 }
 
+/* ========================================================================== */
 /* Bookmark styles */
 
+/* Remove messy seperators */
+#editBookmarkHeaderSeparator, #editBookmarkSeparator {
+  display: none;
+}
+
 #editBookmarkPanelImage {
   /* The border radius of the bookmark panel image */
   border-radius: var(--bookmark-panel-image-border-radius) !important;
@@ -122,11 +212,7 @@ menulist:host(:not([native])) {
  *     If you have any issues with this style, please open a ticket at https://github.com/NiklasGollenstede/unload-tabs
  */
 
-@-moz-document url(chrome://browser/content/browser.xhtml),
- url(chrome://browser/content/browser.xul)
-{
-  tab[pending],
-  #alltabs-popup menuitem[pending] {
-    opacity: 0.6 !important;
-  }
+tab[pending],
+#alltabs-popup menuitem[pending] {
+  opacity: 0.6 !important;
 }

src/browser/themes/shared/sidebar_tabs.inc.css

@@ -11,8 +11,15 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  background-color: var(--toolbar-bgcolor);
+  background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
   overflow: hidden;
+
+  max-width: var(--tab-min-height);
+  min-width: var(--tab-min-height);
+
+  /* Makes the sidebar slide out from below */
+  position: relative;
+  z-index: 10;
 }
 
 .sidebar-icon-item {
@@ -40,6 +47,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
+
+  position: relative;
 }
 
 .sidebar-item-background:hover {
@@ -78,6 +87,11 @@
   -moz-font-smoothing-background-color: auto !important;
 }
 
+/* Make it slide in smoothy rather than just appearing */
+#sidebar-box {
+  transition: margin-left 200ms ease-in-out;
+}
+
 /* Make it feel native on macos */
 %ifdef XP_MACOSX
 #sidebar-container:not([lwt-sidebar]) {

src/toolkit/themes/shared/desktop-jar-inc-mn.patch

@@ -1,10 +1,12 @@
 diff --git a/toolkit/themes/shared/desktop-jar.inc.mn b/toolkit/themes/shared/desktop-jar.inc.mn
-index 8658ca96084856eeeb58640de81d4e543f57c6d8..fb2893170cbda0e077714f5cd1e3dafa813ce02c 100644
+index 8658ca96084856eeeb58640de81d4e543f57c6d8..9977930b6ee0479796fd27fdec3ee12075bbc06a 100644
 --- a/toolkit/themes/shared/desktop-jar.inc.mn
 +++ b/toolkit/themes/shared/desktop-jar.inc.mn
-@@ -131,4 +131,5 @@
+@@ -131,4 +131,7 @@
    skin/classic/global/reader/RM-Content-Width-Plus-44x16.svg           (../../shared/reader/RM-Content-Width-Plus-44x16.svg)
    skin/classic/global/reader/RM-Line-Height-Minus-38x14.svg            (../../shared/reader/RM-Line-Height-Minus-38x14.svg)
    skin/classic/global/reader/RM-Line-Height-Plus-38x24.svg             (../../shared/reader/RM-Line-Height-Plus-38x24.svg)
-+  skin/classic/global/icons/bookmark-outline.svg             (../../shared/icons/bookmark-outline.svg)  
++  skin/classic/global/icons/bookmark-outline.svg             (../../shared/icons/bookmark-outline.svg)
++  skin/classic/global/icons/tab-rising-edge.svg             (../../shared/icons/tab-rising-edge.svg)
++  skin/classic/global/icons/tab-falling-edge.svg             (../../shared/icons/tab-falling-edge.svg)