Bug 1735318 - Unify "native" vs. "fullscreen" window controls. r=desktop-theme-reviewers,dao

I've tested this (both with and without titlebar) in Linux, Win10,
Win11, Win7 and macOS.

 * On macOS behavior doesn't change at all (since on fullscreen we didn't
show the buttons to begin with).

 * Linux now shows "native" buttons on fullscreen (which is also an
improvement).

 * On Windows 10/11 the sizing of the buttons is now the same when
fullscreen vs. not (which is an improvement).

 * On Windows 7 we now use regular native-looking buttons (like on
   windows 10) instead of the custom windowControls.png. That could be
   considered a slight regression I guess, but is consistent with win10.

Differential Revision: https://phabricator.services.mozilla.com/D128196

browser/base/content/browser-fullScreenAndPointerLock.js

@@ -854,26 +854,6 @@ var FullScreen = {
     }
 
     ToolbarIconColor.inferFromText("fullscreen", aEnterFS);
-
-    // For macOS, we use native full screen, all full screen controls
-    // are hidden, don't bother to touch them. If we don't stop here,
-    // the following code could cause the native full screen button be
-    // shown unexpectedly. See bug 1165570.
-    if (AppConstants.platform == "macosx") {
-      return;
-    }
-
-    var fullscreenctls = document.getElementById("window-controls");
-    var navbar = document.getElementById("nav-bar");
-    var ctlsOnTabbar = window.toolbar.visible;
-    if (fullscreenctls.parentNode == navbar && ctlsOnTabbar) {
-      fullscreenctls.removeAttribute("flex");
-      document.getElementById("TabsToolbar").appendChild(fullscreenctls);
-    } else if (fullscreenctls.parentNode.id == "TabsToolbar" && !ctlsOnTabbar) {
-      fullscreenctls.setAttribute("flex", "1");
-      navbar.appendChild(fullscreenctls);
-    }
-    fullscreenctls.hidden = !aEnterFS;
   },
 };
 

browser/base/content/browser.css

@@ -321,8 +321,7 @@ toolbar[customizing] #whats-new-menu-button {
 :root:not([sizemode=normal]) .titlebar-spacer[type="pre-tabs"],
 %endif
 %endif
-:root:not([chromemargin]) .titlebar-buttonbox-container,
-:root[inFullscreen] .titlebar-buttonbox-container,
+:root:not([chromemargin], [inFullscreen]) .titlebar-buttonbox-container,
 :root[inFullscreen] .titlebar-spacer,
 :root:not([tabsintitlebar]) .titlebar-spacer {
   display: none;
@@ -342,8 +341,8 @@ toolbar[customizing] #whats-new-menu-button {
 }
 %endif
 
-:root:not([sizemode=maximized]) .titlebar-restore,
-:root[sizemode=maximized] .titlebar-max {
+:root:not([sizemode=maximized], [sizemode=fullscreen]) .titlebar-restore,
+:root:is([sizemode=maximized], [sizemode=fullscreen]) .titlebar-max {
   display: none;
 }
 
@@ -361,7 +360,7 @@ toolbar[customizing] #whats-new-menu-button {
   position: relative;
 }
 
-:root:not([tabsintitlebar]) .titlebar-buttonbox {
+:root:not([tabsintitlebar], [sizemode=fullscreen]) .titlebar-buttonbox {
   display: none;
 }
 

browser/base/content/navigator-toolbox.inc.xhtml

@@ -446,21 +446,6 @@
                      consumeanchor="PanelUI-button"
                      data-l10n-id="appmenu-menu-button-closed2"/>
     </toolbaritem>
-
-    <hbox id="window-controls" hidden="true" pack="end" skipintoolbarset="true"
-          style="-moz-box-ordinal-group: 1000;">
-      <toolbarbutton id="minimize-button"
-                     data-l10n-id="browser-window-minimize-button"
-                     oncommand="window.minimize();"/>
-
-      <toolbarbutton id="restore-button"
-                     data-l10n-id="browser-window-restore-down-button"
-                     oncommand="BrowserFullScreen();"/>
-
-      <toolbarbutton id="close-button"
-                     data-l10n-id="browser-window-close-button"
-                     oncommand="BrowserTryToCloseWindow(event);"/>
-    </hbox>
   </toolbar>
 
   <toolbar id="PersonalToolbar"

browser/base/content/titlebar-items.inc.xhtml

@@ -16,7 +16,7 @@
                    />
     <toolbarbutton class="titlebar-button titlebar-restore"
                    titlebar-btn="max"
-                   oncommand="window.restore();"
+                   oncommand="window.fullScreen ? BrowserFullScreen() : window.restore();"
                    data-l10n-id="browser-window-restore-down-button"
                    />
     <toolbarbutton class="titlebar-button titlebar-close"

browser/themes/linux/browser.css

@@ -120,59 +120,6 @@ menuitem.bookmark-item {
 %include ../shared/toolbarbutton-icons.inc.css
 %include ../shared/menupanel.inc.css
 
-/* Fullscreen window controls */
-
-#minimize-button,
-#restore-button,
-#close-button {
-  appearance: none;
-  padding: 6px 12px;
-  -moz-context-properties: stroke;
-  stroke: currentColor;
-  color: inherit;
-}
-
-#minimize-button {
-  list-style-image: url(chrome://browser/skin/window-controls/minimize.svg);
-}
-
-#restore-button {
-  list-style-image: url(chrome://browser/skin/window-controls/restore.svg);
-}
-
-#minimize-button:hover,
-#restore-button:hover {
-  background-color: hsla(0,0%,0%,.12);
-}
-
-#minimize-button:hover:active,
-#restore-button:hover:active {
-  background-color: hsla(0,0%,0%,.22);
-}
-
-#TabsToolbar[brighttext] > #window-controls > #minimize-button:hover,
-#TabsToolbar[brighttext] > #window-controls > #restore-button:hover {
-  background-color: hsla(0,0%,100%,.12);
-}
-
-#TabsToolbar[brighttext] > #window-controls > #minimize-button:hover:active,
-#TabsToolbar[brighttext] > #window-controls > #restore-button:hover:active {
-  background-color: hsla(0,0%,100%,.22);
-}
-
-#close-button {
-  list-style-image: url(chrome://browser/skin/window-controls/close.svg);
-}
-
-#close-button:hover {
-  background-color: #d70022;
-  stroke: white;
-}
-
-#close-button:hover:active {
-  background-color: #ff0039;
-}
-
 /* Address bar */
 
 %include ../shared/urlbar-searchbar.inc.css

browser/themes/linux/jar.mn

@@ -27,8 +27,5 @@ browser.jar:
 * skin/classic/browser/preferences/preferences.css    (preferences/preferences.css)
 * skin/classic/browser/preferences/dialog.css         (preferences/dialog.css)
   skin/classic/browser/preferences/applications.css   (preferences/applications.css)
-  skin/classic/browser/window-controls/close.svg                 (window-controls/close.svg)
-  skin/classic/browser/window-controls/minimize.svg              (window-controls/minimize.svg)
-  skin/classic/browser/window-controls/restore.svg               (window-controls/restore.svg)
 
   skin/classic/browser/e10s-64@2x.png (../shared/e10s-64@2x.png)

browser/themes/osx/browser.css

@@ -185,14 +185,6 @@
   opacity: 0.5;
 }
 
-/* ----- FULLSCREEN WINDOW CONTROLS ----- */
-
-#minimize-button,
-#close-button,
-#fullscreen-button ~ #window-controls > #restore-button {
-  display: none;
-}
-
 /* Address bar */
 
 %include ../shared/urlbar-searchbar.inc.css

browser/themes/windows/browser.css

@@ -304,141 +304,6 @@ menuitem.bookmark-item {
 %include ../shared/toolbarbutton-icons.inc.css
 %include ../shared/menupanel.inc.css
 
-/* Fullscreen window controls */
-
-#minimize-button,
-#restore-button,
-#close-button {
-  appearance: none;
-  padding: 6px 12px;
-  -moz-context-properties: stroke;
-  stroke: currentColor;
-  color: inherit;
-}
-
-#minimize-button {
-  list-style-image: url(chrome://browser/skin/window-controls/minimize.svg);
-}
-
-#restore-button {
-  list-style-image: url(chrome://browser/skin/window-controls/restore.svg);
-}
-
-#restore-button > .toolbarbutton-icon:-moz-locale-dir(rtl) {
-  transform: scaleX(-1);
-}
-
-#minimize-button:hover,
-#restore-button:hover {
-  background-color: hsla(0,0%,0%,.12);
-}
-
-#minimize-button:hover:active,
-#restore-button:hover:active {
-  background-color: hsla(0,0%,0%,.22);
-}
-
-#TabsToolbar[brighttext] > #window-controls > #minimize-button:hover,
-#TabsToolbar[brighttext] > #window-controls > #restore-button:hover {
-  background-color: hsla(0,0%,100%,.12);
-}
-
-#TabsToolbar[brighttext] > #window-controls > #minimize-button:hover:active,
-#TabsToolbar[brighttext] > #window-controls > #restore-button:hover:active {
-  background-color: hsla(0,0%,100%,.22);
-}
-
-#close-button {
-  list-style-image: url(chrome://browser/skin/window-controls/close.svg);
-}
-
-#close-button:hover {
-  background-color: hsl(355, 86%, 49%);
-  stroke: white;
-}
-
-#close-button:hover:active {
-  background-color: hsl(355, 82%, 69%);
-}
-
-@media (-moz-os-version: windows-win7) {
-  #window-controls {
-    -moz-box-align: start;
-    margin-inline-start: 4px;
-  }
-
-  #minimize-button,
-  #restore-button,
-  #close-button {
-    appearance: none;
-    border-style: none;
-    margin: 0;
-    /* Important to ensure this applies even on toolbar[brighttext] */
-    list-style-image: url("chrome://global/skin/icons/windowControls.png") !important;
-    /* Also override background color to a avoid hover background styling
-     * leaking through around the image. */
-    background-color: transparent !important;
-    padding: 0;
-    -moz-context-properties: unset;
-  }
-
-  #minimize-button {
-    -moz-image-region: rect(0, 16px, 16px, 0);
-  }
-
-  #minimize-button:hover {
-    -moz-image-region: rect(16px, 16px, 32px, 0);
-  }
-
-  #minimize-button:hover:active {
-    -moz-image-region: rect(32px, 16px, 48px, 0);
-  }
-
-  #restore-button {
-    -moz-image-region: rect(0, 32px, 16px, 16px);
-  }
-
-  #restore-button:hover {
-    -moz-image-region: rect(16px, 32px, 32px, 16px);
-  }
-
-  #restore-button:hover:active {
-    -moz-image-region: rect(32px, 32px, 48px, 16px);
-  }
-
-  #close-button {
-    -moz-image-region: rect(0, 48px, 16px, 32px);
-  }
-
-  #close-button:hover {
-    -moz-image-region: rect(16px, 48px, 32px, 32px);
-  }
-
-  #close-button:hover:active {
-    -moz-image-region: rect(32px, 48px, 48px, 32px);
-  }
-
-  #close-button {
-    -moz-image-region: rect(0, 49px, 16px, 32px);
-  }
-
-  #close-button:hover {
-    -moz-image-region: rect(16px, 49px, 32px, 32px);
-  }
-
-  #close-button:hover:active {
-    -moz-image-region: rect(32px, 49px, 48px, 32px);
-  }
-
-  /* Normally there's no need to mirror these buttons for RTL,
-     but both have curves at their bottom right/left, and without
-     mirroring them their curves would appear in the wrong spot. */
-  #minimize-button > .toolbarbutton-icon:-moz-locale-dir(rtl),
-  #close-button > .toolbarbutton-icon:-moz-locale-dir(rtl) {
-    transform: scaleX(-1);
-  }
-}
-
 /* Address bar */
 
 %include ../shared/urlbar-searchbar.inc.css

toolkit/themes/windows/global/jar.mn

@@ -33,7 +33,6 @@ toolkit.jar:
   skin/classic/global/icons/Portrait.png                   (icons/Portrait.png)
   skin/classic/global/icons/Print-preview.png              (icons/Print-preview.png)
   skin/classic/global/icons/warning-large.png              (icons/warning-large.png)
-  skin/classic/global/icons/windowControls.png             (icons/windowControls.png)
 * skin/classic/global/in-content/common.css                (in-content/common.css)
   skin/classic/global/tree/sort-asc.svg                    (tree/sort-asc.svg)
   skin/classic/global/tree/sort-dsc.svg                    (tree/sort-dsc.svg)