From 25fe0c5849cf7b2d807242cdc96b965af6375afc Mon Sep 17 00:00:00 2001
From: Clement Desmidt <clement@desmidt.fr>
Date: Wed, 12 Dec 2018 08:06:04 +0100
Subject: [PATCH] :ok_hand: Remove all `innerHTML`

---
 manifest.json          |  2 +-
 src/popup.html         | 16 +++++++++++++++-
 src/scripts/options.js |  6 +++---
 src/scripts/popup.js   | 35 ++++++++++++-----------------------
 4 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/manifest.json b/manifest.json
index 35c238a..f86b900 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Shikiryu Read Later",
-  "version": "0.0.2.1",
+  "version": "0.0.2.2",
   "manifest_version": 2,
   "description": "__MSG_extensionDescription__",
   "icons": {
diff --git a/src/popup.html b/src/popup.html
index d2347ba..eafcb34 100644
--- a/src/popup.html
+++ b/src/popup.html
@@ -8,7 +8,21 @@
     <div id="app" class="popup-content">
       <h1 data-message="extensionName"></h1>
 
-      <div id="display-container"></div>
+      <div id="display-container">
+		  <div class="site-description">
+			  <h3 class="title" data-template="title"></h3>
+			  <p class="description" data-template="description"></p>
+			  <p class="image" data-template="image"></p>
+			  <div>
+				  <label for="comment">Comment:</label>
+				  <textarea id="comment" name="comment"></textarea>
+			  </div>
+			  <a href="" target="_blank" class="url" data-template="url"></a>
+		  </div>
+		  <div class="action-container">
+			  <button id="save-btn" class="btn btn-primary">Save</button>
+		  </div>
+	  </div>
 
       <footer class="main-footer">
         <div class="grid">
diff --git a/src/scripts/options.js b/src/scripts/options.js
index 163ff2e..f130342 100644
--- a/src/scripts/options.js
+++ b/src/scripts/options.js
@@ -16,17 +16,17 @@ storage.get('token', function(resp) {
 urlInput.addEventListener("blur", function(e) {
     var value = this.value;
     storage.set({ url: value }, function() {
-      message.innerHTML = ext.i18n.getMessage("URLChanged");
+      message.textContent = ext.i18n.getMessage("URLChanged");
     });
 });
 
 tokenInput.addEventListener("blur", function(e) {
     var value = this.value;
     storage.set({ token: value }, function() {
-      message.innerHTML = ext.i18n.getMessage("tokenSaved");
+      message.textContent = ext.i18n.getMessage("tokenSaved");
     });
 });
 
 document.querySelectorAll("[data-message]").forEach(function(elt) {
-   elt.innerHTML = ext.i18n.getMessage(elt.dataset.message);
+   elt.textContent = ext.i18n.getMessage(elt.dataset.message);
 });
diff --git a/src/scripts/popup.js b/src/scripts/popup.js
index e54462c..c41cb80 100644
--- a/src/scripts/popup.js
+++ b/src/scripts/popup.js
@@ -17,33 +17,23 @@ storage.get('color', function(resp) {
   }
 });
 
-var template = (data) => {
-  return (`
-  <div class="site-description">
-    <h3 class="title">${data.title}</h3>
-    <p class="description">${data.description}</p>
-    <p class="image"><img src="${data.image}"></p>
-    <div>
-        <label for="comment">Comment:</label>
-        <textarea id="comment" name="comment"></textarea>
-    </div>
-    <a href="${data.url}" target="_blank" class="url">${data.url}</a>
-  </div>
-  <div class="action-container">
-    <button id="save-btn" class="btn btn-primary">Save</button>
-  </div>
-  `);
-};
 var renderMessage = (message) => {
   var displayContainer = document.getElementById("display-container");
-  displayContainer.innerHTML = `<p class='message'>${message}</p>`;
+  displayContainer.textContent = message;
 };
 
 var renderBookmark = (data) => {
-  var displayContainer = document.getElementById("display-container");
-  if(data) {
+  if (data) {
       page_data = data;
-      displayContainer.innerHTML = template(data);
+      document.querySelector("[data-template=title]").textContent = page_data.title;
+      document.querySelector("[data-template=description]").textContent = page_data.description;
+      if ("" !== img) {
+		  var img = document.createElement("image");
+		  img.src = page_data.image;
+		  document.querySelector("[data-template=image]").appendChild(img);
+	  }
+      document.querySelector("[data-template=url]").textContent = page_data.url;
+      document.querySelector("[data-template=url]").setAttribute("href", page_data.url);
   } else {
     renderMessage(ext.i18n.getMessage("cantExtractTitle"));
   }
@@ -70,8 +60,7 @@ popup.addEventListener("click", function(e) {
 
 var dataMessages = document.querySelectorAll("[data-message]");
 [].forEach.call(dataMessages, function(elt) {
-    console.log(elt.dataset.message);
-    elt.innerHTML = ext.i18n.getMessage(elt.dataset.message);
+    elt.textContent = ext.i18n.getMessage(elt.dataset.message);
 });
 
 var optionsLink = document.querySelector(".js-options");