Bug 1408369 - create about:devtools welcome message dynamically;r=nchevobbe,flod draft
authorJulian Descottes <jdescottes@mozilla.com>
Tue, 07 Nov 2017 21:53:55 +0100
changeset 694839 1542fc28d100f878753f32255b1923ff5c12c4e9
parent 694834 259e1af43e12e08beff55ce3de871ce2e3dcf33c
child 694840 ba49c3faf6903533c18e8f4067b04c2a06f22a15
child 694843 1601eed689f94cf520901c4298b7b1ebe8e73b14
push id88271
push userjdescottes@mozilla.com
push dateWed, 08 Nov 2017 11:04:05 +0000
reviewersnchevobbe, flod
bugs1408369
milestone58.0a1
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
devtools/shim/aboutdevtools/aboutdevtools.js
devtools/shim/aboutdevtools/aboutdevtools.xhtml
devtools/shim/aboutdevtools/tmp-locale/aboutdevtools.dtd
devtools/shim/locales/en-US/aboutdevtools.properties
--- 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=&#x0022;external&#x0022; href=&#x0022;https://www.mozilla.org/privacy/&#x0022;>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.