WebUI styleguide: Allow usage of ES6 template strings (backticks).

Bug: 671426
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I4efa74ee25f3c5e6a09035576ec1d66831b7ee6e
Reviewed-on: https://chromium-review.googlesource.com/696265
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Michael Giuffrida <michaelpg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#511362}

chrome/browser/resources/md_downloads/item.js

@@ -119,7 +119,7 @@ cr.define('downloads', function() {
       if (!this.data.by_ext_id || !this.data.by_ext_name)
         return '';
 
-      const url = 'chrome://extensions#' + this.data.by_ext_id;
+      const url = `chrome://extensions#${this.data.by_ext_id}`;
       const name = this.data.by_ext_name;
       return loadTimeData.getStringF('controlledByUrl', url, HTMLEscape(name));
     },
@@ -260,8 +260,8 @@ cr.define('downloads', function() {
       } else {
         this.$.url.href = assert(this.data.url);
         const filePath = encodeURIComponent(this.data.file_path);
-        const scaleFactor = '?scale=' + window.devicePixelRatio + 'x';
-        this.$['file-icon'].src = 'chrome://fileicon/' + filePath + scaleFactor;
+        const scaleFactor = `?scale=${window.devicePixelRatio}x`;
+        this.$['file-icon'].src = `chrome://fileicon/${filePath}${scaleFactor}`;
       }
     },
 

chrome/browser/resources/md_history/browser_service.js

@@ -97,7 +97,7 @@ cr.define('md_history', function() {
      */
     recordAction: function(action) {
       if (action.indexOf('_') == -1)
-        action = 'HistoryPage_' + action;
+        action = `HistoryPage_${action}`;
       chrome.send('metricsHandler:recordAction', [action]);
     },
 

chrome/browser/resources/md_history/history_list.js

@@ -182,7 +182,7 @@ Polymer({
    * @private
    */
   changeSelection_: function(index, selected) {
-    this.set('historyData_.' + index + '.selected', selected);
+    this.set(`historyData_.${index}.selected`, selected);
     if (selected)
       this.selectedItems.add(index);
     else
@@ -198,7 +198,7 @@ Polymer({
    */
   deleteSelected_: function() {
     var toBeRemoved = Array.from(this.selectedItems.values())
-                          .map((index) => this.get('historyData_.' + index));
+                          .map((index) => this.get(`historyData_.${index}`));
 
     md_history.BrowserService.getInstance()
         .deleteItems(toBeRemoved)
@@ -281,7 +281,7 @@ Polymer({
 
     for (var i = 0; i < this.historyData_.length; i++) {
       if (this.historyData_[i].url == url)
-        this.set('historyData_.' + i + '.starred', false);
+        this.set(`historyData_.${i}.starred`, false);
     }
   },
 

chrome/browser/resources/settings/route.js

@@ -135,7 +135,7 @@ cr.define('settings', function() {
 
       // |path| extends this route's path if it doesn't have a leading slash.
       // If it does have a leading slash, it's just set as the new route's URL.
-      var newUrl = path[0] == '/' ? path : this.path + '/' + path;
+      var newUrl = path[0] == '/' ? path : `${this.path}/${path}`;
 
       var route = new Route(newUrl);
       route.parent = this;

chrome/browser/resources/settings/search_settings.js

@@ -517,7 +517,7 @@ cr.define('settings', function() {
       // problematic for regular expressions.
       var searchText = this.rawQuery_.trim().replace(SANITIZE_REGEX, '\\$&');
       if (searchText.length > 0)
-        regExp = new RegExp('(' + searchText + ')', 'i');
+        regExp = new RegExp(`(${searchText})`, 'i');
 
       return regExp;
     }

docs/es6_chromium.md

@@ -454,6 +454,31 @@ for (let n of fibonacci) {
 
 ---
 
+## Template Literals
+
+Expression interpolation for Strings, with the ability to access raw template
+pieces.
+
+**Usage Example:**
+
+```js
+// Simple example
+let greeting = 'hello';
+let myName = {first: 'Foo', last: 'Bar'};
+let from = 1900;
+let to = 2000;
+
+var message = `${greeting}, I am ${myName.first}${myName.last},
+and I am ${to - from} years old`;
+// message == 'hello,\nI am FooBar,\nand I am 100 years old'
+```
+
+**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-template-literals)
+
+**Discussion Notes / Link to Thread:**
+
+---
+
 # Banned Features
 
 The following features are banned for Chromium development.
@@ -604,28 +629,6 @@ console.log(clearSky.clouds());  // 0
 
 ---
 
-## Template Literals
-
-Expression interpolation for Strings, with the ability to access raw template
-pieces.
-
-**Usage Example:**
-
-```js
-// Simple example
-var greeting = 'hello';
-var myName = {first: 'Foo', last: 'Bar'};
-var message = `${greeting},
-my name is ${myName.first + myName.last}`;
-// message == 'hello,\nmy name is FooBar'
-```
-
-**Documentation:** [link](http://www.ecma-international.org/ecma-262/6.0/#sec-template-literals)
-
-**Discussion Notes / Link to Thread:**
-
----
-
 ## Binary & Octal Literals
 
 **Usage Example:**