Bug 1363721 - Make about:preferences sub-dialog content highlightable r?mconley draft
authorRicky Chien <ricky060709@gmail.com>
Thu, 01 Jun 2017 16:02:36 +0800
changeset 595172 f1b42427572ff81fe4b803f46a7cbd632b60a8a4
parent 595097 79cdd4893c4607b8ad19c41ffd4ddde2f11d0151
child 633641 f2a4606fe783f1521bca4fef286c068afcee4039
push id64266
push userbmo:rchien@mozilla.com
push dateFri, 16 Jun 2017 03:41:12 +0000
reviewersmconley
bugs1363721
milestone56.0a1
Bug 1363721 - Make about:preferences sub-dialog content highlightable r?mconley MozReview-Commit-ID: Dtha0R8n6X6
browser/components/preferences/colors.xul
browser/components/preferences/connection.xul
browser/components/preferences/containers.xul
browser/components/preferences/cookies.xul
browser/components/preferences/donottrack.xul
browser/components/preferences/fonts.xul
browser/components/preferences/in-content-new/findInPage.js
browser/components/preferences/in-content-new/main.xul
browser/components/preferences/in-content-new/preferences.js
browser/components/preferences/in-content-new/subdialogs.js
browser/components/preferences/permissions.xul
browser/components/preferences/sanitize.xul
browser/themes/shared/incontentprefs/preferences.inc.css
--- a/browser/components/preferences/colors.xul
+++ b/browser/components/preferences/colors.xul
@@ -21,59 +21,59 @@
             style="width: &window.macWidth; !important;">
 #else
             style="width: &window.width; !important;">
 #endif
 
   <script type="application/javascript" src="chrome://browser/content/utilityOverlay.js"/>
   <prefpane id="ColorsDialogPane"
             helpTopic="prefs-fonts-and-colors">
-  
+
     <preferences>
       <preference id="browser.display.document_color_use"   name="browser.display.document_color_use"   type="int"/>
       <preference id="browser.anchor_color"                 name="browser.anchor_color"                 type="string"/>
       <preference id="browser.visited_color"                name="browser.visited_color"                type="string"/>
       <preference id="browser.underline_anchors"            name="browser.underline_anchors"            type="bool"/>
       <preference id="browser.display.foreground_color"     name="browser.display.foreground_color"     type="string"/>
       <preference id="browser.display.background_color"     name="browser.display.background_color"     type="string"/>
       <preference id="browser.display.use_system_colors"    name="browser.display.use_system_colors"    type="bool"/>
     </preferences>
-    
+
     <hbox>
       <groupbox flex="1">
-        <caption label="&color;"/>
+        <caption><label>&color;</label></caption>
         <hbox align="center">
-          <label value="&textColor.label;" accesskey="&textColor.accesskey;" control="foregroundtextmenu"/>
+          <label accesskey="&textColor.accesskey;" control="foregroundtextmenu">&textColor.label;</label>
           <spacer flex="1"/>
           <colorpicker type="button" id="foregroundtextmenu" palettename="standard"
                        preference="browser.display.foreground_color"/>
         </hbox>
         <hbox align="center" style="margin-top: 5px">
-          <label value="&backgroundColor.label;" accesskey="&backgroundColor.accesskey;" control="backgroundmenu"/>
+          <label accesskey="&backgroundColor.accesskey;" control="backgroundmenu">&backgroundColor.label;</label>
           <spacer flex="1"/>
           <colorpicker type="button" id="backgroundmenu" palettename="standard"
                        preference="browser.display.background_color"/>
         </hbox>
         <separator class="thin"/>
         <hbox align="center">
           <checkbox id="browserUseSystemColors" label="&useSystemColors.label;" accesskey="&useSystemColors.accesskey;"
                     preference="browser.display.use_system_colors"/>
         </hbox>
       </groupbox>
-        
+
       <groupbox flex="1">
-        <caption label="&links;"/>
+        <caption><label>&links;</label></caption>
         <hbox align="center">
-          <label value="&linkColor.label;" accesskey="&linkColor.accesskey;" control="unvisitedlinkmenu"/>
+          <label accesskey="&linkColor.accesskey;" control="unvisitedlinkmenu">&linkColor.label;</label>
           <spacer flex="1"/>
           <colorpicker type="button" id="unvisitedlinkmenu" palettename="standard"
                        preference="browser.anchor_color"/>
         </hbox>
         <hbox align="center" style="margin-top: 5px">
-          <label value="&visitedLinkColor.label;" accesskey="&visitedLinkColor.accesskey;" control="visitedlinkmenu"/>
+          <label accesskey="&visitedLinkColor.accesskey;" control="visitedlinkmenu">&visitedLinkColor.label;</label>
           <spacer flex="1"/>
           <colorpicker type="button" id="visitedlinkmenu" palettename="standard"
                        preference="browser.visited_color"/>
         </hbox>
         <separator class="thin"/>
         <hbox align="center">
           <checkbox id="browserUnderlineAnchors" label="&underlineLinks.label;" accesskey="&underlineLinks.accesskey;"
                     preference="browser.underline_anchors"/>
@@ -82,21 +82,23 @@
     </hbox>
 #ifdef XP_WIN
     <vbox align="start">
 #else
     <vbox>
 #endif
       <label accesskey="&overrideDefaultPageColors.accesskey;"
              control="useDocumentColors">&overrideDefaultPageColors.label;</label>
-      <menulist id="useDocumentColors" preference="browser.display.document_color_use">
-        <menupopup>
-          <menuitem label="&overrideDefaultPageColors.always.label;"
-                    value="2" id="documentColorAlways"/>
-          <menuitem label="&overrideDefaultPageColors.auto.label;"
-                    value="0" id="documentColorAutomatic"/>
-          <menuitem label="&overrideDefaultPageColors.never.label;"
-                    value="1" id="documentColorNever"/>
-        </menupopup>
-      </menulist>
+      <hbox>
+        <menulist id="useDocumentColors" preference="browser.display.document_color_use" flex="1">
+          <menupopup>
+            <menuitem label="&overrideDefaultPageColors.always.label;"
+                      value="2" id="documentColorAlways"/>
+            <menuitem label="&overrideDefaultPageColors.auto.label;"
+                      value="0" id="documentColorAutomatic"/>
+            <menuitem label="&overrideDefaultPageColors.never.label;"
+                      value="1" id="documentColorNever"/>
+          </menupopup>
+        </menulist>
+      </hbox>
     </vbox>
   </prefpane>
 </prefwindow>
--- a/browser/components/preferences/connection.xul
+++ b/browser/components/preferences/connection.xul
@@ -60,99 +60,99 @@
       <preference id="network.proxy.backup.socks_port"   name="network.proxy.backup.socks_port"   type="int"/>
     </preferences>
 
     <script type="application/javascript" src="chrome://browser/content/preferences/connection.js"/>
 
     <stringbundle id="preferencesBundle" src="chrome://browser/locale/preferences/preferences.properties"/>
 
     <groupbox>
-      <caption label="&proxyTitle.label;"/>
+      <caption><label>&proxyTitle.label;</label></caption>
 
       <radiogroup id="networkProxyType" preference="network.proxy.type"
                   onsyncfrompreference="return gConnectionsDialog.readProxyType();">
         <radio value="0" label="&noProxyTypeRadio.label;" accesskey="&noProxyTypeRadio.accesskey;"/>
         <radio value="4" label="&WPADTypeRadio.label;" accesskey="&WPADTypeRadio.accesskey;"/>
         <radio value="5" label="&systemTypeRadio.label;" accesskey="&systemTypeRadio.accesskey;" id="systemPref" hidden="true"/>
         <radio value="1" label="&manualTypeRadio.label;" accesskey="&manualTypeRadio.accesskey;"/>
         <grid class="indent" flex="1">
           <columns>
             <column/>
             <column flex="1"/>
           </columns>
           <rows>
             <row align="center">
               <hbox pack="end">
-                <label value="&http.label;" accesskey="&http.accesskey;" control="networkProxyHTTP"/>
+                <label accesskey="&http.accesskey;" control="networkProxyHTTP">&http.label;</label>
               </hbox>
               <hbox align="center">
                 <textbox id="networkProxyHTTP" flex="1"
                          preference="network.proxy.http" onsyncfrompreference="return gConnectionsDialog.readHTTPProxyServer();"/>
-                <label value="&port.label;" accesskey="&HTTPport.accesskey;" control="networkProxyHTTP_Port"/>
+                <label accesskey="&HTTPport.accesskey;" control="networkProxyHTTP_Port">&port.label;</label>
                 <textbox id="networkProxyHTTP_Port" type="number" max="65535" size="5"
                          preference="network.proxy.http_port" onsyncfrompreference="return gConnectionsDialog.readHTTPProxyPort();"/>
               </hbox>
             </row>
             <row>
               <hbox/>
               <hbox>
                 <checkbox id="shareAllProxies" label="&shareproxy.label;" accesskey="&shareproxy.accesskey;"
                           preference="network.proxy.share_proxy_settings"
                           onsyncfrompreference="return gConnectionsDialog.updateProtocolPrefs();"/>
               </hbox>
             </row>
             <row align="center">
               <hbox pack="end">
-                <label value="&ssl.label;" accesskey="&ssl.accesskey;" control="networkProxySSL"/>
+                <label accesskey="&ssl.accesskey;" control="networkProxySSL">&ssl.label;</label>
               </hbox>
               <hbox align="center">
                 <textbox id="networkProxySSL" flex="1" preference="network.proxy.ssl"
                          onsyncfrompreference="return gConnectionsDialog.readProxyProtocolPref('ssl', false);"/>
-                <label value="&port.label;" accesskey="&SSLport.accesskey;" control="networkProxySSL_Port"/>
+                <label accesskey="&SSLport.accesskey;" control="networkProxySSL_Port">&port.label;</label>
                 <textbox id="networkProxySSL_Port" type="number" max="65535" size="5" preference="network.proxy.ssl_port"
                          onsyncfrompreference="return gConnectionsDialog.readProxyProtocolPref('ssl', true);"/>
               </hbox>
             </row>
             <row align="center">
               <hbox pack="end">
-                <label value="&ftp.label;" accesskey="&ftp.accesskey;" control="networkProxyFTP"/>
+                <label accesskey="&ftp.accesskey;" control="networkProxyFTP">&ftp.label;</label>
               </hbox>
               <hbox align="center">
                 <textbox id="networkProxyFTP" flex="1" preference="network.proxy.ftp"
                          onsyncfrompreference="return gConnectionsDialog.readProxyProtocolPref('ftp', false);"/>
-                <label value="&port.label;" accesskey="&FTPport.accesskey;" control="networkProxyFTP_Port"/>
+                <label accesskey="&FTPport.accesskey;" control="networkProxyFTP_Port">&port.label;</label>
                 <textbox id="networkProxyFTP_Port" type="number" max="65535" size="5" preference="network.proxy.ftp_port"
                          onsyncfrompreference="return gConnectionsDialog.readProxyProtocolPref('ftp', true);"/>
               </hbox>
             </row>
             <row align="center">
               <hbox pack="end">
-                <label value="&socks.label;" accesskey="&socks.accesskey;" control="networkProxySOCKS"/>
+                <label accesskey="&socks.accesskey;" control="networkProxySOCKS">&socks.label;</label>
               </hbox>
               <hbox align="center">
                 <textbox id="networkProxySOCKS" flex="1" preference="network.proxy.socks"
                          onsyncfrompreference="return gConnectionsDialog.readProxyProtocolPref('socks', false);"/>
-                <label value="&port.label;" accesskey="&SOCKSport.accesskey;" control="networkProxySOCKS_Port"/>
+                <label accesskey="&SOCKSport.accesskey;" control="networkProxySOCKS_Port">&port.label;</label>
                 <textbox id="networkProxySOCKS_Port" type="number" max="65535" size="5" preference="network.proxy.socks_port"
                          onsyncfrompreference="return gConnectionsDialog.readProxyProtocolPref('socks', true);"/>
               </hbox>
             </row>
             <row>
               <spacer/>
               <box pack="start">
               <radiogroup id="networkProxySOCKSVersion" orient="horizontal"
                           preference="network.proxy.socks_version">
                 <radio id="networkProxySOCKSVersion4" value="4" label="&socks4.label;" accesskey="&socks4.accesskey;" />
                 <radio id="networkProxySOCKSVersion5" value="5" label="&socks5.label;" accesskey="&socks5.accesskey;" />
               </radiogroup>
               </box>
             </row>
-            <label value="&noproxy.label;" accesskey="&noproxy.accesskey;" control="networkProxyNone"/>
+            <label accesskey="&noproxy.accesskey;" control="networkProxyNone">&noproxy.label;</label>
             <textbox id="networkProxyNone" preference="network.proxy.no_proxies_on" multiline="true" rows="2"/>
-            <label value="&noproxyExplain.label;" control="networkProxyNone"/>
+            <label control="networkProxyNone">&noproxyExplain.label;</label>
           </rows>
         </grid>
         <radio value="2" label="&autoTypeRadio.label;" accesskey="&autoTypeRadio.accesskey;"/>
         <hbox class="indent" flex="1" align="center">
           <textbox id="networkProxyAutoconfigURL" flex="1" preference="network.proxy.autoconfig_url"
                    oninput="gConnectionsDialog.updateReloadButton();"/>
           <button id="autoReload" icon="refresh"
                   label="&reload.label;" accesskey="&reload.accesskey;"
--- a/browser/components/preferences/containers.xul
+++ b/browser/components/preferences/containers.xul
@@ -26,24 +26,24 @@
                 src="chrome://browser/locale/preferences/preferences.properties"/>
 
   <keyset>
     <key key="&windowClose.key;" modifiers="accel" oncommand="window.close();"/>
   </keyset>
 
   <vbox class="contentPane largeDialogContainer" flex="1" hidden="true" id="containers-content">
     <hbox align="start">
-      <label id="nameLabel" control="name" value="&name.label;" accesskey="&name.accesskey;"/>
+      <label id="nameLabel" control="name" accesskey="&name.accesskey;">&name.label;</label>
       <textbox id="name" placeholder="&name.placeholder;" flex="1" onkeyup="gContainersManager.checkForm();" />
     </hbox>
     <hbox align="center" id="iconWrapper">
-      <label id="iconLabel" control="icon" value="&icon.label;" accesskey="&icon.accesskey;"/>
+      <label id="iconLabel" control="icon" accesskey="&icon.accesskey;">&icon.label;</label>
     </hbox>
     <hbox align="center" id="colorWrapper">
-      <label id="colorLabel" control="color" value="&color.label;" accesskey="&color.accesskey;"/>
+      <label id="colorLabel" control="color" accesskey="&color.accesskey;">&color.label;</label>
     </hbox>
   </vbox>
   <vbox>
     <hbox class="actionButtons" align="right" flex="1">
       <button id="btnApplyChanges" disabled="true" oncommand="gContainersManager.onApplyChanges();" icon="save"
               label="&button.ok.label;" accesskey="&button.ok.accesskey;"/>
     </hbox>
   </vbox>
--- a/browser/components/preferences/cookies.xul
+++ b/browser/components/preferences/cookies.xul
@@ -34,17 +34,17 @@
     <hbox align="center">
       <textbox type="search" id="filter" flex="1"
                aria-controls="cookiesList"
                oncommand="gCookiesWindow.filter();"
                placeholder="&searchFilter.label;"
                accesskey="&searchFilter.accesskey;"/>
     </hbox>
     <separator class="thin"/>
-    <label control="cookiesList" id="cookiesIntro" value="&cookiesonsystem.label;"/>
+    <label control="cookiesList" id="cookiesIntro">&cookiesonsystem.label;</label>
     <separator class="thin"/>
     <tree id="cookiesList" flex="1" style="height: 10em;"
           onkeypress="gCookiesWindow.onCookieKeyPress(event)"
           onselect="gCookiesWindow.onCookieSelected();"
           hidecolumnpicker="true" seltype="single">
       <treecols>
         <treecol id="domainCol" label="&cookiedomain.label;" flex="2" primary="true"
                  persist="width" onclick="gCookiesWindow.sort('rawHost');"/>
@@ -58,41 +58,41 @@
     <hbox id="cookieInfoBox">
       <grid flex="1" id="cookieInfoGrid">
         <columns>
           <column/>
           <column flex="1"/>
         </columns>
         <rows>
           <row align="center">
-            <hbox pack="end"><label id="nameLabel" control="name" value="&props.name.label;"/></hbox>
+            <hbox pack="end"><label id="nameLabel" control="name">&props.name.label;</label></hbox>
             <textbox id="name" readonly="true" class="plain"/>
           </row>
           <row align="center">
-            <hbox pack="end"><label id="valueLabel" control="value" value="&props.value.label;"/></hbox>
+            <hbox pack="end"><label id="valueLabel" control="value">&props.value.label;</label></hbox>
             <textbox id="value" readonly="true" class="plain"/>
           </row>
           <row align="center">
-            <hbox pack="end"><label id="isDomain" control="host" value="&props.domain.label;"/></hbox>
+            <hbox pack="end"><label id="isDomain" control="host">&props.domain.label;</label></hbox>
             <textbox id="host" readonly="true" class="plain"/>
           </row>
           <row align="center">
-            <hbox pack="end"><label id="pathLabel" control="path" value="&props.path.label;"/></hbox>
+            <hbox pack="end"><label id="pathLabel" control="path">&props.path.label;</label></hbox>
             <textbox id="path" readonly="true" class="plain"/>
           </row>
           <row align="center">
-            <hbox pack="end"><label id="isSecureLabel" control="isSecure" value="&props.secure.label;"/></hbox>
+            <hbox pack="end"><label id="isSecureLabel" control="isSecure">&props.secure.label;</label></hbox>
             <textbox id="isSecure" readonly="true" class="plain"/>
           </row>
           <row align="center">
-            <hbox pack="end"><label id="expiresLabel" control="expires" value="&props.expires.label;"/></hbox>
+            <hbox pack="end"><label id="expiresLabel" control="expires">&props.expires.label;</label></hbox>
             <textbox id="expires" readonly="true" class="plain"/>
           </row>
           <row align="center" id="userContextRow">
-            <hbox pack="end"><label id="userContextLabel" control="userContext" value="&props.container.label;"/></hbox>
+            <hbox pack="end"><label id="userContextLabel" control="userContext">&props.container.label;</label></hbox>
             <textbox id="userContext" readonly="true" class="plain"/>
           </row>
         </rows>
       </grid>
     </hbox>
   </vbox>
   <hbox align="end">
     <hbox class="actionButtons" flex="1">
--- a/browser/components/preferences/donottrack.xul
+++ b/browser/components/preferences/donottrack.xul
@@ -31,13 +31,12 @@
       <spacer style="width: 1em;"/>
       <checkbox label="&doNotTrackCheckbox2.label;"
                 accesskey="&doNotTrackCheckbox2.accesskey;"
                 preference="privacy.donottrackheader.enabled"/>
     </hbox>
     <description flex="1" class="doNotTrackLearnMore">
       &doNotTrackTPInfo.description;
       <label class="text-link"
-             value="&doNotTrackLearnMore.label;"
-             href="https://www.mozilla.org/dnt"/>
+             href="https://www.mozilla.org/dnt">&doNotTrackLearnMore.label;</label>
     </description>
   </prefpane>
 </prefwindow>
--- a/browser/components/preferences/fonts.xul
+++ b/browser/components/preferences/fonts.xul
@@ -99,19 +99,18 @@
             </hbox>
             <menulist id="defaultFontType" flex="1" style="width: 0px;">
               <menupopup>
                 <menuitem value="serif" label="&useDefaultFontSerif.label;"/>
                 <menuitem value="sans-serif" label="&useDefaultFontSansSerif.label;"/>
               </menupopup>
             </menulist>
             <hbox align="center" pack="end">
-              <label value="&size.label;"
-                     accesskey="&sizeProportional.accesskey;"
-                     control="sizeVar"/>
+              <label accesskey="&sizeProportional.accesskey;"
+                     control="sizeVar">&size.label;</label>
             </hbox>
             <menulist id="sizeVar" delayprefsave="true">
               <menupopup>
                 <menuitem value="9" label="9"/>
                 <menuitem value="10" label="10"/>
                 <menuitem value="11" label="11"/>
                 <menuitem value="12" label="12"/>
                 <menuitem value="13" label="13"/>
@@ -137,68 +136,75 @@
                 <menuitem value="72" label="72"/>
               </menupopup>
             </menulist>
           </row>
           <row align="center">
             <hbox align="center" pack="end">
               <label accesskey="&serif.accesskey;" control="serif">&serif.label;</label>
             </hbox>
-            <menulist id="serif" flex="1" style="width: 0px;" delayprefsave="true"
-                      onsyncfrompreference="return FontBuilder.readFontSelection(this);"/>
+            <hbox>
+              <menulist id="serif" flex="1" style="width: 0px;" delayprefsave="true"
+                        onsyncfrompreference="return FontBuilder.readFontSelection(this);"/>
+            </hbox>
             <spacer/>
           </row>
           <row align="center">
             <hbox align="center" pack="end">
               <label accesskey="&sans-serif.accesskey;" control="sans-serif">&sans-serif.label;</label>
             </hbox>
-            <menulist id="sans-serif" flex="1" style="width: 0px;" delayprefsave="true"
-                      onsyncfrompreference="return FontBuilder.readFontSelection(this);"/>
+            <hbox>
+              <menulist id="sans-serif" flex="1" style="width: 0px;" delayprefsave="true"
+                        onsyncfrompreference="return FontBuilder.readFontSelection(this);"/>
+            </hbox>
             <spacer/>
           </row>
           <row align="center">
             <hbox align="center" pack="end">
               <label accesskey="&monospace.accesskey;" control="monospace">&monospace.label;</label>
             </hbox>
-            <menulist id="monospace" flex="1" style="width: 0px;" crop="right" delayprefsave="true"
-                      onsyncfrompreference="return FontBuilder.readFontSelection(this);"/>
+            <hbox>
+              <menulist id="monospace" flex="1" style="width: 0px;" crop="right" delayprefsave="true"
+                        onsyncfrompreference="return FontBuilder.readFontSelection(this);"/>
+            </hbox>
             <hbox align="center" pack="end">
-              <label value="&size.label;"
-                     accesskey="&sizeMonospace.accesskey;"
-                     control="sizeMono"/>
+              <label accesskey="&sizeMonospace.accesskey;"
+                     control="sizeMono">&size.label;</label>
             </hbox>
-            <menulist id="sizeMono" delayprefsave="true">
-              <menupopup>
-                <menuitem value="9" label="9"/>
-                <menuitem value="10" label="10"/>
-                <menuitem value="11" label="11"/>
-                <menuitem value="12" label="12"/>
-                <menuitem value="13" label="13"/>
-                <menuitem value="14" label="14"/>
-                <menuitem value="15" label="15"/>
-                <menuitem value="16" label="16"/>
-                <menuitem value="17" label="17"/>
-                <menuitem value="18" label="18"/>
-                <menuitem value="20" label="20"/>
-                <menuitem value="22" label="22"/>
-                <menuitem value="24" label="24"/>
-                <menuitem value="26" label="26"/>
-                <menuitem value="28" label="28"/>
-                <menuitem value="30" label="30"/>
-                <menuitem value="32" label="32"/>
-                <menuitem value="34" label="34"/>
-                <menuitem value="36" label="36"/>
-                <menuitem value="40" label="40"/>
-                <menuitem value="44" label="44"/>
-                <menuitem value="48" label="48"/>
-                <menuitem value="56" label="56"/>
-                <menuitem value="64" label="64"/>
-                <menuitem value="72" label="72"/>
-              </menupopup>
-            </menulist>
+            <hbox>
+              <menulist id="sizeMono" delayprefsave="true">
+                <menupopup>
+                  <menuitem value="9" label="9"/>
+                  <menuitem value="10" label="10"/>
+                  <menuitem value="11" label="11"/>
+                  <menuitem value="12" label="12"/>
+                  <menuitem value="13" label="13"/>
+                  <menuitem value="14" label="14"/>
+                  <menuitem value="15" label="15"/>
+                  <menuitem value="16" label="16"/>
+                  <menuitem value="17" label="17"/>
+                  <menuitem value="18" label="18"/>
+                  <menuitem value="20" label="20"/>
+                  <menuitem value="22" label="22"/>
+                  <menuitem value="24" label="24"/>
+                  <menuitem value="26" label="26"/>
+                  <menuitem value="28" label="28"/>
+                  <menuitem value="30" label="30"/>
+                  <menuitem value="32" label="32"/>
+                  <menuitem value="34" label="34"/>
+                  <menuitem value="36" label="36"/>
+                  <menuitem value="40" label="40"/>
+                  <menuitem value="44" label="44"/>
+                  <menuitem value="48" label="48"/>
+                  <menuitem value="56" label="56"/>
+                  <menuitem value="64" label="64"/>
+                  <menuitem value="72" label="72"/>
+                </menupopup>
+              </menulist>
+            </hbox>
           </row>
         </rows>
       </grid>
       <separator class="thin"/>
       <hbox flex="1">
         <spacer flex="1"/>
         <hbox align="center" pack="end">
           <label accesskey="&minSize.accesskey;" control="minSize">&minSize.label;</label>
@@ -242,22 +248,21 @@
                   preference="browser.display.use_document_fonts"
                   onsyncfrompreference="return gFontsDialog.readUseDocumentFonts();"
                   onsynctopreference="return gFontsDialog.writeUseDocumentFonts();"/>
       </hbox>
     </groupbox>
 
     <!-- Text Encoding -->
     <groupbox>
-      <caption label="&languages.customize.Fallback2.grouplabel;"/>
+      <caption><label>&languages.customize.Fallback2.grouplabel;</label></caption>
       <description>&languages.customize.Fallback2.desc;</description>
       <hbox align="center">
-        <label value="&languages.customize.Fallback2.label;"
-               accesskey="&languages.customize.Fallback2.accesskey;"
-               control="DefaultCharsetList"/>
+        <label accesskey="&languages.customize.Fallback2.accesskey;"
+               control="DefaultCharsetList">&languages.customize.Fallback2.label;</label>
         <menulist id="DefaultCharsetList" preference="intl.charset.fallback.override">
           <menupopup>
             <menuitem label="&languages.customize.Fallback.auto;"        value=""/>
             <menuitem label="&languages.customize.Fallback.arabic;"      value="windows-1256"/>
             <menuitem label="&languages.customize.Fallback.baltic;"      value="windows-1257"/>
             <menuitem label="&languages.customize.Fallback.ceiso;"       value="ISO-8859-2"/>
             <menuitem label="&languages.customize.Fallback.cewindows;"   value="windows-1250"/>
             <!-- Using gbk instead of GBK for compat with previously-stored prefs.
--- a/browser/components/preferences/in-content-new/findInPage.js
+++ b/browser/components/preferences/in-content-new/findInPage.js
@@ -1,25 +1,21 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 /* import-globals-from preferences.js */
 
 var gSearchResultsPane = {
-  findSelection: null,
   listSearchTooltips: new Set(),
   listSearchMenuitemIndicators: new Set(),
   searchResultsCategory: null,
   searchInput: null,
 
   init() {
-    let controller = this.getSelectionController();
-    this.findSelection = controller.getSelection(Ci.nsISelectionController.SELECTION_FIND);
-    this.findSelection.setColors("currentColor", "#ffe900", "currentColor", "#003eaa");
     this.searchResultsCategory = document.getElementById("category-search-results");
 
     this.searchInput = document.getElementById("searchInput");
     this.searchInput.hidden = !Services.prefs.getBoolPref("browser.preferences.search");
     if (!this.searchInput.hidden) {
       this.searchInput.addEventListener("command", this);
       this.searchInput.addEventListener("focus", this);
     }
@@ -118,16 +114,20 @@ var gSearchResultsPane = {
    *    nodeSizes = "This is an example"
    *    This is used when executing the regular expression
    * @param String searchPhrase
    *    word or words to search for
    * @returns boolean
    *      Returns true when atleast one instance of search phrase is found, otherwise false
    */
   highlightMatches(textNodes, nodeSizes, textSearch, searchPhrase) {
+    if (!searchPhrase) {
+      return false;
+    }
+
     let indices = [];
     let i = -1;
     while ((i = textSearch.indexOf(searchPhrase, i + 1)) >= 0) {
       indices.push(i);
     }
 
     // Looping through each spot the searchPhrase is found in the concatenated string
     for (let startValue of indices) {
@@ -155,55 +155,64 @@ var gSearchResultsPane = {
           if (index != nodeStartIndex || index > 0 ) {
             endValue -= nodeSizes[index - 1];
           }
         }
       });
       let range = document.createRange();
       range.setStart(startNode, startValue);
       range.setEnd(endNode, endValue);
-      this.findSelection.addRange(range);
+      this.getFindSelection(startNode.ownerGlobal).addRange(range);
     }
 
     return indices.length > 0;
   },
 
-  getSelectionController() {
+  /**
+   * Get the selection instance from given window
+   *
+   * @param Object win
+   *   The window object points to frame's window
+   */
+  getFindSelection(win) {
     // Yuck. See bug 138068.
-    let docShell = window.QueryInterface(Ci.nsIInterfaceRequestor)
-                         .getInterface(Ci.nsIWebNavigation)
-                         .QueryInterface(Ci.nsIDocShell);
+    let docShell = win.QueryInterface(Ci.nsIInterfaceRequestor)
+                      .getInterface(Ci.nsIWebNavigation)
+                      .QueryInterface(Ci.nsIDocShell);
 
     let controller = docShell.QueryInterface(Ci.nsIInterfaceRequestor)
-                             .getInterface(Ci.nsISelectionDisplay)
-                             .QueryInterface(Ci.nsISelectionController);
+                              .getInterface(Ci.nsISelectionDisplay)
+                              .QueryInterface(Ci.nsISelectionController);
 
-    return controller;
+    let selection = controller.getSelection(Ci.nsISelectionController.SELECTION_FIND);
+    selection.setColors("currentColor", "#ffe900", "currentColor", "#003eaa");
+
+    return selection;
   },
 
   get strings() {
     delete this.strings;
     return this.strings = document.getElementById("searchResultBundle");
   },
 
   /**
    * Shows or hides content according to search input
    *
    * @param String event
    *    to search for filted query in
    */
   searchFunction(event) {
-    let query = event.target.value.trim().toLowerCase();
-    this.findSelection.removeAllRanges();
+    this.query = event.target.value.trim().toLowerCase();
+    this.getFindSelection(window).removeAllRanges();
     this.removeAllSearchTooltips();
     this.removeAllSearchMenuitemIndicators();
 
     let srHeader = document.getElementById("header-searchResults");
 
-    if (query) {
+    if (this.query) {
       // Showing the Search Results Tag
       gotoPref("paneSearchResults");
 
       this.searchResultsCategory.hidden = false;
 
       let resultsFound = false;
 
       // Building the range for highlighted areas
@@ -214,42 +223,42 @@ var gSearchResultsPane = {
       for (let i = 0; i < rootPreferencesChildren.length; i++) {
         rootPreferencesChildren[i].hidden = false;
       }
 
       // Showing or Hiding specific section depending on if words in query are found
       for (let i = 0; i < rootPreferencesChildren.length; i++) {
         if (rootPreferencesChildren[i].className != "header" &&
             rootPreferencesChildren[i].className != "no-results-message" &&
-            this.searchWithinNode(rootPreferencesChildren[i], query)) {
+            this.searchWithinNode(rootPreferencesChildren[i], this.query)) {
           rootPreferencesChildren[i].hidden = false;
           resultsFound = true;
         } else {
           rootPreferencesChildren[i].hidden = true;
         }
       }
       // It hides Search Results header so turning it on
       srHeader.hidden = false;
 
       if (!resultsFound) {
         let noResultsEl = document.querySelector(".no-results-message");
         noResultsEl.hidden = false;
 
         let strings = this.strings;
 
         document.getElementById("sorry-message").textContent = AppConstants.platform == "win" ?
-          strings.getFormattedString("searchResults.sorryMessageWin", [query]) :
-          strings.getFormattedString("searchResults.sorryMessageUnix", [query]);
+          strings.getFormattedString("searchResults.sorryMessageWin", [this.query]) :
+          strings.getFormattedString("searchResults.sorryMessageUnix", [this.query]);
         let helpUrl = Services.urlFormatter.formatURLPref("app.support.baseURL") + "preferences";
         let brandName = document.getElementById("bundleBrand").getString("brandShortName");
         document.getElementById("need-help").innerHTML =
           strings.getFormattedString("searchResults.needHelp2", [helpUrl, brandName]);
       } else {
         // Creating tooltips for all the instances found
-        this.listSearchTooltips.forEach((node) => this.createSearchTooltip(node, query));
+        this.listSearchTooltips.forEach((anchorNode) => this.createSearchTooltip(anchorNode, this.query));
       }
     } else {
       this.searchResultsCategory.hidden = true;
       document.getElementById("sorry-message").textContent = "";
       // Going back to General when cleared
       gotoPref("paneGeneral");
     }
   },
@@ -363,35 +372,36 @@ var gSearchResultsPane = {
     }
     return result;
   },
 
   /**
    * Inserting a div structure infront of the DOM element matched textContent.
    * Then calculation the offsets to position the tooltip in the correct place.
    *
-   * @param Node currentNode
+   * @param Node anchorNode
    *    DOM Element
    * @param String query
    *    Word or words that are being searched for
    */
-  createSearchTooltip(currentNode, query) {
-    let searchTooltip = document.createElement("span");
+  createSearchTooltip(anchorNode, query) {
+    let searchTooltip = anchorNode.ownerDocument.createElement("span");
     searchTooltip.setAttribute("class", "search-tooltip");
     searchTooltip.textContent = query;
 
-    currentNode.parentElement.classList.add("search-tooltip-parent");
-    currentNode.parentElement.appendChild(searchTooltip);
+    anchorNode.setAttribute("data-has-tooltip", "true");
+    anchorNode.parentElement.classList.add("search-tooltip-parent");
+    anchorNode.parentElement.appendChild(searchTooltip);
 
     // In order to get the up-to-date position of each of the nodes that we're
     // putting tooltips on, we have to flush layout intentionally, and that
     // this is the result of a XUL limitation (bug 1363730).
-    let anchorRect = currentNode.getBoundingClientRect();
+    let anchorRect = anchorNode.getBoundingClientRect();
     let tooltipRect = searchTooltip.getBoundingClientRect();
-    let parentRect = currentNode.parentElement.getBoundingClientRect();
+    let parentRect = anchorNode.parentElement.getBoundingClientRect();
 
     let offSet = (anchorRect.width / 2) - (tooltipRect.width / 2);
     let relativeOffset = anchorRect.left - parentRect.left;
     offSet += relativeOffset > 0 ? relativeOffset : 0;
 
     searchTooltip.style.setProperty("left", `${offSet}px`);
   },
 
@@ -399,16 +409,17 @@ var gSearchResultsPane = {
    * Remove all search tooltips that were created.
    */
   removeAllSearchTooltips() {
     let searchTooltips = Array.from(document.querySelectorAll(".search-tooltip"));
     for (let searchTooltip of searchTooltips) {
       searchTooltip.parentElement.classList.remove("search-tooltip-parent");
       searchTooltip.remove();
     }
+    this.listSearchTooltips.forEach((anchorNode) => anchorNode.removeAttribute("data-has-tooltip"));
     this.listSearchTooltips.clear();
   },
 
   /**
    * Remove all indicators on menuitem.
    */
   removeAllSearchMenuitemIndicators() {
     this.listSearchMenuitemIndicators.forEach((node) => node.removeAttribute("indicator"));
--- a/browser/components/preferences/in-content-new/main.xul
+++ b/browser/components/preferences/in-content-new/main.xul
@@ -316,17 +316,17 @@
                 preference="pref.browser.homepage.disable_button.restore_default"/>
       </html:td>
     </html:tr>
   </html:table>
 </groupbox>
 
 <!-- Default Search Engine -->
 <groupbox id="defaultEngineGroup" data-category="paneGeneral" data-subcategory="search">
-  <caption label="&defaultSearchEngine.label;"/>
+  <caption><label>&defaultSearchEngine.label;</label></caption>
   <label>&chooseYourDefaultSearchEngine.label;</label>
   <box align="start">
     <menulist id="defaultEngine">
       <menupopup/>
     </menulist>
   </box>
   <checkbox id="suggestionsInSearchFieldsCheckbox"
             label="&provideSearchSuggestions.label;"
@@ -339,17 +339,17 @@
     <hbox id="urlBarSuggestionPermanentPBLabel"
           align="center" class="indent">
       <label flex="1">&urlBarSuggestionsPermanentPB.label;</label>
     </hbox>
   </vbox>
 </groupbox>
 
 <groupbox id="oneClickSearchProvidersGroup" data-category="paneGeneral" data-subcategory="search">
-  <caption label="&oneClickSearchEngines.label;"/>
+  <caption><label>&oneClickSearchEngines.label;</label></caption>
   <label>&chooseWhichOneToDisplay.label;</label>
 
   <tree id="engineList" flex="1" rows="8" hidecolumnpicker="true" editable="true"
         seltype="single" allowunderflowscroll="true">
     <treechildren id="engineChildren" flex="1"/>
     <treecols>
       <treecol id="engineShown" type="checkbox" editable="true" sortable="false"/>
       <treecol id="engineName" flex="4" label="&engineNameColumn.label;" sortable="false"/>
--- a/browser/components/preferences/in-content-new/preferences.js
+++ b/browser/components/preferences/in-content-new/preferences.js
@@ -161,24 +161,25 @@ function gotoPref(aCategory) {
   let subcategory = breakIndex != -1 && category.substring(breakIndex + 1);
   if (subcategory) {
     category = category.substring(0, breakIndex);
   }
   category = friendlyPrefCategoryNameToInternalName(category);
   if (category != "paneSearchResults") {
     gSearchResultsPane.searchInput.value = "";
     gSearchResultsPane.searchResultsCategory.hidden = true;
-    gSearchResultsPane.findSelection.removeAllRanges();
+    gSearchResultsPane.getFindSelection(window).removeAllRanges();
     gSearchResultsPane.removeAllSearchTooltips();
     gSearchResultsPane.removeAllSearchMenuitemIndicators();
   } else if (!gSearchResultsPane.searchInput.value) {
     // Something tried to send us to the search results pane without
     // a query string. Default to the General pane instead.
     category = kDefaultCategoryInternalName;
     document.location.hash = kDefaultCategory;
+    gSearchResultsPane.query = null;
   }
 
   // Updating the hash (below) or changing the selected category
   // will re-enter gotoPref.
   if (gLastHash == category && !subcategory)
     return;
   let item = categories.querySelector(".category[value=" + category + "]");
   if (!item) {
--- a/browser/components/preferences/in-content-new/subdialogs.js
+++ b/browser/components/preferences/in-content-new/subdialogs.js
@@ -328,16 +328,34 @@ SubDialog.prototype = {
     this._overlay.style.opacity = ""; // XXX: focus hack continued from _onContentLoaded
 
     if (this._box.getAttribute("resizable") == "true") {
       this._resizeObserver = new MutationObserver(this._onResize);
       this._resizeObserver.observe(this._box, {attributes: true});
     }
 
     this._trapFocus();
+
+    // Search within main document and highlight matched keyword.
+    gSearchResultsPane.searchWithinNode(this._titleElement, gSearchResultsPane.query);
+
+    // Search within sub-dialog document and highlight matched keyword.
+    let subDialogsChildren = this._frame.contentDocument
+      .querySelectorAll(":scope > *:not([data-hidden-from-search])");
+
+    for (let i = 0; i < subDialogsChildren.length; i++) {
+      gSearchResultsPane.searchWithinNode(subDialogsChildren[i], gSearchResultsPane.query);
+    }
+
+    // Creating tooltips for all the instances found
+    for (let node of gSearchResultsPane.listSearchTooltips) {
+      if (!node.getAttribute("data-has-tooltip")) {
+        gSearchResultsPane.createSearchTooltip(node, gSearchResultsPane.query);
+      }
+    }
   },
 
   _onResize(mutations) {
     let frame = this._frame;
     // The width and height styles are needed for the initial
     // layout of the frame, but afterward they need to be removed
     // or their presence will restrict the contents of the <browser>
     // from resizing to a smaller size.
--- a/browser/components/preferences/permissions.xul
+++ b/browser/components/preferences/permissions.xul
@@ -27,17 +27,17 @@
 
   <keyset>
     <key key="&windowClose.key;" modifiers="accel" oncommand="window.close();"/>
   </keyset>
 
   <vbox class="contentPane largeDialogContainer" flex="1">
     <description id="permissionsText" control="url"/>
     <separator class="thin"/>
-    <label id="urlLabel" control="url" value="&address.label;" accesskey="&address.accesskey;"/>
+    <label id="urlLabel" control="url" accesskey="&address.accesskey;">&address.label;</label>
     <hbox align="start">
       <textbox id="url" flex="1"
                oninput="gPermissionManager.onHostInput(event.target);"
                onkeypress="gPermissionManager.onHostKeyPress(event);"/>
     </hbox>
     <hbox pack="end">
       <button id="btnBlock" disabled="true" label="&block.label;" accesskey="&block.accesskey;"
               oncommand="gPermissionManager.addPermission(nsIPermissionManager.DENY_ACTION);"/>
--- a/browser/components/preferences/sanitize.xul
+++ b/browser/components/preferences/sanitize.xul
@@ -1,17 +1,17 @@
 <?xml version="1.0"?>
 
 <!-- -*- Mode: Java; tab-width: 4; indent-tabs-mode: nil; c-basic-offset: 4 -*- -->
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - 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/. -->
 
 <?xml-stylesheet href="chrome://global/skin/"?>
-<?xml-stylesheet href="chrome://browser/skin/preferences/preferences.css" type="text/css"?> 
+<?xml-stylesheet href="chrome://browser/skin/preferences/preferences.css" type="text/css"?>
 
 <!DOCTYPE dialog [
   <!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd">
   <!ENTITY % sanitizeDTD SYSTEM "chrome://browser/locale/sanitize.dtd">
   %brandDTD;
   %sanitizeDTD;
 ]>
 
@@ -40,17 +40,17 @@
       <preference id="privacy.clearOnShutdown.offlineApps"           name="privacy.clearOnShutdown.offlineApps"           type="bool"/>
       <preference id="privacy.clearOnShutdown.sessions"              name="privacy.clearOnShutdown.sessions"              type="bool"/>
       <preference id="privacy.clearOnShutdown.siteSettings"          name="privacy.clearOnShutdown.siteSettings"          type="bool"/>
     </preferences>
 
     <description>&clearDataSettings2.label;</description>
 
     <groupbox orient="horizontal">
-      <caption label="&historySection.label;"/>
+      <caption><label>&historySection.label;</label></caption>
       <grid flex="1">
         <columns>
           <column dialogWidth="&sanitizePrefs2.column.width;"
                   subdialogWidth="&sanitizePrefs2.inContent.column.width;"/>
           <column flex="1"/>
         </columns>
         <rows>
           <row>
@@ -73,17 +73,17 @@
             <checkbox label="&itemFormSearchHistory.label;"
                       accesskey="&itemFormSearchHistory.accesskey;"
                       preference="privacy.clearOnShutdown.formdata"/>
           </row>
         </rows>
       </grid>
     </groupbox>
     <groupbox orient="horizontal">
-      <caption label="&dataSection.label;"/>
+      <caption><label>&dataSection.label;</label></caption>
       <grid flex="1">
         <columns>
           <column dialogWidth="&sanitizePrefs2.column.width;"
                   subdialogWidth="&sanitizePrefs2.inContent.column.width;"/>
           <column flex="1"/>
         </columns>
         <rows>
           <row>
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -267,16 +267,21 @@ description > html|a {
 #weavePrefsDeck > vbox > groupbox,
 #weavePrefsDeck > vbox > description,
 #weavePrefsDeck > #hasFxaAccount > vbox > label,
 #weavePrefsDeck > #hasFxaAccount > hbox > label {
   /* no margin-inline-start for elements at the beginning of a line */
   margin-inline-start: 0;
 }
 
+groupbox {
+  /* Give more available space for displaying tooltip on scrollable groupbox */
+  margin-top: 15px !important;
+}
+
 #tabsElement {
   margin-inline-end: 4px; /* add the 4px end-margin of other elements */
 }
 
 .indent {
   /* !important needed to override margin-inline-start:0 !important; rule
      define in common.css for labels */
   margin-inline-start: 33px !important;
@@ -609,16 +614,17 @@ description > html|a {
 
 .help-button:link,
 .help-button:visited {
   color: var(--in-content-category-text);
   text-decoration: none;
 }
 
 .search-tooltip {
+  font-size: 1.25rem;
   position: absolute;
   padding: 0 10px;
   bottom: 100%;
   background-color: #ffe900;
 }
 
 .search-tooltip:hover,
 .search-tooltip:hover::before {