Merge pull request #32248 from gabrielesvelto/bug-1200576-highlight-m…

…atch-dom-fragment Bug 1200576 - Use a document fragment to build the matched number in the suggestion bar. r=drs
mozilla-b2g · Oct 9, 2015 · c7df972 · c7df972
2 parents 1609aec + 1eabeb8
commit c7df972
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 10 deletions.
diff --git a/apps/communications/dialer/index.html b/apps/communications/dialer/index.html
@@ -107,7 +107,6 @@
     <script defer src="/shared/js/text_normalizer.js"></script>
     <script defer src="/shared/js/contacts/utilities/templates.js"></script>
     <script defer src="/shared/js/contacts/sms_integration.js"></script>
-    <script defer src="/shared/js/sanitizer.js"></script>
     -->
 
     <link rel="import" href="elements/edit-mode.html">

diff --git a/apps/communications/dialer/js/suggestion_bar.js b/apps/communications/dialer/js/suggestion_bar.js
@@ -1,5 +1,5 @@
 /* globals CallHandler, Contacts, fb, KeypadManager, LazyLoader,
-           SimplePhoneMatcher, SimSettingsHelper, Sanitizer, Utils */
+           SimplePhoneMatcher, SimSettingsHelper, Utils */
 
 // Suggestion_bar.js will be loaded on init of KeypadManager through
 // lazy loader. So we call its init() directly at the end of file.
@@ -257,13 +257,20 @@ var SuggestionBar = {
     var typeTag = node.querySelector('.js-tel-type');
     var telTag = node.querySelector('.js-tel');
     var nameTag = node.querySelector('.js-name');
+
+    // Set the contact name
     nameTag.textContent = name ? name : null;
+
+    // Set the number with the highlighted match
+    while (telTag.firstChild) {
+      telTag.removeChild(telTag.firstChild);
+    }
+
     if (tel) {
-      telTag.innerHTML = Sanitizer.unwrapSafeHTML(tel);
-    } else {
-      telTag.innerHTML = '';
+      telTag.appendChild(tel);
     }
 
+    // Set the phone type
     if (type) {
       if (Utils.isPhoneType(type)) {
         navigator.mozL10n.setAttributes(typeTag, type);
@@ -296,10 +303,12 @@ var SuggestionBar = {
   },
 
   _markMatched: function sb_markMatched(str, substr) {
+    var fragment = document.createDocumentFragment();
     var sanitized = SimplePhoneMatcher.sanitizedNumber(str);
     var digitBeforeMatch = sanitized.indexOf(substr);
     if (digitBeforeMatch == -1) {
-      return str;
+      fragment.appendChild(document.createTextNode(str));
+      return fragment;
     }
 
     // Highlight matched number. We need to count formatting character in.
@@ -323,8 +332,18 @@ var SuggestionBar = {
     var startStr = str.substr(0, start);
     var middleStr = str.substr(start, end - start + 1);
     var endStr = str.substr(end + 1);
-    return Sanitizer.createSafeHTML`${startStr}<mark class="ci__mark"
-            >${middleStr}</mark>${endStr}`;
+
+    var startNode = document.createTextNode(startStr);
+    var middleNode = document.createElement('mark');
+    middleNode.textContent = middleStr;
+    middleNode.classList.add('ci__mark');
+    var endNode = document.createTextNode(endStr);
+
+    fragment.appendChild(startNode);
+    fragment.appendChild(middleNode);
+    fragment.appendChild(endNode);
+
+    return fragment;
   },
 
   _initOverlay: function() {

diff --git a/apps/communications/dialer/test/unit/suggestion_bar_test.js b/apps/communications/dialer/test/unit/suggestion_bar_test.js
@@ -15,7 +15,6 @@ require('/shared/test/unit/mocks/dialer/mock_keypad.js');
 require('/shared/test/unit/mocks/dialer/mock_utils.js');
 require('/shared/test/unit/mocks/mock_sim_settings_helper.js');
 require('/shared/test/unit/mocks/mock_l10n.js');
-require('/shared/js/sanitizer.js');
 
 require('/dialer/js/suggestion_bar.js');
 

diff --git a/shared/js/dialer/keypad.js b/shared/js/dialer/keypad.js
@@ -189,7 +189,6 @@ var KeypadManager = {
 
     this.render();
     LazyLoader.load(['/shared/style/action_menu.css',
-                     '/shared/js/sanitizer.js',
                      '/dialer/js/suggestion_bar.js']);
 
     this._observePreferences();