chrome://flags Performance improvements

- Make the restart button appear quicker
- Optimisations to renderTemplate function so the template
is always duplicated.

Bug: 930758,928683
Change-Id: I98381313e32a202e14989f119ba571337b0b95fb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1466942
Reviewed-by: Tommy Li <tommycli@chromium.org>
Commit-Queue: Edward Jung <edwardjung@chromium.org>
Cr-Commit-Position: refs/heads/master@{#642469}
diff --git a/components/flags_ui/resources/flags.js b/components/flags_ui/resources/flags.js
index c993e96..8cc6672d 100644
--- a/components/flags_ui/resources/flags.js
+++ b/components/flags_ui/resources/flags.js
@@ -16,31 +16,25 @@
  */
 function renderTemplate(experimentalFeaturesData) {
   var templateToProcess = jstGetTemplate('tab-content-available-template');
+  var context = new JsEvalContext(experimentalFeaturesData);
   var content = $('tab-content-available');
 
-  if (content.childNodes > 0) {
-    // Already processed, use the internal content area template.
-    templateToProcess =  content;
-  } else {
-    // Duplicate the template into the content area.
-    // This prevents the misrendering of available flags when the template
-    // is rerendered. Example - resetting flags.
-    content.textContent = '';
-    content.appendChild(templateToProcess);
-  }
+  // Duplicate the template into the content area.
+  // This prevents the misrendering of available flags when the template
+  // is rerendered. Example - resetting flags.
+  content.textContent = '';
+  content.appendChild(templateToProcess);
 
   // Process the templates: available / unavailable flags.
-  jstProcess(new JsEvalContext(experimentalFeaturesData), templateToProcess);
+  jstProcess(context, templateToProcess);
 
   // Unavailable flags are not shown on iOS.
   var unavailableTemplate = $('tab-content-unavailable');
   if (unavailableTemplate) {
-    jstProcess(new JsEvalContext(experimentalFeaturesData),
-        $('tab-content-unavailable'));
+    jstProcess(context, $('tab-content-unavailable'));
   }
 
-  // Update the restart container.
-  jstProcess(new JsEvalContext(experimentalFeaturesData), $('needs-restart'));
+  showRestartToast(experimentalFeaturesData.needsRestart);
 
   // Add handlers to dynamically created HTML elements.
   var elements = document.getElementsByClassName('experiment-select');
@@ -152,10 +146,19 @@
 function resetAllFlags() {
   // Asks the C++ FlagsDOMHandler to reset all flags to default values.
   chrome.send('resetAllFlags');
+  showRestartToast(true);
   requestExperimentalFeaturesData();
 }
 
 /**
+ * Show the restart toast.
+ * @param {boolean} show Setting to toggle showing / hiding the toast.
+ */
+function showRestartToast(show) {
+  $('needs-restart').classList.toggle('show', show);
+}
+
+/**
  * Called by the WebUI to re-populate the page with data representing the
  * current state of all experimental features.
  * @param {Object} experimentalFeaturesData Information about all experimental
@@ -227,7 +230,7 @@
   experimentContainerEl.classList.toggle('experiment-default', isDefault);
   experimentContainerEl.classList.toggle('experiment-switched', !isDefault);
 
-  $('needs-restart').classList.add('show');
+  showRestartToast(true);
 }
 
 /**
@@ -244,7 +247,7 @@
 
 function handleSetOriginListFlag(node, value) {
   chrome.send('setOriginListFlag', [String(node.internal_name), String(value)]);
-  $('needs-restart').classList.add('show');
+  showRestartToast(true);
 }
 
 /**