Bug 1392532 - Polish Preferences font size depending on platforms r?dao draft
authorRicky Chien <ricky060709@gmail.com>
Mon, 04 Sep 2017 11:06:10 +0800
changeset 658969 8c1595d6657d8d2c1e4624ac006a59ed1ba96a42
parent 658813 1401e3eec44df87963d3af329ef8a4183ab0483f
child 729825 d835e37c54acc1dddf26aa660e0cf373119190c1
push id77954
push userbmo:rchien@mozilla.com
push dateTue, 05 Sep 2017 07:30:09 +0000
reviewersdao
bugs1392532
milestone57.0a1
Bug 1392532 - Polish Preferences font size depending on platforms r?dao MozReview-Commit-ID: IiqSSl7wQ6h
browser/components/preferences/in-content/main.xul
browser/components/preferences/in-content/preferences.xul
browser/components/preferences/in-content/privacy.xul
browser/components/preferences/in-content/sync.xul
browser/locales/en-US/chrome/browser/preferences/preferences.dtd
browser/themes/shared/incontentprefs/preferences.inc.css
toolkit/themes/linux/global/in-content/common.css
toolkit/themes/osx/global/in-content/common.css
toolkit/themes/shared/in-content/common.inc.css
toolkit/themes/windows/global/in-content/common.css
--- a/browser/components/preferences/in-content/main.xul
+++ b/browser/components/preferences/in-content/main.xul
@@ -905,17 +905,17 @@
 
   <hbox align="center">
     <checkbox id="useRecommendedPerformanceSettings"
               label="&useRecommendedPerformanceSettings2.label;"
               accesskey="&useRecommendedPerformanceSettings2.accesskey;"
               preference="browser.preferences.defaultPerformanceSettings.enabled"/>
     <label id="performanceSettingsLearnMore" class="learnMore text-link">&performanceSettingsLearnMore.label;</label>
   </hbox>
-  <description class="indent">&useRecommendedPerformanceSettings2.description;</description>
+  <description class="indent tip-caption">&useRecommendedPerformanceSettings2.description;</description>
 
   <vbox id="performanceSettings" class="indent" hidden="true">
     <checkbox id="allowHWAccel"
               label="&allowHWAccel.label;"
               accesskey="&allowHWAccel.accesskey;"
               preference="layers.acceleration.disabled"/>
     <hbox align="center">
       <label id="limitContentProcess" accesskey="&limitContentProcessOption.accesskey;" control="contentProcessCount">&limitContentProcessOption.label;</label>
@@ -926,18 +926,18 @@
           <menuitem label="3" value="3"/>
           <menuitem label="4" value="4"/>
           <menuitem label="5" value="5"/>
           <menuitem label="6" value="6"/>
           <menuitem label="7" value="7"/>
         </menupopup>
       </menulist>
     </hbox>
-    <description id="contentProcessCountEnabledDescription">&limitContentProcessOption.description;</description>
-    <description id="contentProcessCountDisabledDescription">&limitContentProcessOption.disabledDescription;<label class="text-link" href="https://wiki.mozilla.org/Electrolysis">&limitContentProcessOption.disabledDescriptionLink;</label></description>
+    <description id="contentProcessCountEnabledDescription" class="tip-caption">&limitContentProcessOption.description;</description>
+    <description id="contentProcessCountDisabledDescription" class="tip-caption">&limitContentProcessOption.disabledDescription;<label class="text-link" href="https://wiki.mozilla.org/Electrolysis">&limitContentProcessOption.disabledDescriptionLink;</label></description>
   </vbox>
 </groupbox>
 
 <hbox id="browsingCategory"
       class="subcategory"
       hidden="true"
       data-category="paneGeneral">
   <label class="header-name" flex="1">&browsing.label;</label>
--- a/browser/components/preferences/in-content/preferences.xul
+++ b/browser/components/preferences/in-content/preferences.xul
@@ -175,17 +175,17 @@
       <key key="&focusSearch1.key;" modifiers="accel" id="focusSearch1" oncommand="gSearchResultsPane.searchInput.focus();"/>
     </keyset>
 
     <html:a class="help-button" target="_blank" aria-label="&helpButton2.label;">&helpButton2.label;</html:a>
 
     <vbox class="main-content" flex="1" align="start">
       <vbox class="pane-container">
         <hbox class="search-container" pack="end">
-          <textbox type="search" id="searchInput" hidden="true" clickSelectsAll="true"/>
+          <textbox type="search" id="searchInput" style="width: &searchField.width;" hidden="true" clickSelectsAll="true"/>
         </hbox>
         <prefpane id="mainPrefPane">
 #include searchResults.xul
 #include main.xul
 #include search.xul
 #include privacy.xul
 #include containers.xul
 #include sync.xul
--- a/browser/components/preferences/in-content/privacy.xul
+++ b/browser/components/preferences/in-content/privacy.xul
@@ -697,17 +697,17 @@
     </description>
     <description flex="1">
       <checkbox id="submitHealthReportBox" label="&enableHealthReport1.label;"
                 accesskey="&enableHealthReport1.accesskey;"/>
       <label id="FHRLearnMore"
              class="learnMore text-link">&healthReportLearnMore.label;</label>
     </description>
 #ifndef MOZ_TELEMETRY_REPORTING
-    <description id="TelemetryDisabledDesc" class="indent" control="telemetryGroup">&healthReportingDisabled.label;</description>
+    <description id="TelemetryDisabledDesc" class="indent tip-caption" control="telemetryGroup">&healthReportingDisabled.label;</description>
 #endif
   </vbox>
 #ifdef MOZ_CRASHREPORTER
   <hbox align="center">
     <checkbox id="automaticallySubmitCrashesBox"
               preference="browser.crashReports.unsubmittedCheck.autoSubmit"
               label="&alwaysSubmitCrashReports1.label;"
               accesskey="&alwaysSubmitCrashReports1.accesskey;"/>
--- a/browser/components/preferences/in-content/sync.xul
+++ b/browser/components/preferences/in-content/sync.xul
@@ -40,31 +40,31 @@
       data-category="paneSync">
   <label class="header-name" flex="1">&paneSync1.title;</label>
 </hbox>
 
 <deck id="weavePrefsDeck" data-category="paneSync" hidden="true">
   <groupbox id="noFxaAccount">
     <hbox>
       <vbox flex="1">
-        <label id="noFxaCaption">&signedOut.caption;</label>
+        <caption><label id="noFxaCaption">&signedOut.caption;</label></caption>
         <description id="noFxaDescription" flex="1">&signedOut.description;</description>
       </vbox>
       <vbox>
         <image class="fxaSyncIllustration"/>
       </vbox>
     </hbox>
     <hbox id="fxaNoLoginStatus" align="center" flex="1">
       <vbox>
         <image class="fxaProfileImage"/>
       </vbox>
       <vbox flex="1">
         <hbox align="center" flex="1">
           <hbox align="center" flex="1">
-            <label id="signedOutAccountBoxTitle">&signedOut.accountBox.title;</label>
+            <caption><label id="signedOutAccountBoxTitle">&signedOut.accountBox.title;</label></caption>
           </hbox>
           <button id="noFxaSignIn"
                   class="accessory-button"
                   label="&signedOut.accountBox.signin2;"
                   accesskey="&signedOut.accountBox.signin2.accesskey;"/>
         </hbox>
         <hbox align="center" flex="1">
           <html:a id="noFxaSignUp"
@@ -99,18 +99,18 @@
             <!-- logged in and verified and all is good -->
             <hbox id="fxaLoginVerified" align="center" flex="1">
               <image class="fxaProfileImage actionable"
                      role="button"
                      onclick="gSyncPane.openChangeProfileImage(event);"
                      onkeypress="gSyncPane.openChangeProfileImage(event);"
                      tooltiptext="&profilePicture.tooltip;"/>
               <vbox flex="1" pack="center">
-                <hbox flex="1" align="center">
-                  <label id="fxaDisplayName" hidden="true"/>
+                <hbox flex="1" align="baseline">
+                  <caption><label id="fxaDisplayName" hidden="true"/></caption>
                   <label class="fxaEmailAddress" flex="1" crop="end"/>
                   <button id="fxaUnlinkButton"
                           class="accessory-button"
                           label="&disconnect3.label;"
                           accesskey="&disconnect3.accesskey;"/>
                 </hbox>
                 <hbox>
                   <html:a id="verifiedManage" class="openLink"
--- a/browser/locales/en-US/chrome/browser/preferences/preferences.dtd
+++ b/browser/locales/en-US/chrome/browser/preferences/preferences.dtd
@@ -8,16 +8,21 @@
 <!-- LOCALIZATION NOTE (prefWindow.titleGNOME): This is not used for in-content preferences -->
 <!ENTITY  prefWindow.titleGNOME   "&brandShortName; Preferences">
 <!-- When making changes to prefWindow.styleWin test both Windows Classic and
      Luna since widget heights are different based on the OS theme -->
 <!ENTITY  prefWinMinSize.styleWin2      "width: 42em; min-height: 37.5em;">
 <!ENTITY  prefWinMinSize.styleMac       "width: 47em; min-height: 40em;">
 <!ENTITY  prefWinMinSize.styleGNOME     "width: 45.5em; min-height: 40.5em;">
 
+<!-- LOCALIZATION NOTE: (searchField.width): This is used to determine the width
+     of the search field in about:preferences, in order to make entire placeholder
+     string visible -->
+<!ENTITY  searchField.width             "15.4em">
+
 <!ENTITY  paneSearchResults.title       "Search Results">
 <!ENTITY  paneGeneral.title             "General">
 <!ENTITY  paneSearch.title              "Search">
 <!ENTITY  paneFilesApplications.title   "Files &amp; Applications">
 <!ENTITY  panePrivacySecurity.title     "Privacy &amp; Security">
 <!ENTITY  paneContainers.title          "Container Tabs">
 <!ENTITY  paneUpdates.title             "Updates">
 
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -25,41 +25,29 @@
 
 #mainPrefPane {
   width: 100%;
   padding: 0;
   font: message-box;
   color: currentColor;
 }
 
-#mainPrefPane groupbox,
-#mainPrefPane deck,
-#mainPrefPane description {
-  font-size: 1.36rem;
-}
-
 groupbox + groupbox {
   margin-top: 16px;
 }
 
 groupbox + groupbox > .groupbox-body,
 groupbox + vbox groupbox > .groupbox-body {
   margin-top: 4px;
 }
 
 .groupbox-title {
   margin-top: 16px;
 }
 
-input,
-description.indent,
-.indent > description {
-  font-size: 1.18rem !important;
-}
-
 description.indent,
 .indent > description {
   color: #737373;
 }
 
 button,
 treecol,
 html|option {
@@ -114,21 +102,16 @@ separator.thin:not([orient="vertical"]) 
  */
 
 .subcategory:not([hidden]) ~ .subcategory {
   margin-top: 32px;
   padding-top: 15px;
   border-top: 1px solid rgba(12, 12, 13, 0.15);
 }
 
-.header-name {
-  font-size: 2rem;
-  font-weight: 300;
-}
-
 /* Category List */
 
 #category-general > .category-icon {
   list-style-image: url("chrome://browser/skin/preferences/in-content/general.svg");
 }
 
 #category-search > .category-icon {
   list-style-image: url("chrome://browser/skin/preferences/in-content/search.svg");
@@ -149,16 +132,21 @@ separator.thin:not([orient="vertical"]) 
   justify-content: space-between;
 }
 
 .header[hidden=true] {
   display: none;
 }
 
 /* General Pane */
+
+#isDefaultLabel {
+  font-weight: 600;
+}
+
 #startupPageBox {
   padding-top: 32px;
 }
 
 #browserHomePage {
   margin-inline-start: 0;
   margin-inline-end: 0;
 }
@@ -170,21 +158,16 @@ separator.thin:not([orient="vertical"]) 
 .homepage-button:last-of-type {
   margin-inline-end: 0;
 }
 
 #getStarted {
   font-size: 90%;
 }
 
-#isNotDefaultLabel,
-#signedOutAccountBoxTitle {
-  font-weight: 600;
-}
-
 #downloadFolder {
   margin-inline-start: 0;
 }
 
 #browserHomePage:-moz-locale-dir(rtl) input {
   unicode-bidi: plaintext;
   direction: rtl;
 }
@@ -498,17 +481,16 @@ separator.thin:not([orient="vertical"]) 
   margin-bottom: 0;
 }
 
 #tosPP-small-ToS {
   margin-bottom: 14px;
 }
 
 #noFxaCaption {
-  font-weight: bold;
   line-height: 30px;
   margin-top: 0;
   margin-bottom: 4px;
 }
 
 #noFxaSignIn {
   margin-inline-start: 8px;
 }
@@ -526,31 +508,26 @@ separator.thin:not([orient="vertical"]) 
 .separator {
   border-bottom: 1px solid var(--in-content-box-border-color);
 }
 
 #fxaGroup {
   margin-bottom: 32px;
 }
 
-#signedOutAccountBoxTitle {
-  font-weight: bold;
-}
-
 .openLink {
   line-height: 30px;
   cursor: pointer;
 }
 
 .openLink:visited {
   color: var(--in-content-link-color);
 }
 
 #fxaDisplayName {
-  font-weight: bold;
   margin-inline-end: 10px !important;
 }
 
 .fxaEmailAddress {
   margin-inline-end: 8px !important;
 }
 
 .fxaLoginRejectedWarning {
@@ -605,17 +582,16 @@ separator.thin:not([orient="vertical"]) 
 
 .help-button {
   position: fixed;
   left: 0;
   bottom: 36px;
   background-image: url("chrome://global/skin/icons/help.svg");
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
-  font-size: 13px;
   line-height: 36px;
   height: 36px;
   width: 168px;
   background-position: left 10px top 10px;
   background-size: 16px;
   padding-inline-start: 38px;
   margin-inline-start: 34px;
   white-space: nowrap;
@@ -660,17 +636,16 @@ separator.thin:not([orient="vertical"]) 
   position: sticky;
   background-color: var(--in-content-page-background);
   width: 100%;
   top: 0;
   z-index: 1;
 }
 
 #searchInput {
-  width: 250px;
   margin: 20px 0 30px 0;
 }
 
 #searchInput .textbox-search-icons:not([selectedIndex="1"]) {
   display: none;
 }
 
 .search-tooltip {
--- a/toolkit/themes/linux/global/in-content/common.css
+++ b/toolkit/themes/linux/global/in-content/common.css
@@ -101,19 +101,41 @@ xul|spinbuttons {
   -moz-appearance: none;
 }
 
 xul|treechildren::-moz-tree-row(multicol, odd) {
   background-color: var(--in-content-box-background-odd);
 }
 
 /* These rules are duplicated from common.inc.css
- * because above -moz-tree-row(multicol, odd) rule 
- * overrides also hover/selected states. 
+ * because above -moz-tree-row(multicol, odd) rule
+ * overrides also hover/selected states.
  */
 xul|treechildren::-moz-tree-row(hover) {
   background-color: var(--in-content-item-hover);
 }
 
 xul|treechildren::-moz-tree-row(selected) {
   background-color: var(--in-content-item-selected);
 }
 
+html|html *,
+xul|page *,
+xul|window * {
+  font-size: 1.11rem;
+}
+
+*|*.header-name {
+  font-size: 1.64rem;
+}
+
+*|*.category-name {
+  font-size: 1.19rem;
+}
+
+xul|caption > xul|label {
+  font-size: 1.27rem;
+}
+
+.tip-caption,
+.help-button {
+  font-size: 1rem;
+}
--- a/toolkit/themes/osx/global/in-content/common.css
+++ b/toolkit/themes/osx/global/in-content/common.css
@@ -72,17 +72,16 @@ xul|*.radio-icon {
 }
 
 xul|*.numberbox-input-box {
   -moz-appearance: none;
   border-width: 0;
 }
 
 xul|description {
-  font-size: 1.25rem;
   line-height: 22px;
 }
 
 xul|*.text-link:-moz-focusring {
   color: var(--in-content-link-highlight);
   text-decoration: underline;
   box-shadow: none;
 }
@@ -125,8 +124,30 @@ xul|*.spinbuttons-button > xul|*.button-
   display: none;
 }
 
 xul|textbox[type="search"]:not([searchbutton]) > .textbox-input-box > .textbox-search-sign {
   list-style-image: url(chrome://global/skin/icons/search-textbox.svg);
   margin-inline-end: 5px;
 }
 
+html|html *,
+xul|page *,
+xul|window * {
+  font-size: 1.36rem;
+}
+
+*|*.header-name {
+  font-size: 2rem;
+}
+
+*|*.category-name {
+  font-size: 1.45rem;
+}
+
+xul|caption > xul|label {
+  font-size: 1.55rem;
+}
+
+.tip-caption,
+.help-button {
+  font-size: 1.18rem;
+}
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -74,18 +74,17 @@ html|hr {
 xul|caption {
   -moz-appearance: none;
   margin: 0;
 }
 
 html|h2,
 xul|caption > xul|checkbox,
 xul|caption > xul|label {
-  font-size: 1.3rem;
-  font-weight: bold;
+  font-weight: 600;
   line-height: 22px;
 }
 
 xul|caption > xul|checkbox,
 xul|caption > xul|label {
   margin: 0 !important;
 }
 
@@ -687,17 +686,16 @@ xul|*.radio-label-box {
 
 *|*#categories[keyboard-navigation="true"]:-moz-focusring > *|*.category[current] {
   border: var(--in-content-category-border-focus);
   border-inline-start: none;
 }
 
 *|*.category-name {
   line-height: 22px;
-  font-size: 1.45rem;
   padding-bottom: 2px;
   padding-inline-start: 9px;
   margin: 0;
   -moz-user-select: none;
 }
 
 *|*.category-icon {
   width: 24px;
@@ -748,17 +746,16 @@ xul|*.radio-label-box {
 *|*.header {
   margin-inline-end: 4px; /* add the 4px end-margin of other elements */
   margin-bottom: 15px;
   padding-bottom: 15px;
   -moz-box-align: baseline;
 }
 
 *|*.header-name {
-  font-size: 2rem;
   font-weight: 300;
   line-height: 30px;
   margin: 0;
   -moz-user-select: none;
 }
 
 /* File fields */
 
--- a/toolkit/themes/windows/global/in-content/common.css
+++ b/toolkit/themes/windows/global/in-content/common.css
@@ -72,8 +72,31 @@ html|input[type="checkbox"]:-moz-focusri
 /* Use a 2px border so that selected row highlight is still visible behind
     an existing high-contrast border that uses the background color */
 @media (-moz-windows-default-theme: 0) {
   xul|treechildren::-moz-tree-row(selected),
   xul|listbox xul|listitem[selected="true"] {
      border: 2px dotted Highlight;
   }
 }
+
+html|html *,
+xul|page *,
+xul|window * {
+  font-size: 1.25rem;
+}
+
+*|*.header-name {
+  font-size: 1.83rem;
+}
+
+*|*.category-name {
+  font-size: 1.33rem;
+}
+
+xul|caption > xul|label {
+  font-size: 1.42rem;
+}
+
+.tip-caption,
+.help-button {
+  font-size: 1.08rem;
+}