Bug 787683 - Add navigation buttons to the content tabs. r=darktrojan
authorRichard Marti <richard.marti@gmail.com> and Geoff Lankow <geoff@darktrojan.net>
Wed, 06 Nov 2019 13:31:55 +0100
changeset 36609 fb1c453eb2a0c2d475964d92019898fd3a8d2ee6
parent 36608 84b703945054180f18883e264044f1179eee89b1
child 36610 4ea36b60fe0fdb36f7a3a3d5917d92afdbdadc39
push id2534
push userclokep@gmail.com
push dateMon, 02 Dec 2019 19:52:51 +0000
treeherdercomm-beta@055c50840778 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdarktrojan
bugs787683
Bug 787683 - Add navigation buttons to the content tabs. r=darktrojan
mail/base/content/messenger.xul
mail/base/content/specialTabs.js
mail/locales/en-US/chrome/messenger/messenger.dtd
mail/themes/shared/mail/tabmail.css
--- a/mail/base/content/messenger.xul
+++ b/mail/base/content/messenger.xul
@@ -671,16 +671,22 @@
 #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"
+                           tooltiptext="&browseBackButton.tooltip;"
+                           disabled="true"/>
+            <toolbarbutton class="forward-btn nav-button"
+                           tooltiptext="&browseForwardButton.tooltip;"
+                           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/locales/en-US/chrome/messenger/messenger.dtd
+++ b/mail/locales/en-US/chrome/messenger/messenger.dtd
@@ -965,8 +965,12 @@
 <!ENTITY hideOtherAppsCmdMac.commandkey "H">
 <!ENTITY hideOtherAppsCmdMac.modifiers  "accel,alt">
 <!ENTITY showAllAppsCmdMac.label        "Show All">
 
 <!-- Mac OS X Dock Icon pop-up menu -->
 <!ENTITY dockOptions.label              "App Icon Options…">
 <!ENTITY writeNewMessageDock.label      "Write New Message">
 <!ENTITY openAddressBookDock.label      "Open Address Book">
+
+<!-- Content tab Navigation buttons -->
+<!ENTITY browseBackButton.tooltip    "Go back one page">
+<!ENTITY browseForwardButton.tooltip "Go forward one page">
--- 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);
+}