Bug 787683 - Add navigation buttons to the content tabs. r=darktrojan a=jorgk
authorRichard Marti <richard.marti@gmail.com> and Geoff Lankow <geoff@darktrojan.net>
Wed, 06 Nov 2019 13:31:55 +0100
changeset 37277 f9de4d2ba542874f03c273be63666218ecd8f1d2
parent 37276 54803987a9f82e3c11534b65ce17a2b8a9f7cc03
child 37278 873e752b714ee7040425d7cdb7bbb9d8d3df6306
push id395
push userclokep@gmail.com
push dateMon, 02 Dec 2019 19:38:57 +0000
reviewersdarktrojan, jorgk
bugs787683
Bug 787683 - Add navigation buttons to the content tabs. r=darktrojan a=jorgk
mail/base/content/messenger.xul
mail/base/content/specialTabs.js
mail/themes/shared/mail/tabmail.css
--- a/mail/base/content/messenger.xul
+++ b/mail/base/content/messenger.xul
@@ -674,16 +674,20 @@
 #include ../../components/im/content/chat-messenger.inc.xul
       </tabpanels>
      </tabbox>
     </tabmail>
     <vbox id="contentTab" collapsed="true">
       <vbox flex="1" class="contentTabInstance">
         <vbox id="dummycontenttoolbox" class="contentTabToolbox">
           <hbox id="dummycontenttoolbar" class="contentTabToolbar">
+            <toolbarbutton class="back-btn nav-button"
+                           disabled="true"/>
+            <toolbarbutton class="forward-btn nav-button"
+                           disabled="true"/>
             <toolbaritem class="contentTabAddress" align="center" flex="1">
               <hbox align="center" flex="1">
                 <image class="contentTabSecurity"/>
                 <label class="contentTabUrlbar" flex="1"/>
               </hbox>
             </toolbaritem>
           </hbox>
         </vbox>
--- a/mail/base/content/specialTabs.js
+++ b/mail/base/content/specialTabs.js
@@ -103,16 +103,18 @@ tabProgressListener.prototype = {
         aWebProgress.isLoadingDocument &&
         !(this.mBrowser.docShell.loadType & Ci.nsIDocShell.LOAD_CMD_PUSHSTATE)
       ) {
         this.mBrowser.mIconURL = null;
       }
 
       var location = aLocationURI ? aLocationURI.spec : "";
       if (aLocationURI && !aLocationURI.schemeIs("about")) {
+        this.mTab.backButton.disabled = !this.mBrowser.canGoBack;
+        this.mTab.forwardButton.disabled = !this.mBrowser.canGoForward;
         this.mTab.urlbar.textContent = location;
         this.mTab.root.removeAttribute("collapsed");
       } else {
         this.mTab.root.setAttribute("collapsed", "false");
       }
 
       // Set the reload command only if this is a report that is coming in about
       // the top-level content location change.
@@ -859,18 +861,24 @@ var specialTabs = {
       }
       aTab.panel.setAttribute("id", "contentTabWrapper" + this.lastBrowserId);
       aTab.panel.appendChild(clone);
       aTab.root = clone;
 
       // Start setting up the browser.
       aTab.browser = aTab.panel.querySelector("browser");
       aTab.toolbar = aTab.panel.querySelector(".contentTabToolbar");
-      aTab.security = aTab.panel.querySelector(".contentTabSecurity");
-      aTab.urlbar = aTab.panel.querySelector(".contentTabUrlbar");
+      aTab.backButton = aTab.toolbar.querySelector(".back-btn");
+      aTab.backButton.addEventListener("command", () => aTab.browser.goBack());
+      aTab.forwardButton = aTab.toolbar.querySelector(".forward-btn");
+      aTab.forwardButton.addEventListener("command", () =>
+        aTab.browser.goForward()
+      );
+      aTab.security = aTab.toolbar.querySelector(".contentTabSecurity");
+      aTab.urlbar = aTab.toolbar.querySelector(".contentTabUrlbar");
       aTab.urlbar.textContent = aArgs.contentPage;
 
       ExtensionParent.apiManager.emit(
         "extension-browser-inserted",
         aTab.browser
       );
 
       // As we're opening this tab, showTab may not get called, so set
--- a/mail/themes/shared/mail/tabmail.css
+++ b/mail/themes/shared/mail/tabmail.css
@@ -395,8 +395,41 @@
 
 .contentTabAddress * {
   -moz-user-select: text;
 }
 
 .contentTabUrlbar {
   margin: 0;
 }
+
+.nav-button {
+  -moz-appearance: none;
+  list-style-image: url(chrome://messenger/skin/icons/navigation.svg);
+  border: 1px solid transparent;
+  border-radius: 2px;
+  margin: 5px 2px;
+  margin-inline-start: 2px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.nav-button[disabled="true"] {
+  color: inherit;
+}
+
+.nav-button[disabled="true"] > .toolbarbutton-icon {
+  opacity: 0.4;
+}
+
+.nav-button:not([disabled="true"]):hover {
+  background-color: #bebebe;
+  cursor: pointer;
+}
+
+.nav-button > .toolbarbutton-text {
+  display: none;
+}
+
+.back-btn:-moz-locale-dir(rtl),
+.forward-btn:-moz-locale-dir(ltr) {
+  transform: scaleX(-1);
+}