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.
 
+var Render_ID = 'RenderId';

[mmocny, 2017/03/10 17:38:41]

Is this the right ID?

Also, why set a constant for this ID when all the rest are inline.  I'm happy to
define them up here but can we do it for all.  In that light, I think we need a
RenderSourceID and RenderTargetID.

Also nit: I think you can use 'let' and 'const' in JavaScript in place of 'var'
which is probably good to get used to.

[Ran, 2017/03/10 18:19:10]

This id can be any string. It's only used in this js so set it to a variable.

Other id/class names are used in html too, inline would make more sense in this
case.

[Ran, 2017/03/10 18:19:10]

Done.

[mmocny, 2017/03/10 18:32:36]

I understand now, its used to help get a handle to the cloned Node.

I think you can just omit lookup by name.  Move the "resetTemplate" code into
renderTemplate and then use the "templateFormat" variable and don't bother with
ID's.

+
 /**
  * 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) {
+  resetTemplate();
   // This is the javascript code that processes the template:
-  jstProcess(new JsEvalContext(nearbyUrlsData), $('physicalWebTemplate'));
+  jstProcess(new JsEvalContext(nearbyUrlsData), $(Render_ID));
 }
 
 function requestNearbyURLs() {
   chrome.send('requestNearbyURLs');
 }
 
 function physicalWebItemClicked(index) {
   chrome.send('physicalWebItemClicked', [index]);
 }
 
 function returnNearbyURLs(nearbyUrlsData) {
   var bodyContainer = $('body-container');
   renderTemplate(nearbyUrlsData);
 
   bodyContainer.style.visibility = 'visible';
 }
 
+// This is a workaround with jstemplate. Jstemplate render only works on empty
+// node. When we need to rerender things, we have to remove the previous nodes.
+function resetTemplate() {

[mmocny, 2017/03/10 17:38:41]

Did replaceChild not work?

[Ran, 2017/03/10 18:19:10]

With the new implementation (make a hidden template), I think it makes more
sense to append the template to body instead of replacing the whole
body-container.

[mmocny, 2017/03/10 18:32:35]

Okay I understand now, this is fine.  Possibly we could be fancy, but its better
like this.

+  // Remove existing childNode.
+  var templateDiv = document.getElementById('render-result');
+  while (templateDiv.hasChildNodes()) {
+    templateDiv.removeChild(templateDiv.lastChild);
+  }
+
+  var templateFormat =
+      document.getElementById('render-template').cloneNode(true);
+  templateFormat.id = Render_ID;
+  templateDiv.appendChild(templateFormat);
+}
+
 document.addEventListener('DOMContentLoaded', requestNearbyURLs);