Bug 1306781 - New console frontend: Add title on repeat element. r=linclark

MozReview-Commit-ID: L10G6ShRuXR

devtools/client/webconsole/new-console-output/components/message-repeat.js

@@ -12,6 +12,8 @@ const {
   DOM: dom,
   PropTypes
 } = require("devtools/client/shared/vendor/react");
+const { PluralForm } = require("devtools/shared/plural-form");
+const { l10n } = require("devtools/client/webconsole/new-console-output/utils/messages");
 
 MessageRepeat.displayName = "MessageRepeat";
 
@@ -22,7 +24,13 @@ MessageRepeat.propTypes = {
 function MessageRepeat(props) {
   const { repeat } = props;
   const visibility = repeat > 1 ? "visible" : "hidden";
-  return dom.span({className: "message-repeats", style: {visibility}}, repeat);
+
+  return dom.span({
+    className: "message-repeats",
+    style: {visibility},
+    title: PluralForm.get(repeat, l10n.getStr("messageRepeats.tooltip2"))
+      .replace("#1", repeat)
+  }, repeat);
 }
 
 module.exports = MessageRepeat;

devtools/client/webconsole/new-console-output/test/components/console-api-call.test.js

@@ -41,6 +41,7 @@ describe("ConsoleAPICall component:", () => {
       const wrapper = render(ConsoleApiCall({ message, onViewSourceInDebugger }));
 
       expect(wrapper.find(".message-repeats").text()).toBe("107");
+      expect(wrapper.find(".message-repeats").prop("title")).toBe("107 repeats");
 
       expect(wrapper.find("span > span.message-flex-body > span.message-body.devtools-monospace + span.message-repeats").length).toBe(1);
     });

devtools/client/webconsole/new-console-output/test/fixtures/PluralForm.js

@@ -0,0 +1,18 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+module.exports = {
+  PluralForm: {
+    get: function (occurence, str) {
+      // @TODO Remove when loading the actual strings from webconsole.properties
+      // is done in the L10n fixture.
+      if (str === "messageRepeats.tooltip2") {
+        return `${occurence} repeats`;
+      }
+
+      return str;
+    }
+  }
+};

devtools/client/webconsole/new-console-output/test/requireHelper.js

@@ -27,6 +27,8 @@ requireHacker.global_hook("default", path => {
       return `module.exports = require("devtools/client/webconsole/new-console-output/test/fixtures/WebConsoleUtils")`;
     case "devtools/shared/l10n":
       return `module.exports = require("devtools/client/webconsole/new-console-output/test/fixtures/LocalizationHelper")`;
+    case "devtools/shared/plural-form":
+      return `module.exports = require("devtools/client/webconsole/new-console-output/test/fixtures/PluralForm")`;
     case "Services":
     case "Services.default":
       return `module.exports = require("devtools/client/webconsole/new-console-output/test/fixtures/Services")`;