[MD Extensions] Update Detail View UI

chrome/browser/resources/md_extensions/detail_view.js

Index: chrome/browser/resources/md_extensions/detail_view.js
diff --git a/chrome/browser/resources/md_extensions/detail_view.js b/chrome/browser/resources/md_extensions/detail_view.js
index 5183e2efee29f4144f742d2701b095199ccdf3a4..60c4e12c79efb4c35a605d074736e8c0413c75ae 100644
--- a/chrome/browser/resources/md_extensions/detail_view.js
+++ b/chrome/browser/resources/md_extensions/detail_view.js
@@ -8,7 +8,7 @@ cr.define('extensions', function() {
   var DetailView = Polymer({
     is: 'extensions-detail-view',
 
-    behaviors: [Polymer.NeonAnimatableBehavior],
+    behaviors: [I18nBehavior, Polymer.NeonAnimatableBehavior],
 
     properties: {
       /**
@@ -19,6 +19,9 @@ cr.define('extensions', function() {
 
       /** @type {!extensions.ItemDelegate} */
       delegate: Object,
+
+      /** Whether the user has the UI's developer mode. */

[michaelpg, 2017/03/06 22:19:57]

I probably meant:
  "Whether the user has toggled the UI's developer mode."
                        ^^^^^^^

(Or better, enabled, but now I'm being overly nit-picky.)

[Devlin, 2017/03/07 01:18:56]

Heh, whoops.  Didn't mean to copy-paste the grammatical error, too. :)  Done.

+      inDevMode: Boolean,
     },
 
     ready: function() {
@@ -36,6 +39,20 @@ cr.define('extensions', function() {
      * @return {boolean}
      * @private
      */
+    isEnabled_: function() { return extensions.isEnabled(this.data.state); },
+
+    /**
+     * @return {boolean}
+     * @private
+     */
+    isEnableToggleEnabled_: function() {
+      return extensions.userCanChangeEnablement(this.data);
+    },
+
+    /**
+     * @return {boolean}
+     * @private
+     */
     hasDependentExtensions_: function() {
       return this.data.dependentExtensions.length > 0;
     },
@@ -49,6 +66,24 @@ cr.define('extensions', function() {
     },
 
     /**
+     * @return {string}
+     * @private
+     */
+    computeEnabledText_: function() {
+      // TODO(devlin): Get the full spectrum of these strings from bettes.
+      return this.isEnabled_() ? this.i18n('itemOn') : this.i18n('itemOff');
+    },
+
+    /**
+     * @param {!chrome.developerPrivate.ExtensionView} view
+     * @return {string}
+     * @private
+     */
+    computeInspectLabel_: function(view) {
+      return extensions.computeInspectableViewLabel(view);
+    },
+
+    /**
      * @return {boolean}
      * @private
      */
@@ -64,7 +99,7 @@ cr.define('extensions', function() {
      * @return {boolean}
      * @private
      */
-    shouldShowOptionsButton_: function() {
+    shouldShowOptionsLink_: function() {
       return !!this.data.optionsPage;
     },
 
@@ -80,11 +115,30 @@ cr.define('extensions', function() {
     },
 
     /** @private */
-    onOptionsButtonTap_: function() {
+    onEnableChange_: function() {
+      this.delegate.setItemEnabled(this.data.id,
+                                   this.$['enable-toggle'].checked);
+    },
+
+    /**
+     * @param {!{model: !{item: !chrome.developerPrivate.ExtensionView}}} e
+     * @private
+     */
+    onInspectTap_: function(e) {
+      this.delegate.inspectItemView(this.data.id, e.model.item);
+    },
+
+    /** @private */
+    onOptionsTap_: function() {
       this.delegate.showItemOptionsPage(this.data.id);
     },
 
     /** @private */
+    onRemoveTap_: function() {
+      this.delegate.deleteItem(this.data.id);
+    },
+
+    /** @private */
     onAllowIncognitoChange_: function() {
       this.delegate.setItemAllowedIncognito(
           this.data.id, this.$$('#allow-incognito').checked);