Bug 1422100 - Refactor in-content UI font sizes. r?jaws draft
authorDão Gottwald <dao@mozilla.com>
Thu, 30 Nov 2017 20:23:07 +0100
changeset 705829 5c56ce5fbf151332df4df23fd7146a17668d665f
parent 705606 ba283baf4e98aa3a5f45a17981077b98697aa73a
child 742485 c862ec8b6f333c7766accb99dd02c15ce1d18e96
push id91610
push userdgottwald@mozilla.com
push dateThu, 30 Nov 2017 19:23:31 +0000
reviewersjaws
bugs1422100
milestone59.0a1
Bug 1422100 - Refactor in-content UI font sizes. r?jaws MozReview-Commit-ID: DIxgLYcUvJh
browser/themes/linux/preferences/in-content/dialog.css
browser/themes/linux/preferences/in-content/preferences.css
browser/themes/osx/preferences/in-content/dialog.css
browser/themes/osx/preferences/in-content/preferences.css
browser/themes/shared/incontentprefs/dialog.inc.css
browser/themes/shared/incontentprefs/preferences.inc.css
browser/themes/windows/preferences/in-content/dialog.css
browser/themes/windows/preferences/in-content/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/themes/linux/preferences/in-content/dialog.css
+++ b/browser/themes/linux/preferences/in-content/dialog.css
@@ -1,13 +1,10 @@
 /* - 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/. */
 
 %include ../../../shared/incontentprefs/dialog.inc.css
 
-label,
-textbox,
-description,
-.tab-text,
-menulist label {
-  font-size: 1.11rem;
+:root > * {
+  font-size: 1.05em;
 }
+
--- a/browser/themes/linux/preferences/in-content/preferences.css
+++ b/browser/themes/linux/preferences/in-content/preferences.css
@@ -1,45 +1,23 @@
 /* - 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/. */
 
 %include ../../../shared/incontentprefs/preferences.inc.css
 
-html *,
-page *,
-window * {
-  font-size: 1.11rem;
-}
-
-caption label {
-  font-size: 1.27rem;
-}
-
-.tip-caption,
-.help-label {
-  font-size: 1rem;
+:root > * {
+  font-size: 1.11em;
 }
 
 .treecol-sortdirection {
   /* override the Linux only toolkit rule */
   -moz-appearance: none;
 }
 
-.actionsMenu {
-  font-family: "Clear Sans", sans-serif;
-  font-size: 1.25rem;
-  line-height: 22px;
-}
-
 .actionsMenu > .menulist-label-box > .menulist-icon {
-  margin-top: 1px;
   margin-inline-start: 1px;
-  margin-inline-end: 6px;
-}
-
-.actionsMenu > .menulist-label-box > .menulist-label {
-  margin-top: 2px !important;
+  margin-inline-end: 8px;
 }
 
 filefield + button {
   margin-inline-start: -4px;
 }
--- a/browser/themes/osx/preferences/in-content/dialog.css
+++ b/browser/themes/osx/preferences/in-content/dialog.css
@@ -4,22 +4,18 @@
 
 %include ../../../shared/incontentprefs/dialog.inc.css
 
 prefwindow,
 .windowDialog {
   font: message-box !important;
 }
 
-label,
-textbox,
-description,
-.tab-text,
-menulist label {
-  font-size: 1.36rem;
+:root > * {
+  font-size: 1.18em;
 }
 
 caption {
   font: message-box;
 }
 
 .prefWindow-dlgbuttons {
   margin: 0;
--- a/browser/themes/osx/preferences/in-content/preferences.css
+++ b/browser/themes/osx/preferences/in-content/preferences.css
@@ -1,27 +1,16 @@
 /* - 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/. */
 
 %include ../../../shared/incontentprefs/preferences.inc.css
 
-html *,
-page *,
-window * {
-  font-size: 1.36rem;
-}
-
-caption label {
-  font-size: 1.55rem;
-}
-
-.tip-caption,
-.help-label {
-  font-size: 1.18rem;
+:root > * {
+  font-size: 1.36em;
 }
 
 .actionsMenu > .menulist-label-box > .menulist-icon {
   margin-top: 2px;
   margin-inline-start: 2px;
   margin-inline-end: 8px !important;
 }
 
--- a/browser/themes/shared/incontentprefs/dialog.inc.css
+++ b/browser/themes/shared/incontentprefs/dialog.inc.css
@@ -45,33 +45,27 @@ tree:not(#rejectsTree) {
   margin: 3px 0 0 !important;
 }
 
 caption {
   padding-inline-start: 0;
 }
 
 groupbox {
-  font-size: 1em;
   margin-top: 0;
   margin-right: 4px;
   margin-left: 4px;
   padding-top: 0;
   padding-bottom: 5px;
 }
 
 prefpane .groupbox-body {
   padding: 0 0 5px;
 }
 
 groupbox description {
   margin-right: 0;
   margin-left: 0;
 }
 
-label.menu-text,
-textbox.tree-input {
-  font-size: unset;
-}
-
 menulist label {
   font-weight: unset;
 }
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -21,18 +21,16 @@
   /* A workaround to keep the container always float on the `top: 0` (Bug 1377009) */
   display: block;
   width: 664px;
 }
 
 #mainPrefPane {
   width: 100%;
   padding: 0;
-  font: message-box;
-  color: currentColor;
 }
 
 prefpane > groupbox + groupbox {
   margin-top: 16px;
 }
 
 groupbox + groupbox > .groupbox-body,
 groupbox + vbox groupbox > .groupbox-body {
@@ -52,21 +50,25 @@ button,
 treecol,
 html|option {
   /* override the * rule */
   -moz-user-select: none;
 }
 
 description,
 label {
-  line-height: 30px;
+  line-height: 1.8em;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
 
+.tip-caption {
+  font-size: .9em;
+}
+
 menulist > hbox > label,
 menuitem > label,
 button > hbox > label {
   line-height: unset;
 }
 
 .indent {
   margin-inline-start: 28px !important;
@@ -206,22 +208,20 @@ button > hbox > label {
 }
 
 #browserHomePage:-moz-locale-dir(rtl) input {
   unicode-bidi: plaintext;
   direction: rtl;
 }
 
 #updateApp > .groupbox-body > label {
-  margin: 0 0 4px 0;
-  line-height: 30px;
+  margin: 0 0 4px;
 }
 
 #updateApp > .groupbox-body > description {
-  line-height: 30px;
   margin: 0;
 }
 
 #updateBox {
   margin-top: 4px;
   margin-bottom: 32px;
 }
 
@@ -241,17 +241,17 @@ button > hbox > label {
 
 #updateRadioGroup > radio,
 #browserStartupPage > radio {
   height: 30px;
   margin: 2px 0;
 }
 
 #filter {
-  margin: 4px 0 8px 0;
+  margin: 4px 0 8px;
 }
 
 #handlersView {
   height: 25em;
   margin-inline-end: 0;
 }
 
 #handlersView > richlistitem {
@@ -285,17 +285,17 @@ button > hbox > label {
 
 .actionsMenu > menupopup > menuitem > .menu-iconic-left {
   margin-inline-end: 8px !important;
 }
 
 /* Search Pane */
 
 #engineList {
-  margin: 2px 0 5px 0;
+  margin: 2px 0 5px;
 }
 
 #engineList > treechildren::-moz-tree-image(engineShown, checked),
 #blocklistsTree > treechildren::-moz-tree-image(selectionCol, checked) {
   list-style-image: url("chrome://global/skin/in-content/check.svg");
   -moz-context-properties: fill, stroke;
   fill: #2292d0;
   stroke: none;
@@ -314,17 +314,17 @@ button > hbox > label {
   min-height: 36px;
 }
 
 #selectionCol {
   min-width: 26px;
 }
 
 #addEnginesBox {
-  margin: 4px 0 0 0;
+  margin: 4px 0 0;
 }
 
 /* Privacy Pane */
 
 #formAutofillGroup {
   margin-top: 28px;
 }
 
@@ -407,17 +407,16 @@ button > hbox > label {
 .dialogOverlay[topmost="true"] {
   background-color: rgba(0,0,0,0.5);
 }
 
 .dialogBox {
   background-color: #fbfbfb;
   background-clip: content-box;
   color: #424e5a;
-  font-size: 14px;
   /* `transparent` will use the dialogText color in high-contrast themes and
      when page colors are disabled */
   border: 1px solid transparent;
   border-radius: 3.5px;
   box-shadow: 0 2px 6px 0 rgba(0,0,0,0.3);
   display: -moz-box;
   margin: 0;
   padding: 0;
@@ -433,17 +432,17 @@ button > hbox > label {
 .dialogBox > .groupbox-title {
   margin-top: 0;
   padding: 3.5px 0;
   background-color: #F1F1F1;
   border-bottom: 1px solid #C1C1C1;
 }
 
 .dialogTitle {
-  font-size: unset;
+  font-size: .9em;
   text-align: center;
   -moz-user-select: none;
 }
 
 .close-icon {
   border: none;
   background: none !important;
   min-width: 0;
@@ -678,17 +677,17 @@ button > hbox > label {
 }
 
 .help-icon:hover {
   fill: currentColor !important;
 }
 
 .help-label {
   margin: 0 4px;
-  line-height: 22px;
+  font-size: .9em;
   -moz-user-select: none;
 }
 
 @media (max-width: 830px) {
   .help-button > .text-link {
     -moz-box-flex: 0;
     width: 36px;
     height: 36px;
--- a/browser/themes/windows/preferences/in-content/dialog.css
+++ b/browser/themes/windows/preferences/in-content/dialog.css
@@ -1,13 +1,9 @@
 /* - 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/. */
 
 %include ../../../shared/incontentprefs/dialog.inc.css
 
-label,
-textbox,
-description,
-.tab-text,
-menulist label {
-  font-size: 1.25rem;
+:root > * {
+  font-size: 1.12em;
 }
--- a/browser/themes/windows/preferences/in-content/preferences.css
+++ b/browser/themes/windows/preferences/in-content/preferences.css
@@ -1,27 +1,16 @@
 /* - 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/. */
 
 %include ../../../shared/incontentprefs/preferences.inc.css
 
-html *,
-page *,
-window * {
-  font-size: 1.25rem;
-}
-
-caption label {
-  font-size: 1.42rem;
-}
-
-.tip-caption,
-.help-label {
-  font-size: 1.08rem;
+:root > * {
+  font-size: 1.25em;
 }
 
 .actionsMenu > .menulist-label-box > .menulist-icon {
   margin-inline-end: 9px;
 }
 
 filefield + button {
   margin-inline-start: -4px;
--- a/toolkit/themes/linux/global/in-content/common.css
+++ b/toolkit/themes/linux/global/in-content/common.css
@@ -96,20 +96,12 @@ 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);
 }
 
-*|*.header-name {
-  font-size: 1.64rem;
-}
-
-*|*.category-name {
-  font-size: 1.19rem;
-}
-
 html|button {
   /* XUL button min-width */
   min-width: 6.3em;
 }
--- a/toolkit/themes/linux/mozapps/extensions/extensions.css
+++ b/toolkit/themes/linux/mozapps/extensions/extensions.css
@@ -1,14 +1,18 @@
 /* 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/. */
 
 %include ../../../shared/extensions/extensions.inc.css
 
+:root > * {
+  font-size: 1.11em;
+}
+
 #header-utils-btn .toolbarbutton-icon {
   list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg");
   -moz-context-properties: fill;
   fill: GrayText;
 }
 
 .sorter[checkState="1"] .button-icon {
   display: -moz-box;
--- a/toolkit/themes/osx/global/in-content/common.css
+++ b/toolkit/themes/osx/global/in-content/common.css
@@ -57,21 +57,16 @@ xul|*.radio-icon {
   margin-inline-end: 0;
 }
 
 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;
 }
 
 xul|button:-moz-focusring,
 xul|menulist:-moz-focusring,
@@ -111,20 +106,12 @@ 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;
 }
 
-*|*.header-name {
-  font-size: 2rem;
-}
-
-*|*.category-name {
-  font-size: 1.45rem;
-}
-
 html|button {
   /* XUL button min-width */
   min-width: 79px;
 }
--- a/toolkit/themes/osx/mozapps/extensions/extensions.css
+++ b/toolkit/themes/osx/mozapps/extensions/extensions.css
@@ -1,14 +1,18 @@
 /* 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/. */
 
 %include ../../../shared/extensions/extensions.inc.css
 
+:root > * {
+  font-size: 1.36em;
+}
+
 .no-auto-hide > .menulist-dropmarker {
   padding-inline-start: 0px !important;
 }
 
 #header-utils-btn {
   list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg");
   -moz-context-properties: fill;
   fill: #424f5a;
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -68,24 +68,25 @@ html|h1 {
 
 html|hr {
   border-style: solid none none none;
   border-color: var(--in-content-border-color);
 }
 
 xul|caption {
   -moz-appearance: none;
+  font-size: 1.14em;
   margin: 0;
 }
 
 html|h2,
 xul|caption xul|checkbox,
 xul|caption xul|label {
   font-weight: 600;
-  line-height: 22px;
+  line-height: 1.4em;
 }
 
 xul|caption xul|checkbox,
 xul|caption xul|label {
   margin: 0 !important;
 }
 
 *|*.main-content {
@@ -99,17 +100,16 @@ xul|prefpane > xul|*.content-box {
 
 /* groupboxes */
 
 xul|groupbox {
   -moz-appearance: none;
   border: none;
   margin: 0;
   padding: 0;
-  font-size: 1.25rem;
 }
 
 xul|groupbox > xul|caption {
   padding: 4px 0;
 }
 
 xul|groupbox xul|label:not(.menu-accel):not(.menu-text):not(.indent):not(.learnMore):not(.tail-with-learn-more),
 xul|groupbox xul|description {
@@ -117,18 +117,16 @@ xul|groupbox xul|description {
   margin-inline-start: 0 !important;
   margin-inline-end: 0 !important;
 }
 
 /* tabpanels and tabs */
 
 xul|tabpanels {
   -moz-appearance: none;
-  font-size: 1.25rem;
-  line-height: 22px;
   border: none;
   padding: 0;
   background-color: transparent;
   color: inherit;
 }
 
 xul|tabs {
   margin-bottom: 15px;
@@ -160,21 +158,16 @@ xul|tab:hover {
 }
 
 xul|tab[selected] {
   background-color: var(--in-content-box-background-hover);
   padding-bottom: 0; /* compensate the 4px border */
   border-bottom: 4px solid var(--in-content-border-highlight);
 }
 
-xul|*.tab-text {
-  font-size: 1.3rem;
-  line-height: 22px;
-}
-
 /* html buttons */
 
 html|button {
   padding: 3px;
 }
 
 /* xul buttons and menulists */
 
@@ -698,17 +691,18 @@ xul|*.radio-label-box {
   background-color: var(--in-content-category-background-selected-active);
 }
 
 *|*#categories[keyboard-navigation="true"]:-moz-focusring > *|*.category[current] {
   outline: var(--in-content-category-outline-focus);
 }
 
 *|*.category-name {
-  line-height: 22px;
+  font-size: 1.07em;
+  line-height: 1.4em;
   padding-bottom: 2px;
   padding-inline-start: 9px;
   margin: 0;
   -moz-user-select: none;
 }
 
 *|*.category-icon {
   width: 24px;
@@ -751,18 +745,19 @@ 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: 1.46em;
   font-weight: 300;
-  line-height: 30px;
+  line-height: 1.3em;
   margin: 0;
   -moz-user-select: none;
 }
 
 /* File fields */
 
 xul|filefield {
   -moz-appearance: none;
--- a/toolkit/themes/windows/global/in-content/common.css
+++ b/toolkit/themes/windows/global/in-content/common.css
@@ -50,20 +50,12 @@ html|input[type="checkbox"]:-moz-focusri
     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;
   }
 }
 
-*|*.header-name {
-  font-size: 1.83rem;
-}
-
-*|*.category-name {
-  font-size: 1.33rem;
-}
-
 html|button {
   /* XUL button min-width */
   min-width: 6.3em;
 }
--- a/toolkit/themes/windows/mozapps/extensions/extensions.css
+++ b/toolkit/themes/windows/mozapps/extensions/extensions.css
@@ -1,14 +1,18 @@
 /* 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/. */
 
 %include ../../../shared/extensions/extensions.inc.css
 
+:root > * {
+  font-size: 1.25em;
+}
+
 #header-utils-btn {
   list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg");
   -moz-context-properties: fill;
   fill: #424f5a;
   margin-inline-end: 16px;
 }
 
 @media (-moz-windows-default-theme: 0) {