Bug 1864445: Add text zoom only warning r=dholbert,fluent-reviewers,desktop-theme-reviewers,dao,mconley,flod

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

browser/components/preferences/main.inc.xhtml

@@ -315,14 +315,14 @@
 <!-- Zoom -->
 <groupbox id="zoomGroup" data-category="paneGeneral" hidden="true">
   <label><html:h2 data-l10n-id="preferences-zoom-header"/></label>
-
   <hbox id="zoomBox" align="center" hidden="true">
     <label control="defaultZoom" data-l10n-id="preferences-default-zoom"/>
     <menulist id="defaultZoom">
       <menupopup/>
     </menulist>
   </hbox>
-
+  <html:moz-message-bar id="text-zoom-override-warning" data-l10n-id="preferences-text-zoom-override-warning"
+    data-l10n-attrs="message" />
   <checkbox id="zoomText"
     data-l10n-id="preferences-zoom-text-only"/>
 

browser/components/preferences/main.js

@@ -969,6 +969,8 @@ var gMainPane = {
 
     setEventListener("zoomText", "command", function () {
       win.ZoomManager.toggleZoom();
+      document.getElementById("text-zoom-override-warning").hidden =
+        !document.getElementById("zoomText").checked;
     });
 
     let zoomValues = win.ZoomManager.zoomValues.map(a => {
@@ -991,7 +993,8 @@ var gMainPane = {
 
     let checkbox = document.getElementById("zoomText");
     checkbox.checked = !win.ZoomManager.useFullZoom;
-
+    document.getElementById("text-zoom-override-warning").hidden =
+      !checkbox.checked;
     document.getElementById("zoomBox").hidden = false;
   },
 

browser/components/preferences/preferences.xhtml

@@ -83,6 +83,7 @@
   <script type="module" src="chrome://global/content/elements/moz-support-link.mjs"/>
   <script src="chrome://browser/content/migration/migration-wizard.mjs" type="module"></script>
   <script type="module" src="chrome://global/content/elements/moz-toggle.mjs"/>
+  <script type="module" src="chrome://global/content/elements/moz-message-bar.mjs" />
 </head>
 
 <html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"

browser/locales/en-US/browser/preferences/preferences.ftl

@@ -327,6 +327,9 @@ preferences-zoom-text-only =
     .label = Zoom text only
     .accesskey = t
 
+preferences-text-zoom-override-warning =
+    .message = Warning: If you select “Zoom text only” and your default zoom is not set to 100%, it may cause some sites or content to break.
+
 language-header = Language
 
 choose-language-description = Choose your preferred language for displaying pages

browser/themes/shared/preferences/preferences.css

@@ -1389,7 +1389,8 @@ richlistitem .text-link:hover {
 }
 
 #web-appearance-chooser,
-#web-appearance-override-warning {
+#web-appearance-override-warning,
+#text-zoom-override-warning {
   margin: 12px 0;
 }