Bug 1408369 - create about:devtools welcome message dynamically;r=nchevobbe,flod
The welcome message used to be defined in DTD. Since it has a dynamic part (the
toggle toolbox shortcut) it's easier for localization purposes to have it in a
properties file and dynamically insert it.
MozReview-Commit-ID: FhgQjbs8Dw0
--- a/devtools/shim/aboutdevtools/aboutdevtools.js
+++ b/devtools/shim/aboutdevtools/aboutdevtools.js
@@ -135,18 +135,21 @@ function createFeatureEl(feature) {
</p>`;
return li;
}
window.addEventListener("load", function () {
const inspectorShortcut = getToolboxShortcut();
const welcomeMessage = document.getElementById("welcome-message");
- welcomeMessage.textContent = welcomeMessage.textContent.replace(
- "##INSPECTOR_SHORTCUT##", inspectorShortcut);
+
+ // Set the welcome message content with the correct keyboard sortcut for the current
+ // platform.
+ welcomeMessage.textContent = aboutDevtoolsBundle.formatStringFromName("welcome.message",
+ [inspectorShortcut], 1);
// Set the appropriate title message.
if (reason == "ContextMenu") {
document.getElementById("inspect-title").removeAttribute("hidden");
} else {
document.getElementById("common-title").removeAttribute("hidden");
}
--- a/devtools/shim/aboutdevtools/aboutdevtools.xhtml
+++ b/devtools/shim/aboutdevtools/aboutdevtools.xhtml
@@ -44,17 +44,19 @@
</div>
<!-- This page, hidden by default is displayed once the add-on is installed -->
<div id="welcome-page" class="wrapper" hidden="true">
<div class="box">
<div class="left-pane" />
<div class="right-pane">
<h1 class="title" >&aboutDevtools.welcome.title;</h1>
- <p id="welcome-message">&aboutDevtools.welcome.message;</p>
+ <!-- The welcome message is dynamically updated with a keyboard shortcut at
+ runtime and added in aboutdevtools.js -->
+ <p id="welcome-message"></p>
<!-- Form dedicated to the newsletter subscription -->
<div class="newsletter">
<h2 class="newsletter-title">&aboutDevtools.newsletter.title;</h2>
<p>&aboutDevtools.newsletter.message;</p>
<form id="newsletter-form" name="newsletter-form" action="https://www.mozilla.org/en-US/newsletter/" method="post">
<!-- "H" stands for the HTML format (->fmt). Alternative is T for text. -->
--- a/devtools/shim/aboutdevtools/tmp-locale/aboutdevtools.dtd
+++ b/devtools/shim/aboutdevtools/tmp-locale/aboutdevtools.dtd
@@ -17,17 +17,16 @@
<!ENTITY aboutDevtools.enable.commonMessage
"As of Firefox 58, Developer Tools are disabled by default to give you more control over your browser.">
<!ENTITY aboutDevtools.enable.learnMoreLink "Learn more about DevTools">
<!ENTITY aboutDevtools.enable.installButton "Enable Developer Tools">
<!ENTITY aboutDevtools.enable.closeButton "Close this page">
<!ENTITY aboutDevtools.welcome.title "Welcome to Firefox Developer Tools!">
-<!ENTITY aboutDevtools.welcome.message "You’ve successfully enabled DevTools! To get started, explore the Web Developer menu or open the tools with ##INSPECTOR_SHORTCUT##.">
<!ENTITY aboutDevtools.newsletter.title "Mozilla Developer Newsletter">
<!ENTITY aboutDevtools.newsletter.message "Get developer news, tricks and resources sent straight to your inbox.">
<!ENTITY aboutDevtools.newsletter.email.placeholder "Email">
<!ENTITY aboutDevtools.newsletter.privacy.label "I’m okay with Mozilla handling my info as explained in this <a class="external" href="https://www.mozilla.org/privacy/">Privacy Policy</a>.">
<!ENTITY aboutDevtools.newsletter.subscribe.label "Subscribe">
<!ENTITY aboutDevtools.newsletter.thanks.title "Thanks!">
--- a/devtools/shim/locales/en-US/aboutdevtools.properties
+++ b/devtools/shim/locales/en-US/aboutdevtools.properties
@@ -43,8 +43,12 @@ newsletter.error.common=Subscription req
# LOCALIZATION NOTE (newsletter.error.unknown): error text displayed when the newsletter
# subscription failed for an unexpected reason.
newsletter.error.unknown=An unexpected error occurred.
# LOCALIZATION NOTE (newsletter.error.timeout): error text displayed when the newsletter
# subscription timed out.
newsletter.error.timeout=Subscription request timed out.
+
+# LOCALIZATION NOTE (welcome.message): Message displayed when devtools are enabled.
+# %S will be replaced with the shortcut to toggle the DevTools toolbox.
+welcome.message=You’ve successfully enabled Developer Tools! To get started, explore the Web Developer menu or open the tools with %S.