Bug 1521881 - Back button for about:addons shortcuts and details views r=mixedpuppy,flod

Differential Revision: https://phabricator.services.mozilla.com/D17673

--HG--
extra : moz-landing-system : lando

toolkit/locales/en-US/toolkit/about/aboutAddons.ftl

@@ -294,3 +294,6 @@ shortcuts-modifier-other = Include Ctrl or Alt
 shortcuts-invalid = Invalid combination
 shortcuts-letter = Type a letter
 shortcuts-system = Can’t override a { -brand-short-name } shortcut
+
+go-back-button =
+    .tooltiptext = Go back

toolkit/mozapps/extensions/content/extensions.js

@@ -686,11 +686,13 @@ var gViewController = {
   viewChangeCallback: null,
   initialViewSelected: false,
   lastHistoryIndex: -1,
+  backButton: null,
 
   initialize() {
     this.viewPort = document.getElementById("view-port");
     this.headeredViews = document.getElementById("headered-views");
     this.headeredViewsDeck = document.getElementById("headered-views-content");
+    this.backButton = document.getElementById("go-back");
 
     this.viewObjects.discover = gDiscoverView;
     this.viewObjects.list = gListView;
@@ -872,6 +874,8 @@ var gViewController = {
       this.currentViewObj.refresh(view.param, ++this.currentViewRequest, aState);
     else
       this.currentViewObj.show(view.param, ++this.currentViewRequest, aState);
+
+    this.backButton.hidden = this.currentViewObj.isRoot || !gHistory.canGoBack;
   },
 
   // Moves back in the document history and removes the current history entry
@@ -2009,6 +2013,7 @@ var gDiscoverView = {
   homepageURL: null,
   _loadListeners: [],
   hideHeader: true,
+  isRoot: true,
 
   get clientIdDiscoveryEnabled() {
     // These prefs match Discovery.jsm for enabling clientId cookies.
@@ -2290,6 +2295,7 @@ var gLegacyView = {
   node: null,
   _listBox: null,
   _categoryItem: null,
+  isRoot: true,
 
   initialize() {
     this.node = document.getElementById("legacy-view");
@@ -2388,6 +2394,7 @@ var gListView = {
   _listBox: null,
   _emptyNotice: null,
   _type: null,
+  isRoot: true,
 
   initialize() {
     this.node = document.getElementById("list-view");
@@ -2637,6 +2644,7 @@ var gDetailView = {
   _addon: null,
   _loadingTimer: null,
   _autoUpdate: null,
+  isRoot: false,
 
   initialize() {
     this.node = document.getElementById("detail-view");
@@ -3309,6 +3317,7 @@ var gUpdatesView = {
   _emptyNotice: null,
   _updateSelected: null,
   _categoryItem: null,
+  isRoot: true,
 
   initialize() {
     this.node = document.getElementById("updates-view");
@@ -3522,6 +3531,7 @@ var gUpdatesView = {
 var gShortcutsView = {
   node: null,
   loaded: null,
+  isRoot: false,
 
   initialize() {
     this.node = document.getElementById("shortcuts-view");

toolkit/mozapps/extensions/content/extensions.xul

@@ -231,6 +231,10 @@
 
           <hbox id="heading">
             <hbox class="heading-inner" align="stretch">
+              <hbox id="go-back-wrapper">
+                <button id="go-back" command="cmd_back" data-l10n-id="go-back-button" hidden="true"/>
+              </hbox>
+
               <label id="heading-name" class="header-name" flex="1"/>
 
               <hbox id="updates-container" align="center">

toolkit/themes/shared/extensions/extensions.inc.css

@@ -250,6 +250,7 @@ button.warning {
   }
 }
 
+#go-back,
 #header-utils-btn {
   -moz-context-properties: fill;
   fill: currentColor;
@@ -269,15 +270,37 @@ button.warning {
   margin-inline-end: 1px; /* Match the 1px margin-inline-start on the icon. */
 }
 
+#go-back > .button-box > .button-text,
 #header-utils-btn > .button-box > hbox > .button-text {
   display: none;
 }
 
+#go-back {
+  margin-inline-start: 0;
+  margin-inline-end: 16px;
+}
+
+#go-back > .button-box > .button-icon {
+  list-style-image: url("chrome://global/skin/icons/calendar-arrow-left.svg");
+  margin: 0;
+}
+
+#go-back > .button-box > .button-icon:-moz-locale-dir(rtl) {
+  list-style-image: url("chrome://global/skin/icons/calendar-arrow-right.svg");
+}
+
 #heading {
-  margin-top: 26px;
+  /* This should be margin-top: 26px to match preferences, but we want to lower
+   * .header-name to be closer to centre with the buttons. */
+  margin-top: 21px;
   margin-bottom: 16px;
 }
 
+.header-name {
+  /* Add some top margin to try to centre the heading next to the back button. */
+  margin-top: 5px;
+}
+
 .heading-inner {
   width: 664px;
   margin-inline-start: 28px;