From 17460bb09d7a3fca3cef0ce89ec6c408b2cc51f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emilio=20Cobos=20=C3=81lvarez?= <emilio@crisal.io>
Date: Mon, 2 Sep 2024 13:47:45 +0000
Subject: [PATCH] Bug 1916098 - Remove appcontent box.
 r=dao,desktop-theme-reviewers,devtools-reviewers,tabbrowser-reviewers,nchevobbe

gNotificationBox doesn't go there anymore (it goes inside the toolbox),
so we have really no use for that.

Simplify how the devtools theme is set on the browser, so that it is set
on the root.

Differential Revision: https://phabricator.services.mozilla.com/D220769
---
 browser/base/content/browser-box.inc.xhtml    | 11 +++-------
 .../test/performance/browser_tabclose.js      |  5 +++--
 .../browser_tabstrip_overflow_underflow.js    |  3 ++-
 .../test/performance/browser_tabswitch.js     |  5 +++--
 .../test/sidebar/browser_sidebar_move.js      |  4 ++--
 .../tests/browser/browser_keyboard_tests.js   |  4 ++--
 browser/components/sidebar/browser-sidebar.js | 12 +++++------
 .../themes/shared/tabbrowser/content-area.css | 15 +++++++------
 devtools/client/framework/devtools-browser.js | 14 ++++---------
 .../framework/test/browser_toolbox_theme.js   |  6 +++---
 .../client/responsive/responsive-browser.css  | 21 ++++++++++---------
 devtools/client/themes/devtools-browser.css   |  4 ++--
 devtools/client/themes/splitters.css          | 14 +++++--------
 13 files changed, 53 insertions(+), 65 deletions(-)

diff --git a/browser/base/content/browser-box.inc.xhtml b/browser/base/content/browser-box.inc.xhtml
index 108160d9469d..5e4eaf77b66b 100644
--- a/browser/base/content/browser-box.inc.xhtml
+++ b/browser/base/content/browser-box.inc.xhtml
@@ -22,12 +22,7 @@
     <browser id="sidebar" autoscroll="false" disablehistory="true" disablefullscreen="true" tooltip="aHTMLTooltip"/>
   </vbox>
   <splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
-  <vbox id="appcontent" flex="1">
-    <!-- gNotificationBox will be added here lazily. -->
-    <tabbox id="tabbrowser-tabbox"
-            flex="1" tabcontainer="tabbrowser-tabs">
-      <tabpanels id="tabbrowser-tabpanels"
-                  flex="1" selectedIndex="0"/>
-    </tabbox>
-  </vbox>
+  <tabbox id="tabbrowser-tabbox" flex="1" tabcontainer="tabbrowser-tabs">
+    <tabpanels id="tabbrowser-tabpanels" flex="1" selectedIndex="0"/>
+  </tabbox>
 </hbox>
diff --git a/browser/base/content/test/performance/browser_tabclose.js b/browser/base/content/test/performance/browser_tabclose.js
index 961686587f07..bede02319328 100644
--- a/browser/base/content/test/performance/browser_tabclose.js
+++ b/browser/base/content/test/performance/browser_tabclose.js
@@ -97,8 +97,9 @@ add_task(async function () {
               AppConstants.DEBUG &&
               // In the content area
               r.y1 >=
-                document.getElementById("appcontent").getBoundingClientRect()
-                  .top,
+                document
+                  .getElementById("tabbrowser-tabbox")
+                  .getBoundingClientRect().top,
           },
         ],
       },
diff --git a/browser/base/content/test/performance/browser_tabstrip_overflow_underflow.js b/browser/base/content/test/performance/browser_tabstrip_overflow_underflow.js
index 50d108c062d1..588304497a8a 100644
--- a/browser/base/content/test/performance/browser_tabstrip_overflow_underflow.js
+++ b/browser/base/content/test/performance/browser_tabstrip_overflow_underflow.js
@@ -82,7 +82,8 @@ add_task(async function () {
         condition: r =>
           // In the content area
           r.y1 >=
-          document.getElementById("appcontent").getBoundingClientRect().top,
+          document.getElementById("tabbrowser-tabbox").getBoundingClientRect()
+            .top,
       },
     ],
   };
diff --git a/browser/base/content/test/performance/browser_tabswitch.js b/browser/base/content/test/performance/browser_tabswitch.js
index ba29efa6624b..b668d0b99977 100644
--- a/browser/base/content/test/performance/browser_tabswitch.js
+++ b/browser/base/content/test/performance/browser_tabswitch.js
@@ -115,8 +115,9 @@ add_task(async function () {
               AppConstants.DEBUG &&
               // In the content area
               r.y1 >=
-                document.getElementById("appcontent").getBoundingClientRect()
-                  .top,
+                document
+                  .getElementById("tabbrowser-tabbox")
+                  .getBoundingClientRect().top,
           },
         ],
       },
diff --git a/browser/base/content/test/sidebar/browser_sidebar_move.js b/browser/base/content/test/sidebar/browser_sidebar_move.js
index 05ea9e3322dc..4bb66863a274 100644
--- a/browser/base/content/test/sidebar/browser_sidebar_move.js
+++ b/browser/base/content/test/sidebar/browser_sidebar_move.js
@@ -7,14 +7,14 @@ const EXPECTED_START_ORDINALS = [
   ["sidebar-main", 1],
   ["sidebar-box", 2],
   ["sidebar-splitter", 3],
-  ["appcontent", 4],
+  ["tabbrowser-tabbox", 4],
 ];
 
 const EXPECTED_END_ORDINALS = [
   ["sidebar-main", 5],
   ["sidebar-box", 4],
   ["sidebar-splitter", 3],
-  ["appcontent", 2],
+  ["tabbrowser-tabbox", 2],
 ];
 
 function getBrowserChildrenWithOrdinals() {
diff --git a/browser/components/screenshots/tests/browser/browser_keyboard_tests.js b/browser/components/screenshots/tests/browser/browser_keyboard_tests.js
index 12c501de1225..b4ae0f7056c7 100644
--- a/browser/components/screenshots/tests/browser/browser_keyboard_tests.js
+++ b/browser/components/screenshots/tests/browser/browser_keyboard_tests.js
@@ -366,7 +366,7 @@ add_task(async function test_createRegionWithKeyboard() {
       } else {
         const sidebar = document.querySelector("sidebar-main");
         const sidebarWidth = sidebar.offsetWidth;
-        // Add 1 to account for #appcontent border
+        // Add 1 to account for chrome-content-separator
         window100X =
           (100 + window.mozInnerScreenX + sidebarWidth + 1) *
           window.devicePixelRatio;
@@ -458,7 +458,7 @@ add_task(async function test_createRegionWithKeyboardWithShift() {
       } else {
         const sidebar = document.querySelector("sidebar-main");
         const sidebarWidth = sidebar.offsetWidth;
-        // Add 1 to account for #appcontent border
+        // Add 1 to account for chrome-content-separator
         window100X =
           (100 + window.mozInnerScreenX + sidebarWidth + 1) *
           window.devicePixelRatio;
diff --git a/browser/components/sidebar/browser-sidebar.js b/browser/components/sidebar/browser-sidebar.js
index c68a32794996..c34b8b4abcef 100644
--- a/browser/components/sidebar/browser-sidebar.js
+++ b/browser/components/sidebar/browser-sidebar.js
@@ -528,14 +528,14 @@ var SidebarController = {
     let sidebarContainer = document.getElementById("sidebar-main");
     let sidebarMain = document.querySelector("sidebar-main");
     if (!this._positionStart) {
-      // DOM ordering is:     sidebar-main |  sidebar-box  | splitter |   appcontent  |
-      // Want to display as:  |   appcontent  | splitter |  sidebar-box  | sidebar-main
-      // So we just swap box and appcontent ordering and move sidebar-main to the end
-      let appcontent = document.getElementById("appcontent");
+      // DOM ordering is:     sidebar-main |  sidebar-box  | splitter | tabbrowser-tabbox |
+      // Want to display as:  |   tabbrowser-tabbox  | splitter |  sidebar-box  | sidebar-main
+      // So we just swap box and tabbrowser-tabbox ordering and move sidebar-main to the end
+      let tabbox = document.getElementById("tabbrowser-tabbox");
       let boxOrdinal = this._box.style.order;
-      this._box.style.order = appcontent.style.order;
+      this._box.style.order = tabbox.style.order;
 
-      appcontent.style.order = boxOrdinal;
+      tabbox.style.order = boxOrdinal;
       // the launcher should be on the right of the sidebar-box
       sidebarContainer.style.order = parseInt(this._box.style.order) + 1;
       // Indicate we've switched ordering to the box
diff --git a/browser/themes/shared/tabbrowser/content-area.css b/browser/themes/shared/tabbrowser/content-area.css
index 5650cb94e220..6f04e264fa20 100644
--- a/browser/themes/shared/tabbrowser/content-area.css
+++ b/browser/themes/shared/tabbrowser/content-area.css
@@ -25,7 +25,6 @@
   }
 }
 
-#appcontent,
 #browser,
 #tabbrowser-tabbox,
 #tabbrowser-tabpanels,
@@ -35,19 +34,19 @@
   min-height: 0;
 }
 
-#appcontent {
 /* stylelint-disable-next-line media-query-no-invalid */
-  @media (-moz-bool-pref: "sidebar.revamp") {
+@media (-moz-bool-pref: "sidebar.revamp") {
+  #tabbrowser-tabbox {
     border-top: 0.5px solid var(--chrome-content-separator-color);
     border-inline-start: 0.5px solid var(--chrome-content-separator-color);
     box-shadow: 0 2px 6px 0 light-dark(rgb(0, 0, 0, 0.2), rgb(0, 0, 0, 0.8));
     position: relative;
-  }
 
-  /* stylelint-disable-next-line media-query-no-invalid */
-  @media (not (-moz-bool-pref: "sidebar.position_start")) and (-moz-bool-pref: "sidebar.revamp") {
-    border-inline-end: 0.5px solid var(--chrome-content-separator-color);
-    border-inline-start: none;
+    /* stylelint-disable-next-line media-query-no-invalid */
+    @media not (-moz-bool-pref: "sidebar.position_start") {
+      border-inline-end: 0.5px solid var(--chrome-content-separator-color);
+      border-inline-start: none;
+    }
   }
 }
 
diff --git a/devtools/client/framework/devtools-browser.js b/devtools/client/framework/devtools-browser.js
index 2cfbc09331ba..1ecd490bdd40 100644
--- a/devtools/client/framework/devtools-browser.js
+++ b/devtools/client/framework/devtools-browser.js
@@ -136,9 +136,9 @@ var gDevToolsBrowser = (exports.gDevToolsBrowser = {
   },
 
   /**
-   * This function makes sure that the "devtoolstheme" attribute is set on the browser
-   * window to make it possible to change colors on elements in the browser (like the
-   * splitter between the toolbox and web content).
+   * This function makes sure that the "devtoolstheme" attribute is set on the
+   * browser window to make it possible to change colors on elements in the
+   * browser (like the splitter between the toolbox and web content).
    */
   updateDevtoolsThemeAttribute(win) {
     // Set an attribute on root element of each window to make it possible
@@ -147,13 +147,7 @@ var gDevToolsBrowser = (exports.gDevToolsBrowser = {
     if (devtoolsTheme != "dark") {
       devtoolsTheme = "light";
     }
-
-    // Style the splitter between the toolbox and page content.  This used to
-    // set the attribute on the browser's root node but that regressed tpaint:
-    // bug 1331449.
-    win.document
-      .getElementById("appcontent")
-      .setAttribute("devtoolstheme", devtoolsTheme);
+    win.document.documentElement.setAttribute("devtoolstheme", devtoolsTheme);
   },
 
   observe(subject, topic, prefName) {
diff --git a/devtools/client/framework/test/browser_toolbox_theme.js b/devtools/client/framework/test/browser_toolbox_theme.js
index 63d83e83129f..26c8997091ce 100644
--- a/devtools/client/framework/test/browser_toolbox_theme.js
+++ b/devtools/client/framework/test/browser_toolbox_theme.js
@@ -12,21 +12,21 @@ add_task(async function testDevtoolsTheme() {
   info("Checking stylesheet and :root attributes based on devtools theme.");
   Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "light");
   is(
-    document.getElementById("appcontent").getAttribute("devtoolstheme"),
+    document.documentElement.getAttribute("devtoolstheme"),
     "light",
     "The element has an attribute based on devtools theme."
   );
 
   Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "dark");
   is(
-    document.getElementById("appcontent").getAttribute("devtoolstheme"),
+    document.documentElement.getAttribute("devtoolstheme"),
     "dark",
     "The element has an attribute based on devtools theme."
   );
 
   Services.prefs.setCharPref(PREF_DEVTOOLS_THEME, "unknown");
   is(
-    document.getElementById("appcontent").getAttribute("devtoolstheme"),
+    document.documentElement.getAttribute("devtoolstheme"),
     "light",
     "The element has 'light' as a default for the devtoolstheme attribute."
   );
diff --git a/devtools/client/responsive/responsive-browser.css b/devtools/client/responsive/responsive-browser.css
index 7eb86982f18c..4abf9cb33e98 100644
--- a/devtools/client/responsive/responsive-browser.css
+++ b/devtools/client/responsive/responsive-browser.css
@@ -2,18 +2,19 @@
  * 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/. */
 
-#appcontent[devtoolstheme="light"] {
-  --rdm-browser-container-background: #F5F5F6;
-  --rdm-browser-box-shadow: 0 4px 4px 0 rgba(155, 155, 155, 0.26);
-}
+:root {
+  /* This should map to --theme-toolbar-background. */
+  --rdm-background-color: #F5F5F6;
+  --rdm-shadow-color: rgba(155, 155, 155, 0.26);
 
-#appcontent[devtoolstheme="dark"] {
-  --rdm-browser-container-background: #18181a; /* This should map to --theme-toolbar-background. */
-  --rdm-browser-box-shadow: 0 4px 4px 0 rgba(105, 105, 105, 0.26);
+  &[devtoolstheme="dark"] {
+    --rdm-background-color: #18181a;
+    --rdm-shadow-color: rgba(105, 105, 105, 0.26);
+  }
 }
 
 .browserContainer.responsive-mode {
-  background-color: var(--rdm-browser-container-background);
+  background-color: var(--rdm-background-color);
   --rdm-toolbar-height: 30px;
   --rdm-toolbar-accomodate-ua-height: 60px;
 }
@@ -87,10 +88,10 @@ html[dir="rtl"] .browserContainer.responsive-mode.left-aligned > .browserStack {
 
 .browserContainer.responsive-mode > .browserStack > browser {
   border: 1px solid var(--devtools-splitter-color);
-  box-shadow: var(--rdm-browser-box-shadow);
+  box-shadow: 0 4px 4px 0 var(--rdm-shadow-color);
+
   transform-origin: 50% 0;
   transform: scale(var(--rdm-zoom), var(--rdm-zoom));
-
   box-sizing: content-box; /* This is important to ensure that the pane has the
                               precise number of pixels defined by --rdm-width
                               and --rdm-height. */
diff --git a/devtools/client/themes/devtools-browser.css b/devtools/client/themes/devtools-browser.css
index bc208e3bc85b..4466580d13f4 100644
--- a/devtools/client/themes/devtools-browser.css
+++ b/devtools/client/themes/devtools-browser.css
@@ -2,9 +2,9 @@
  * 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/. */
 
+/* This file is dynamically loaded when either the toolbox or RDM is open. */
+
 @import url("chrome://devtools/skin/splitters.css");
-/* Imports the styles that will apply to the browser window for Responsive Design Mode.
-   This is dynamically loaded when either the toolbox or RDM is open. */
 @import url("chrome://devtools/content/responsive/responsive-browser.css");
 
 /* Set min-height to 29px as it matches the height of the .devtools-tabbar (/devtools/client/themes/toolbox.css#67)
diff --git a/devtools/client/themes/splitters.css b/devtools/client/themes/splitters.css
index 6b2373b9bd11..ff38d49bcd2f 100644
--- a/devtools/client/themes/splitters.css
+++ b/devtools/client/themes/splitters.css
@@ -8,6 +8,11 @@
 /* Splitters */
 
 :root {
+  --devtools-splitter-color: #e0e0e2;
+  &[devtoolstheme="dark"]  {
+    --devtools-splitter-color: #38383d;
+  }
+
   /* Draggable splitter element size */
   --devtools-splitter-element-size: 1px;
   --devtools-emphasized-splitter-element-size: 2px;
@@ -34,15 +39,6 @@
                                                var(--devtools-splitter-element-size));
 }
 
-#appcontent[devtoolstheme="light"] {
-  /* These variables are used in browser.xhtml but inside the toolbox they are overridden by --theme-splitter-color */
-  --devtools-splitter-color: #e0e0e2;
-}
-
-#appcontent[devtoolstheme="dark"] {
-  --devtools-splitter-color: #38383d;
-}
-
 splitter.devtools-horizontal-splitter,
 .devtools-side-splitter {
   appearance: none;