[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..b3d426a20fde094e5f5e2830c24201f64ab39763 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 toggled developer mode. */
+      inDevMode: Boolean,

[michaelpg, 2017/03/06 19:08:46]

I CC'd you on a 30-comment bug thread yesterday where users and testers happened
to be using "dev mode" to mean different things (dev build vs. extensions page
dev mode), and that's excluding Chrome OS's "dev mode" too. Just a warning about
that keyword :-)

As a suggestion, "the UI's developer mode" would be unambiguous.

[Devlin, 2017/03/06 20:12:12]

Done.

     },
 
     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

[michaelpg, 2017/03/06 19:08:46]

non-null: !

+     * @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() {
+    shouldShowExtensionsOptionsSection_: 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);