[DevTools] Introduce ls template to replace UIString

Converted accessibility module as an example.

Bug: none
Change-Id: Ib7f475c9a20a58839aa580508c130ea88027170e
Reviewed-on: https://chromium-review.googlesource.com/804418Reviewed-by: Andrey Lushnikov <lushnikov@chromium.org>
Commit-Queue: Dmitry Gozman <dgozman@chromium.org>
Cr-Commit-Position: refs/heads/master@{#521125}

third_party/WebKit/Source/devtools/front_end/accessibility/ARIAAttributesView.js

@@ -6,9 +6,9 @@
  */
 Accessibility.ARIAAttributesPane = class extends Accessibility.AccessibilitySubPane {
   constructor() {
-    super(Common.UIString('ARIA Attributes'));
+    super(ls`ARIA Attributes`);
 
-    this._noPropertiesInfo = this.createInfo(Common.UIString('No ARIA attributes'));
+    this._noPropertiesInfo = this.createInfo(ls`No ARIA attributes`);
     this._treeOutline = this.createTreeOutline();
   }
 

third_party/WebKit/Source/devtools/front_end/accessibility/AXBreadcrumbsPane.js

@@ -7,7 +7,7 @@ Accessibility.AXBreadcrumbsPane = class extends Accessibility.AccessibilitySubPa
    * @param {!Accessibility.AccessibilitySidebarView} axSidebarView
    */
   constructor(axSidebarView) {
-    super(Common.UIString('Accessibility Tree'));
+    super(ls`Accessibility Tree`);
 
     this.element.classList.add('ax-subpane');
     UI.ARIAUtils.markAsTree(this.element);
@@ -271,7 +271,7 @@ Accessibility.AXBreadcrumbsPane = class extends Accessibility.AccessibilitySubPa
       return;
 
     var contextMenu = new UI.ContextMenu(event);
-    contextMenu.viewSection().appendItem(Common.UIString('Scroll into view'), () => {
+    contextMenu.viewSection().appendItem(ls`Scroll into view`, () => {
       axNode.deferredDOMNode().resolvePromise().then(domNode => {
         if (!domNode)
           return;
@@ -485,7 +485,7 @@ Accessibility.AXBreadcrumb = class {
 
   _appendIgnoredNodeElement() {
     var ignoredNodeElement = createElementWithClass('span', 'monospace');
-    ignoredNodeElement.textContent = Common.UIString('Ignored');
+    ignoredNodeElement.textContent = ls`Ignored`;
     ignoredNodeElement.classList.add('ax-breadcrumbs-ignored-node');
     this._nodeWrapper.appendChild(ignoredNodeElement);
   }

third_party/WebKit/Source/devtools/front_end/accessibility/AccessibilityNodeView.js

@@ -6,12 +6,12 @@
  */
 Accessibility.AXNodeSubPane = class extends Accessibility.AccessibilitySubPane {
   constructor() {
-    super(Common.UIString('Computed Properties'));
+    super(ls`Computed Properties`);
 
     this.contentElement.classList.add('ax-subpane');
 
-    this._noNodeInfo = this.createInfo(Common.UIString('No accessibility node'));
-    this._ignoredInfo = this.createInfo(Common.UIString('Accessibility node not exposed'), 'ax-ignored-info hidden');
+    this._noNodeInfo = this.createInfo(ls`No accessibility node`);
+    this._ignoredInfo = this.createInfo(ls`Accessibility node not exposed`, 'ax-ignored-info hidden');
 
     this._treeOutline = this.createTreeOutline();
     this._ignoredReasonsTree = this.createTreeOutline();
@@ -164,7 +164,7 @@ Accessibility.AXNodePropertyTreeElement = class extends UI.TreeElement {
     var nameElement = createElement('span');
     var AXAttributes = Accessibility.AccessibilityStrings.AXAttributes;
     if (name in AXAttributes) {
-      nameElement.textContent = Common.UIString(AXAttributes[name].name);
+      nameElement.textContent = ls(AXAttributes[name].name);
       nameElement.title = AXAttributes[name].description;
       nameElement.classList.add('ax-readable-name');
     } else {
@@ -392,8 +392,8 @@ Accessibility.AXValueSourceTreeElement = class extends Accessibility.AXNodePrope
         if (source.nativeSource) {
           var AXNativeSourceTypes = Accessibility.AccessibilityStrings.AXNativeSourceTypes;
           var nativeSource = source.nativeSource;
-          nameElement.textContent = Common.UIString(AXNativeSourceTypes[nativeSource].name);
-          nameElement.title = Common.UIString(AXNativeSourceTypes[nativeSource].description);
+          nameElement.textContent = ls(AXNativeSourceTypes[nativeSource].name);
+          nameElement.title = ls(AXNativeSourceTypes[nativeSource].description);
           nameElement.classList.add('ax-readable-name');
           break;
         }
@@ -404,12 +404,12 @@ Accessibility.AXValueSourceTreeElement = class extends Accessibility.AXNodePrope
       default:
         var AXSourceTypes = Accessibility.AccessibilityStrings.AXSourceTypes;
         if (type in AXSourceTypes) {
-          nameElement.textContent = Common.UIString(AXSourceTypes[type].name);
-          nameElement.title = Common.UIString(AXSourceTypes[type].description);
+          nameElement.textContent = ls(AXSourceTypes[type].name);
+          nameElement.title = ls(AXSourceTypes[type].description);
           nameElement.classList.add('ax-readable-name');
         } else {
           console.warn(type, 'not in AXSourceTypes');
-          nameElement.textContent = Common.UIString(type);
+          nameElement.textContent = ls(type);
         }
     }
     this.listItemElement.appendChild(nameElement);
@@ -419,8 +419,7 @@ Accessibility.AXValueSourceTreeElement = class extends Accessibility.AXNodePrope
     this.listItemElement.removeChildren();
 
     if (this._source.invalid) {
-      var exclamationMark =
-          Accessibility.AXNodePropertyTreeElement.createExclamationMark(Common.UIString('Invalid source.'));
+      var exclamationMark = Accessibility.AXNodePropertyTreeElement.createExclamationMark(ls`Invalid source.`);
       this.listItemElement.appendChild(exclamationMark);
       this.listItemElement.classList.add('ax-value-source-invalid');
     } else if (this._source.superseded) {
@@ -443,7 +442,7 @@ Accessibility.AXValueSourceTreeElement = class extends Accessibility.AXNodePrope
       this.appendValueElement(this._source.value);
     } else {
       var valueElement = Accessibility.AXNodePropertyTreeElement.createSimpleValueElement(
-          Protocol.Accessibility.AXValueType.ValueUndefined, Common.UIString('Not specified'));
+          Protocol.Accessibility.AXValueType.ValueUndefined, ls`Not specified`);
       this.listItemElement.appendChild(valueElement);
       this.listItemElement.classList.add('ax-value-source-unused');
     }
@@ -519,8 +518,7 @@ Accessibility.AXRelatedNodeElement = class {
       this._deferredNode.resolve(onNodeResolved.bind(this));
     } else if (this._idref) {
       element.classList.add('invalid');
-      valueElement =
-          Accessibility.AXNodePropertyTreeElement.createExclamationMark(Common.UIString('No node with this ID.'));
+      valueElement = Accessibility.AXNodePropertyTreeElement.createExclamationMark(ls`No node with this ID.`);
       valueElement.createTextChild(this._idref);
       element.appendChild(valueElement);
     }

third_party/WebKit/Source/devtools/front_end/common/UIString.js

@@ -83,3 +83,23 @@ Common.UIStringFormat = class {
         .formattedResult;
   }
 };
+
+
+/**
+ * @param {!Array<string>|string} strings
+ * @param {...*} vararg
+ * @return {string}
+ */
+self.ls = function(strings, vararg) {
+  if (typeof strings === 'string')
+    return strings;
+  var values = Array.prototype.slice.call(arguments, 1);
+  if (!values.length)
+    return strings[0];
+  var result = '';
+  for (var i = 0; i < values.length; i++) {
+    result += strings[i];
+    result += '' + values[i];
+  }
+  return result + strings[values.length];
+};

third_party/WebKit/Source/devtools/front_end/externs.js

@@ -789,3 +789,11 @@ Terminal.prototype = {
  * @return {!Console}
  */
 Console.prototype.context = function(context) {};
+
+
+/**
+ * @param {!Array<string>|string} strings
+ * @param {...*} vararg
+ * @return {string}
+ */
+var ls = function(strings, vararg) {};