Stop rebuilding all elements in chrome://extensions to preserve focus on refresh

chrome/browser/resources/extensions/create_node.js

Index: chrome/browser/resources/extensions/create_node.js
diff --git a/chrome/browser/resources/extensions/create_node.js b/chrome/browser/resources/extensions/create_node.js
new file mode 100644
index 0000000000000000000000000000000000000000..1b3aae099063766c7d4e31e26596452bdc949c93
--- /dev/null
+++ b/chrome/browser/resources/extensions/create_node.js
@@ -0,0 +1,133 @@
+// TODO(hcarmona): Remove this temporary file.
+
+    /**
+     * Synthesizes and initializes an HTML element for the extension metadata
+     * given in |extension|.
+     * @param {ExtensionData} extension A dictionary of extension metadata.
+     * @private
+     */
+    createNode_: function(extension) {
+      var template = $('template-collection').querySelector(
+          '.extension-list-item-wrapper');
+      var node = template.cloneNode(true);
+      node.id = extension.id;
+
+      // The 'Show Browser Action' button.
+      this.addListener_('click', node, '.show-button', function(e) {
+        chrome.send('extensionSettingsShowButton', [extension.id]);
+      });
+
+      // The 'allow in incognito' checkbox.
+      this.addListener_('change', node, '.incognito-control input',
+                        function(e) {
+        var butterBar = node.querySelector('.butter-bar');
+        var checked = e.target.checked;
+        if (!this.butterbarShown_) {
+          butterBar.hidden = !checked || extension.is_hosted_app;
+          this.butterbarShown_ = !butterBar.hidden;
+        } else
+          butterBar.hidden = true;
+        chrome.send('extensionSettingsEnableIncognito',
+                    [extension.id, String(checked)]);
+      }.bind(this));
+
+      // The 'collect errors' checkbox. This should only be visible if the
+      // error console is enabled - we can detect this by the existence of the
+      // |errorCollectionEnabled| property.
+      this.addListener_('change', node, '.error-collection-control input',
+                        function(e) {
+        chrome.send('extensionSettingsEnableErrorCollection',
+                    [extension.id, String(e.target.checked)]);
+      });
+
+      // The 'allow on all urls' checkbox. This should only be visible if
+      // active script restrictions are enabled. If they are not enabled, no
+      // extensions should want all urls.
+      this.addListener_('click', node, '.all-urls-control', function(e) {
+        chrome.send('extensionSettingsAllowOnAllUrls',
+                    [extension.id, String(e.target.checked)]);
+      });
+
+      // The 'allow file:// access' checkbox.
+      this.addListener_('click', node, '.file-access-control', function(e) {
+        chrome.send('extensionSettingsAllowFileAccess',
+                    [extension.id, String(e.target.checked)]);
+      });
+
+      // The 'Options' button or link, depending on its behaviour.
+      // Set an href to get the correct mouse-over appearance (link,
+      // footer) - but the actual link opening is done through chrome.send
+      // with a preventDefault().
+      node.querySelector('.options-link').setAttribute(
+          'href', extension.optionsPageHref);
+      this.addListener_('click', node, '.options-link', function(e) {
+        chrome.send('extensionSettingsOptions', [extension.id]);
+        e.preventDefault();
+      });
+
+      this.addListener_('click', node, '.options-button', function(e) {
+        this.showEmbeddedExtensionOptions_(extension.id, false);
+        e.preventDefault();
+      }.bind(this));
+
+      // The 'Permissions' link.
+      this.addListener_('click', node, '.permissions-link', function(e) {
+        chrome.send('extensionSettingsPermissions', [extension.id]);
+        e.preventDefault();
+      });
+
+      // The 'Reload' link.
+      this.addListener_('click', node, '.reload-link', function(e) {
+        chrome.send('extensionSettingsReload', [extension.id]);
+        extensionReloadedTimestamp[extension.id] = Date.now();
+      });
+
+      // The 'Launch' link.
+      this.addListener_('click', node, '.launch-link', function(e) {
+        chrome.send('extensionSettingsLaunch', [extension.id]);
+      });
+
+      // The 'Reload' terminated link.
+      this.addListener_('click', node, '.terminated-reload-link', function(e) {
+        chrome.send('extensionSettingsReload', [extension.id]);
+      });
+
+      // The 'Repair' corrupted link.
+      this.addListener_('click', node, '.corrupted-repair-button', function(e) {
+        chrome.send('extensionSettingsRepair', [extension.id]);
+      });
+
+      // The 'Enabled' checkbox.
+      this.addListener_('click', node, '.enable-checkbox input', function(e) {
+        var checked = e.target.checked;
+        chrome.send('extensionSettingsEnable', [extension.id, String(checked)]);
+
+        // This may seem counter-intuitive (to not set/clear the checkmark)
+        // but this page will be updated asynchronously if the extension
+        // becomes enabled/disabled. It also might not become enabled or
+        // disabled, because the user might e.g. get prompted when enabling
+        // and choose not to.
+        e.preventDefault();
+      });
+
+      // 'Remove' button.
+      var trashTemplate = $('template-collection').querySelector('.trash');
+      var trash = trashTemplate.cloneNode(true);
+      trash.title = loadTimeData.getString('extensionUninstall');
+      trash.addEventListener('click', function(e) {
+        chrome.send('extensionSettingsUninstall', [extension.id]);
+      });
+      node.querySelector('.enable-controls').appendChild(trash);
+
+      // Developer mode ////////////////////////////////////////////////////////
+
+      // The path, if provided by unpacked extension.
+      this.addListener_('click', node, '.load-path a:nth-of-type(1)',
+                        function(e) {
+        chrome.send('extensionSettingsShowPath', [String(extension.id)]);
+        e.preventDefault();
+      });
+
+      this.appendChild(node);
+      this.updateNode_(extension, node);
+    },