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
2024-09-02 13:47:45 +00:00 · 2024-09-02 13:47:45 +00:00 · 17460bb09d
--- 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 id="tabbrowser-tabbox" flex="1" tabcontainer="tabbrowser-tabs">
+    <tabpanels id="tabbrowser-tabpanels" flex="1" selectedIndex="0"/>
  </tabbox>
-  </vbox>
 </hbox>
--- 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,
          },
        ],
      },
--- 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,
      },
    ],
  };
--- 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,
          },
        ],
      },
--- 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() {
--- 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;
--- 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
--- 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,20 +34,20 @@
  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") {
+    @media not (-moz-bool-pref: "sidebar.position_start") {
      border-inline-end: 0.5px solid var(--chrome-content-separator-color);
      border-inline-start: none;
    }
+  }
 }

 /* We set large flex on both containers to allow the devtools toolbox to
--- 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) {
--- 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."
  );
--- 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. */
--- 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)
--- 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;