From 4f80accf77e4749cd827ca6863373108b1757f3a Mon Sep 17 00:00:00 2001
From: Brendan Dahl <bdahl@mozilla.com>
Date: Wed, 2 Oct 2019 18:10:53 +0000
Subject: [PATCH] Bug 1583403 - Remove default namespace from various
 global.css files. r=dao

Makes it easier to share this CSS with HTML namespaced files.

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

--HG--
extra : moz-landing-system : lando
---
 toolkit/themes/linux/global/global.css   | 48 ++++++++++------------
 toolkit/themes/osx/global/global.css     | 50 ++++++++++-------------
 toolkit/themes/osx/reftests/baseline.xul |  2 +-
 toolkit/themes/shared/global.inc.css     | 20 ++++-----
 toolkit/themes/windows/global/global.css | 52 +++++++++++-------------
 5 files changed, 77 insertions(+), 95 deletions(-)

diff --git a/toolkit/themes/linux/global/global.css b/toolkit/themes/linux/global/global.css
index 9a8fa57bf6a3..b38bc87f99bc 100644
--- a/toolkit/themes/linux/global/global.css
+++ b/toolkit/themes/linux/global/global.css
@@ -10,7 +10,7 @@
 @import url("chrome://global/locale/intl.css");
 @import url("chrome://global/content/widgets.css");
 
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 %include ../../shared/global.inc.css
@@ -18,13 +18,13 @@
 /* ::::: XBL bindings ::::: */
 
 @media (-moz-menubar-drag) {
-  toolbar[type="menubar"] {
+  xul|toolbar[type="menubar"] {
     -moz-window-dragging: drag;
   }
 }
 
-/* ::::: Variables ::::: */
 :root {
+  /* ::::: Variables ::::: */
   --default-arrowpanel-background: -moz-field;
   --default-arrowpanel-color: -moz-fieldText;
   --default-arrowpanel-border-color: ThreeDShadow;
@@ -33,13 +33,7 @@
   --arrowpanel-border-color: var(--default-arrowpanel-border-color);
   --arrowpanel-padding: 10px;
   --panel-disabled-color: GrayText;
-}
-
-/* ::::: root elements ::::: */
-
-window,
-dialog,
-wizard {
+  /* ::::: Styles ::::: */
   -moz-appearance: dialog;
   background-color: -moz-Dialog;
   color: -moz-DialogText;
@@ -71,7 +65,7 @@ wizard {
 
 /* ::::: iframe ::::: */
 
-iframe {
+xul|iframe {
   border: none;
   width: 100px;
   height: 100px;
@@ -81,7 +75,7 @@ iframe {
 
 @supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
   /* In emulation, <iframe> is block instead of inline, so reset the width/height */
-  iframe {
+  xul|iframe {
     width: auto;
     height: auto;
   }
@@ -89,16 +83,16 @@ iframe {
 
 /* XXXBlake yeah, shoot me -- these don't belong here.  I'll move them later. */
 
-sidebarheader {
+xul|sidebarheader {
   min-height: 25px;
   text-shadow: none;
 }
 
-sidebarheader > label {
+xul|sidebarheader > xul|label {
   padding-inline-start: 4px;
 }
 
-toolbar[mode="text"] .toolbarbutton-text {
+xul|toolbar[mode="text"] .toolbarbutton-text {
   padding: 0 !important;
   margin: 3px 5px !important;
 }
@@ -146,28 +140,28 @@ html|*#print-preview-pageNumber {
   text-shadow: 1px 1px 1.5px black;
 }
 
-separator:not([orient="vertical"]) {
+xul|separator:not([orient="vertical"]) {
   height: 1.5em;
 }
-separator[orient="vertical"] {
+xul|separator[orient="vertical"] {
   width: 1.5em;
 }
 
-separator.thin:not([orient="vertical"]) {
+xul|separator.thin:not([orient="vertical"]) {
   height: 0.5em;
 }
-separator.thin[orient="vertical"] {
+xul|separator.thin[orient="vertical"] {
   width: 0.5em;
 }
 
-separator.groove:not([orient="vertical"]) {
+xul|separator.groove:not([orient="vertical"]) {
   border-top: 1px solid ThreeDShadow;
   border-bottom: 1px solid ThreeDHighlight;
   height: 0;
   margin-top: 0.4em;
   margin-bottom: 0.4em;
 }
-separator.groove[orient="vertical"] {
+xul|separator.groove[orient="vertical"] {
   border-left: 1px solid ThreeDShadow;
   border-right: 1px solid ThreeDHighlight;
   width: 0;
@@ -175,8 +169,8 @@ separator.groove[orient="vertical"] {
   margin-right: 0.4em;
 }
 
-description,
-label {
+xul|description,
+xul|label {
   cursor: default;
   margin-top: 1px;
   margin-bottom: 2px;
@@ -184,11 +178,11 @@ label {
   margin-inline-end: 5px;
 }
 
-description {
+xul|description {
   margin-bottom: 4px;
 }
 
-label[disabled="true"] {
+xul|label[disabled="true"] {
   color: GrayText;
 }
 
@@ -225,12 +219,12 @@ html|input {
   margin: 2px 4px; /* matches xul <textbox> default margin */
 }
 
-notification > hbox > button {
+xul|notification > xul|hbox > xul|button {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-popupnotificationcontent {
+xul|popupnotificationcontent {
   margin-top: .5em;
 }
 
diff --git a/toolkit/themes/osx/global/global.css b/toolkit/themes/osx/global/global.css
index 688d070cc271..b3a81b4deba0 100644
--- a/toolkit/themes/osx/global/global.css
+++ b/toolkit/themes/osx/global/global.css
@@ -7,13 +7,13 @@
 @import url("chrome://global/content/widgets.css");
 
 %include shared.inc
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 %include ../../shared/global.inc.css
 
-/* ::::: Variables ::::: */
 :root {
+  /* ::::: Variables ::::: */
   --arrowpanel-padding: 16px;
   --default-arrowpanel-background: #fff;
   --default-arrowpanel-color: hsl(0,0%,10%);
@@ -25,13 +25,7 @@
   --panel-disabled-color: GrayText;
 
   --focus-ring-box-shadow: @focusRingShadow@;
-}
-
-/* ::::: root elements ::::: */
-
-window,
-dialog,
-wizard {
+  /* ::::: Styles ::::: */
   -moz-appearance: dialog;
   background-color: #FFFFFF;
   color: -moz-DialogText;
@@ -69,7 +63,7 @@ wizard {
 
 /* ::::: iframe ::::: */
 
-iframe {
+xul|iframe {
   border: none;
   width: 100px;
   height: 100px;
@@ -79,7 +73,7 @@ iframe {
 
 @supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
   /* In emulation, <iframe> is block instead of inline, so reset the width/height */
-  iframe {
+  xul|iframe {
     width: auto;
     height: auto;
   }
@@ -87,7 +81,7 @@ iframe {
 
 /* ::::: miscellaneous formatting ::::: */
 
-sidebarheader {
+xul|sidebarheader {
   background-color: -moz-Dialog;
   color: -moz-dialogText;
   text-shadow: none;
@@ -105,35 +99,35 @@ sidebarheader {
   text-shadow: 1px 1px 1.5px black;
 }
 
-separator:not([orient="vertical"]) {
+xul|separator:not([orient="vertical"]) {
   height: 1.5em;
 }
-separator[orient="vertical"] {
+xul|separator[orient="vertical"] {
   width: 1.5em;
 }
 
-separator.thin:not([orient="vertical"]) {
+xul|separator.thin:not([orient="vertical"]) {
   height: 0.5em;
 }
-separator.thin[orient="vertical"] {
+xul|separator.thin[orient="vertical"] {
   width: 0.5em;
 }
 
-separator.groove:not([orient="vertical"]) {
+xul|separator.groove:not([orient="vertical"]) {
   border-top: 1px solid #A3A3A3;
   height: 0;
   margin-top: 0.4em;
   margin-bottom: 0.4em;
 }
-separator.groove[orient="vertical"] {
+xul|separator.groove[orient="vertical"] {
   border-left: 1px solid #A3A3A3;
   width: 0;
   margin-left: 0.4em;
   margin-right: 0.4em;
 }
 
-description,
-label {
+xul|description,
+xul|label {
   cursor: default;
   margin-top: 1px;
   margin-bottom: 2px;
@@ -141,11 +135,11 @@ label {
   margin-inline-end: 5px;
 }
 
-description {
+xul|description {
   margin-bottom: 4px;
 }
 
-label[disabled="true"] {
+xul|label[disabled="true"] {
   color: GrayText;
 }
 
@@ -182,7 +176,7 @@ html|input {
   margin: 4px; /* matches xul <textbox> default margin */
 }
 
-notification > hbox > button {
+xul|notification > xul|hbox > xul|button {
   margin: 0 3px;
   padding: 1px 10px;
   min-width: 60px;
@@ -196,25 +190,25 @@ notification > hbox > button {
   box-shadow: @roundButtonShadow@;
 }
 
-notification > hbox > button:active:hover {
+xul|notification > xul|hbox > xul|button:active:hover {
   color: @roundButtonColor@;
   background: @roundButtonPressedBackgroundImage@;
   box-shadow: @roundButtonPressedShadow@;
 }
 
-notification > hbox > button:-moz-focusring {
+xul|notification > xul|hbox > xul|button:-moz-focusring {
   box-shadow: var(--focus-ring-box-shadow), @roundButtonShadow@;
 }
 
-notification > hbox > button:active:hover:-moz-focusring {
+xul|notification > xul|hbox > xul|button:active:hover:-moz-focusring {
   box-shadow: var(--focus-ring-box-shadow), @roundButtonPressedShadow@;
 }
 
-notification > hbox > button > .button-box > .button-text {
+xul|notification > xul|hbox > xul|button > .button-box > .button-text {
   margin: 0 !important;
 }
 
-popupnotificationcontent {
+xul|popupnotificationcontent {
   margin-top: .5em;
 }
 
diff --git a/toolkit/themes/osx/reftests/baseline.xul b/toolkit/themes/osx/reftests/baseline.xul
index 5de31ac40730..104320046d6a 100644
--- a/toolkit/themes/osx/reftests/baseline.xul
+++ b/toolkit/themes/osx/reftests/baseline.xul
@@ -45,7 +45,7 @@
         onload="loaded()">
 
 <html:style><![CDATA[
-window {
+:root {
   -moz-appearance: none;
   background-color: white;
 }
diff --git a/toolkit/themes/shared/global.inc.css b/toolkit/themes/shared/global.inc.css
index f69230129aa0..614b8ffd45fa 100644
--- a/toolkit/themes/shared/global.inc.css
+++ b/toolkit/themes/shared/global.inc.css
@@ -70,7 +70,7 @@ html|textarea {
   background-color: var(--arrowpanel-dimmed);
 }
 
-.panel-footer > button {
+.panel-footer > xul|button {
   -moz-appearance: none;
   border-top: 1px solid var(--panel-separator-color);
   /* !important overrides :hover and :active colors from button.css: */
@@ -80,38 +80,38 @@ html|textarea {
   padding: .9em 2px;
 }
 
-.panel-footer > button[disabled] {
+.panel-footer > xul|button[disabled] {
   color: var(--panel-disabled-color) !important;
 }
 
-.panel-footer > button:-moz-focusring {
+.panel-footer > xul|button:-moz-focusring {
   outline: 1px dotted;
   outline-offset: -3px;
 }
 
-.panel-footer > button:not([disabled]):hover {
+.panel-footer > xul|button:not([disabled]):hover {
   background-color: var(--arrowpanel-dimmed);
 }
 
-.panel-footer > button:not([disabled]):hover:active,
-.panel-footer > button:not([disabled])[open] {
+.panel-footer > xul|button:not([disabled]):hover:active,
+.panel-footer > xul|button:not([disabled])[open] {
   background-color: var(--arrowpanel-dimmed-further);
   box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
 }
 
-.panel-footer > button:not([disabled])[default] {
+.panel-footer > xul|button:not([disabled])[default] {
   color: white !important;
   background-color: #0060df;
 }
 
-.panel-footer > button:not([disabled])[default]:hover {
+.panel-footer > xul|button:not([disabled])[default]:hover {
   background-color: #003eaa;
 }
 
-.panel-footer > button:not([disabled])[default]:hover:active {
+.panel-footer > xul|button:not([disabled])[default]:hover:active {
   background-color: #002275;
 }
 
-.panel-footer > button > .button-box {
+.panel-footer > xul|button > .button-box {
   padding: 0;
 }
diff --git a/toolkit/themes/windows/global/global.css b/toolkit/themes/windows/global/global.css
index 7f72a29d7b35..69a537fd3aff 100644
--- a/toolkit/themes/windows/global/global.css
+++ b/toolkit/themes/windows/global/global.css
@@ -10,13 +10,13 @@
 @import url("chrome://global/locale/intl.css");
 @import url("chrome://global/content/widgets.css");
 
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 %include ../../shared/global.inc.css
 
-/* ::::: Variables ::::: */
 :root {
+  /* ::::: Variables ::::: */
   --arrowpanel-padding: 10px;
   --default-arrowpanel-background: -moz-field;
   --default-arrowpanel-color: -moz-fieldText;
@@ -25,6 +25,10 @@
   --arrowpanel-color: var(--default-arrowpanel-color);
   --arrowpanel-border-color: var(--default-arrowpanel-border-color);
   --panel-disabled-color: GrayText;
+  /* ::::: Styles ::::: */
+  background-color: -moz-Dialog;
+  color: -moz-DialogText;
+  font: message-box;
 }
 
 @media (-moz-windows-default-theme) {
@@ -33,16 +37,6 @@
   }
 }
 
-/* ::::: root elements ::::: */
-
-window,
-dialog,
-wizard {
-  background-color: -moz-Dialog;
-  color: -moz-DialogText;
-  font: message-box;
-}
-
 /* ::::: alert icons :::::*/
 
 .message-icon,
@@ -74,7 +68,7 @@ wizard {
 
 /* ::::: iframe ::::: */
 
-iframe {
+xul|iframe {
   border: none;
   width: 100px;
   height: 100px;
@@ -84,7 +78,7 @@ iframe {
 
 @supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
   /* In emulation, <iframe> is block instead of inline, so reset the width/height */
-  iframe {
+  xul|iframe {
     width: auto;
     height: auto;
   }
@@ -92,16 +86,16 @@ iframe {
 
 /* XXXBlake yeah, shoot me -- these don't belong here.  I'll move them later. */
 
-sidebarheader {
+xul|sidebarheader {
   min-height: 25px;
   text-shadow: none;
 }
 
-sidebarheader > label {
+xul|sidebarheader > xul|label {
   padding-inline-start: 4px;
 }
 
-toolbar[mode="text"] .toolbarbutton-text {
+xul|toolbar[mode="text"] .toolbarbutton-text {
   padding: 0 !important;
   margin: 3px 5px !important;
 }
@@ -148,28 +142,28 @@ html|*#print-preview-pageNumber {
 }
 
 /* separators */
-separator:not([orient="vertical"]) {
+xul|separator:not([orient="vertical"]) {
   height: 1.5em;
 }
-separator[orient="vertical"] {
+xul|separator[orient="vertical"] {
   width: 1.5em;
 }
 
-separator.thin:not([orient="vertical"]) {
+xul|separator.thin:not([orient="vertical"]) {
   height: 0.5em;
 }
-separator.thin[orient="vertical"] {
+xul|separator.thin[orient="vertical"] {
   width: 0.5em;
 }
 
-separator.groove:not([orient="vertical"]) {
+xul|separator.groove:not([orient="vertical"]) {
   border-top: 1px solid ThreeDShadow;
   border-bottom: 1px solid ThreeDHighlight;
   height: 0;
   margin-top: 0.4em;
   margin-bottom: 0.4em;
 }
-separator.groove[orient="vertical"] {
+xul|separator.groove[orient="vertical"] {
   border-left: 1px solid ThreeDShadow;
   border-right: 1px solid ThreeDHighlight;
   width: 0;
@@ -177,8 +171,8 @@ separator.groove[orient="vertical"] {
   margin-right: 0.4em;
 }
 
-description,
-label {
+xul|description,
+xul|label {
   cursor: default;
   margin-top: 1px;
   margin-bottom: 2px;
@@ -186,16 +180,16 @@ label {
   margin-inline-end: 5px;
 }
 
-description {
+xul|description {
   margin-bottom: 4px;
 }
 
-label[disabled="true"] {
+xul|label[disabled="true"] {
   color: GrayText;
 }
 
 @media (-moz-windows-classic) {
-  label[disabled="true"] {
+  xul|label[disabled="true"] {
     color: ThreeDShadow;
     text-shadow: 1px 1px ThreeDHighlight;
   }
@@ -234,7 +228,7 @@ html|input {
   margin: 2px 4px; /* matches xul <textbox> default margin */
 }
 
-popupnotificationcontent {
+xul|popupnotificationcontent {
   margin-top: .5em;
 }