[MD Extensions] Update Item Card UI

chrome/browser/resources/md_extensions/item.js

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 cr.define('extensions', function() {
   /** @interface */
   var ItemDelegate = function() {};
 
   ItemDelegate.prototype = {
     /** @param {string} id */
@@ skipping 29 matching lines @@
      */
     setItemCollectsErrors: assertNotReached,
 
     /**
      * @param {string} id
      * @param {chrome.developerPrivate.ExtensionView} view
      */
     inspectItemView: assertNotReached,
 
     /** @param {string} id */
+    reloadItem: assertNotReached,
+
+    /** @param {string} id */
     repairItem: assertNotReached,
 
     /** @param {string} id */
     showItemOptionsPage: assertNotReached,
   };
 
   var Item = Polymer({
     is: 'extensions-item',
 
     behaviors: [I18nBehavior],
@@ skipping 68 matching lines @@
     /** @private */
     onDetailsTap_: function() {
       this.fire('extension-item-show-details', {data: this.data});
     },
 
     /**
      * @param {!{model: !{item: !chrome.developerPrivate.ExtensionView}}} e
      * @private
      */
     onInspectTap_: function(e) {
-      this.delegate.inspectItemView(this.data.id, e.model.item);
+      this.delegate.inspectItemView(this.data.id, this.data.views[0]);
     },
 
     /** @private */
+    onExtraInspectTap_: function() {
+      this.fire('extension-item-show-details', {data: this.data});
+    },
+
+    /** @private */
+    onReloadTap_: function() {
+      this.delegate.reloadItem(this.data.id);
+    },
+
+    /** @private */
     onRepairTap_: function() {
       this.delegate.repairItem(this.data.id);
     },
 
     /**
      * Returns true if the extension is enabled, including terminated
      * extensions.
      * @return {boolean}
      * @private
      */
     isEnabled_: function() {
       switch (this.data.state) {
         case chrome.developerPrivate.ExtensionState.ENABLED:
         case chrome.developerPrivate.ExtensionState.TERMINATED:
           return true;
         case chrome.developerPrivate.ExtensionState.DISABLED:
           return false;
       }
       assertNotReached();  // FileNotFound.
     },
 
-    /** @private */
-    computeClasses_: function() {
-      return this.isEnabled_() ? 'enabled' : 'disabled';
+    /**
+     * Returns true if the enable toggle should be shown.
+     * @return {boolean}
+     * @private
+     */
+    showEnableToggle_: function() {
+      return !this.isTerminated_() && !this.data.disableReasons.corruptInstall;
     },
 
     /**
+     * Returns true if the extension is in the terminated state.
+     * @return {boolean}
+     * @private
+     */
+    isTerminated_: function() {
+      return this.data.state ==
+          chrome.developerPrivate.ExtensionState.TERMINATED;
+    },
+
+    /**
+     * return {string}
+     * @private
+     */
+    computeClasses_: function() {
+      var classes = this.isEnabled_() ? 'enabled' : 'disabled';
+      if (this.inDevMode)
+        classes += ' dev-mode';
+      return classes;
+    },
+
+    /**
      * @return {string}
      * @private
      */
     computeSourceIndicatorIcon_: function() {
       switch (extensions.getItemSource(this.data)) {
         case SourceType.POLICY:
           return 'communication:business';
         case SourceType.SIDELOADED:
           return 'input';
         case SourceType.UNPACKED:
           return 'extensions-icons:unpacked';
         case SourceType.WEBSTORE:
           return '';
       }
       assertNotReached();
     },
 
     /**
      * @return {string}
      * @private
      */
     computeSourceIndicatorText_: function() {
       var sourceType = extensions.getItemSource(this.data);
       return sourceType == SourceType.WEBSTORE ? '' :
              extensions.getItemSourceString(sourceType);
     },
 
     /**
-     * @param {chrome.developerPrivate.ExtensionView} view
+     * @return {boolean}
      * @private
      */
-    computeInspectLabel_: function(view) {
+    computeInspectViewsHidden_: function() {
+      return !this.data.views || this.data.views.length == 0;
+    },
+
+    /**
+     * @return {string}
+     * @private
+     */
+    computeFirstInspectLabel_: function() {
+      var view = this.data.views[0];
       // Trim the "chrome-extension://<id>/".
       var url = new URL(view.url);
       var label = view.url;
       if (url.protocol == 'chrome-extension:')
         label = url.pathname.substring(1);
       if (label == '_generated_background_page.html')
         label = this.i18n('viewBackgroundPage');
       // Add any qualifiers.
       label += (view.incognito ? ' ' + this.i18n('viewIncognito') : '') +
                (view.renderProcessId == -1 ?
                     ' ' + this.i18n('viewInactive') : '') +
                (view.isIframe ? ' ' + this.i18n('viewIframe') : '');
+      var index = this.data.views.indexOf(view);
+      assert(index >= 0);
+      if (index < this.data.views.length - 1)
+        label += ',';
       return label;
     },
 
     /**
      * @return {boolean}
      * @private
      */
+    computeExtraViewsHidden_: function() {
+      return this.data.views.length <= 1;
+    },
+
+    /**
+     * @return {string}
+     * @private
+     */
+    computeExtraInspectLabel_: function() {
+      return loadTimeData.getStringF('itemInspectViewsExtra',
+                                     this.data.views.length - 1);
+    },
+
+    /**
+     * @return {boolean}
+     * @private
+     */
     hasWarnings_: function() {
       return this.data.disableReasons.corruptInstall ||
              this.data.disableReasons.suspiciousInstall ||
              !!this.data.blacklistText;
     },
 
     /**
      * @return {string}
      * @private
      */
     computeWarningsClasses_: function() {
       return this.data.blacklistText ? 'severe' : 'mild';
     },
   });
 
   return {
     Item: Item,
     ItemDelegate: ItemDelegate,
   };
 });