Commit aa7d5770 authored by Dão Gottwald's avatar Dão Gottwald
Browse files

Bug 1918676 - Disable tab opening / closing animations and tab size locking in... 

Bug 1918676 - Disable tab opening / closing animations and tab size locking in vertical mode, properly set --tab-min-width rather than overriding min-width in vertical mode, and restrict some styles to horizontal mode. r=sidebar-reviewers,desktop-theme-reviewers,tabbrowser-reviewers,emilio,kcochrane,sclements,dwalker

Differential Revision: https://phabricator.services.mozilla.com/D222202
parent 1731f1fc

browser/components/sidebar/browser-sidebar.js

+2 −12
Original line number Diff line number Diff line
@@ -1519,7 +1519,8 @@ var SidebarController = { 


  toggleTabstrip() {

    let toVerticalTabs = CustomizableUI.verticalTabsEnabled;

    let arrowScrollbox = gBrowser.tabContainer.arrowScrollbox;

    let tabStrip = gBrowser.tabContainer;

    let arrowScrollbox = tabStrip.arrowScrollbox;

    let currentScrollOrientation = arrowScrollbox.getAttribute("orient");



    if (
@@ -1530,7 +1531,6 @@ var SidebarController = { 
      return;

    }



    let tabStrip = gBrowser.tabContainer;

    if (toVerticalTabs) {

      this.toggleExpanded(this._sidebarMain.expanded);

      arrowScrollbox.setAttribute("orient", "vertical");
@@ -1544,16 +1544,6 @@ var SidebarController = { 
    let verticalToolbar = document.getElementById(

      CustomizableUI.AREA_VERTICAL_TABSTRIP

    );

    let indicatorTabs = gBrowser.visibleTabs.filter(tab => {

      return (

        tab.hasAttribute("soundplaying") ||

        tab.hasAttribute("muted") ||

        tab.hasAttribute("activemedia-blocked")

      );

    });

    for (const indicatorTab of indicatorTabs) {

      tabStrip.updateTabIndicatorAttr(indicatorTab);

    }

    verticalToolbar.toggleAttribute("visible", toVerticalTabs);

  },

};

browser/components/tabbrowser/content/tabbrowser.js

+9 −6
Original line number Diff line number Diff line
@@ -2751,7 +2751,8 @@ 
      let animate =

        !skipAnimation &&

        !pinned &&

        this.tabContainer.getAttribute("overflow") != "true" &&

        !this.tabContainer.verticalMode &&

        !this.tabContainer.overflowing &&

        !gReduceMotion;



      let uriInfo = this._determineURIToLoad(uriString, createLazyBrowser);
@@ -4160,11 +4161,12 @@ 
      }



      let lockTabSizing =

        !aTab.pinned &&

        !this.tabContainer.verticalMode ||

        (!aTab.pinned &&

          !aTab.hidden &&

          aTab._fullyOpen &&

          triggeringEvent?.inputSource == MouseEvent.MOZ_SOURCE_MOUSE &&

        triggeringEvent?.target.closest(".tabbrowser-tab");

          triggeringEvent?.target.closest(".tabbrowser-tab"));

      if (lockTabSizing) {

        this.tabContainer._lockTabSizing(aTab, tabWidth);

      } else {
@@ -4177,6 +4179,7 @@ 
        isLastTab ||

        aTab.pinned ||

        aTab.hidden ||

        this.tabContainer.verticalMode ||

        this._removingTabs.size >

          3 /* don't want lots of concurrent animations */ ||

        !aTab.hasAttribute(

browser/components/tabbrowser/content/tabs.js

+29 −5
Original line number Diff line number Diff line
@@ -115,14 +115,13 @@ 
        "_tabMinWidthPref",

        "browser.tabs.tabMinWidth",

        null,

        (pref, prevValue, newValue) => (this._tabMinWidth = newValue),

        (pref, prevValue, newValue) => this.#updateTabMinWidth(newValue),

        newValue => {

          const LIMIT = 50;

          return Math.max(newValue, LIMIT);

        }

      );



      this._tabMinWidth = this._tabMinWidthPref;

      this.#updateTabMinWidth(this._tabMinWidthPref);



      CustomizableUI.addListener(this);

      this._updateNewTabVisibility();
@@ -158,6 +157,19 @@ 
      }

      this._positionPinnedTabs();



      this.#updateTabMinWidth();



      let indicatorTabs = gBrowser.visibleTabs.filter(tab => {

        return (

          tab.hasAttribute("soundplaying") ||

          tab.hasAttribute("muted") ||

          tab.hasAttribute("activemedia-blocked")

        );

      });

      for (const indicatorTab of indicatorTabs) {

        this.updateTabIndicatorAttr(indicatorTab);

      }



      super.attributeChangedCallback(name, oldValue, newValue);

    }
@@ -1326,8 +1338,16 @@ 
      return node.before(tab);

    }



    set _tabMinWidth(val) {

      this.style.setProperty("--tab-min-width", val + "px");

    #updateTabMinWidth(val) {

      const minWidthVariable = "--tab-min-width";

      if (this.verticalMode) {

        this.style.removeProperty(minWidthVariable);

      } else {

        this.style.setProperty(

          minWidthVariable,

          (val ?? this._tabMinWidthPref) + "px"

        );

      }

    }



    get _isCustomizing() {
@@ -1474,6 +1494,10 @@ 
     * Try to keep the active tab's close button under the mouse cursor

     */

    _lockTabSizing(aTab, aTabWidth) {

      if (this.verticalMode) {

        return;

      }



      let tabs = this._getVisibleTabs();

      if (!tabs.length) {

        return;

browser/themes/shared/tabbrowser/tabs.css

+25 −20
Original line number Diff line number Diff line
@@ -50,14 +50,21 @@ 
}



#tabbrowser-tabs {

  --tab-min-width: 76px;

  --tab-overflow-pinned-tabs-width: 0px;

  padding-inline: var(--tab-overflow-pinned-tabs-width) 0;

  /* Use a bigger flex value than the searchbar to prevent it from

   * taking all the toolbar space. */

  flex: 1000 1000;



  &[orient="horizontal"][positionpinnedtabs] > #tabbrowser-arrowscrollbox::part(scrollbox) {

  &[orient="horizontal"] {

    --tab-overflow-pinned-tabs-width: 0px;

    padding-inline: var(--tab-overflow-pinned-tabs-width) 0;



    --tab-min-width: 76px;

    :root[uidensity="touch"] & {

      /* Touch mode needs additional space for the close button. */

      --tab-min-width: 86px;

    }



    &[positionpinnedtabs] > #tabbrowser-arrowscrollbox::part(scrollbox) {

      /* Add padding to match the shadow's blur radius so the

         shadow doesn't get clipped when either the first or

         last tab is selected */
@@ -70,6 +77,7 @@ 
      margin-bottom: -15px;

    }

  }

}



#navigator-toolbox[movingtab] > #nav-bar {

  pointer-events: none;
@@ -120,11 +128,6 @@ 
    min-width: var(--tab-min-width);

    transition: min-width 100ms ease-out,

                max-width 100ms ease-out;



    :root[uidensity=touch] & {

      /* Touch mode needs additional space for the close button. */

      min-width: calc(var(--tab-min-width) + 10px);

    }

  }



  &:not([pinned], [fadein]) {
@@ -872,6 +875,7 @@ tab-group { 
  flex-direction: column;

  align-content: flex-start;

  grid-gap: var(--space-small);

  padding: 0; /* override tabbox.css on macOS */



  &[overflow] {

    border-bottom: var(--tabstrip-inner-border);
@@ -892,8 +896,9 @@ tab-group { 
  }



  &:not([expanded]) {

    --tab-min-width: inherit;



    .tabbrowser-tab {

      min-width: inherit;

      width: var(--collapsed-tab-width);

      flex: none;

    }
@@ -904,10 +909,10 @@ tab-group { 
  }



  &[expanded] {

    --tab-min-width: calc(100% - var(--space-medium));

    --tab-icon-end-margin: 7.5px;



    .tabbrowser-tab {

      min-width: calc(100% - var(--space-medium));

      flex: none;

      max-width: none;

      padding: 0;