Bug 1356920 - Don't calculate and flush layout inside browser-tabsintitlebar.js. r=dao
authorMike Conley <mconley@mozilla.com>
Thu, 25 Oct 2018 12:03:14 -0400
changeset 444650 e354a018b703c453e8afcda1f44f1d51456536f5
parent 444649 1ab00b6e99fd65b651381c235f1ae95ed746e57a
child 444651 5690f5bfcd08ac11e0fd151a4f191d9f05ccf873
push id35000
push userdvarga@mozilla.com
push dateTue, 06 Nov 2018 21:59:20 +0000
treeherdermozilla-central@6e842238034c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1356920
milestone65.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1356920 - Don't calculate and flush layout inside browser-tabsintitlebar.js. r=dao Folded together the following revisions: Bug 1356920 - Remove all toolbar layout code from browser-tabsintitlebar. r=dao Differential Revision: https://phabricator.services.mozilla.com/D7805 *** Bug 1356920 - Move TabsToolbar and toolbar-menubar into the titlebar, and put the titlebar into the navigator-toolbox. r=dao Differential Revision: https://phabricator.services.mozilla.com/D7806 *** Bug 1356920 - Put a spacer in the menubar to push titlebar items to the end, and stop the menu from stretching vertically. r=dao Differential Revision: https://phabricator.services.mozilla.com/D7822 *** Bug 1356920 - Adjust CSS rules for new XUL document structure. r=dao Differential Revision: https://phabricator.services.mozilla.com/D7807 *** Bug 1356920 - Fix placement of tracking protection icon. r=dao Differential Revision: https://phabricator.services.mozilla.com/D7808 *** Bug 1356920 - Get rid of the spacer before the window caption buttons now in the TabsToolbar. r=dao The spacer isn't necessary, since the tabbrowser-tabs node will flex to fill the available space anyways. Differential Revision: https://phabricator.services.mozilla.com/D7809 *** Bug 1356920 - Move movingtab attribute to navigator-toolbox to account for TabsToolbar not being a sibling of nav-bar anymore. r=dao Differential Revision: https://phabricator.services.mozilla.com/D7810 *** Bug 1356920 - Hide the window caption buttons hbox if the native titlebar is being drawn. r=dao Differential Revision: https://phabricator.services.mozilla.com/D7811 *** Bug 1356920 - Keep the macOS window caption buttons vertically centered when drag space is enabled. r=dao Differential Revision: https://phabricator.services.mozilla.com/D7812 *** Bug 1356920 - Switch window caption XUL nodes from IDs to classes so that more than one can exist per doc. r=dao Differential Revision: https://phabricator.services.mozilla.com/D7813 *** Bug 1356920 - Move titlebar items out into a preprocessed file to be included at build-time. r=dao Differential Revision: https://phabricator.services.mozilla.com/D7814 *** Bug 1356920 - Reorganize TabsToolbar contents to force most items to the bottom of it. r=dao Differential Revision: https://phabricator.services.mozilla.com/D9669 *** Bug 1356920 - Update CSS to account for new DOM structure under TabsToolbar. r=dao Differential Revision: https://phabricator.services.mozilla.com/D9670 *** Bug 1356920 - Fix titlebar button rendering when using a lwtheme without the Windows compositor. r=dao Differential Revision: https://phabricator.services.mozilla.com/D9671 *** Bug 1356920 - Put an ordinal rule on the window caption buttons to help ensure they stay at the end of the toolbar. r=dao This is to ensure that the buttons are placed after the post-tabs titlebar placeholder. Differential Revision: https://phabricator.services.mozilla.com/D7815 *** Bug 1356920 - Stretch window caption buttons to fill vertical space on Windows 8+ when using extra drag space. r=dao Differential Revision: https://phabricator.services.mozilla.com/D7817 *** Bug 1356920 - Update onViewToolbarsPopupShowing to search for toolbars that are grandchildren of the toolbox. r?jaws Differential Revision: https://phabricator.services.mozilla.com/D7818 *** Bug 1356920 - Hide the titlebar items in the TabsToolbar if the menubar is being displayed. r=dao Differential Revision: https://phabricator.services.mozilla.com/D7825 *** Bug 1356920 - Fix selector for titlebar. r=dao Differential Revision: https://phabricator.services.mozilla.com/D7826 *** Bug 1356920 - Fix titlebar themeing on Linux. r=dao Differential Revision: https://phabricator.services.mozilla.com/D7828 *** Bug 1356920 - Remove browser-tabsintitlebar layout flushes from performance test whitelist. r?florian Differential Revision: https://phabricator.services.mozilla.com/D7829 *** Bug 1356920 - Fix bottom border of tabbar to account for new DOM structure. r=dao Differential Revision: https://phabricator.services.mozilla.com/D7830 *** Bug 1356920 - Hide the titlebar-buttonbox-container when in fullscreen mode. r=dao Differential Revision: https://phabricator.services.mozilla.com/D7833
browser/base/content/browser-tabsintitlebar.js
browser/base/content/browser.css
browser/base/content/browser.js
browser/base/content/browser.xul
browser/base/content/tabbrowser.js
browser/base/content/tabbrowser.xml
browser/base/content/test/performance/browser_windowopen.js
browser/base/content/titlebar-items.inc.xul
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/osx/compacttheme.css
browser/themes/shared/identity-block/identity-block.inc.css
browser/themes/shared/tabs.inc.css
browser/themes/shared/toolbarbuttons.inc.css
browser/themes/windows/browser-aero.css
browser/themes/windows/browser.css
browser/themes/windows/compacttheme.css
toolkit/themes/windows/global/toolbarbutton.css
--- a/browser/base/content/browser-tabsintitlebar.js
+++ b/browser/base/content/browser-tabsintitlebar.js
@@ -3,54 +3,21 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 var TabsInTitlebar = {
   init() {
     this._readPref();
     Services.prefs.addObserver(this._prefName, this);
 
-    // We need to update the appearance of the titlebar when the menu changes
-    // from the active to the inactive state. We can't, however, rely on
-    // DOMMenuBarInactive, because the menu fires this event and then removes
-    // the inactive attribute after an event-loop spin.
-    //
-    // Because updating the appearance involves sampling the heights and margins
-    // of various elements, it's important that the layout be more or less
-    // settled before updating the titlebar. So instead of listening to
-    // DOMMenuBarActive and DOMMenuBarInactive, we use a MutationObserver to
-    // watch the "invalid" attribute directly.
-    let menu = document.getElementById("toolbar-menubar");
-    this._menuObserver = new MutationObserver(this._onMenuMutate);
-    this._menuObserver.observe(menu, {attributes: true});
-
-    this.onAreaReset = function(aArea) {
-      if (aArea == CustomizableUI.AREA_TABSTRIP || aArea == CustomizableUI.AREA_MENUBAR)
-        this.update();
-    };
-    this.onWidgetAdded = this.onWidgetRemoved = function(aWidgetId, aArea) {
-      if (aArea == CustomizableUI.AREA_TABSTRIP || aArea == CustomizableUI.AREA_MENUBAR)
-        this.update();
-    };
-    CustomizableUI.addListener(this);
-
-    window.addEventListener("resolutionchange", this);
-    window.addEventListener("resize", this);
-
     gDragSpaceObserver.init();
-
     this._initialized = true;
     this.update();
   },
 
-  whenWindowLayoutReady() {
-    this._windowLayoutReady = true;
-    this.update();
-  },
-
   allowedBy(condition, allow) {
     if (allow) {
       if (condition in this._disallowed) {
         delete this._disallowed[condition];
         this.update();
       }
     } else if (!(condition in this._disallowed)) {
       this._disallowed[condition] = null;
@@ -77,64 +44,19 @@ var TabsInTitlebar = {
     return document.documentElement.getAttribute("tabsintitlebar") == "true";
   },
 
   observe(subject, topic, data) {
     if (topic == "nsPref:changed")
       this._readPref();
   },
 
-  handleEvent(aEvent) {
-    switch (aEvent.type) {
-      case "resolutionchange":
-        if (aEvent.target == window) {
-          this.update();
-        }
-        break;
-      case "resize":
-        if (window.fullScreen || aEvent.target != window) {
-           break;
-        }
-        // We use resize events because the window is not ready after
-        // sizemodechange events. However, we only care about the event when
-        // the sizemode is different from the last time we updated the
-        // appearance of the tabs in the titlebar.
-        let sizemode = document.documentElement.getAttribute("sizemode");
-        if (this._lastSizeMode == sizemode) {
-          break;
-        }
-        let oldSizeMode = this._lastSizeMode;
-        this._lastSizeMode = sizemode;
-        // Don't update right now if we are leaving fullscreen, since the UI is
-        // still changing in the consequent "fullscreen" event. Code there will
-        // call this function again when everything is ready.
-        // See browser-fullScreen.js: FullScreen.toggle and bug 1173768.
-        if (oldSizeMode == "fullscreen") {
-          break;
-        }
-        this.update();
-        break;
-    }
-  },
-
-  _onMenuMutate(aMutations) {
-    for (let mutation of aMutations) {
-      if (mutation.attributeName == "inactive" ||
-          mutation.attributeName == "autohide") {
-        TabsInTitlebar.update();
-        return;
-      }
-    }
-  },
-
   _initialized: false,
-  _windowLayoutReady: false,
   _disallowed: {},
   _prefName: "browser.tabs.drawInTitlebar",
-  _lastSizeMode: null,
 
   _readPref() {
     this.allowedBy("pref",
                    Services.prefs.getBoolPref(this._prefName));
   },
 
   update() {
     if (!this._initialized || window.fullScreen) {
@@ -154,158 +76,21 @@ var TabsInTitlebar = {
     } else {
       document.documentElement.removeAttribute("tabsintitlebar");
       document.documentElement.removeAttribute("chromemargin");
       if (AppConstants.platform == "macosx") {
         document.documentElement.setAttribute("drawtitle", "true");
       }
     }
 
-    this._layOutTitlebar(allowed);
-
     ToolbarIconColor.inferFromText("tabsintitlebar", allowed);
   },
 
-  _layOutTitlebar(drawInTitlebar) {
-    if (!this._windowLayoutReady) {
-      return;
-    }
-
-    let $ = id => document.getElementById(id);
-    let rect = ele => ele.getBoundingClientRect();
-    let verticalMargins = cstyle => parseFloat(cstyle.marginBottom) + parseFloat(cstyle.marginTop);
-
-    let titlebar = $("titlebar");
-    let menubar = $("toolbar-menubar");
-
-    if (!drawInTitlebar) {
-      if (AppConstants.platform == "macosx") {
-        let secondaryButtonsWidth = rect($("titlebar-secondary-buttonbox")).width;
-        this._sizePlaceholder("fullscreen-button", secondaryButtonsWidth);
-      }
-
-      // Reset styles that might have been modified:
-      titlebar.style.marginBottom = "";
-      menubar.style.paddingBottom = "";
-      return;
-    }
-
-    let titlebarContent = $("titlebar-content");
-    let titlebarButtons = $("titlebar-buttonbox");
-
-    // Reset the custom titlebar height if the menubar is shown,
-    // because we will want to calculate its original height.
-    let buttonsShouldMatchTabHeight =
-      AppConstants.isPlatformAndVersionAtLeast("win", "10.0") ||
-      AppConstants.platform == "linux";
-    if (buttonsShouldMatchTabHeight &&
-        (menubar.getAttribute("inactive") != "true" ||
-         menubar.getAttribute("autohide") != "true")) {
-      titlebarButtons.style.removeProperty("height");
-    }
-
-    // Try to avoid reflows in this code by calculating dimensions first and
-    // then later set the properties affecting layout together in a batch.
-
-    // Get the height of the tabs toolbar:
-    let fullTabsHeight = rect($("TabsToolbar")).height;
-
-    // Buttons first:
-    let captionButtonsBoxWidth = rect(titlebarButtons).width;
-
-    let secondaryButtonsWidth, menuHeight, fullMenuHeight, menuStyles;
-    if (AppConstants.platform == "macosx") {
-      secondaryButtonsWidth = rect($("titlebar-secondary-buttonbox")).width;
-      // No need to look up the menubar stuff on OS X:
-      menuHeight = 0;
-      fullMenuHeight = 0;
-    } else {
-      // Otherwise, get the height and margins separately for the menubar
-      menuHeight = rect(menubar).height;
-      menuStyles = window.getComputedStyle(menubar);
-      fullMenuHeight = verticalMargins(menuStyles) + menuHeight;
-    }
-
-    // And get the height of what's in the titlebar:
-    let titlebarContentHeight = rect(titlebarContent).height;
-
-    // Begin setting CSS properties which will cause a reflow
-
-    // Adjust the window controls to span the entire
-    // tab strip height if we're not showing a menu bar.
-    if (buttonsShouldMatchTabHeight && !menuHeight) {
-      titlebarContentHeight = fullTabsHeight;
-      titlebarButtons.style.height = titlebarContentHeight + "px";
-    }
-
-    // If the menubar is around (menuHeight is non-zero), try to adjust
-    // its full height (i.e. including margins) to match the titlebar,
-    // by changing the menubar's bottom padding
-    if (menuHeight) {
-      // Calculate the difference between the titlebar's height and that of the menubar
-      let menuTitlebarDelta = titlebarContentHeight - fullMenuHeight;
-      let paddingBottom;
-      // The titlebar is bigger:
-      if (menuTitlebarDelta > 0) {
-        fullMenuHeight += menuTitlebarDelta;
-        // If there is already padding on the menubar, we need to add that
-        // to the difference so the total padding is correct:
-        if ((paddingBottom = menuStyles.paddingBottom)) {
-          menuTitlebarDelta += parseFloat(paddingBottom);
-        }
-        menubar.style.paddingBottom = menuTitlebarDelta + "px";
-      // The menubar is bigger, but has bottom padding we can remove:
-      } else if (menuTitlebarDelta < 0 && (paddingBottom = menuStyles.paddingBottom)) {
-        let existingPadding = parseFloat(paddingBottom);
-        // menuTitlebarDelta is negative; work out what's left, but don't set negative padding:
-        let desiredPadding = Math.max(0, existingPadding + menuTitlebarDelta);
-        menubar.style.paddingBottom = desiredPadding + "px";
-        // We've changed the menu height now:
-        fullMenuHeight += desiredPadding - existingPadding;
-      }
-    }
-
-    // Next, we calculate how much we need to stretch the titlebar down to
-    // go all the way to the bottom of the tab strip, if necessary.
-    let tabAndMenuHeight = fullTabsHeight + fullMenuHeight;
-
-    if (tabAndMenuHeight > titlebarContentHeight) {
-      // We need to increase the titlebar content's outer height (ie including margins)
-      // to match the tab and menu height:
-      let extraMargin = tabAndMenuHeight - titlebarContentHeight;
-      if (AppConstants.platform != "macosx") {
-        titlebarContent.style.marginBottom = extraMargin + "px";
-      }
-
-      titlebarContentHeight += extraMargin;
-    } else {
-      titlebarContent.style.removeProperty("margin-bottom");
-    }
-
-    // Then add a negative margin to the titlebar, so that the following elements
-    // will overlap it by the greater of the titlebar height or the tabstrip+menu.
-    let maxTitlebarOrTabsHeight = Math.max(titlebarContentHeight, tabAndMenuHeight);
-    titlebar.style.marginBottom = "-" + maxTitlebarOrTabsHeight + "px";
-
-    // Finally, size the placeholders:
-    if (AppConstants.platform == "macosx") {
-      this._sizePlaceholder("fullscreen-button", secondaryButtonsWidth);
-    }
-    this._sizePlaceholder("caption-buttons", captionButtonsBoxWidth);
-  },
-
-  _sizePlaceholder(type, width) {
-    Array.forEach(document.querySelectorAll(".titlebar-placeholder[type='" + type + "']"),
-                  function(node) { node.style.width = width + "px"; });
-  },
-
   uninit() {
     Services.prefs.removeObserver(this._prefName, this);
-    this._menuObserver.disconnect();
-    CustomizableUI.removeListener(this);
     gDragSpaceObserver.uninit();
   },
 };
 
 function onTitlebarMaxClick() {
   if (window.windowState == window.STATE_MAXIMIZED)
     window.restore();
   else
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -84,16 +84,17 @@ toolbar[customizable="true"] {
   height: 0 !important;
   -moz-appearance: none !important;
 }
 %endif
 
 %ifdef XP_MACOSX
 #toolbar-menubar {
   -moz-binding: none;
+  visibility: collapse;
 }
 %endif
 
 panelmultiview {
   -moz-box-align: start;
 }
 
 panelmultiview[transitioning] {
@@ -148,17 +149,17 @@ panelview[mainview] > .panel-header {
   }
 }
 
 
 #tabbrowser-tabs:not([overflow="true"]):not([hashiddentabs]) ~ #alltabs-button,
 #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow="true"]) ~ #new-tab-button,
 #tabbrowser-tabs[overflow="true"] > .tabbrowser-arrowscrollbox > .tabs-newtab-button,
 #tabbrowser-tabs:not([hasadjacentnewtabbutton]) > .tabbrowser-arrowscrollbox > .tabs-newtab-button,
-#TabsToolbar[customizing="true"] > #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .tabs-newtab-button {
+#TabsToolbar[customizing="true"] #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .tabs-newtab-button {
   visibility: collapse;
 }
 
 #tabbrowser-tabs:not([overflow="true"])[using-closing-tabs-spacer] ~ #alltabs-button {
   visibility: hidden; /* temporary space to keep a tab's close button under the cursor */
 }
 
 .tabbrowser-tab {
@@ -235,26 +236,26 @@ panelview[mainview] > .panel-header {
 }
 
 .tabbrowser-tab[tab-grouping][multiselected]:not([selected]) {
   z-index: 2;
 }
 
 /* The next 3 rules allow dragging tabs slightly outside of the tabstrip
  * to make it easier to drag tabs. */
-#TabsToolbar[movingtab] {
+#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
   padding-bottom: 15px;
 }
 
-#TabsToolbar[movingtab] > #tabbrowser-tabs {
+#navigator-toolbox[movingtab] #tabbrowser-tabs {
   padding-bottom: 15px;
   margin-bottom: -15px;
 }
 
-#TabsToolbar[movingtab] + #nav-bar {
+#navigator-toolbox[movingtab] > #nav-bar {
   margin-top: -15px;
   pointer-events: none;
 }
 
 /* Allow dropping a tab on buttons with associated drop actions. */
 #TabsToolbar[movingtab] + #nav-bar > #nav-bar-customization-target > #personal-bookmarks,
 #TabsToolbar[movingtab] + #nav-bar > #nav-bar-customization-target > #home-button,
 #TabsToolbar[movingtab] + #nav-bar > #nav-bar-customization-target > #downloads-button,
@@ -281,69 +282,81 @@ window:not([chromehidden~="toolbar"]) #n
  */
 #widget-overflow-list:empty + #widget-overflow-fixed-separator,
 #widget-overflow:not([hasfixeditems]) #widget-overflow-fixed-separator {
   display: none;
 }
 
 
 %ifdef MENUBAR_CAN_AUTOHIDE
-#toolbar-menubar:not([autohide=true]) + #TabsToolbar > .titlebar-placeholder,
+#toolbar-menubar:not([autohide=true]) + #TabsToolbar > .titlebar-item,
+#toolbar-menubar:not([autohide=true]) + #TabsToolbar .titlebar-placeholder,
 %endif
 %ifndef MOZ_WIDGET_COCOA
 #main-window:not([sizemode=normal]) .titlebar-placeholder[type="pre-tabs"],
 %endif
-#main-window:not([chromemargin]) > #titlebar,
-#main-window[inFullscreen] > #titlebar,
+#main-window:not([chromemargin]) .titlebar-buttonbox-container,
+#main-window[inFullscreen] .titlebar-buttonbox-container,
 #main-window[inFullscreen] .titlebar-placeholder,
 #main-window:not([tabsintitlebar]) .titlebar-placeholder {
   display: none;
 }
 
+%ifdef MENUBAR_CAN_AUTOHIDE
+#toolbar-menubar[autohide=true]:not([inactive]) + #TabsToolbar > .titlebar-buttonbox-container {
+  visibility: hidden;
+}
+%endif
+
 #titlebar {
   -moz-window-dragging: drag;
 }
 
-#titlebar-spacer {
-  pointer-events: none;
-}
-
-#main-window[tabsintitlebar] #titlebar-buttonbox {
+#main-window[tabsintitlebar] .titlebar-buttonbox {
   position: relative;
 }
 
-#titlebar-buttonbox {
+#main-window:not([tabsintitlebar]) .titlebar-buttonbox {
+  display: none;
+}
+
+.titlebar-buttonbox {
   -moz-appearance: -moz-window-button-box;
+  position: relative;
 }
 
 #personal-bookmarks {
   -moz-window-dragging: inherit;
 }
 
 toolbarpaletteitem {
   -moz-window-dragging: no-drag;
 }
 
+.titlebar-buttonbox-container {
+  -moz-box-ordinal-group: 1000;
+}
+
 %ifdef XP_MACOSX
 #titlebar-fullscreen-button {
   -moz-appearance: -moz-mac-fullscreen-button;
 }
 
-/* Fullscreen and caption buttons don't move with RTL on OS X so override the automatic ordering. */
-#titlebar-secondary-buttonbox:-moz-locale-dir(ltr),
-#titlebar-buttonbox-container:-moz-locale-dir(rtl),
-.titlebar-placeholder[type="fullscreen-button"]:-moz-locale-dir(ltr),
-.titlebar-placeholder[type="caption-buttons"]:-moz-locale-dir(rtl) {
+/**
+ * On macOS, the window caption buttons are on the left side of the window titlebar,
+ * even when using the RTL UI direction. Similarly, the fullscreen button is on the
+ * right side of the window titlebar, even when using the RTL UI direction. These
+ * next rules enforce that ordering.
+ */
+#titlebar-secondary-buttonbox:-moz-locale-dir(ltr) {
   -moz-box-ordinal-group: 1000;
 }
 
 #titlebar-secondary-buttonbox:-moz-locale-dir(rtl),
-#titlebar-buttonbox-container:-moz-locale-dir(ltr),
-.titlebar-placeholder[type="caption-buttons"]:-moz-locale-dir(ltr),
-.titlebar-placeholder[type="fullscreen-button"]:-moz-locale-dir(rtl) {
+.titlebar-buttonbox-container:-moz-locale-dir(ltr) {
   -moz-box-ordinal-group: 0;
 }
 %endif
 
 %ifdef XP_WIN
 #main-window[sizemode="maximized"] #titlebar-buttonbox {
   -moz-appearance: -moz-window-button-box-maximized;
 }
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -1328,20 +1328,16 @@ var gBrowserInit = {
       if (uriToLoad == "about:home" || uriToLoad == "about:newtab" || uriToLoad == "about:welcome") {
         gBrowser.setIcon(gBrowser.selectedTab, "chrome://branding/content/icon32.png");
       } else if (uriToLoad == "about:privatebrowsing") {
         gBrowser.setIcon(gBrowser.selectedTab, "chrome://browser/skin/privatebrowsing/favicon.svg");
       }
     });
 
     this._setInitialFocus();
-
-    // Update the UI density before TabsInTitlebar lays out the titlbar.
-    gUIDensity.init();
-    TabsInTitlebar.whenWindowLayoutReady();
   },
 
   onLoad() {
     gBrowser.addEventListener("DOMUpdateBlockedPopups", gPopupBlockerObserver);
 
     Services.obs.addObserver(gPluginHandler.NPAPIPluginCrashed, "plugin-crashed");
 
     window.addEventListener("AppCommand", HandleAppCommandEvent, true);
@@ -1388,16 +1384,17 @@ var gBrowserInit = {
     Services.obs.notifyObservers(window, "browser-window-before-show");
 
     if (!window.toolbar.visible) {
       // adjust browser UI for popups
       gURLBar.setAttribute("readonly", "true");
     }
 
     // Misc. inits.
+    gUIDensity.init();
     TabletModeUpdater.init();
     CombinedStopReload.ensureInitialized();
     gPrivateBrowsingUI.init();
     BrowserSearch.init();
     BrowserPageActions.init();
     gAccessibilityServiceIndicator.init();
     AccessibilityRefreshBlocker.init();
 
@@ -5579,17 +5576,17 @@ function onViewToolbarsPopupShowing(aEve
   for (var i = popup.children.length - 1; i >= 0; --i) {
     var deadItem = popup.children[i];
     if (deadItem.hasAttribute("toolbarId"))
       popup.removeChild(deadItem);
   }
 
   var firstMenuItem = aInsertPoint || popup.firstElementChild;
 
-  let toolbarNodes = gNavToolbox.children;
+  let toolbarNodes = gNavToolbox.querySelectorAll("toolbar");
 
   for (let toolbar of toolbarNodes) {
     if (!toolbar.hasAttribute("toolbarname")) {
       continue;
     }
 
     let menuItem = document.createXULElement("menuitem");
     let hidingAttribute = toolbar.getAttribute("type") == "menubar" ?
@@ -5856,17 +5853,16 @@ var gUIDensity = {
       if (tree) {
         // Tree items don't update their styles without changing some property on the
         // parent tree element, like background-color or border. See bug 1407399.
         tree.style.border = "1px";
         tree.style.border = "";
       }
     }
 
-    TabsInTitlebar.update();
     gBrowser.tabContainer.uiDensityChanged();
   },
 };
 
 const nodeToTooltipMap = {
   "bookmarks-menu-button": "bookmarksMenuButton.tooltip",
   "context-reload": "reloadButton.tooltip",
   "context-stop": "stopButton.tooltip",
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -718,120 +718,108 @@ xmlns="http://www.w3.org/1999/xhtml"
                aria-live="off"
                flex="1"
                crop="end"/>
       </hbox>
     </hbox>
   </popupset>
   <box id="appMenu-viewCache" hidden="true"/>
 
-<vbox id="titlebar">
-  <hbox id="titlebar-content">
-    <spacer id="titlebar-spacer" flex="1"/>
-    <hbox id="titlebar-buttonbox-container">
-      <hbox id="titlebar-buttonbox" class="titlebar-color">
-        <toolbarbutton class="titlebar-button" id="titlebar-min" oncommand="window.minimize();"/>
-        <toolbarbutton class="titlebar-button" id="titlebar-max" oncommand="onTitlebarMaxClick();"/>
-        <toolbarbutton class="titlebar-button" id="titlebar-close" command="cmd_closeWindow"/>
-      </hbox>
-    </hbox>
-#ifdef XP_MACOSX
-    <!-- OS X does not natively support RTL for its titlebar items, so we prevent this secondary
-         buttonbox from reversing order in RTL by forcing an LTR direction. -->
-    <hbox id="titlebar-secondary-buttonbox" dir="ltr">
-      <button class="accessibility-indicator" tooltiptext="&accessibilityIndicator.tooltip;" aria-live="polite"/>
-      <hbox class="private-browsing-indicator"/>
-      <hbox id="titlebar-fullscreen-button"/>
-    </hbox>
+  <toolbox id="navigator-toolbox">
+
+    <vbox id="titlebar">
+      <!-- Menu -->
+      <toolbar type="menubar" id="toolbar-menubar"
+               class="browser-toolbar chromeclass-menubar titlebar-color"
+               customizable="true"
+               mode="icons"
+#ifdef MENUBAR_CAN_AUTOHIDE
+               toolbarname="&menubarCmd.label;"
+               accesskey="&menubarCmd.accesskey;"
+               autohide="true"
 #endif
-  </hbox>
-</vbox>
-
-  <toolbox id="navigator-toolbox">
-    <!-- Menu -->
-    <toolbar type="menubar" id="toolbar-menubar"
-             class="browser-toolbar chromeclass-menubar titlebar-color"
-             customizable="true"
-             mode="icons"
-#ifdef MENUBAR_CAN_AUTOHIDE
-             toolbarname="&menubarCmd.label;"
-             accesskey="&menubarCmd.accesskey;"
-             autohide="true"
-#endif
-             context="toolbar-context-menu">
-      <toolbaritem id="menubar-items" align="center">
+               context="toolbar-context-menu">
+        <toolbaritem id="menubar-items" align="center">
 # The entire main menubar is placed into browser-menubar.inc, so that it can be
 # shared with other top level windows in macWindow.inc.xul.
 #include browser-menubar.inc
-      </toolbaritem>
-
-#ifndef XP_MACOSX
-      <hbox class="titlebar-placeholder" type="caption-buttons" ordinal="1000"
-            skipintoolbarset="true"/>
-#endif
-    </toolbar>
+        </toolbaritem>
+        <spacer flex="1" />
+#include titlebar-items.inc.xul
+      </toolbar>
 
-    <toolbar id="TabsToolbar"
-             class="browser-toolbar titlebar-color"
-             fullscreentoolbar="true"
-             customizable="true"
-             mode="icons"
-             aria-label="&tabsToolbar.label;"
-             context="toolbar-context-menu">
-      <hbox class="titlebar-placeholder" type="pre-tabs"
-            skipintoolbarset="true"/>
+      <toolbar id="TabsToolbar"
+               class="browser-toolbar titlebar-color"
+               fullscreentoolbar="true"
+               customizable="true"
+               customizationtarget="TabsToolbar-customization-target"
+               mode="icons"
+               aria-label="&tabsToolbar.label;"
+               context="toolbar-context-menu"
+               flex="1">
+        <vbox flex="1" class="toolbar-items">
+          <spacer flex="1000"/>
 
-      <tabs id="tabbrowser-tabs"
-            flex="1"
-            setfocus="false"
-            tooltip="tabbrowser-tab-tooltip"
-            stopwatchid="FX_TAB_CLICK_MS">
-        <tab class="tabbrowser-tab" selected="true" visuallyselected="true" fadein="true"/>
-      </tabs>
+          <hbox id="TabsToolbar-customization-target" flex="1">
+            <hbox class="titlebar-placeholder" type="pre-tabs"
+                  skipintoolbarset="true"/>
+
+            <tabs id="tabbrowser-tabs"
+                  flex="1"
+                  setfocus="false"
+                  tooltip="tabbrowser-tab-tooltip"
+                  stopwatchid="FX_TAB_CLICK_MS">
+              <tab class="tabbrowser-tab" selected="true" visuallyselected="true" fadein="true"/>
+            </tabs>
 
-      <toolbarbutton id="new-tab-button"
-                     class="toolbarbutton-1 chromeclass-toolbar-additional"
-                     label="&tabCmd.label;"
-                     command="cmd_newNavigatorTab"
-                     onclick="checkForMiddleClick(this, event);"
-                     tooltip="dynamic-shortcut-tooltip"
-                     ondrop="newTabButtonObserver.onDrop(event)"
-                     ondragover="newTabButtonObserver.onDragOver(event)"
-                     ondragenter="newTabButtonObserver.onDragOver(event)"
-                     ondragexit="newTabButtonObserver.onDragExit(event)"
-                     cui-areatype="toolbar"
-                     removable="true"/>
+            <toolbarbutton id="new-tab-button"
+                           class="toolbarbutton-1 chromeclass-toolbar-additional"
+                           label="&tabCmd.label;"
+                           command="cmd_newNavigatorTab"
+                           onclick="checkForMiddleClick(this, event);"
+                           tooltip="dynamic-shortcut-tooltip"
+                           ondrop="newTabButtonObserver.onDrop(event)"
+                           ondragover="newTabButtonObserver.onDragOver(event)"
+                           ondragenter="newTabButtonObserver.onDragOver(event)"
+                           ondragexit="newTabButtonObserver.onDragExit(event)"
+                           cui-areatype="toolbar"
+                           removable="true"/>
 
-      <toolbarbutton id="alltabs-button"
-                     class="toolbarbutton-1 chromeclass-toolbar-additional tabs-alltabs-button badged-button"
-                     oncommand="gTabsPanel.showAllTabsPanel();"
-                     label="&listAllTabs.label;"
-                     tooltiptext="&listAllTabs.label;"
-                     removable="false"/>
-
-      <hbox class="titlebar-placeholder" type="post-tabs"
-            ordinal="1000"
-            skipintoolbarset="true"/>
+            <toolbarbutton id="alltabs-button"
+                           class="toolbarbutton-1 chromeclass-toolbar-additional tabs-alltabs-button badged-button"
+                           oncommand="gTabsPanel.showAllTabsPanel();"
+                           label="&listAllTabs.label;"
+                           tooltiptext="&listAllTabs.label;"
+                           removable="false"/>
 
-      <button class="accessibility-indicator" tooltiptext="&accessibilityIndicator.tooltip;"
-              ordinal="1000"
-              aria-live="polite" skipintoolbarset="true"/>
-      <hbox class="private-browsing-indicator" skipintoolbarset="true"
-            ordinal="1000"/>
-      <hbox class="titlebar-placeholder" type="caption-buttons"
-#ifndef XP_MACOSX
-            ordinal="1000"
-#endif
-            skipintoolbarset="true"/>
+            <hbox class="titlebar-placeholder" type="post-tabs"
+                  ordinal="1000"
+                  skipintoolbarset="true"/>
+          </hbox>
+        </vbox>
+
+        <button class="accessibility-indicator titlebar-item"  tooltiptext="&accessibilityIndicator.tooltip;"
+                ordinal="1000"
+                aria-live="polite" skipintoolbarset="true"/>
+        <hbox class="private-browsing-indicator titlebar-item" skipintoolbarset="true"
+              ordinal="1000"/>
+#include titlebar-items.inc.xul
 
 #ifdef XP_MACOSX
-      <hbox class="titlebar-placeholder" type="fullscreen-button"
-            skipintoolbarset="true"/>
+        <!-- OS X does not natively support RTL for its titlebar items, so we prevent this secondary
+             buttonbox from reversing order in RTL by forcing an LTR direction. -->
+        <hbox id="titlebar-secondary-buttonbox" dir="ltr">
+          <button class="accessibility-indicator" tooltiptext="&accessibilityIndicator.tooltip;" aria-live="polite"/>
+          <hbox class="private-browsing-indicator"/>
+          <hbox id="titlebar-fullscreen-button"/>
+        </hbox>
 #endif
-    </toolbar>
+      </toolbar>
+
+    </vbox>
 
     <toolbar id="nav-bar"
              class="browser-toolbar"
              aria-label="&navbarCmd.label;"
              fullscreentoolbar="true" mode="icons" customizable="true"
              customizationtarget="nav-bar-customization-target"
              overflowable="true"
              overflowbutton="nav-bar-overflow-button"
--- a/browser/base/content/tabbrowser.js
+++ b/browser/base/content/tabbrowser.js
@@ -5354,16 +5354,18 @@ var TabBarVisibility = {
     }
 
     if (collapse == toolbar.collapsed && this._initialUpdateDone) {
       return;
     }
     this._initialUpdateDone = true;
 
     toolbar.collapsed = collapse;
+    let navbar = document.getElementById("nav-bar");
+    navbar.setAttribute("tabs-hidden", collapse);
 
     document.getElementById("menu_closeWindow").hidden = collapse;
     document.getElementById("menu_close").setAttribute("label",
       gTabBrowserBundle.GetStringFromName(collapse ? "tabs.close" : "tabs.closeTab"));
 
     TabsInTitlebar.allowedBy("tabs-visible", !collapse);
   },
 };
--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@@ -585,17 +585,17 @@
       <method name="_animateTabMove">
         <parameter name="event"/>
         <body><![CDATA[
           let draggedTab = event.dataTransfer.mozGetDataAt(TAB_DROP_TYPE, 0);
           let movingTabs = draggedTab._dragData.movingTabs;
 
           if (this.getAttribute("movingtab") != "true") {
             this.setAttribute("movingtab", "true");
-            this.parentNode.setAttribute("movingtab", "true");
+            gNavToolbox.setAttribute("movingtab", "true");
             if (!draggedTab.multiselected)
               this.selectedItem = draggedTab;
           }
 
           if (!("animLastScreenX" in draggedTab._dragData))
             draggedTab._dragData.animLastScreenX = draggedTab._dragData.screenX;
 
           let screenX = event.screenX;
@@ -712,17 +712,17 @@
             return;
           }
 
           for (let tab of this._getVisibleTabs()) {
             tab.style.transform = "";
           }
 
           this.removeAttribute("movingtab");
-          this.parentNode.removeAttribute("movingtab");
+          gNavToolbox.removeAttribute("movingtab");
 
           this._handleTabSelect();
         ]]></body>
       </method>
 
       <!--  Regroup all selected tabs around the
             tab in param  -->
       <method name="_groupSelectedTabs">
@@ -1138,17 +1138,17 @@
       </method>
 
       <method name="onWidgetAfterDOMChange">
         <parameter name="aNode"/>
         <parameter name="aNextNode"/>
         <parameter name="aContainer"/>
         <body><![CDATA[
           if (aContainer.ownerDocument == document &&
-              aContainer.id == "TabsToolbar") {
+              aContainer.id == "TabsToolbar-customization-target") {
             this._updateNewTabVisibility();
           }
         ]]></body>
       </method>
 
       <method name="onAreaNodeRegistered">
         <parameter name="aArea"/>
         <parameter name="aContainer"/>
--- a/browser/base/content/test/performance/browser_windowopen.js
+++ b/browser/base/content/test/performance/browser_windowopen.js
@@ -13,45 +13,16 @@
  * for tips on how to do that.
  */
 const EXPECTED_REFLOWS = [
   /**
    * Nothing here! Please don't add anything new!
    */
 ];
 
-if (Services.appinfo.OS == "WINNT") {
-  EXPECTED_REFLOWS.push(
-    {
-      stack: [
-        "verticalMargins@chrome://browser/content/browser-tabsintitlebar.js",
-        "_layOutTitlebar@chrome://browser/content/browser-tabsintitlebar.js",
-        "update@chrome://browser/content/browser-tabsintitlebar.js",
-        "whenWindowLayoutReady@chrome://browser/content/browser-tabsintitlebar.js",
-      ],
-      maxCount: 2, // This number should only ever go down - never up.
-    },
-  );
-}
-
-if (Services.appinfo.OS == "WINNT" || Services.appinfo.OS == "Darwin") {
-  EXPECTED_REFLOWS.push(
-    {
-      stack: [
-        "rect@chrome://browser/content/browser-tabsintitlebar.js",
-        "_layOutTitlebar@chrome://browser/content/browser-tabsintitlebar.js",
-        "update@chrome://browser/content/browser-tabsintitlebar.js",
-        "whenWindowLayoutReady@chrome://browser/content/browser-tabsintitlebar.js",
-      ],
-      // These numbers should only ever go down - never up.
-      maxCount: Services.appinfo.OS == "WINNT" ? 5 : 4,
-    },
-  );
-}
-
 /*
  * This test ensures that there are no unexpected
  * uninterruptible reflows or flickering areas when opening new windows.
  */
 add_task(async function() {
   // Flushing all caches helps to ensure that we get consistent
   // behaviour when opening a new window, even if windows have been
   // opened in previous tests.
@@ -110,41 +81,16 @@ add_task(async function() {
     });
 
     await TestUtils.topicObserved("browser-delayed-startup-finished",
                                   subject => subject == win);
 
     await BrowserTestUtils.firstBrowserLoaded(win, false);
     await BrowserTestUtils.browserStopped(win.gBrowser.selectedBrowser, "about:home");
 
-    if (Services.appinfo.OS == "WINNT" && win.windowState == win.STATE_MAXIMIZED) {
-      // The reflows below are triggered by maximizing the window after
-      // layout. They should be fixed by bug 1447864.
-      EXPECTED_REFLOWS.push(
-        {
-          stack: [
-            "rect@chrome://browser/content/browser-tabsintitlebar.js",
-            "_layOutTitlebar@chrome://browser/content/browser-tabsintitlebar.js",
-            "update@chrome://browser/content/browser-tabsintitlebar.js",
-            "handleEvent@chrome://browser/content/browser-tabsintitlebar.js",
-          ],
-          maxCount: 4,
-        },
-        {
-          stack: [
-            "verticalMargins@chrome://browser/content/browser-tabsintitlebar.js",
-            "_layOutTitlebar@chrome://browser/content/browser-tabsintitlebar.js",
-            "update@chrome://browser/content/browser-tabsintitlebar.js",
-            "handleEvent@chrome://browser/content/browser-tabsintitlebar.js",
-          ],
-          maxCount: 2,
-        },
-      );
-    }
-
     await new Promise(resolve => {
       // 10 is an arbitrary value here, it needs to be at least 2 to avoid
       // races with code initializing itself using idle callbacks.
       (function waitForIdle(count = 10) {
         if (!count) {
           resolve();
           return;
         }
new file mode 100644
--- /dev/null
+++ b/browser/base/content/titlebar-items.inc.xul
@@ -0,0 +1,11 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+<hbox class="titlebar-buttonbox-container titlebar-item">
+  <hbox class="titlebar-buttonbox titlebar-color">
+    <toolbarbutton class="titlebar-button titlebar-min" oncommand="window.minimize();"/>
+    <toolbarbutton class="titlebar-button titlebar-max" oncommand="onTitlebarMaxClick();"/>
+    <toolbarbutton class="titlebar-button titlebar-close" command="cmd_closeWindow"/>
+  </hbox>
+</hbox>
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -48,20 +48,16 @@
   --arrowpanel-dimmed-further: rgba(249,249,250,.15);
   --arrowpanel-dimmed-even-further: rgba(249,249,250,.2);
 }
 
 #menubar-items {
   -moz-box-orient: vertical; /* for flex hack */
 }
 
-#main-menubar {
-  -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
-}
-
 #navigator-toolbox {
   -moz-appearance: none;
   background-color: transparent;
   border-top: none;
 }
 
 .browser-toolbar {
   padding: 0;
@@ -70,17 +66,17 @@
 .browser-toolbar:not(.titlebar-color) {
   background-color: var(--toolbar-bgcolor);
   background-image: var(--toolbar-bgimage);
   color: var(--toolbar-color);
   -moz-appearance: none;
   border-style: none;
 }
 
-#TabsToolbar:not([collapsed="true"]) + #nav-bar {
+#nav-bar:not([tabs-hidden="true"]) {
   box-shadow: 0 -@navbarTabsShadowSize@ 0 var(--tabs-border-color);
   /* This is needed for some toolbar button animations. Gross :( */
   position: relative;
 }
 
 #browser-bottombox {
   /* opaque for layers optimization */
   background-color: -moz-Dialog;
@@ -612,116 +608,102 @@ notification[value="translation"] menuli
   overflow: hidden;
 }
 
 .webextension-popup-browser,
 .webextension-popup-stack {
   border-radius: inherit;
 }
 
-/* Hide the titlebar explicitly on versions of GTK+ where
- * it's rendered by window manager. */
-@media (-moz-gtk-csd-available: 0) {
-  #titlebar {
-    display: none;
-  }
-}
-
 /* We draw to titlebar when Gkt+ CSD is available */
 @media (-moz-gtk-csd-available) {
   /* Some Gtk+ themes use non-rectangular toplevel windows. To fully support
    * such themes we need to make toplevel window transparent.
    * It may cause performanance issues so let's put it under a preference
    * and enable it for desktop environment which do that by default.
    * See nsWindow::TopLevelWindowUseARGBVisual() for details. */
   @media (-moz-gtk-csd-transparent-background) {
     :root[tabsintitlebar]:not(:-moz-lwtheme) {
       background-color: transparent;
       -moz-appearance: none;
     }
   }
 
-  :root[tabsintitlebar] > #titlebar:-moz-lwtheme {
-    visibility: hidden;
-  }
-  :root[tabsintitlebar] #titlebar-content:-moz-lwtheme {
-    visibility: visible;
-  }
-
-  :root[tabsintitlebar] > #titlebar {
+  :root[tabsintitlebar] > #navigator-toolbox > #titlebar:not(:-moz-lwtheme) {
     -moz-appearance: -moz-window-titlebar-maximized;
   }
-  :root[tabsintitlebar][sizemode="normal"] > #titlebar {
+  :root[tabsintitlebar][sizemode="normal"] > #navigator-toolbox > #titlebar:not(:-moz-lwtheme) {
     -moz-appearance: -moz-window-titlebar;
   }
 
   /* Add extra space to titlebar for dragging */
   :root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar,
   :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar {
     padding-top: var(--space-above-tabbar);
   }
 
-  /* Private browsing and accessibility indicators */
-  :root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .private-browsing-indicator,
-  :root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .accessibility-indicator,
-  :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .private-browsing-indicator,
-  :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .accessibility-indicator {
-    padding-top: calc(-1 * var(--space-above-tabbar));
+  /**
+   * Titlebar items (window caption buttons, private browsing indicator,
+   * accessibility indicator, etc)
+   */
+  :root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .titlebar-item,
+  :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .titlebar-item {
+    margin-top: calc(-1 * var(--space-above-tabbar));
   }
 
   /* Make #TabsToolbar transparent as we style underlying #titlebar with
    * -moz-window-titlebar (Gtk+ theme).
    */
   :root[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #TabsToolbar,
   :root[tabsintitlebar][sizemode="maximized"] #TabsToolbar,
   :root[tabsintitlebar] #toolbar-menubar {
     -moz-appearance: none;
   }
 
   /* The button box must appear on top of the navigator-toolbox in order for
    * click and hover mouse events to work properly for the button in the restored
    * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
    * can swallow those events.
    */
-  #titlebar-buttonbox {
+  .titlebar-buttonbox {
     z-index: 1;
     -moz-box-align: center;
   }
 
   /* Render titlebar command buttons according to system config.
    * Use full scale icons here as the Gtk+ does.
    */
   @media (-moz-gtk-csd-minimize-button) {
-    #titlebar-min {
+    .titlebar-min {
       -moz-appearance: -moz-window-button-minimize;
     }
   }
   @media (-moz-gtk-csd-minimize-button: 0) {
-    #titlebar-min {
+    .titlebar-min {
       display: none;
     }
   }
 
   @media (-moz-gtk-csd-maximize-button) {
-    #titlebar-max {
+    .titlebar-max {
       -moz-appearance: -moz-window-button-maximize;
     }
-    :root[sizemode="maximized"] #titlebar-max {
+    :root[sizemode="maximized"] .titlebar-max {
       -moz-appearance: -moz-window-button-restore;
     }
   }
   @media (-moz-gtk-csd-maximize-button: 0) {
-    #titlebar-max {
+    .titlebar-max {
       display: none;
     }
   }
 
   @media (-moz-gtk-csd-close-button) {
-    #titlebar-close {
+    .titlebar-close {
       -moz-appearance: -moz-window-button-close;
     }
   }
   @media (-moz-gtk-csd-close-button: 0) {
-    #titlebar-close {
+    .titlebar-close {
       display: none;
     }
   }
 }
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -80,101 +80,84 @@
 
 /** Begin titlebar **/
 
 #titlebar {
   /* Centrally align content items vertically */
   -moz-box-pack: center;
 }
 
-#titlebar-content {
-  /* Ensure the the content part of the titlebar does not shrink. */
-  min-height: inherit;
-}
-
 #titlebar-buttonbox > .titlebar-button {
   display: none;
 }
 
 /* Making the toolbox position:relative (browser.inc.css) occludes titlebar indicators
  * if the toolbox has a background. Fix this by positioning the relevant elements, too: */
 #titlebar-secondary-buttonbox {
   position: relative;
   z-index: 1;
   /* Centrally align indicators and full screen button vertically */
   -moz-box-align: center;
 }
 
-#titlebar-buttonbox-container {
+.titlebar-buttonbox-container {
   -moz-box-align: center;
 }
 
 /* These would be margin-inline-start/end if it wasn't for the fact that OS X
  * doesn't reverse the order of the items in the titlebar in RTL mode. */
-.titlebar-placeholder[type="caption-buttons"],
-#titlebar-buttonbox {
+.titlebar-buttonbox {
   margin-left: 12px;
+  margin-top: calc(-1 * var(--space-above-tabbar));
 }
 
 /* The fullscreen button doesnt show on Yosemite(10.10) or above so dont give it a
    border there */
 @media (-moz-mac-yosemite-theme: 0) {
   .titlebar-placeholder[type="fullscreen-button"] {
     margin-right: 4px;
   }
 }
 
-#main-window:not([tabsintitlebar]) > #titlebar {
-  height: 22px; /* The native titlebar on OS X is 22px tall. */
-}
-
-/**
- * For tabs in titlebar on OS X, we stretch the titlebar down so that the
- * tabstrip can overlap it.
- */
-#main-window[tabsintitlebar] > #titlebar {
-  min-height: calc(var(--tab-min-height) + var(--space-above-tabbar));
-}
-
 /** End titlebar **/
 
 #main-window[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] {
   border-top: 1px solid rgba(0,0,0,0.65);
 }
 
 .browser-toolbar:not(.titlebar-color) {
   -moz-appearance: none;
   background: var(--toolbar-bgcolor);
   color: var(--toolbar-color);
 }
 
 /* Draw the bottom border of the tabs toolbar when it's not using
    -moz-appearance: toolbar. */
-#main-window:-moz-any([sizemode="fullscreen"],[customize-entered]) #TabsToolbar:not([collapsed="true"]) + #nav-bar,
-#main-window:not([tabsintitlebar]) #TabsToolbar:not([collapsed="true"]) + #nav-bar,
-#TabsToolbar:not([collapsed="true"]) + #nav-bar:-moz-lwtheme {
+#main-window:-moz-any([sizemode="fullscreen"],[customize-entered]) #nav-bar:not([tabs-hidden="true"]),
+#main-window:not([tabsintitlebar]) #nav-bar:not([tabs-hidden="true"]),
+#nav-bar:not([tabs-hidden="true"]):-moz-lwtheme {
   box-shadow: 0 -@navbarTabsShadowSize@ 0 var(--tabs-border-color);
 }
 
 /* Always draw a border on Yosemite to ensure the border is well-defined there
  * (the default border is too light). */
 @media (-moz-mac-yosemite-theme) {
   #navigator-toolbox:not(:-moz-lwtheme) {
     --tabs-border-color: rgba(0,0,0,.2);
   }
   #navigator-toolbox:not(:-moz-lwtheme):-moz-window-inactive {
     --tabs-border-color: rgba(0,0,0,.05);
   }
 
-  #main-window[tabsintitlebar] #TabsToolbar:not([collapsed="true"]) + #nav-bar:not(:-moz-lwtheme) {
+  #main-window[tabsintitlebar] #nav-bar:not([tabs-hidden="true"]):not(:-moz-lwtheme) {
     box-shadow: 0 -@navbarTabsShadowSize@ 0 var(--tabs-border-color);
   }
 }
 
-#TabsToolbar:not([collapsed="true"]) + #nav-bar {
+#nav-bar:not([tabs-hidden="true"]) {
   /* The toolbar buttons that animate are only visible when the #TabsToolbar is not collapsed.
      The animations use position:absolute and require a positioned #nav-bar. */
   position: relative;
 }
 
 #PersonalToolbar:not(:-moz-lwtheme):-moz-window-inactive,
 #nav-bar:not(:-moz-lwtheme):-moz-window-inactive {
   background-color: -moz-mac-chrome-inactive;
@@ -638,24 +621,19 @@ html|input.urlbar-input {
 
 :-moz-any(.keyboard-focused-tab, .tabbrowser-tab:focus:not([aria-activedescendant])) > .tab-stack > .tab-content > .tab-label-container:not([pinned]),
 :-moz-any(.keyboard-focused-tab, .tabbrowser-tab:focus:not([aria-activedescendant])) > .tab-stack > .tab-content > .tab-icon-image[pinned],
 :-moz-any(.keyboard-focused-tab, .tabbrowser-tab:focus:not([aria-activedescendant])) > .tab-stack > .tab-content > .tab-throbber[pinned] {
   box-shadow: var(--focus-ring-box-shadow);
 }
 
 #TabsToolbar {
-  -moz-appearance: none;
   padding-top: var(--space-above-tabbar);
 }
 
-:root:not([customizing]):not([tabsintitlebar]):not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
-  -moz-appearance: toolbar;
-}
-
 #TabsToolbar:not(:-moz-lwtheme) {
   color: #333;
   text-shadow: @loweredShadow@;
 }
 
 :root:-moz-any([inFullscreen], [tabsintitlebar]) #TabsToolbar:not(:-moz-lwtheme) {
   -moz-appearance: -moz-mac-vibrant-titlebar-dark;
   -moz-font-smoothing-background-color: -moz-mac-vibrant-titlebar-dark;
@@ -956,20 +934,20 @@ html|*.addon-webext-perm-list {
 /* Customization mode */
 
 %include ../shared/customizableui/customizeMode.inc.css
 
 /* End customization mode */
 
 /* Private browsing and accessibility indicators */
 
-:root[accessibilitymode][tabsintitlebar]:not([inFullscreen]) > #navigator-toolbox > #TabsToolbar > .accessibility-indicator,
-:root[privatebrowsingmode=temporary][tabsintitlebar]:not([inFullscreen]) > #navigator-toolbox > #TabsToolbar > .private-browsing-indicator,
-:root[accessibilitymode]:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > .accessibility-indicator,
-:root[privatebrowsingmode=temporary]:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > .private-browsing-indicator {
+:root[accessibilitymode][tabsintitlebar]:not([inFullscreen]) > #navigator-toolbox > #titlebar > #TabsToolbar > .accessibility-indicator,
+:root[privatebrowsingmode=temporary][tabsintitlebar]:not([inFullscreen]) > #navigator-toolbox > #titlebar > #TabsToolbar > .private-browsing-indicator,
+:root[accessibilitymode]:not([tabsintitlebar]) > #navigator-toolbox > #titlebar > #TabsToolbar > #titlebar-secondary-buttonbox > .accessibility-indicator,
+:root[privatebrowsingmode=temporary]:not([tabsintitlebar]) > #navigator-toolbox > #titlebar > #TabsToolbar > #titlebar-secondary-buttonbox > .private-browsing-indicator {
   display: none;
 }
 
 #TabsToolbar > .private-browsing-indicator:-moz-locale-dir(rtl),
 #TabsToolbar > .accessibility-indicator:-moz-locale-dir(rtl) {
   -moz-box-ordinal-group: 0;
 }
 
--- a/browser/themes/osx/compacttheme.css
+++ b/browser/themes/osx/compacttheme.css
@@ -1,19 +1,14 @@
 % This Source Code Form is subject to the terms of the Mozilla Public
 % License, v. 2.0. If a copy of the MPL was not distributed with this
 % file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 %include ../shared/compacttheme.inc.css
 
-/* Get rid of 1px bright strip at the top of window */
-#main-window[tabsintitlebar] #titlebar-content {
-  background: var(--lwt-accent-color);
-}
-
 #TabsToolbar:-moz-lwtheme-darktext {
   -moz-appearance: -moz-mac-vibrant-titlebar-light;
   -moz-font-smoothing-background-color: -moz-mac-vibrant-titlebar-light;
 }
 
 .tabbrowser-tab[visuallyselected=true] {
   -moz-font-smoothing-background-color: var(--toolbar-bgcolor);
 }
--- a/browser/themes/shared/identity-block/identity-block.inc.css
+++ b/browser/themes/shared/identity-block/identity-block.inc.css
@@ -146,16 +146,17 @@
 }
 
 /* TRACKING PROTECTION ICON */
 
 #tracking-protection-icon-box {
   visibility: collapse;
   overflow: hidden;
   width: 20px;
+  height: 20px;
   margin-inline-end: -20px;
 }
 
 #tracking-protection-icon-box[active],
 #tracking-protection-icon-box[hasException] {
   margin-inline-end: 0px;
   visibility: visible;
 }
@@ -167,17 +168,16 @@
 #tracking-protection-icon-box:not([hasException])[active][animationsenabled] > #tracking-protection-icon,
 #tracking-protection-icon-box:not([animationsenabled]) > #tracking-protection-icon-animatable-box {
   display: none;
 }
 
 #tracking-protection-icon-box > #tracking-protection-icon-animatable-box {
   position: absolute;
   overflow: hidden;
-  top: calc(50% - 10px); /* half the height of the sprite */
   margin-inline-start: 4px;
   width: 16px;
   height: 20px;
 }
 
 #tracking-protection-icon-box:not([hasException])[active] #tracking-protection-icon-animatable-image {
   background-image: url(chrome://browser/skin/tracking-protection-animation.svg);
   transform: translateX(-1232px);
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -507,17 +507,17 @@
 #toolbar-menubar:not([autohide=true]) + #TabsToolbar,
 %endif
 :root:not([tabsintitlebar]),
 :root[extradragspace] {
   --tabs-top-border-width: 1px;
 }
 
 %ifdef MENUBAR_CAN_AUTOHIDE
-#toolbar-menubar:not([autohide=true]) + #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-background,
+#toolbar-menubar:not([autohide=true]) + #TabsToolbar .tabbrowser-tab > .tab-stack > .tab-background,
 %endif
 :root:not([tabsintitlebar]) .tab-background,
 :root[extradragspace] .tab-background {
   border-top-style: solid;
 }
 
 .tab-background[selected=true] {
   border-top-color: var(--tabs-border-color);
@@ -549,48 +549,48 @@
 }
 
 /* Tab hover */
 
 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) {
   background-color: rgba(0,0,0,.1);
 }
 
-#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) {
+#TabsToolbar[brighttext] .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) {
   background-color: rgba(255,255,255,.1);
 }
 
 .tab-line:not([selected=true]):not([multiselected]) {
   opacity: 0;
   transform: scaleX(0);
   transition: transform 250ms var(--animation-easing-function), opacity 250ms var(--animation-easing-function);
 }
 
 .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true]):not([multiselected]) {
   background-color: rgba(0,0,0,.2);
   opacity: 1;
   transform: none;
 }
 
-#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true]):not([multiselected]) {
+#TabsToolbar[brighttext] .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true]):not([multiselected]) {
   background-color: rgba(255,255,255,.2);
 }
 
 .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true])[multiselected],
-#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true])[multiselected] {
+#TabsToolbar[brighttext] .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true])[multiselected] {
   opacity: 0.5;
 }
 
 /* Tab multi-selected */
 
 .tabbrowser-tab[multiselected] > .tab-stack > .tab-background:not([selected=true]) {
   background-color: rgba(0,0,0,.1);
 }
 
-#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab[multiselected] > .tab-stack > .tab-background:not([selected=true]) {
+#TabsToolbar[brighttext] .tabbrowser-tab[multiselected] > .tab-stack > .tab-background:not([selected=true]) {
   background-color: rgba(255,255,255,.1);
 }
 
 /* Pinned tabs */
 
 /* Pinned tab separators need position: absolute when positioned (during overflow). */
 #tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::after {
   position: absolute;
@@ -663,17 +663,17 @@
  * may still resize very slightly) on some DPI settings with uneven
  * scaling factors on Windows, because of bug 477157.
  */
 .tabbrowser-tab::before {
   margin-inline-start: -1px;
 }
 
 %ifdef MENUBAR_CAN_AUTOHIDE
-:root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide=true] + #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab::after,
+:root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide=true] + #TabsToolbar .tabbrowser-tab::after,
 %else
 :root[tabsintitlebar]:not([extradragspace]) .tabbrowser-tab::after,
 %endif
 /* Show full height tab separators on hover and multiselection. */
 .tabbrowser-tab:hover::after,
 #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[beforehovered]::after,
 .tabbrowser-tab[multiselected]::after,
 #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[before-multiselected]::after {
@@ -712,18 +712,17 @@
 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
   transform: scaleX(-1);
 }
 
 /* New tab button */
 
 .tabs-newtab-button,
-#TabsToolbar > #new-tab-button ,
-#TabsToolbar > toolbarpaletteitem > #new-tab-button {
+#TabsToolbar #new-tab-button {
   list-style-image: url(chrome://browser/skin/add.svg);
 }
 
 /* All tabs button and menupopup */
 
 #alltabs-button {
   list-style-image: url(chrome://global/skin/icons/arrow-dropdown-16.svg);
 }
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -78,17 +78,17 @@ toolbar[brighttext] {
 }
 
 .tabbrowser-arrowscrollbox > .scrollbutton-up,
 .tabbrowser-arrowscrollbox > .scrollbutton-down {
   -moz-appearance: none;
   padding: 0 var(--toolbarbutton-inner-padding) !important;
 }
 
-#navigator-toolbox:not(:hover) > #TabsToolbar > #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .scrollbutton-down:not([highlight]) {
+#navigator-toolbox:not(:hover) > #TabsToolbar .tabbrowser-arrowscrollbox > .scrollbutton-down:not([highlight]) {
   transition: 1s background-color ease-out;
 }
 
 .tabbrowser-arrowscrollbox > .scrollbutton-down[highlight] {
   background-color: Highlight;
 }
 
 .findbar-button {
--- a/browser/themes/windows/browser-aero.css
+++ b/browser/themes/windows/browser-aero.css
@@ -3,19 +3,43 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 %filter substitution
 %define glassActiveBorderColor rgb(37, 44, 51)
 %define glassInactiveBorderColor rgb(102, 102, 102)
 
 @media (-moz-os-version: windows-win7) {
   @media (-moz-windows-classic: 0) {
-    #main-window[sizemode="normal"] > #navigator-toolbox > #toolbar-menubar {
+    #main-window[sizemode="normal"] > #navigator-toolbox > #titlebar > #toolbar-menubar:not([autohide="true"]) > #menubar-items,
+    #main-window[sizemode="normal"] > #navigator-toolbox > #titlebar > #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items {
       margin-top: 1px;
     }
+    /**
+     * For all Windows configurations except for Windows Aero and
+     * Windows Aero Basic, the -moz-window-button-box appearance on
+     * the .titlebar-buttonbox adds an unwanted margin at the top of
+     * the button box.
+     *
+     * For Windows Aero:
+     *   We want the -moz-window-button-box applied in the restored case,
+     *   and -moz-window-button-box-maximized in the maximized case.
+     *
+     * For Windows Aero Basic:
+     *   The margin is also unwanted in the maximized case, but we want
+     *   it in the restored window case.
+     */
+    #main-window[sizemode="normal"] .titlebar-buttonbox {
+      -moz-appearance: -moz-window-button-box;
+    }
+
+    @media (-moz-windows-compositor) {
+      #main-window[sizemode="maximized"] .titlebar-buttonbox {
+        -moz-appearance: -moz-window-button-box-maximized;
+      }
+    }
   }
 }
 
 @media (-moz-windows-default-theme) {
   .menu-accel,
   .menu-iconic-accel {
     color: graytext;
   }
@@ -72,17 +96,17 @@
         /* On win10, if we don't set this on the entire browser container including
          * the sidebar, if the sidebar is open the accent color bleeds through in
          * the titlebar */
         #browser {
           -moz-appearance: -moz-win-exclude-glass;
         }
       }
 
-      #titlebar-buttonbox,
+      .titlebar-buttonbox,
       .titlebar-button {
         -moz-appearance: none !important;
       }
 
       .titlebar-button {
         border: none;
         margin: 0 !important;
         padding: 8px 17px;
@@ -90,45 +114,45 @@
         stroke: currentColor;
       }
 
       .titlebar-button > .toolbarbutton-icon {
         width: 12px;
         height: 12px;
       }
 
-      #titlebar-min {
+      .titlebar-min {
         list-style-image: url(chrome://browser/skin/window-controls/minimize.svg);
       }
 
-      #titlebar-max {
+      .titlebar-max {
         list-style-image: url(chrome://browser/skin/window-controls/maximize.svg);
       }
 
-      :root[sizemode="maximized"] #titlebar-max {
+      :root[sizemode="maximized"] .titlebar-max {
         list-style-image: url(chrome://browser/skin/window-controls/restore.svg);
       }
 
-      #titlebar-close {
+      .titlebar-close {
         list-style-image: url(chrome://browser/skin/window-controls/close.svg);
       }
 
       :root[lwtheme-image] .titlebar-button {
         -moz-context-properties: unset;
       }
-      :root[lwtheme-image] #titlebar-min {
+      :root[lwtheme-image] .titlebar-min {
         list-style-image: url(chrome://browser/skin/window-controls/minimize-themes.svg);
       }
-      :root[lwtheme-image] #titlebar-max {
+      :root[lwtheme-image] .titlebar-max {
         list-style-image: url(chrome://browser/skin/window-controls/maximize-themes.svg);
       }
-      :root[lwtheme-image][sizemode="maximized"] #titlebar-max {
+      :root[lwtheme-image][sizemode="maximized"] .titlebar-max {
         list-style-image: url(chrome://browser/skin/window-controls/restore-themes.svg);
       }
-      :root[lwtheme-image] #titlebar-close {
+      :root[lwtheme-image] .titlebar-close {
         list-style-image: url(chrome://browser/skin/window-controls/close-themes.svg);
       }
 
       /* the 12px image renders a 10px icon, and the 10px upscaled gets rounded to 12.5, which
        * rounds up to 13px, which makes the icon one pixel too big on 1.25dppx. Fix: */
       @media (min-resolution: 1.20dppx) and (max-resolution: 1.45dppx) {
         .titlebar-button > .toolbarbutton-icon {
           width: 11.5px;
@@ -192,63 +216,63 @@
         .titlebar-button:-moz-lwtheme-darktext:hover:active {
           background-color: hsla(0,0%,0%,.22);
         }
 
         .titlebar-button:not(:hover) > .toolbarbutton-icon:-moz-window-inactive {
           opacity: 0.5;
         }
 
-        #titlebar-close:hover {
+        .titlebar-close:hover {
           stroke: white;
           background-color: hsl(355,86%,49%);
         }
 
-        #titlebar-close:hover:active {
+        .titlebar-close:hover:active {
           background-color: hsl(355,82%,69%);
         }
       }
 
       @media (-moz-windows-default-theme: 0) {
         .titlebar-button {
           background-color: -moz-field;
           stroke: ButtonText;
         }
         .titlebar-button:hover {
           background-color: Highlight;
           stroke: HighlightText;
         }
 
-        #titlebar-min {
+        .titlebar-min {
           list-style-image: url(chrome://browser/skin/window-controls/minimize-highcontrast.svg);
         }
 
-        #titlebar-max {
+        .titlebar-max {
           list-style-image: url(chrome://browser/skin/window-controls/maximize-highcontrast.svg);
         }
 
-        :root[sizemode="maximized"] #titlebar-max {
+        :root[sizemode="maximized"] .titlebar-max {
           list-style-image: url(chrome://browser/skin/window-controls/restore-highcontrast.svg);
         }
 
-        #titlebar-close {
+        .titlebar-close {
           list-style-image: url(chrome://browser/skin/window-controls/close-highcontrast.svg);
         }
       }
     }
   }
 
   @media (-moz-os-version: windows-win7),
          (-moz-os-version: windows-win8) {
     :root {
       background-color: transparent;
       -moz-appearance: -moz-win-borderless-glass;
     }
 
-    :root[sizemode="maximized"] #titlebar-buttonbox {
+    :root[sizemode="maximized"] .titlebar-buttonbox {
       margin-inline-end: 3px;
     }
 
     /* These should be hidden w/ glass enabled. Windows draws its own buttons. */
     .titlebar-button {
       display: none;
     }
 
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -74,20 +74,16 @@
 #navigator-toolbox:-moz-lwtheme {
   --tabs-border-color: rgba(0,0,0,.3);
 }
 
 #menubar-items {
   -moz-box-orient: vertical; /* for flex hack */
 }
 
-#main-menubar {
-  -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
-}
-
 #main-menubar > menu {
   -moz-appearance: none;
   color: inherit;
 }
 
 #main-menubar > menu[_moz-menuactive="true"] {
   background-color: -moz-menuhover;
   color: -moz-menuhovertext;
@@ -100,22 +96,16 @@
 @media (-moz-windows-default-theme) {
   @media not all and (-moz-os-version: windows-win7) {
     #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive {
       color: ThreeDShadow;
     }
   }
 }
 
-/* Hides the titlebar-placeholder underneath the window caption buttons when we
-   are not autohiding the menubar. */
-#toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
-  display: none;
-}
-
 :root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar,
 :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar {
   padding-top: var(--space-above-tabbar);
 }
 
 /* Add 4px extra margin on top of the tabs toolbar on Windows 7. */
 @media (-moz-os-version: windows-win7) {
   :root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar,
@@ -191,27 +181,16 @@
     color: CaptionText;
   }
 
   :root[tabsintitlebar]:not([inFullscreen]):not(:-moz-lwtheme):-moz-window-inactive {
     color: InactiveCaptionText;
   }
 }
 
-@media (-moz-windows-compositor: 0) {
-  #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
-    visibility: hidden;
-  }
-
-  #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
-    visibility: visible;
-    -moz-window-dragging: drag;
-  }
-}
-
 /**
  * In the classic themes, the titlebar has a horizontal gradient, which is
  * problematic for reading the text of background tabs when they're in the
  * titlebar. We side-step this issue by layering our own background underneath
  * the tabs. Unfortunately, this requires a bunch of positioning in order to get
  * text and icons to not appear fuzzy.
  */
 @media (-moz-windows-classic) {
@@ -270,95 +249,118 @@
 
   /* End classic titlebar gradient */
 
   #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) toolbarbutton:not(:-moz-lwtheme) {
     color: inherit;
   }
 }
 
-#TabsToolbar:not([collapsed="true"]) + #nav-bar {
+#nav-bar:not([tabs-hidden="true"]) {
   /* This is needed for some toolbar button animations. Gross :( */
   position: relative;
 }
 
 #nav-bar {
   box-shadow: 0 -@navbarTabsShadowSize@ 0 var(--tabs-border-color);
 }
 @media (-moz-windows-compositor: 0) {
-  #TabsToolbar[collapsed="true"] + #nav-bar {
+  #nav-bar[tabs-hidden="true"] {
     box-shadow: none;
   }
 }
 
 #print-preview-toolbar:not(:-moz-lwtheme) {
   -moz-appearance: toolbox;
 }
 
 #browser-bottombox:not(:-moz-lwtheme) {
   background-color: -moz-dialog;
 }
 
 /* ::::: titlebar ::::: */
 
-#main-window[sizemode="normal"] > #titlebar {
+#main-window[tabsintitlebar][sizemode="normal"] > #navigator-toolbox > #titlebar {
   -moz-appearance: -moz-window-titlebar;
 }
 
-#main-window[sizemode="maximized"] > #titlebar {
+#main-window[tabsintitlebar][sizemode="maximized"] > #navigator-toolbox > #titlebar {
   -moz-appearance: -moz-window-titlebar-maximized;
 }
 
+@media (-moz-windows-compositor: 0) {
+  /**
+   * Anytime we're not using the compositor on Windows, the -moz-window-titlebar
+   * and -moz-window-titlebar-maximized values for -moz-appearance override
+   * backgrounds supplied by lwthemes. We make the #titlebar itself hidden, but
+   * it's children visible in order to hide the background but keep the margin and
+   * padding that comes from those -moz-window-titlebar rules.
+   */
+  #titlebar:-moz-lwtheme {
+    visibility: hidden;
+  }
+  #toolbar-menubar:-moz-lwtheme,
+  #TabsToolbar:-moz-lwtheme {
+    visibility: visible;
+  }
+}
+
 @media (-moz-windows-classic) {
-  #main-window[tabsintitlebar][sizemode="normal"] > #navigator-toolbox > #toolbar-menubar {
+  #main-window[tabsintitlebar][sizemode="normal"] > #navigator-toolbox > #titlebar > #toolbar-menubar {
     margin-top: 4px;
   }
 }
 
-/* The button box must appear on top of the navigator-toolbox in order for
- * click and hover mouse events to work properly for the button in the restored
- * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
- * can swallow those events. It will also place the buttons above the fog on
- * Windows 7 with Aero Glass.
- */
-#titlebar-buttonbox {
+.titlebar-buttonbox {
+  /* For all Windows configurations except for Windows Aero and Windows Aero Basic,
+   * the default -moz-appearance of -moz-window-button-box and
+   * -moz-window-button-box-maximized adds unwanted margins to the button box. We
+   * special case Windows Aero and Windows Aero Basic in browser-aero.css.
+   */
+  -moz-appearance: none;
+  /* The button box must appear on top of the navigator-toolbox in order for
+   * click and hover mouse events to work properly for the button in the restored
+   * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
+   * can swallow those events. It will also place the buttons above the fog on
+   * Windows 7 with Aero Glass.
+   */
   z-index: 1;
 }
 
-#titlebar-buttonbox-container {
-  -moz-box-align: center;
+.titlebar-buttonbox-container {
+  -moz-box-align: stretch;
 }
 
 @media (-moz-os-version: windows-win7) {
   /* Preserve window control buttons position at the top of the button box. */
-  #titlebar-buttonbox-container {
+  .titlebar-buttonbox-container {
     -moz-box-align: start;
   }
 }
 
 /* titlebar command buttons */
 
-#titlebar-min {
+.titlebar-min {
   -moz-appearance: -moz-window-button-minimize;
 }
 
-#titlebar-max {
+.titlebar-max {
   -moz-appearance: -moz-window-button-maximize;
 }
 
-#main-window[sizemode="maximized"] #titlebar-max {
+#main-window[sizemode="maximized"] .titlebar-max {
   -moz-appearance: -moz-window-button-restore;
 }
 
-#titlebar-close {
+.titlebar-close {
   -moz-appearance: -moz-window-button-close;
 }
 
 @media (-moz-windows-classic: 0) {
-  #titlebar-min {
+  .titlebar-min {
     margin-inline-end: 2px;
   }
 }
 
 /* ::::: bookmark menus ::::: */
 
 menu.bookmark-item,
 menuitem.bookmark-item {
@@ -941,31 +943,31 @@ notification[value="translation"] {
  * paint, so this hack is how we sidestep that performance bottleneck.
  */
 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
   transform: perspective(0.01px);
 }
 
 /* End customization mode */
 
-/* Private browsing and accessibility indicators */
-
-:root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .private-browsing-indicator,
-:root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .accessibility-indicator,
-:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .private-browsing-indicator,
-:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .accessibility-indicator {
+/**
+ * Titlebar items (window caption buttons, private browsing indicator,
+ * accessibility indicator, etc)
+ */
+:root[sizemode="normal"][chromehidden~="menubar"] .titlebar-item,
+:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .titlebar-item,
+:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] > .titlebar-item {
   margin-top: calc(-1 * var(--space-above-tabbar));
 }
 
 /* Compensate for 4px extra margin on top of the tabs toolbar on Windows 7. */
 @media (-moz-os-version: windows-win7) {
-  :root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .private-browsing-indicator,
-  :root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .accessibility-indicator,
-  :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .private-browsing-indicator,
-  :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .accessibility-indicator {
+  :root[sizemode="normal"][chromehidden~="menubar"] .titlebar-item,
+  :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .titlebar-item,
+  :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] > .titlebar-item {
     margin-top: calc(-1 * (var(--space-above-tabbar) + 4px));
   }
 }
 
 :root:not([privatebrowsingmode=temporary]) .accessibility-indicator,
 .private-browsing-indicator {
   margin-inline-end: 12px;
 }
--- a/browser/themes/windows/compacttheme.css
+++ b/browser/themes/windows/compacttheme.css
@@ -12,17 +12,17 @@
 }
 
 /* The window background is white due to no accentcolor in the lightweight
    theme. It can't be changed to transparent when there is no compositor
    (Win 7 in classic / basic theme), or else dragging and focus become
    broken. So instead just show the normal titlebar in that case, and override
    the window color as transparent when the compositor is available. */
 @media (-moz-windows-compositor: 0) {
-  #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
+  #main-window[tabsintitlebar] > #navigator-toolbox > #titlebar:-moz-lwtheme {
     visibility: visible;
   }
 
   /* Prevent accent color overriding the window background for
    * light and dark theme on Aero Basic. This is copied from browser-aero.css. */
   @media (-moz-windows-default-theme) {
     #main-window {
       background-color: rgb(185,209,234) !important;
--- a/toolkit/themes/windows/global/toolbarbutton.css
+++ b/toolkit/themes/windows/global/toolbarbutton.css
@@ -50,20 +50,16 @@ toolbarbutton[disabled="true"] {
   }
 
   :root[lwtheme-image] toolbarbutton:not([disabled="true"]) {
     text-shadow: inherit;
   }
 }
 
 @media (-moz-windows-default-theme: 0) {
-  :root[lwtheme-image] toolbarbutton {
-    -moz-appearance: none;
-  }
-
   :root[lwtheme-image] toolbarbutton:not([disabled="true"]) {
     text-shadow: inherit;
   }
 }
 
 /* ::::: toolbarbutton menu ::::: */
 
 .toolbarbutton-menu-dropmarker {