Bug 824243 - Make Profiler UI localizable, r=robcee

browser/devtools/jar.mn

@@ -33,6 +33,7 @@ browser.jar:
     content/browser/devtools/profiler/cleopatra/css/ui.css              (profiler/cleopatra/css/ui.css)
     content/browser/devtools/profiler/cleopatra/css/tree.css            (profiler/cleopatra/css/tree.css)
     content/browser/devtools/profiler/cleopatra/css/devtools.css        (profiler/cleopatra/css/devtools.css)
+    content/browser/devtools/profiler/cleopatra/js/strings.js           (profiler/cleopatra/js/strings.js)
     content/browser/devtools/profiler/cleopatra/js/parser.js            (profiler/cleopatra/js/parser.js)
     content/browser/devtools/profiler/cleopatra/js/parserWorker.js      (profiler/cleopatra/js/parserWorker.js)
     content/browser/devtools/profiler/cleopatra/js/tree.js              (profiler/cleopatra/js/tree.js)

browser/devtools/profiler/ProfilerHelpers.jsm

@@ -0,0 +1,43 @@
+/* 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/. */
+
+"use strict";
+
+const Cu = Components.utils;
+const ProfilerProps = "chrome://browser/locale/devtools/profiler.properties";
+
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+Cu.import("resource://gre/modules/Services.jsm");
+
+this.EXPORTED_SYMBOLS = ["L10N"];
+
+/**
+ * Localization helper methods.
+ */
+let L10N = {
+  /**
+   * Returns a simple localized string.
+   *
+   * @param string name
+   * @return string
+   */
+  getStr: function L10N_getStr(name) {
+    return this.stringBundle.GetStringFromName(name);
+  },
+
+  /**
+   * Returns formatted localized string.
+   *
+   * @param string name
+   * @param array params
+   * @return string
+   */
+  getFormatStr: function L10N_getFormatStr(name, params) {
+    return this.stringBundle.formatStringFromName(name, params, params.length);
+  }
+};
+
+XPCOMUtils.defineLazyGetter(L10N, "stringBundle", function () {
+  return Services.strings.createBundle(ProfilerProps);
+});

browser/devtools/profiler/ProfilerPanel.jsm

@@ -7,6 +7,7 @@
 const Cu = Components.utils;
 
 Cu.import("resource:///modules/devtools/ProfilerController.jsm");
+Cu.import("resource:///modules/devtools/ProfilerHelpers.jsm");
 Cu.import("resource://gre/modules/commonjs/promise/core.js");
 Cu.import("resource:///modules/devtools/EventEmitter.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
@@ -249,12 +250,11 @@ ProfilerPanel.prototype = {
     item.setAttribute("id", "profile-" + uid);
     item.setAttribute("data-uid", uid);
     item.addEventListener("click", function (ev) {
-      let uid = parseInt(ev.target.getAttribute("data-uid"), 10);
       this.switchToProfile(this.profiles.get(uid));
     }.bind(this), false);
 
     wrap.className = "profile-name";
-    wrap.textContent = "Profile " + uid;
+    wrap.textContent = L10N.getFormatStr("profiler.profileName", [uid]);
 
     item.appendChild(wrap);
     list.appendChild(item);

browser/devtools/profiler/cleopatra/cleopatra.html

@@ -12,6 +12,7 @@
     <link rel="stylesheet" type="text/css" href="profiler/cleopatra/css/tree.css">
     <link rel="stylesheet" type="text/css" href="profiler/cleopatra/css/devtools.css">
 
+    <script src="profiler/cleopatra/js/strings.js"></script>
     <script src="profiler/cleopatra/js/parser.js"></script>
     <script src="profiler/cleopatra/js/tree.js"></script>
     <script src="profiler/cleopatra/js/ui.js"></script>

browser/devtools/profiler/cleopatra/js/devtools.js

@@ -85,24 +85,29 @@ function initUI() {
   document.body.appendChild(container);
 
   var startButton = document.createElement("button");
-  startButton.innerHTML = "Start";
+  startButton.innerHTML = gStrings.getStr("profiler.start");
   startButton.addEventListener("click", function (event) {
     event.target.setAttribute("disabled", true);
     notifyParent("start");
   }, false);
 
   var stopButton = document.createElement("button");
-  stopButton.innerHTML = "Stop";
+  stopButton.innerHTML = gStrings.getStr("profiler.stop");
   stopButton.addEventListener("click", function (event) {
     event.target.setAttribute("disabled", true);
     notifyParent("stop");
   }, false);
 
   var controlPane = document.createElement("div");
+  var startProfiling = gStrings.getFormatStr("profiler.startProfiling",
+    ["<span class='btn'></span>"]);
+  var stopProfiling = gStrings.getFormatStr("profiler.stopProfiling",
+    ["<span class='btn'></span>"]);
+
   controlPane.className = "controlPane";
   controlPane.innerHTML =
-    "<p id='startWrapper'>Click <span class='btn'></span> to start profiling.</p>" +
-    "<p id='stopWrapper'>Click <span class='btn'></span> to stop profiling.</p>";
+    "<p id='startWrapper'>" + startProfiling + "</p>" +
+    "<p id='stopWrapper'>" + stopProfiling + "</p>";
 
   controlPane.querySelector("#startWrapper > span.btn").appendChild(startButton);
   controlPane.querySelector("#stopWrapper > span.btn").appendChild(stopButton);
@@ -153,9 +158,9 @@ function enterFinishedProfileUI() {
 
   gTreeManager = new ProfileTreeManager();
   gTreeManager.treeView.setColumns([
-    { name: "sampleCount", title: "Running time" },
-    { name: "selfSampleCount", title: "Self" },
-    { name: "resource", title: "" },
+    { name: "sampleCount", title: gStrings["Running Time"] },
+    { name: "selfSampleCount", title: gStrings["Self"] },
+    { name: "resource", title: "" }
   ]);
 
   currRow = pane.insertRow(rowIndex++);

browser/devtools/profiler/cleopatra/js/strings.js

@@ -0,0 +1,23 @@
+const Cu = Components.utils;
+Cu.import("resource:///modules/devtools/ProfilerHelpers.jsm");
+
+/**
+ * Shortcuts for the L10N helper functions. Used in Cleopatra.
+ */
+var gStrings = {
+  // This strings are here so that Cleopatra code could use a simple object
+  // lookup. This makes it easier to merge upstream changes.
+  "Complete Profile": L10N.getStr("profiler.completeProfile"),
+  "Sample Range": L10N.getStr("profiler.sampleRange"),
+  "Running Time": L10N.getStr("profiler.runningTime"),
+  "Self": L10N.getStr("profiler.self"),
+  "Symbol Name": L10N.getStr("profiler.symbolName"),
+
+  getStr: function (name) {
+    return L10N.getStr(name);
+  },
+
+  getFormatStr: function (name, params) {
+    return L10N.getFormatStr(name, params);
+  }
+};

browser/devtools/profiler/cleopatra/js/ui.js

@@ -153,10 +153,10 @@ function treeObjSort(a, b) {
 function ProfileTreeManager() {
   this.treeView = new TreeView();
   this.treeView.setColumns([
-    { name: "sampleCount", title: "Running time" },
-    { name: "selfSampleCount", title: "Self" },
+    { name: "sampleCount", title: gStrings["Running Time"] },
+    { name: "selfSampleCount", title: gStrings["Self"] },
     { name: "resource", title: "" },
-    { name: "symbolName", title: "Symbol Name"}
+    { name: "symbolName", title: gStrings["Symbol Name"] }
   ]);
   var self = this;
   this.treeView.addEventListener("select", function (frameData) {
@@ -752,7 +752,7 @@ RangeSelector.prototype = {
     var newFilterChain = gSampleFilters.concat({ type: "RangeSampleFilter", start: start, end: end });
     var self = this;
     self._transientRestrictionEnteringAffordance = gBreadcrumbTrail.add({
-      title: "Sample Range [" + start + ", " + (end + 1) + "]",
+      title: gStrings["Sample Range"] + " [" + start + ", " + (end + 1) + "]",
       enterCallback: function () {
         gSampleFilters = newFilterChain;
         self.collapseHistogramSelection();
@@ -1774,7 +1774,7 @@ function enterFinishedProfileUI() {
 
   var currentBreadcrumb = gSampleFilters;
   gBreadcrumbTrail.add({
-    title: "Complete Profile",
+    title: gStrings["Complete Profile"],
     enterCallback: function () {
       gSampleFilters = [];
       filtersChanged();

browser/devtools/profiler/profiler.xul

@@ -10,6 +10,11 @@
 <?xml-stylesheet href="chrome://browser/content/splitview.css"?>
 <?xml-stylesheet href="chrome://browser/content/profiler.css"?>
 
+<!DOCTYPE window [
+<!ENTITY % profilerDTD SYSTEM "chrome://browser/locale/devtools/profiler.dtd">
+  %profilerDTD;
+]>
+
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <box flex="1" id="profiler-chrome" class="splitview-root">
     <box class="splitview-controller" width="180px">
@@ -29,7 +34,7 @@
         <toolbar class="devtools-toolbar" mode="full">
           <toolbarbutton id="profiler-create"
                          class="devtools-toolbarbutton"
-                         label="New"
+                         label="&profilerNew.label;"
                          disabled="true"/>
         </toolbar>
       </box> <!-- splitview-nav-container -->

browser/locales/en-US/chrome/browser/devtools/profiler.dtd

@@ -0,0 +1,15 @@
+<!-- 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/. -->
+
+<!-- LOCALIZATION NOTE : FILE This file contains the Profiler strings -->
+
+<!-- LOCALIZATION NOTE : FILE The correct localization of this file might be to
+  - keep it in English, or another language commonly spoken among web developers.
+  - You want to make that choice consistent across the developer tools.
+  - A good criteria is the language in which you'd find the best
+  - documentation on web development on the web. -->
+
+<!-- LOCALIZATION NOTE (profilerNew.label): This is the label for the
+  -  button that creates a new profile. -->
+<!ENTITY profilerNew.label "New">

browser/locales/en-US/chrome/browser/devtools/profiler.properties

@@ -19,3 +19,48 @@ profiler.label=Profiler
 # This string is displayed in the tooltip of the tab when the profiler is
 # displayed inside the developer tools window.
 profiler.tooltip=Profiler
+
+# LOCALIZATION NOTE (profiler.profileName):
+# This string is the default name for new profiles. Its parameter is a number.
+# For example: "Profile 1", "Profile 2", etc.
+profiler.profileName=Profile %S
+
+# LOCALIZATION NOTE (profiler.completeProfile):
+# This string is displayed as a tab in the profiler UI. Clicking on it
+# displays everything that the profiler has generated so far.
+profiler.completeProfile=Complete Profile
+
+# LOCALIZATION NOTE (profiler.sampleRange):
+# This string is displayed as a tab in the profiler UI. Clicking on it
+# displays a sample range of data selected by user themselves.
+profiler.sampleRange=Sample Range
+
+# LOCALIZATION NOTE (profiler.runningTime):
+# This string is displayed as a table header in the profiler UI.
+profiler.runningTime=Running Time
+
+# LOCALIZATION NOTE (profiler.self):
+# This string is displayed as a table header in the profiler UI.
+profiler.self=Self
+
+# LOCALIZATION NOTE (profiler.symbolName)
+# This string is displayed as a table header in the profiler UI.
+profiler.symbolName=Symbol Name
+
+# LOCALIZATION NOTE (profiler.startProfiling)
+# This string is displayed around the button that starts the profiler.
+# String argument will be replaced with a Start button.
+profiler.startProfiling=Click here %S to start profiling
+
+# LOCALIZATION NOTE (profiler.stopProfiling)
+# This string is displayed around the button that stops the profiler.
+# String argument will be replaced with a Stop button.
+profiler.stopProfiling = Click here %S to stop profiling
+
+# LOCALIZATION NOTE (profiler.start)
+# This string is displayed on the button that starts the profiler.
+profiler.start=Start
+
+# LOCALIZATION NOTE (profiler.stop)
+# This string is displayed on the button that stops the profiler.
+profiler.stop=Stop

browser/locales/jar.mn

@@ -38,6 +38,7 @@
     locale/browser/devtools/webConsole.dtd            (%chrome/browser/devtools/webConsole.dtd)
     locale/browser/devtools/sourceeditor.properties   (%chrome/browser/devtools/sourceeditor.properties)
     locale/browser/devtools/sourceeditor.dtd          (%chrome/browser/devtools/sourceeditor.dtd)
+    locale/browser/devtools/profiler.dtd              (%chrome/browser/devtools/profiler.dtd)
     locale/browser/devtools/profiler.properties       (%chrome/browser/devtools/profiler.properties)
     locale/browser/devtools/layoutview.dtd            (%chrome/browser/devtools/layoutview.dtd)
     locale/browser/devtools/responsiveUI.properties   (%chrome/browser/devtools/responsiveUI.properties)