[MD Extensions] Implement opening tab-style options pages

Add logic to open options pages that open in tabs (embedded options
pages still to come). Add a test for the same.

BUG=529395
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2329443004
Cr-Commit-Position: refs/heads/master@{#419004}

chrome/browser/resources/md_extensions/detail_view.html

@@ -13,6 +13,9 @@
   <style include="iron-flex"></style>
   <template>
     <style>
+      [hidden] {
+        display: none !important;
+      }
       #main {
         background-color: white;
         height: 800px;
@@ -59,11 +62,13 @@
     <div id="main">
       <div id="top-bar">
         <paper-icon-button id="close-button" icon="arrow-back"
-            on-click="onCloseButtonClick_"></paper-icon-button>
+            on-tap="onCloseButtonTap_"></paper-icon-button>
         <span id="name">[[data.name]]</span>
         <paper-icon-button id="open-in-webstore" icon="open-in-new">
         </paper-icon-button>
-        <paper-icon-button id="options" icon="settings">
+        <paper-icon-button id="options" icon="settings"
+            on-tap="onOptionsButtonTap_"
+            hidden$="[[!shouldShowOptionsButton_(data.*)]]">
         </paper-icon-button>
       </div>
       <div class="section">

chrome/browser/resources/md_extensions/detail_view.js

@@ -28,7 +28,7 @@ cr.define('extensions', function() {
     },
 
     /** @private */
-    onCloseButtonClick_: function() {
+    onCloseButtonTap_: function() {
       this.fire('close');
     },
 
@@ -48,6 +48,14 @@ cr.define('extensions', function() {
       return this.data.permissions.length > 0;
     },
 
+    /**
+     * @return {boolean}
+     * @private
+     */
+    shouldShowOptionsButton_: function() {
+      return !!this.data.optionsPage;
+    },
+
     /**
      * @return {boolean}
      * @private
@@ -59,6 +67,11 @@ cr.define('extensions', function() {
              this.data.errorCollection.isEnabled;
     },
 
+    /** @private */
+    onOptionsButtonTap_: function() {
+      this.delegate.showItemOptionsPage(this.data.id);
+    },
+
     /** @private */
     onAllowIncognitoChange_: function() {
       this.delegate.setItemAllowedIncognito(

chrome/browser/resources/md_extensions/item.js

@@ -41,13 +41,16 @@ cr.define('extensions', function() {
     setItemCollectsErrors: assertNotReached,
 
     /**
-     * @param {string} id,
+     * @param {string} id
      * @param {chrome.developerPrivate.ExtensionView} view
      */
     inspectItemView: assertNotReached,
 
     /** @param {string} id */
     repairItem: assertNotReached,
+
+    /** @param {string} id */
+    showItemOptionsPage: assertNotReached,
   };
 
   var Item = Polymer({

chrome/browser/resources/md_extensions/service.js

@@ -215,6 +215,17 @@ cr.define('extensions', function() {
       chrome.developerPrivate.repairExtension(id);
     },
 
+    /** @override */
+    showItemOptionsPage: function(id) {
+      var extension = this.extensions_.find(function(extension) {
+        return extension.id == id;
+      });
+      assert(extension && extension.optionsPage);
+      if (extension.optionsPage.openInTab)
+        chrome.developerPrivate.showOptions(id);
+      // TODO(devlin): Handle embedded extension options.
+    },
+
     /** @override */
     setProfileInDevMode: function(inDevMode) {
       chrome.developerPrivate.updateProfileConfiguration(

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,17 @@ cr.define('extension_detail_view_tests', function() {
                      item.$$('#permissions-list').querySelectorAll('li').
                          length);
         expectFalse(testIsVisible('#no-permissions'));
+
+        var optionsUrl =
+             'chrome-extension://' + extensionData.id + '/options.html';
+        item.set('data.optionsPage', {openInTab: true, url: optionsUrl});
+        expectTrue(testIsVisible('#options'));
       });
 
       test(assert(TestNames.ClickableElements), function() {
+        var optionsUrl =
+            'chrome-extension://' + extensionData.id + '/options.html';
+        item.set('data.optionsPage', {openInTab: true, url: optionsUrl});
         Polymer.dom.flush();
         mockDelegate.testClickingCalls(
             item.$$('#allow-incognito'), 'setItemAllowedIncognito',
@@ -119,6 +127,8 @@ cr.define('extension_detail_view_tests', function() {
         mockDelegate.testClickingCalls(
             item.$$('#collect-errors'), 'setItemCollectsErrors',
             [extensionData.id, true]);
+        mockDelegate.testClickingCalls(
+            item.$$('#options'), 'showItemOptionsPage', [extensionData.id]);
       });
     });
   }

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

@@ -119,6 +119,9 @@ cr.define('extension_test_util', function() {
 
     /** @override */
     repairItem: function(id) {},
+
+    /** @override */
+    showItemOptionsPage: function(id) {},
   };
 
   /**