Skip to content

GitLab

T
tangled
Commit faedef6f authored by Dominic Mazzoni's avatar Dominic Mazzoni Committed by Commit Bot
Browse files
Options

Localize strings for Reader Mode customize appearance dialog. 

Bug: 1132546
Change-Id: Ia66ca06eb4aba9c63548faca66caf94009f81fa9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2433258
Commit-Queue: Dominic Mazzoni <dmazzoni@chromium.org>
Reviewed-by: default avatarMeredith Lane <meredithl@chromium.org>
Reviewed-by: default avatarMichael Giuffrida <michaelpg@chromium.org>
Reviewed-by: default avatarWei-Yin Chen (陳威尹) <wychen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#811530}
parent 4f1e0dc1
Hide whitespace changes
Inline Side-by-side
Showing with 120 additions and 30 deletions
components/dom_distiller/DEPS
View file @ faedef6f
...@@ -18,6 +18,7 @@ include_rules = [ ...@@ -18,6 +18,7 @@ include_rules = [
"+services/network/test", "+services/network/test",
"+ui/base/l10n", "+ui/base/l10n",
"+ui/base/resource", "+ui/base/resource",
"+ui/base/template_expressions.h",
"+ui/gfx", "+ui/gfx",
# The dom distiller is a layered component; subdirectories must explicitly # The dom distiller is a layered component; subdirectories must explicitly
......
components/dom_distiller/core/html/dom_distiller_viewer.html
View file @ faedef6f
...@@ -9,56 +9,56 @@ found in the LICENSE file. ...@@ -9,56 +9,56 @@ found in the LICENSE file.
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="theme-color" id="theme-color"> <meta name="theme-color" id="theme-color">
<title>$1</title> <title>$i18n{title}</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"> rel="stylesheet">
<!-- Placeholder for CSS. --> <!-- Placeholder for CSS. -->
$2 $1
</head> </head>
<body class="$3"> <body class="$2">
<div id="content-wrap"> <div id="content-wrap">
<div id="main-content"> <div id="main-content">
<div id="settings-container" class="desktop-only"> <div id="settings-container" class="desktop-only">
<button id="settings-toggle" type="button" <button id="settings-toggle" type="button"
aria-label="Customize appearance" tabindex=0> aria-label="$i18n{customizeAppearance}" tabindex=0>
<i class="material-icons">&#xE165</i> <i class="material-icons">&#xE165</i>
</button> </button>
<div id="dialog-backdrop"></div> <div id="dialog-backdrop"></div>
<dialog id="settings-dialog"> <dialog id="settings-dialog">
<div id="settings-header"> <div id="settings-header">
<h1>Customize appearance</h1> <h1>$i18n{customizeAppearance}</h1>
</div> </div>
<div id="settings-fields"> <div id="settings-fields">
<div class="setting font-family-container"> <div class="setting font-family-container">
<label id="font-family-label" class="screen-reader-only"> <label id="font-family-label" class="screen-reader-only">
Font style $i18n{fontStyle}
</label> </label>
<select id="font-family-selection" aria-labelledby="font-family-label" name="font-family"> <select id="font-family-selection" aria-labelledby="font-family-label" name="font-family">
<option value="sans-serif" selected>Sans-serif Font</option> <option value="sans-serif" selected>$i18n{sansSerifFont}</option>
<option value="serif">Serif Font</option> <option value="serif">$i18n{serifFont}</option>
<option value="monospace">Monospace Font</option> <option value="monospace">$i18n{monospaceFont}</option>
</select> </select>
<i class="material-icons" id="arrow-drop-down">&#xe5c5</i> <i class="material-icons" id="arrow-drop-down">&#xe5c5</i>
</div> </div>
<div class="setting"> <div class="setting">
<fieldset id="theme-selection"> <fieldset id="theme-selection">
<legend class="screen-reader-only"> <legend class="screen-reader-only">
Page Color $i18n{pageColor}
</legend> </legend>
<ul> <ul>
<li class="theme-option"> <li class="theme-option">
<input type="radio" name="theme" value="light" <input type="radio" name="theme" value="light"
aria-label="light" id="theme-option-light" class="light" checked> aria-label="$i18n{light}" id="theme-option-light" class="light" checked>
<div class="checkmark"><i class="material-icons" aria-hidden="true">&#xE86c</i></div> <div class="checkmark"><i class="material-icons" aria-hidden="true">&#xE86c</i></div>
</li> </li>
<li class="theme-option"> <li class="theme-option">
<input type="radio" name="theme" value="sepia" <input type="radio" name="theme" value="sepia"
aria-label="sepia" id="theme-option-sepia" class="sepia"> aria-label="$i18n{sepia}" id="theme-option-sepia" class="sepia">
<div class="checkmark"><i class="material-icons" aria-hidden="true">&#xE86c</i></div> <div class="checkmark"><i class="material-icons" aria-hidden="true">&#xE86c</i></div>
</li> </li>
<li class="theme-option"> <li class="theme-option">
<input type="radio" name="theme" value="dark" <input type="radio" name="theme" value="dark"
aria-label="dark" id="theme-option-dark" class="dark"> aria-label="$i18n{dark}" id="theme-option-dark" class="dark">
<div class="checkmark"><i class="material-icons" aria-hidden="true">&#xE86c</i></div> <div class="checkmark"><i class="material-icons" aria-hidden="true">&#xE86c</i></div>
</li> </li>
</ul> </ul>
...@@ -66,7 +66,7 @@ found in the LICENSE file. ...@@ -66,7 +66,7 @@ found in the LICENSE file.
</div> </div>
<div class="setting" id="font-size-wrapper"> <div class="setting" id="font-size-wrapper">
<label id="font-size-label" class="screen-reader-only"> <label id="font-size-label" class="screen-reader-only">
Font Size $i18n{fontSize}
</label> </label>
<input aria-labelledby="font-size-label" <input aria-labelledby="font-size-label"
id="font-size-selection" id="font-size-selection"
...@@ -77,13 +77,13 @@ found in the LICENSE file. ...@@ -77,13 +77,13 @@ found in the LICENSE file.
max="9" max="9"
value="2"> value="2">
<div class="label-container"> <div class="label-container">
<span id="slider-label-min">Small</span> <span id="slider-label-min">$i18n{small}</span>
<span id="slider-label-max">Large</span> <span id="slider-label-max">$i18n{large}</span>
</div> </div>
</div> </div>
</div> </div>
<button id="close-settings-button" type="button" aria-label="Close" <button id="close-settings-button" type="button"
tabindex=0> aria-label="$i18n{close}" tabindex=0>
<i class="material-icons">close</i> <i class="material-icons">close</i>
</button> </button>
</dialog> </dialog>
...@@ -93,16 +93,16 @@ found in the LICENSE file. ...@@ -93,16 +93,16 @@ found in the LICENSE file.
<div id="title-collapse"> <div id="title-collapse">
<div class="vertical-center-outer"> <div class="vertical-center-outer">
<div class="vertical-center-inner"> <div class="vertical-center-inner">
<h1 id="title-holder"><noscript>$4</noscript></h1> <h1 id="title-holder"><noscript>$i18n{title}</noscript></h1>
</div> </div>
</div> </div>
</div> </div>
</header> </header>
<div id="content"><noscript>$5</noscript></div> <div id="content"><noscript>$3</noscript></div>
</article> </article>
<div id="loading-indicator" class="visible"> <div id="loading-indicator" class="visible">
<!-- SVG material loading spinner. --> <!-- SVG material loading spinner. -->
$6 $4
</div> </div>
</div> </div>
</div> </div>
......
components/dom_distiller/core/viewer.cc
View file @ faedef6f
...@@ -27,6 +27,7 @@ ...@@ -27,6 +27,7 @@
#include "net/base/escape.h" #include "net/base/escape.h"
#include "ui/base/l10n/l10n_util.h" #include "ui/base/l10n/l10n_util.h"
#include "ui/base/resource/resource_bundle.h" #include "ui/base/resource/resource_bundle.h"
#include "ui/base/template_expressions.h"
#include "url/gurl.h" #include "url/gurl.h"
namespace dom_distiller { namespace dom_distiller {
...@@ -112,6 +113,47 @@ std::string ReplaceHtmlTemplateValues(const mojom::Theme theme, ...@@ -112,6 +113,47 @@ std::string ReplaceHtmlTemplateValues(const mojom::Theme theme,
std::string html_template = std::string html_template =
ui::ResourceBundle::GetSharedInstance().LoadDataResourceString( ui::ResourceBundle::GetSharedInstance().LoadDataResourceString(
IDR_DOM_DISTILLER_VIEWER_HTML); IDR_DOM_DISTILLER_VIEWER_HTML);
// Replace placeholders of the form $i18n{foo} with translated strings
// using ReplaceTemplateExpressions. Do this step first because
// ReplaceStringPlaceholders, below, considers $i18n to be an error.
ui::TemplateReplacements i18n_replacements;
i18n_replacements["title"] =
l10n_util::GetStringUTF8(IDS_DOM_DISTILLER_VIEWER_LOADING_TITLE);
i18n_replacements["customizeAppearance"] =
l10n_util::GetStringUTF8(IDS_DOM_DISTILLER_VIEWER_CUSTOMIZE_APPEARANCE);
i18n_replacements["fontStyle"] =
l10n_util::GetStringUTF8(IDS_DOM_DISTILLER_VIEWER_FONT_STYLE);
i18n_replacements["sansSerifFont"] =
l10n_util::GetStringUTF8(IDS_DOM_DISTILLER_VIEWER_SANS_SERIF_FONT);
i18n_replacements["serifFont"] =
l10n_util::GetStringUTF8(IDS_DOM_DISTILLER_VIEWER_SERIF_FONT);
i18n_replacements["monospaceFont"] =
l10n_util::GetStringUTF8(IDS_DOM_DISTILLER_VIEWER_MONOSPACE_FONT);
i18n_replacements["pageColor"] =
l10n_util::GetStringUTF8(IDS_DOM_DISTILLER_VIEWER_PAGE_COLOR);
i18n_replacements["light"] =
l10n_util::GetStringUTF8(IDS_DOM_DISTILLER_VIEWER_PAGE_COLOR_LIGHT);
i18n_replacements["sepia"] =
l10n_util::GetStringUTF8(IDS_DOM_DISTILLER_VIEWER_PAGE_COLOR_SEPIA);
i18n_replacements["dark"] =
l10n_util::GetStringUTF8(IDS_DOM_DISTILLER_VIEWER_PAGE_COLOR_DARK);
i18n_replacements["fontSize"] =
l10n_util::GetStringUTF8(IDS_DOM_DISTILLER_VIEWER_FONT_SIZE);
i18n_replacements["small"] =
l10n_util::GetStringUTF8(IDS_DOM_DISTILLER_VIEWER_FONT_SIZE_SMALL);
i18n_replacements["large"] =
l10n_util::GetStringUTF8(IDS_DOM_DISTILLER_VIEWER_FONT_SIZE_LARGE);
i18n_replacements["close"] =
l10n_util::GetStringUTF8(IDS_DOM_DISTILLER_VIEWER_CLOSE);
html_template =
ui::ReplaceTemplateExpressions(html_template, i18n_replacements);
// There shouldn't be any unsubstituted i18n placeholders left.
DCHECK_EQ(html_template.find("$i18n"), std::string::npos);
// Now do other non-i18n string replacements.
std::vector<std::string> substitutions; std::vector<std::string> substitutions;
std::ostringstream css; std::ostringstream css;
...@@ -126,19 +168,14 @@ std::string ReplaceHtmlTemplateValues(const mojom::Theme theme, ...@@ -126,19 +168,14 @@ std::string ReplaceHtmlTemplateValues(const mojom::Theme theme,
svg << "<img src=\"/" << kViewerLoadingImagePath << "\">"; svg << "<img src=\"/" << kViewerLoadingImagePath << "\">";
#endif // defined(OS_IOS) #endif // defined(OS_IOS)
substitutions.push_back( substitutions.push_back(css.str()); // $1
l10n_util::GetStringUTF8(IDS_DOM_DISTILLER_VIEWER_LOADING_TITLE)); // $1
substitutions.push_back(css.str()); // $2
substitutions.push_back(GetThemeCssClass(theme) + " " + substitutions.push_back(GetThemeCssClass(theme) + " " +
GetFontCssClass(font_family)); // $3 GetFontCssClass(font_family)); // $2
substitutions.push_back(
l10n_util::GetStringUTF8(IDS_DOM_DISTILLER_VIEWER_LOADING_TITLE)); // $4
substitutions.push_back(l10n_util::GetStringUTF8( substitutions.push_back(l10n_util::GetStringUTF8(
IDS_DOM_DISTILLER_JAVASCRIPT_DISABLED_CONTENT)); // $5 IDS_DOM_DISTILLER_JAVASCRIPT_DISABLED_CONTENT)); // $3
substitutions.push_back(svg.str()); // $6 substitutions.push_back(svg.str()); // $4
return base::ReplaceStringPlaceholders(html_template, substitutions, nullptr); return base::ReplaceStringPlaceholders(html_template, substitutions, nullptr);
} }
......
components/dom_distiller_strings.grdp
View file @ faedef6f
...@@ -43,6 +43,45 @@ ...@@ -43,6 +43,45 @@
</message> </message>
</else> </else>
</if> </if>
<message name="IDS_DOM_DISTILLER_VIEWER_CUSTOMIZE_APPEARANCE" desc="Title of the Reader Mode dialog where you can customize the font, style, and color of the Reader Mode page..">
Customize appearance
</message>
<message name="IDS_DOM_DISTILLER_VIEWER_FONT_STYLE" desc="The label for the control where the user can choose their desired font style in Reader Mode.">
Font style
</message>
<message name="IDS_DOM_DISTILLER_VIEWER_SANS_SERIF_FONT" desc="The sans-serif style of font that users can choose in Reader Mode.">
Sans-serif Font
</message>
<message name="IDS_DOM_DISTILLER_VIEWER_SERIF_FONT" desc="The serif style of font that users can choose in Reader Mode.">
Serif Font
</message>
<message name="IDS_DOM_DISTILLER_VIEWER_MONOSPACE_FONT" desc="The monospace style of font that users can choose in Reader Mode.">
Monospace Font
</message>
<message name="IDS_DOM_DISTILLER_VIEWER_PAGE_COLOR" desc="The label for the control where the user can choose their desired page color for Reader Mode.">
Page Color
</message>
<message name="IDS_DOM_DISTILLER_VIEWER_PAGE_COLOR_LIGHT" desc="The description for the option to make the page color light (as opposed to dark) in Reader Mode.">
Light
</message>
<message name="IDS_DOM_DISTILLER_VIEWER_PAGE_COLOR_SEPIA" desc="The description for the option to make the page color sepia (a shade of brown) in Reader Mode.">
Sepia
</message>
<message name="IDS_DOM_DISTILLER_VIEWER_PAGE_COLOR_DARK" desc="The description for the option to make the page color dark in Reader Mode.">
Dark
</message>
<message name="IDS_DOM_DISTILLER_VIEWER_FONT_SIZE" desc="The label for the control where the user can choose their desired font size for Reader Mode.">
Font Size
</message>
<message name="IDS_DOM_DISTILLER_VIEWER_FONT_SIZE_SMALL" desc="The label for the range of a slider representing small font sizes in Reader Mode.">
Small
</message>
<message name="IDS_DOM_DISTILLER_VIEWER_FONT_SIZE_LARGE" desc="The label for the range of a slider representing large font sizes in Reader Mode.">
Large
</message>
<message name="IDS_DOM_DISTILLER_VIEWER_CLOSE" desc="The label for the button that closes the customize appearance dialog for Reader Mode.">
Close
</message>
<message name="IDS_DOM_DISTILLER_VIEWER_NO_DATA_CONTENT" desc="The text to show in place of reading list article content if there is no data found."> <message name="IDS_DOM_DISTILLER_VIEWER_NO_DATA_CONTENT" desc="The text to show in place of reading list article content if there is no data found.">
No data found. No data found.
</message> </message>
......
components/dom_distiller_strings_grdp/IDS_DOM_DISTILLER_VIEWER_CLOSE.png.sha1 0 → 100644
View file @ faedef6f
e3b9f126b6ec1116dd2b5ed36fd23c0b98e0f7cf
\ No newline at end of file
components/dom_distiller_strings_grdp/IDS_DOM_DISTILLER_VIEWER_CUSTOMIZE_APPEARANCE.png.sha1 0 → 100644
View file @ faedef6f
ee6f5f1558036ef8b87746d602dd61f411df5188
\ No newline at end of file
components/dom_distiller_strings_grdp/IDS_DOM_DISTILLER_VIEWER_FONT_SIZE.png.sha1 0 → 100644
View file @ faedef6f
ee6f5f1558036ef8b87746d602dd61f411df5188
\ No newline at end of file
components/dom_distiller_strings_grdp/IDS_DOM_DISTILLER_VIEWER_FONT_SIZE_LARGE.png.sha1 0 → 100644
View file @ faedef6f
ee6f5f1558036ef8b87746d602dd61f411df5188
\ No newline at end of file
components/dom_distiller_strings_grdp/IDS_DOM_DISTILLER_VIEWER_FONT_SIZE_SMALL.png.sha1 0 → 100644
View file @ faedef6f
ee6f5f1558036ef8b87746d602dd61f411df5188
\ No newline at end of file
components/dom_distiller_strings_grdp/IDS_DOM_DISTILLER_VIEWER_FONT_STYLE.png.sha1 0 → 100644
View file @ faedef6f
3913144a7b57eb096bd775090d6a098ba80a6d19
\ No newline at end of file
components/dom_distiller_strings_grdp/IDS_DOM_DISTILLER_VIEWER_MONOSPACE_FONT.png.sha1 0 → 100644
View file @ faedef6f
9c2b401290f547dd7881b3fba4dc4f8a9106a9dc
\ No newline at end of file
components/dom_distiller_strings_grdp/IDS_DOM_DISTILLER_VIEWER_PAGE_COLOR.png.sha1 0 → 100644
View file @ faedef6f
2c8af3dc54c3b3d9258baba2dff70b6335a9c7b0
\ No newline at end of file
components/dom_distiller_strings_grdp/IDS_DOM_DISTILLER_VIEWER_PAGE_COLOR_DARK.png.sha1 0 → 100644
View file @ faedef6f
2c8af3dc54c3b3d9258baba2dff70b6335a9c7b0
\ No newline at end of file
components/dom_distiller_strings_grdp/IDS_DOM_DISTILLER_VIEWER_PAGE_COLOR_LIGHT.png.sha1 0 → 100644
View file @ faedef6f
2c8af3dc54c3b3d9258baba2dff70b6335a9c7b0
\ No newline at end of file
components/dom_distiller_strings_grdp/IDS_DOM_DISTILLER_VIEWER_PAGE_COLOR_SEPIA.png.sha1 0 → 100644
View file @ faedef6f
2c8af3dc54c3b3d9258baba2dff70b6335a9c7b0
\ No newline at end of file
components/dom_distiller_strings_grdp/IDS_DOM_DISTILLER_VIEWER_SANS_SERIF_FONT.png.sha1 0 → 100644
View file @ faedef6f
4cd2bec75fce4060dca74320fba44c89b6597fbb
\ No newline at end of file
components/dom_distiller_strings_grdp/IDS_DOM_DISTILLER_VIEWER_SERIF_FONT.png.sha1 0 → 100644
View file @ faedef6f
3913144a7b57eb096bd775090d6a098ba80a6d19
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment