Bug 1493961 - Font editor: replace capitalization via CSS text-transform with manual capitalization where needed. r=gl
authorRazvan Caliman <rcaliman@mozilla.com>
Sat, 29 Sep 2018 21:42:18 +0000
changeset 494691 e173a2a4c12f363eabf2689709d1c9a4205bbc5e
parent 494690 8959f45a4e86b39f21d043effa649ae1167da46b
child 494705 890a773ea546b579acfe8f35a1b8bb197c7cf055
child 494706 cd95cb66e479c4f66bad4c90ab1e211d11387261
push id9984
push userffxbld-merge
push dateMon, 15 Oct 2018 21:07:35 +0000
treeherdermozilla-beta@183d27ea8570 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1493961
milestone64.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1493961 - Font editor: replace capitalization via CSS text-transform with manual capitalization where needed. r=gl Localization means words in other languages that shouldn't be capitalized will be if using CSS text-transform. Differential Revision: https://phabricator.services.mozilla.com/D7190
devtools/client/inspector/fonts/components/FontEditor.js
devtools/client/inspector/fonts/components/LineHeight.js
devtools/client/locales/en-US/font-inspector.properties
devtools/client/themes/fonts.css
--- a/devtools/client/inspector/fonts/components/FontEditor.js
+++ b/devtools/client/inspector/fonts/components/FontEditor.js
@@ -102,17 +102,17 @@ class FontEditor extends PureComponent {
     return dom.label(
       {
         className: "font-control font-control-used-fonts",
       },
       dom.span(
         {
           className: "font-control-label",
         },
-        getStr("fontinspector.usedFontsLabel")
+        getStr("fontinspector.fontsUsedLabel")
       ),
       dom.div(
         {
           className: "font-control-box",
         },
         topFontsList,
         moreFonts
       )
--- a/devtools/client/inspector/fonts/components/LineHeight.js
+++ b/devtools/client/inspector/fonts/components/LineHeight.js
@@ -57,17 +57,17 @@ class LineHeight extends PureComponent {
     // max value of the input and slider. Without this memoization, the value and slider
     // thumb get clamped at the upper bound while decrementing an out-of-bounds value.
     this.historicMax[unit] = this.historicMax[unit]
       ? Math.max(this.historicMax[unit], max)
       : max;
 
     return FontPropertyValue({
       autoIncrement: true,
-      label: getStr("fontinspector.lineHeightLabel"),
+      label: getStr("fontinspector.lineHeightLabelCapitalized"),
       min: 0,
       max: this.historicMax[unit],
       name: "line-height",
       onChange: this.props.onChange,
       step: getStepForUnit(unit),
       unit,
       unitOptions: ["", "em", "%", "px"],
       value,
--- a/devtools/client/locales/en-US/font-inspector.properties
+++ b/devtools/client/locales/en-US/font-inspector.properties
@@ -52,22 +52,22 @@ fontinspector.showMore=Show more
 
 # LOCALIZATION NOTE (fontinspector.showLess): Label for an expanded list of fonts.
 fontinspector.showLess=Show less
 
 # LOCALIZATION NOTE (fontinspector.noPseduoWarning): Warning message shown when the
 # selected element is a pseudo-element that the font editor cannot work with.
 fontinspector.noPseduoWarning=Pseudo-elements are not currently supported.
 
-# LOCALIZATION NOTE (fontinspector.lineHeightLabel): Label for the UI to change the line height in the font editor.
-fontinspector.lineHeightLabel=Line height
+# LOCALIZATION NOTE (fontinspector.lineHeightLabelCapitalized): Label for the UI to change the line height in the font editor.
+fontinspector.lineHeightLabelCapitalized=Line Height
 
 # LOCALIZATION NOTE (fontinspector.allFontsOnPageHeader): Header for the section listing
 # all the fonts on the current page.
 fontinspector.allFontsOnPageHeader=All fonts on page
 
-# LOCALIZATION NOTE (fontinspector.usedFontsLabel): Label for the Font Editor section
+# LOCALIZATION NOTE (fontinspector.fontsUsedLabel): Label for the Font Editor section
 # which shows the fonts used on the selected element.
-fontinspector.usedFontsLabel=Fonts used
+fontinspector.fontsUsedLabel=Fonts Used
 
 # LOCALIZATION NOTE (fontinspector.previewTextPlaceholder): Placeholder for the input
 # where the user can type text to get a preview of it using a font.
 fontinspector.previewTextPlaceholder=Font preview text
--- a/devtools/client/themes/fonts.css
+++ b/devtools/client/themes/fonts.css
@@ -220,31 +220,29 @@
 }
 
 .font-control-label {
   display: inline-block;
   flex: 1;
   font-size: 12px;
   min-width: 70px;
   margin-right: 10px;
-  text-transform: capitalize;
   -moz-user-select: none;
 }
 
 .font-control-label-text {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .font-control-label-detail {
   color: var(--secondary-label-color);
   font-size: smaller;
-  text-transform: none;
 }
 
 .font-value-input {
   margin-left: 10px;
   text-align: right;
   width: 60px;
   padding: 2px 3px;
 }