Bug 1470947 - Part 1: Remove visible tab indicator from all tabs menu r?dao
MozReview-Commit-ID: CliduvaGqUb
--- 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] {