Update Physical Web WebUI to show new results automatically

components/physical_web/webui/resources/physical_web.js

 // Copyright (c) 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * Takes the |nearbyUrlsData| input argument which holds metadata for web pages
  * broadcast by nearby devices.
  * @param {Object} nearbyUrlsData Information about web pages broadcast by
  *      nearby devices
  */
 function renderTemplate(nearbyUrlsData) {
+  prepareNearbyUrls(nearbyUrlsData);
+
+  // This is a workaround with jstemplate. Jstemplate render only works on empty
+  // node. When we need to rerender things, we have to remove previous nodes.
+  let renderContainer = document.getElementById('render-container');
+  // Remove existing childNode.
+  while (renderContainer.hasChildNodes()) {
+    renderContainer.removeChild(renderContainer.lastChild);
+  }
+
+  let templateDiv = document.getElementById('render-template').cloneNode(true);
+  renderContainer.appendChild(templateDiv);
+
   // This is the javascript code that processes the template:
-  jstProcess(new JsEvalContext(nearbyUrlsData), $('physicalWebTemplate'));
+  jstProcess(new JsEvalContext(nearbyUrlsData), templateDiv);
 }
 
-function requestNearbyURLs() {
-  chrome.send('requestNearbyURLs');
+function physicalWebPageLoaded() {
+  chrome.send('physicalWebPageLoaded');
 }
 
 function physicalWebItemClicked(index) {
   chrome.send('physicalWebItemClicked', [index]);
 }
 
 function returnNearbyURLs(nearbyUrlsData) {
-  var bodyContainer = $('body-container');
+  let bodyContainer = $('body-container');
   renderTemplate(nearbyUrlsData);
 
   bodyContainer.style.visibility = 'visible';
 }
 
-document.addEventListener('DOMContentLoaded', requestNearbyURLs);
+var currentNearbyUrlsData = [];
+function findNewUrls(nearbyUrlsData) {
+  var newUrlsMetadata = [];
+  for (let i = 0; i < nearbyUrlsData['metadata'].length; i++) {
+    let current = nearbyUrlsData['metadata'][i];
+    let found = false;
+    for (let j = 0; j < currentNearbyUrlsData.length; j++) {
+      if (current.resolvedUrl == currentNearbyUrlsData[j].resolvedUrl) {
+        found = true;
+        break;
+      }
+    }
+    if (!found) {
+      newUrlsMetadata.push(current);
+    }
+  }
+  return newUrlsMetadata;
+}
+
+// When we have new URLs, we want to append it to the end of the result page to
+// prevent misclick.
+function prepareNearbyUrls(nearbyUrlsData) {
+  currentNearbyUrlsData =
+      currentNearbyUrlsData.concat(findNewUrls(nearbyUrlsData));
+  nearbyUrlsData.metadata = currentNearbyUrlsData;
+  resetUrlIndex(nearbyUrlsData);
+}
+
+function resetUrlIndex(nearbyUrlsData) {
+  for (let i = 0; i < nearbyUrlsData['metadata'].length; i++) {
+    nearbyUrlsData['metadata'][i].index = i;
+  }
+}
+
+document.addEventListener('DOMContentLoaded', physicalWebPageLoaded);