Bug 1392532 - Set specific font size with rem unit for each OS platform to optimize Photon visual refresh work since the default system font size values are different on different OS platform. draft
authorEvan Tseng <evan@tseng.io>
Tue, 22 Aug 2017 15:35:22 +0800
changeset 656500 d9f9448c12fb3f0b6fad77d6e281b4f10e3741af
parent 656284 d9b405d82cffb07343a5f2fd941e029298c7f6c4
child 729175 7153b65d5e18debbba6d5041de39ef5c87ce99db
push id77250
push userbmo:evan@tseng.io
push dateThu, 31 Aug 2017 09:33:02 +0000
bugs1392532
milestone57.0a1
Bug 1392532 - Set specific font size with rem unit for each OS platform to optimize Photon visual refresh work since the default system font size values are different on different OS platform. * The default system font size on Ubuntu is 14.6667px, Windows is 12px, and Mac is 11px. MozReview-Commit-ID: 8qzsi3YRXaL
browser/components/preferences/in-content-new/main.xul
browser/components/preferences/in-content-new/privacy.xul
browser/components/preferences/in-content-new/sync.xul
browser/themes/linux/preferences/in-content-new/preferences.css
browser/themes/osx/preferences/in-content-new/preferences.css
browser/themes/shared/incontentprefs/preferences.inc.css
browser/themes/windows/preferences/in-content-new/preferences.css
toolkit/themes/linux/global/in-content/common.css
toolkit/themes/linux/mozapps/extensions/extensions.css
toolkit/themes/osx/global/in-content/common.css
toolkit/themes/osx/mozapps/extensions/extensions.css
toolkit/themes/shared/in-content/common.inc.css
toolkit/themes/windows/global/in-content/common.css
toolkit/themes/windows/mozapps/extensions/extensions.css
--- a/browser/components/preferences/in-content-new/main.xul
+++ b/browser/components/preferences/in-content-new/main.xul
@@ -912,17 +912,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>
@@ -933,18 +933,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-new/privacy.xul
+++ b/browser/components/preferences/in-content-new/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-new/sync.xul
+++ b/browser/components/preferences/in-content-new/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/themes/linux/preferences/in-content-new/preferences.css
+++ b/browser/themes/linux/preferences/in-content-new/preferences.css
@@ -29,8 +29,12 @@ menulist.actionsMenu > .menulist-dropmar
   margin-top: 11px;
   margin-bottom: 11px;
 }
 
 textbox + button,
 filefield + button {
   margin-inline-start: -4px;
 }
+
+#searchInput input {
+  font-size: 0.97rem;
+}
--- a/browser/themes/osx/preferences/in-content-new/preferences.css
+++ b/browser/themes/osx/preferences/in-content-new/preferences.css
@@ -22,8 +22,12 @@ filefield + button {
 
 #popupPolicyRow {
   /* Override styles from
      browser/themes/osx/preferences/preferences.css */
   margin-bottom: 0 !important;
   padding-bottom: 0 !important;
   border-bottom: none;
 }
+
+#searchInput input {
+  font-size: 1.18rem;
+}
--- 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-new/general.svg");
 }
 
 #category-search > .category-icon {
   list-style-image: url("chrome://browser/skin/preferences/in-content-new/search.svg");
@@ -150,16 +133,20 @@ separator.thin:not([orient="vertical"]) 
 }
 
 .header[hidden=true] {
   display: none;
 }
 
 /* General Pane */
 
+#isDefaultLabel {
+  font-weight: 600;
+}
+
 #startupGroup {
   margin-top: 0px !important;
 }
 
 #startupTable {
   margin-top: 32px;
   margin-inline-end: -4px;
   border-collapse: collapse;
@@ -209,21 +196,16 @@ separator.thin:not([orient="vertical"]) 
 .content-cell-item {
   margin: 2px 4px;
 }
 
 #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;
 }
@@ -537,17 +519,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;
 }
@@ -565,31 +546,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 {
@@ -644,17 +620,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;
--- a/browser/themes/windows/preferences/in-content-new/preferences.css
+++ b/browser/themes/windows/preferences/in-content-new/preferences.css
@@ -9,8 +9,12 @@
 }
 
 textbox + button,
 filefield + button {
   margin-inline-start: -4px;
   margin-top: 4px;
   margin-bottom: 4px;
 }
+
+#searchInput input {
+  font-size: 1.08rem;
+}
--- a/toolkit/themes/linux/global/in-content/common.css
+++ b/toolkit/themes/linux/global/in-content/common.css
@@ -112,8 +112,30 @@ xul|treechildren::-moz-tree-row(multicol
 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: 0.97rem;
+}
--- a/toolkit/themes/linux/mozapps/extensions/extensions.css
+++ b/toolkit/themes/linux/mozapps/extensions/extensions.css
@@ -37,8 +37,12 @@
   padding: 0 1px;
 }
 
 .meta-rating > .star[on="true"],
 .meta-rating[showrating="user"] > .star[hover] {
   list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png");
   padding: 0 1px;
 }
+
+#header-search input {
+  font-size: 0.97rem;
+}
--- 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/osx/mozapps/extensions/extensions.css
+++ b/toolkit/themes/osx/mozapps/extensions/extensions.css
@@ -46,8 +46,12 @@
 .meta-rating > .star {
   list-style-image: url("chrome://mozapps/skin/extensions/rating-not-won.png");
   padding: 0 1px;
 }
 
 .meta-rating > .star[on="true"] {
   list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png");
 }
+
+#header-search input {
+  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;
+}
--- a/toolkit/themes/windows/mozapps/extensions/extensions.css
+++ b/toolkit/themes/windows/mozapps/extensions/extensions.css
@@ -41,8 +41,12 @@
 
 .meta-rating > .star[on="true"] {
   list-style-image: url("chrome://mozapps/skin/extensions/rating-won.png");
 }
 
 #detail-view .legacy-warning {
   margin-top: 1rem;
 }
+
+#header-search input {
+  font-size: 1.08rem;
+}