Bug 1470947 - Part 1: Remove visible tab indicator from all tabs menu r?dao draft
authorMark Striemer <mstriemer@mozilla.com>
Mon, 25 Jun 2018 11:30:07 -0400
changeset 819909 8b9e9e570b7e2a168cec6948a67507c0b862282c
parent 819908 ee47b3edea9199a1ef1450d62ca77ad68ae16d7b
child 819910 26ee62cf23bae12ce9d1766c68663665ba99eb8b
push id116685
push userbmo:mstriemer@mozilla.com
push dateWed, 18 Jul 2018 18:52:47 +0000
reviewersdao
bugs1470947
milestone63.0a1
Bug 1470947 - Part 1: Remove visible tab indicator from all tabs menu r?dao MozReview-Commit-ID: CliduvaGqUb
browser/base/content/browser-allTabsMenu.js
browser/modules/TabsList.jsm
browser/themes/shared/tabs.inc.css
--- a/browser/base/content/browser-allTabsMenu.js
+++ b/browser/base/content/browser-allTabsMenu.js
@@ -40,37 +40,16 @@ var gTabsPanel = {
       view: this.allTabsView,
       insertBefore: hiddenTabsSeparator,
       filterFn: (tab) => tab.hidden && tab.soundPlaying,
     });
     this.allTabsPanel = new TabsPanel({
       view: this.allTabsView,
       containerNode: this.allTabsViewTabs,
       filterFn: (tab) => !tab.pinned && !tab.hidden,
-      onPopulate() {
-        // Set the visible tab status.
-        let tabContainer = gBrowser.tabContainer;
-        // We don't want menu item decoration unless there is overflow.
-        if (tabContainer.getAttribute("overflow") != "true") {
-          return;
-        }
-
-        let windowUtils = window.QueryInterface(Ci.nsIInterfaceRequestor)
-                                .getInterface(Ci.nsIDOMWindowUtils);
-        let arrowScrollboxRect = windowUtils.getBoundsWithoutFlushing(tabContainer.arrowScrollbox);
-        for (let row of this.rows) {
-          let curTabRect = windowUtils.getBoundsWithoutFlushing(row.tab);
-          if (curTabRect.left >= arrowScrollboxRect.left &&
-              curTabRect.right <= arrowScrollboxRect.right) {
-            row.setAttribute("tabIsVisible", "true");
-          } else {
-            row.removeAttribute("tabIsVisible");
-          }
-        }
-      },
     });
 
     let containerTabsButton = this.allTabsView.querySelector(".container-tabs-button");
     let containerTabsSeparator = this.allTabsView.querySelector(".container-tabs-separator");
     this.allTabsView.addEventListener("ViewShowing", (e) => {
       PanelUI._ensureShortcutsShown(this.allTabsView);
       e.target.querySelector(".undo-close-tab").disabled =
           SessionStore.getClosedTabCount(window) == 0;
--- a/browser/modules/TabsList.jsm
+++ b/browser/modules/TabsList.jsm
@@ -16,21 +16,20 @@ function setAttributes(element, attrs) {
       element.setAttribute(name, value);
     } else {
       element.removeAttribute(name);
     }
   }
 }
 
 class TabsListBase {
-  constructor({className, filterFn, insertBefore, onPopulate, containerNode}) {
+  constructor({className, filterFn, insertBefore, containerNode}) {
     this.className = className;
     this.filterFn = filterFn;
     this.insertBefore = insertBefore;
-    this.onPopulate = onPopulate;
     this.containerNode = containerNode;
 
     this.doc = containerNode.ownerDocument;
     this.gBrowser = this.doc.defaultView.gBrowser;
     this.tabToElement = new Map();
     this.listenersRegistered = false;
   }
 
@@ -82,20 +81,16 @@ class TabsListBase {
 
     if (this.insertBefore) {
       this.insertBefore.parentNode.insertBefore(fragment, this.insertBefore);
     } else {
       this.containerNode.appendChild(fragment);
     }
 
     this._setupListeners();
-
-    if (typeof this.onPopulate == "function") {
-      this.onPopulate(event);
-    }
   }
 
   /*
    * Remove the menuitems from the DOM, cleanup internal state and listeners.
    */
   _cleanup() {
     for (let item of this.rows) {
       item.remove();
@@ -146,22 +141,16 @@ const TABS_PANEL_EVENTS = {
   hide: "PanelMultiViewHidden",
 };
 
 class TabsPanel extends TabsListBase {
   constructor(opts) {
     super({
       ...opts,
       containerNode: opts.containerNode || opts.view.firstChild,
-      onPopulate: (...args) => {
-        this._onPopulate(...args);
-        if (typeof opts.onPopulate == "function") {
-          opts.onPopulate.call(this, ...args);
-        }
-      },
     });
     this.view = opts.view;
     this.view.addEventListener(TABS_PANEL_EVENTS.show, this);
     this.panelMultiView = null;
   }
 
   handleEvent(event) {
     switch (event.type) {
@@ -183,19 +172,21 @@ class TabsPanel extends TabsListBase {
           break;
         }
       default:
         super.handleEvent(event);
         break;
     }
   }
 
-  _onPopulate(event) {
+  _populate(event) {
+    super._populate(event);
+
     // The loading throbber can't be set until the toolbarbutton is rendered,
-    // so do that on first populate.
+    // so set the image attributes again now that the elements are in the DOM.
     for (let row of this.rows) {
       this._setImageAttributes(row, row.tab);
     }
   }
 
   _selectTab(tab) {
     super._selectTab(tab);
     PanelMultiView.hidePopup(this.view.closest("panel"));
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -784,22 +784,19 @@
   display: block;
   margin-inline-end: 0;
 }
 
 .all-tabs-item[selected] {
   box-shadow: inset 4px 0 var(--blue-40);
 }
 
-.all-tabs-item[tabIsVisible] {
-  box-shadow: inset -4px 0 ThreeDShadow;
-}
-
-.all-tabs-item[selected][tabIsVisible] {
-  box-shadow: inset -4px 0 ThreeDShadow, inset 4px 0 var(--blue-40);
+.all-tabs-button,
+.all-tabs-secondary-button {
+  background-color: transparent !important;
 }
 
 .all-tabs-secondary-button > label {
   display: none;
   margin: 0 5.5px;
 }
 
 .all-tabs-secondary-button[soundplaying] {