Switched to template strings instead of concatenation

background/background.js

@@ -13,15 +13,15 @@ chrome.runtime.onInstalled.addListener(function(details) {
       iconUrl : "icons/icon-large.png"
     })
   }
-  console.info("Extension version " + chrome.runtime.getManifest().version + " successfully installed");
+  console.info(`Extension version ${chrome.runtime.getManifest().version} successfully installed`);
 });
 
 // Modifies the tab icon when a tab containing a video notifies the background
 // whether video tuning is active or not.
 chrome.runtime.onMessage.addListener(function(request, sender) {
   const iconName = request.active ? "play" : "pause";
   chrome.browserAction.setIcon({
-    path : "icons/icon-" + iconName + ".png",
+    path : `icons/icon-${iconName}.png`,
     tabId : sender.tab.id
   });
 });
@@ -37,7 +37,7 @@ function injectScripts() {
           file : "filters/filters.js"
         }, function() {
           if (typeof chrome.runtime.lastError !== "undefined") {
-            console.warn("Could not execute Night Video Tuner script in tab with url " + tab.url);
+            console.warn(`Could not execute Night Video Tuner script in tab with url ${tab.url}`);
           } else {
             chrome.tabs.executeScript(tab.id, {
               allFrames : true,

content/content.js

@@ -92,7 +92,7 @@ function handleFilterChange(key, newValue) {
         });
       } else {
         listExtensionVideos().forEach(function(video) {
-          updateVideoFilter(video, key, newValue + FILTERS[key]);
+          updateVideoFilter(video, key, `${newValue}${FILTERS[key]}`);
         });
       }
     }
@@ -125,7 +125,7 @@ function updateAllVideoFilters(video) {
         if (filter === "temperature") {
           updateVideoTemperature(video, filterValue);
         } else {
-          updateVideoFilter(video, filter, filterValue + FILTERS[filter]);
+          updateVideoFilter(video, filter, `${filterValue}${FILTERS[filter]}`);
         }
       }
     });
@@ -136,25 +136,25 @@ function updateVideoFilter(video, filter, value) {
   let newFilters;
   if (typeof video.style.filter !== "undefined") {
     const currentFilters = video.style.filter;
-    const regex = RegExp(filter + "\\(([0-9]*" + FILTERS[filter] + "|\"#temperature_filter\")\\)");
+    const regex = RegExp(`${filter}\\(([0-9]*${FILTERS[filter]}|"#temperature_filter")\\)`);
     if (regex.test(currentFilters)) {
       // Filter already exists: replace with new value.
-      newFilters = currentFilters.replace(regex, filter + "(" + value + ")");
+      newFilters = currentFilters.replace(regex, `${filter}(${value})`);
     } else {
       // Filter doesn't exist: append it to existing ones.
-      newFilters = currentFilters + " " + filter + "(" + value + ")";
+      newFilters = `${currentFilters} ${filter}(${value})`;
     }
   } else {
     // No current filters.
-    newFilters = filter + "(" + value + ")";
+    newFilters = `${filter}(${value})`;
   }
   video.style.setProperty("filter", newFilters, "");
 }
 
 function removeVideoFilter(video, filter) {
   if (typeof video.style !== "undefined" && typeof video.style.filter !== "undefined") {
     const currentFilters = video.style.filter;
-    const regex = RegExp(filter + "\\(([0-9]*" + FILTERS[filter] + "|\"#temperature_filter\")\\)");
+    const regex = RegExp(`${filter}\\(([0-9]*${FILTERS[filter]}|"#temperature_filter")\\)`);
     if (regex.test(currentFilters)) {
       // Filter previously existed: remove it.
       video.style.setProperty("filter", currentFilters.replace(regex, ""), "");
@@ -173,8 +173,8 @@ function updateVideoTemperature(video, value) {
   feColorMatrix.setAttribute("type", "matrix");
   // Functions to compute RGB components from a given temperature written
   // using: www.tannerhelland.com/4435/convert-temperature-rgb-algorithm-code
-  feColorMatrix.setAttribute("values", computeRed(temperature) + " 0 0 0 0 0 " + computeGreen(temperature)
-      + " 0 0 0 0 0 " + computeBlue(temperature) + " 0 0 0 0 0 1 0");
+  feColorMatrix.setAttribute("values",
+      `${computeRed(temperature)} 0 0 0 0 0 ${computeGreen(temperature)} 0 0 0 0 0 ${computeBlue(temperature)} 0 0 0 0 0 1 0`);
   const filter = document.createElementNS("http://www.w3.org/2000/svg", "filter");
   filter.setAttribute("id", "temperature_filter");
   filter.setAttribute("color-interpolation-filters", "sRGB");

popup/popup.js

@@ -11,7 +11,7 @@ Object.keys(FILTERS).forEach(function(filter) {
   // Add listener to the filter range input.
   rangeInput.addEventListener("input", updateFilterValue);
   // Add listener to the filter reset button.
-  document.getElementById("reset_" + filter).addEventListener("click", function(e) {
+  document.getElementById(`reset_${filter}`).addEventListener("click", function(e) {
     // Remove "reset_" prefix.
     resetFilter(e.target.id.substring(6));
   });
@@ -21,17 +21,17 @@ Object.keys(FILTERS).forEach(function(filter) {
     // i18n message names don't support hyphens.
     messageName = "hue_rotate";
   }
-  document.getElementById(filter + "_text").appendChild(document.createTextNode(chrome.i18n.getMessage(messageName)));
+  document.getElementById(`${filter}_text`).appendChild(document.createTextNode(chrome.i18n.getMessage(messageName)));
   // Initialise the displayed value.
   chrome.storage.local.get(filter, function(value) {
     const storageValue = value[filter];
     if (typeof storageValue !== "undefined") {
       rangeInput.value = storageValue;
-      const filterVal = document.getElementById(filter + "_val");
+      const filterVal = document.getElementById(`${filter}_val`);
       while (filterVal.firstChild) {
         filterVal.removeChild(filterVal.firstChild);
       }
-      filterVal.appendChild(document.createTextNode(storageValue + FILTERS[filter]));
+      filterVal.appendChild(document.createTextNode(`${storageValue}${FILTERS[filter]}`));
     }
   });
 });
@@ -52,23 +52,23 @@ document.getElementById("reset_all_text").appendChild(document.createTextNode(ch
 document.getElementById("website_text").appendChild(document.createTextNode(chrome.i18n.getMessage("website")));
 document.getElementById("reviews_text").appendChild(document.createTextNode(chrome.i18n.getMessage("reviews")));
 // Display version number.
-document.getElementById("version").appendChild(document.createTextNode("v" + chrome.runtime.getManifest().version));
+document.getElementById("version").appendChild(document.createTextNode(`v${chrome.runtime.getManifest().version}`));
 
 function updateFilterValue() {
   const filter = this.id;
   const newValue = this.value;
-  const filterVal = document.getElementById(filter + "_val");
+  const filterVal = document.getElementById(`${filter}_val`);
   while (filterVal.firstChild) {
     filterVal.removeChild(filterVal.firstChild);
   }
   // Update the displayed value.
-  filterVal.appendChild(document.createTextNode(newValue + FILTERS[filter]));
+  filterVal.appendChild(document.createTextNode(`${newValue}${FILTERS[filter]}`));
   const storageObj = {};
   storageObj[filter] = newValue;
   // Persist the new value to the storage so it is picked up by a tab's
   // content script.
   chrome.storage.local.set(storageObj, function() {
-    console.log("Set value of " + filter + " to " + newValue + FILTERS[filter]);
+    console.log(`Set value of ${filter} to ${newValue}${FILTERS[filter]}`);
   });
 }
 
@@ -82,18 +82,18 @@ function resetFilter(filter) {
   const defaultValue = DEFAULT_VALUES[filter];
   // Update position of the range thumb.
   document.getElementById(filter).value = defaultValue;
-  const filterVal = document.getElementById(filter + "_val");
+  const filterVal = document.getElementById(`${filter}_val`);
   while (filterVal.firstChild) {
     filterVal.removeChild(filterVal.firstChild);
   }
   // Update the displayed value.
-  filterVal.appendChild(document.createTextNode(defaultValue + FILTERS[filter]));
+  filterVal.appendChild(document.createTextNode(`${defaultValue}${FILTERS[filter]}`));
   const storageObj = {};
   storageObj[filter] = defaultValue;
   // Persist the default value to the storage so it is picked up by a tab's
   // content script.
   chrome.storage.local.set(storageObj, function() {
-    console.log("Reset " + filter + " to its default value (" + defaultValue + FILTERS[filter] + ")")
+    console.log(`Reset ${filter} to its default value (${defaultValue}${FILTERS[filter]})`);
   });
 }
 
@@ -113,7 +113,7 @@ function enableDisable() {
       buttonText.appendChild(document.createTextNode(chrome.i18n.getMessage("enable")));
     }
     chrome.storage.local.set(storageObj, function() {
-      console.log("Set global state of extension to " + storageObj["state"]);
+      console.log(`Set global state of extension to ${storageObj["state"]}`);
     });
   });
 }

tests/spec/ContentSpec.js

@@ -248,7 +248,7 @@ describe("Content script", function() {
 
       expect(window.updateVideoFilter.calls.mostRecent().args[0]).toEqual(video);
       expect(window.updateVideoFilter.calls.mostRecent().args[1]).toEqual("brightness");
-      expect(window.updateVideoFilter.calls.mostRecent().args[2]).toEqual(101 + FILTERS["brightness"]);
+      expect(window.updateVideoFilter.calls.mostRecent().args[2]).toEqual(`101${FILTERS["brightness"]}`);
     });
 
     it("should remove filter if changed back to default and plugin enabled", function() {