[MD Extensions] Implement opening tab-style options pages

chrome/test/data/webui/extensions/extension_detail_view_test.js

Index: chrome/test/data/webui/extensions/extension_detail_view_test.js
diff --git a/chrome/test/data/webui/extensions/extension_detail_view_test.js b/chrome/test/data/webui/extensions/extension_detail_view_test.js
index 632ad21482b2ba60fd9d6aacfc7a7545ecfa9c59..2c007200e852c793fb778592de324c91da31b33b 100644
--- a/chrome/test/data/webui/extensions/extension_detail_view_test.js
+++ b/chrome/test/data/webui/extensions/extension_detail_view_test.js
@@ -38,7 +38,7 @@ cr.define('extension_detail_view_tests', function() {
           incognitoAccess: {isEnabled: true, isActive: false},
           fileAccess: {isEnabled: true, isActive: false},
           runOnAllUrls: {isEnabled: true, isActive: false},
-          errorCollection: {isEnabled: true, isActive: false}
+          errorCollection: {isEnabled: true, isActive: false},
         });
         mockDelegate = new extension_test_util.MockItemDelegate();
         item = new extensions.DetailView();
@@ -55,7 +55,7 @@ cr.define('extension_detail_view_tests', function() {
         var testIsVisible = extension_test_util.isVisible.bind(null, item);
         expectTrue(testIsVisible('#close-button'));
         expectTrue(testIsVisible('#open-in-webstore'));
-        expectTrue(testIsVisible('#options'));
+        expectFalse(testIsVisible('#options'));
 
         // Check the checkboxes visibility and state. They should be visible
         // only if the associated option is enabled, and checked if the
@@ -103,9 +103,16 @@ cr.define('extension_detail_view_tests', function() {
                      item.$$('#permissions-list').querySelectorAll('li').
                          length);
         expectFalse(testIsVisible('#no-permissions'));
+
+        var optionsUrl = 'chrome-extension://' + item.data.id + '/options.html';

[michaelpg, 2016/09/15 02:13:46]

extensionData.id for consistency with other tests?

[Devlin, 2016/09/15 16:42:17]

Done.

+        item.set('data.optionsPage', {openInTab: true, url: optionsUrl});
+        Polymer.dom.flush();

[michaelpg, 2016/09/15 02:13:46]

why is this needed?

[Devlin, 2016/09/15 16:42:17]

I thought we needed to flush after using set().  Apparently we don't.  Removed.

[michaelpg, 2016/09/15 20:56:26]

nope, data binding is almost always synchronous. But a flush would be necessary
if there were a <template is="dom-if"> that depended on this property, for
example, because the template stamps asynchronously.

[Devlin, 2016/09/15 21:01:50]

Ah, that clears up a lot of the mystery of when to use this. :)  Thanks!

+        expectTrue(testIsVisible('#options'));
       });
 
       test(assert(TestNames.ClickableElements), function() {
+        var optionsUrl = 'chrome-extension://' + item.data.id + '/options.html';

[michaelpg, 2016/09/15 02:13:46]

extensionData.id for consistency with other tests?

[Devlin, 2016/09/15 16:42:17]

Done.

+        item.set('data.optionsPage', {openInTab: true, url: optionsUrl});
         Polymer.dom.flush();
         mockDelegate.testClickingCalls(
             item.$$('#allow-incognito'), 'setItemAllowedIncognito',
@@ -119,6 +126,8 @@ cr.define('extension_detail_view_tests', function() {
         mockDelegate.testClickingCalls(
             item.$$('#collect-errors'), 'setItemCollectsErrors',
             [extensionData.id, true]);
+        mockDelegate.testClickingCalls(
+            item.$$('#options'), 'showItemOptionsPage', [extensionData.id]);
       });
     });
   }