Bug 1915108 - [devtools] Localize variable tooltip computed value string. r=devtools-reviewers,jdescottes.

Depends on D219145

Differential Revision: https://phabricator.services.mozilla.com/D220228

devtools/client/shared/widgets/tooltip/VariableTooltipHelper.js

@@ -7,13 +7,18 @@
 const XHTML_NS = "http://www.w3.org/1999/xhtml";
 
 const OutputParser = require("resource://devtools/client/shared/output-parser.js");
-loader.lazyGetter(this, "L10N_EMPTY", function () {
+loader.lazyGetter(this, "L10N", function () {
   const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
-  const L10N = new LocalizationHelper(
+  return new LocalizationHelper(
     "devtools/shared/locales/styleinspector.properties"
   );
+});
+loader.lazyGetter(this, "L10N_EMPTY", function () {
   return L10N.getStr("rule.variableEmpty");
 });
+loader.lazyGetter(this, "L10N_COMPUTED_VALUE", function () {
+  return L10N.getStr("rule.variableComputedValue");
+});
 
 /**
  * Set the tooltip content of a provided HTMLTooltip instance to display a
@@ -86,7 +91,7 @@ function setVariableTooltip(
     section.classList.add("computed", "variable-tooltip-section");
 
     const h2 = doc.createElementNS(XHTML_NS, "h2");
-    h2.append(doc.createTextNode("computed value"));
+    h2.append(doc.createTextNode(L10N_COMPUTED_VALUE));
     const computedValueEl = doc.createElementNS(XHTML_NS, "div");
     appendValue(doc, computedValueEl, computed, parse);
     section.append(h2, computedValueEl);

devtools/shared/locales/en-US/styleinspector.properties

@@ -88,6 +88,12 @@ rule.variableUnset=%S is not set
 # and the variable is empty ("--something: ;").
 rule.variableEmpty=empty
 
+# LOCALIZATION NOTE (rule.variableComputedValue): Text displayed in a tooltip in the rule view
+# when the mouse is over a variable use (like "var(--a)") and the variable has a
+# computed value different from its declaration value ("--a: var(--b); --b: 1px;").
+# The translation should be consistent with inspector.sidebar.computedViewTitle
+rule.variableComputedValue=computed value
+
 # LOCALIZATION NOTE (rule.selectorSpecificity.title): This text is used as a title attribute
 # on the selectors displayed in the inspector rules view.
 # The first argument is the computed specificity, which looks like "(0,0,1)".