Merge pull request #26459 from KevinGrandon/bug_1101158_use_tagged_te…

…mplate Bug 1101158 - Use shared tagged template library for escaping card content
mozilla-b2g · Nov 26, 2014 · 0f72a8c · 0f72a8c
2 parents c70bc23 + cd0cb6a
commit 0f72a8c
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 27 deletions.
diff --git a/apps/sharedtest/test/unit/tagged_test.js b/apps/sharedtest/test/unit/tagged_test.js
@@ -0,0 +1,18 @@
+/* global Tagged */
+
+'use strict';
+
+require('/shared/js/tagged.js');
+
+suite('tagged template helper', function() {
+
+  test('#escapeHTML', function() {
+    var myVal = '<b>hello</b>';
+    // fix a jshint issue with tagged template strings
+    // https://github.com/jshint/jshint/issues/2000
+    /* jshint -W033 */
+    var generated = Tagged.escapeHTML `${myVal} world`;
+    /* jshint +W033 */
+    assert.equal(generated, '&lt;b&gt;hello&lt;&#x2F;b&gt; world');
+  });
+});
diff --git a/apps/system/index.html b/apps/system/index.html
@@ -33,6 +33,7 @@
     <script defer src="shared/js/screen_layout.js"></script>
     <script defer src="shared/js/iac_handler.js"></script>
     <script defer src="shared/js/apn_helper.js"></script>
+    <script defer src="shared/js/tagged.js"></script>
     <script defer src="shared/js/utilities.js"></script>
     <script defer src="js/touch_forwarder.js"></script>
     <script defer src="shared/js/version_helper.js"></script>

diff --git a/apps/system/js/card.js b/apps/system/js/card.js
@@ -1,4 +1,4 @@
-/* globals BaseUI, CardsHelper, TrustedUIManager */
+/* globals BaseUI, CardsHelper, Tagged, TrustedUIManager */
 
 /* exported Card */
 
@@ -69,38 +69,40 @@
    * Template string representing the innerHTML of the instance's element
    * @memberOf Card.prototype
    */
-  Card.prototype._template =
-    '<div class="titles">' +
-    ' <h1 id="{titleId}" class="title">{title}</h1>' +
-    ' <p class="subtitle">{subTitle}</p>' +
-    '</div>' +
-    '' +
-    '<div class="screenshotView bb-button" data-l10n-id="openCard" ' +
-    '  role="link"></div>' +
-    '<div class="appIconView" style="background-image:{iconValue}"></div>' +
-    '' +
-    '<footer class="card-tray">'+
-    ' <button class="appIcon" data-l10n-id="openCard" ' +
-    '   data-button-action="select" aria-hidden="true"></button>' +
-    ' <menu class="buttonbar">' +
-    '   <button class="close-button bb-button" data-l10n-id="closeCard" ' +
-    '     data-button-action="close" role="button" ' +
-    '     style="visibility: {closeButtonVisibility}"></button>' +
-    '  <button class="favorite-button bb-button" ' +
-    '    data-button-action="favorite" role="button" ' +
-    '    style="visibility: {favoriteButtonVisibility}"></button>' +
-    ' </menu>' +
-    '</footer>';
+  Card.prototype.template = function() {
+    // fix a jshint issue with tagged template strings
+    // https://github.com/jshint/jshint/issues/2000
+    /* jshint -W033 */
+    return Tagged.escapeHTML `<div class="titles">
+     <h1 id="${this.titleId}" class="title">${this.title}</h1>
+     <p class="subtitle">${this.subTitle}</p>
+    </div>
+
+    <div class="screenshotView bb-button" data-l10n-id="openCard"
+      role="link"></div>
+    <div class="appIconView" style="background-image:${this.iconValue}"></div>
+
+    <footer class="card-tray">
+     <button class="appIcon" data-l10n-id="openCard"
+       data-button-action="select" aria-hidden="true"></button>
+     <menu class="buttonbar">
+       <button class="close-button bb-button" data-l10n-id="closeCard"
+         data-button-action="close" role="button"
+         style="visibility: ${this.closeButtonVisibility}"></button>
+      <button class="favorite-button bb-button"
+        data-button-action="favorite" role="button"
+        style="visibility: ${this.favoriteButtonVisibility}"></button>
+     </menu>
+    </footer>`;
+    /* jshint +W033 */
+  };
 
   /**
    * Card html view - builds the innerHTML for a card element
    * @memberOf Card.prototype
    */
   Card.prototype.view = function c_view() {
-    var viewData = this;
-    return this._template.replace(/\{([^\}]+)\}/g, function(m, key) {
-        return viewData[key];
-    });
+    return this.template();
   };
 
   /**

diff --git a/apps/system/test/unit/card_test.js b/apps/system/test/unit/card_test.js
@@ -1,6 +1,7 @@
 /* global AppWindow, Card, MocksHelper, CardsHelper */
 'use strict';
 
+require('/shared/js/tagged.js');
 requireApp('system/test/unit/mock_app_window.js');
 requireApp('system/test/unit/mock_trusted_ui_manager.js');
 

diff --git a/apps/system/test/unit/task_manager_test.js b/apps/system/test/unit/task_manager_test.js
@@ -11,6 +11,7 @@ requireApp('system/test/unit/mock_stack_manager.js');
 requireApp('system/test/unit/mock_app_window.js');
 requireApp('system/test/unit/mock_trusted_ui_manager.js');
 
+require('/shared/js/tagged.js');
 require('/shared/test/unit/mocks/mock_service.js');
 require('/shared/test/unit/mocks/mock_navigator_moz_settings.js');
 require('/shared/test/unit/mocks/mock_l10n.js');

diff --git a/shared/js/tagged.js b/shared/js/tagged.js
@@ -0,0 +1,38 @@
+'use strict';
+
+/**
+ * tagged.js is a simple library to help you manage tagged template strings.
+ */
+var Tagged = {
+
+  _entity: /[&<>"'/]/g,
+
+  _entities: {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    '\'': '&apos;',
+    '/': '&#x2F;'
+  },
+
+  getEntity: function(s) {
+    return Tagged._entities[s];
+  },
+
+  /**
+   * Escapes HTML for all values in a tagged template string.
+   */
+  escapeHTML: function(strings, ...values) {
+    var result = '';
+
+    for (var i = 0; i < strings.length; i++) {
+      result += strings[i];
+      if (i < values.length) {
+        result += String(values[i]).replace(Tagged._entity, Tagged.getEntity);
+      }
+    }
+
+    return result;
+  }
+};