Index: chrome/browser/resources/md_extensions/item.html |
diff --git a/chrome/browser/resources/md_extensions/item.html b/chrome/browser/resources/md_extensions/item.html |
index 845f3186c8d71c3f43499dd09964d95b7e9bf851..e4687314713805a3e2968662a6d28dc43cde5d4c 100644 |
--- a/chrome/browser/resources/md_extensions/item.html |
+++ b/chrome/browser/resources/md_extensions/item.html |
@@ -31,21 +31,18 @@ |
width: 36px; |
} |
- #card, |
- #card-wrapper { |
- min-height: 154px; |
- width: 400px; |
- } |
- |
- #card-wrapper { |
+ #card { |
@apply(--shadow-elevation-2dp); |
background: white; |
- } |
- |
- #card { |
display: flex; |
flex-direction: column; |
font-size: 13px; |
+ height: 160px; |
+ width: 400px; |
+ } |
+ |
+ #card.dev-mode { |
+ height: 208px; |
} |
#card.disabled { |
@@ -55,27 +52,33 @@ |
#main { |
display: flex; |
flex-grow: 1; |
- padding: 16px; |
+ padding: 16px 20px 17px; |
} |
#content { |
-webkit-margin-start: 24px; |
+ display: flex; |
+ flex-direction: column; |
width: 100%; |
} |
#name-and-version { |
+ line-height: 15px; |
margin-bottom: 4px; |
} |
#name { |
-webkit-margin-end: 8px; |
- color: var(--paper-grey-800); |
+ color: #333; |
} |
- #description { |
+ #description, |
+ #warnings { |
+ flex-grow: 1; |
margin-bottom: 8px; |
} |
+ #description, |
#version, |
#extension-id, |
#inspect-views, |
@@ -91,40 +94,47 @@ |
#inspect-views paper-button { |
color: var(--google-blue-700); |
+ height: 20px; |
+ padding: 0; |
+ text-transform: none; |
} |
#button-strip { |
+ -webkit-padding-end: 4px; |
+ -webkit-padding-start: 20px; |
border-top: 1px solid var(--paper-grey-400); |
+ box-sizing: border-box; |
+ height: 48px; |
+ padding-bottom: 8px; |
+ padding-top: 8px; |
} |
#source-indicator { |
- align-items: center; |
- align-self: flex-end; |
- border-radius: 0 2px; |
- color: var(--paper-grey-800); |
- display: flex; |
- min-height: 32px; |
- padding: 0 8px; |
+ -webkit-margin-start: 30px; |
+ margin-top: 30px; |
position: absolute; |
- white-space: nowrap; |
} |
#source-indicator iron-icon { |
- height: 16px; |
- width: 16px; |
- } |
- |
- #source-indicator span { |
- -webkit-margin-end: 8px; |
- display: none; |
+ height: 22px; |
+ width: 22px; |
} |
- #source-indicator:hover { |
- background-color: var(--paper-grey-700); |
+ #source-indicator-text { |
+ -webkit-margin-start: 11px; /* To align with the center of the icon. */ |
+ background: black; |
+ border-radius: 2px; |
color: white; |
+ display: none; |
+ margin-top: 8px; |
+ opacity: 0.6; |
+ padding: 8px 12px; |
+ position: absolute; |
+ transform: translateX(-50%); /* Move back 50% of width so that the |
+ text and icon share an x-center. */ |
} |
- #source-indicator:hover span { |
+ #source-indicator:hover #source-indicator-text { |
display: block; |
} |
@@ -136,115 +146,109 @@ |
#button-strip paper-button { |
align-items: center; |
display: flex; |
- margin: 4px; |
+ margin: 0 4px; |
min-height: 32px; |
padding: 0 12px; |
text-transform: uppercase; |
} |
- #enable-toggle { |
- -webkit-margin-end: 16px; |
+ .action-button { |
+ color: var(--google-blue-500); |
} |
- .warning { |
- align-items: center; |
- display: flex; |
- font-size: 13px; |
- justify-content: space-between; |
- padding: 12px 16px; |
- } |
- |
- .warning paper-button { |
- -webkit-margin-start: 12px; |
- align-items: center; |
- display: flex; |
- text-transform: uppercase; |
- } |
- |
- .severe.warning { |
- background-color: var(--paper-red-50); |
- color: var(--paper-red-700); |
- } |
- |
- .mild.warning { |
- background-color: var(--paper-yellow-50); |
- color: var(--paper-grey-600); |
+ #warnings { |
+ color: var(--google-red-700); |
} |
#blacklisted-warning:empty { |
display: none; |
} |
</style> |
- <div id="card-wrapper" class$="[[computeClasses_(data.state)]]"> |
- <div id="card"> |
+ <div id="card" class$="[[computeClasses_(data.state, inDevMode)]]"> |
+ <div id="main"> |
<template is="dom-if" |
if="[[computeSourceIndicatorIcon_(data.*)]]"> |
<div id="source-indicator"> |
- <span>[[computeSourceIndicatorText_(data.*)]]</span> |
<iron-icon icon="[[computeSourceIndicatorIcon_(data.*)]]"> |
</iron-icon> |
+ <div id="source-indicator-text"> |
+ [[computeSourceIndicatorText_(data.*)]] |
+ </div> |
</div> |
</template> |
- <div id="main"> |
- <div id="icon-wrapper"> |
- <img alt="" id="icon" src="[[data.iconUrl]]"> |
- </div> |
- <div id="content"> |
- <div id="name-and-version" class="layout horizontal center"> |
- <div id="name">[[data.name]]</div> |
- <template is="dom-if" if="[[inDevMode]]"> |
- <span id="version">[[data.version]]</span> |
- </template> |
- </div> |
- <div id="description">[[data.description]]</div> |
+ <div id="icon-wrapper"> |
+ <img alt="" id="icon" src="[[data.iconUrl]]"> |
+ </div> |
+ <div id="content"> |
+ <div id="name-and-version" class="layout horizontal center"> |
+ <div id="name">[[data.name]]</div> |
<template is="dom-if" if="[[inDevMode]]"> |
- <div id="extension-id">[[data.id]]</div> |
- <div id="inspect-views"> |
- <span>$i18n{itemInspectViews}</span> |
- <template is="dom-repeat" items="[[data.views]]"> |
- <paper-button on-tap="onInspectTap_"> |
- [[computeInspectLabel_(item)]] |
- </paper-button> |
- </template> |
- </div> |
- </div> |
+ <span id="version">[[data.version]]</span> |
</template> |
</div> |
- </div> |
- <div id="button-strip" class="layout horizontal"> |
- <div class="layout flex horizontal center"> |
- <paper-button id="details-button" on-tap="onDetailsTap_"> |
- $i18n{itemDetails} |
- </paper-button> |
- <paper-button id="errors-button" on-tap="onErrorsTap_" |
- hidden$="[[computeErrorsHidden_(data.*)]]"> |
- $i18n{itemErrors} |
- </paper-button> |
- <paper-button id="remove-button" on-tap="onRemoveTap_"> |
- $i18n{itemRemove} |
- </paper-button> |
+ <div id="description" hidden$="[[hasWarnings_(data.*)]]"> |
+ [[data.description]] |
</div> |
- <paper-toggle-button id="enable-toggle" |
- checked="[[isEnabled_(data.state)]]" on-change="onEnableChange_"> |
- </paper-toggle-button> |
+ <div id="warnings" hidden$="[[!hasWarnings_(data.*)]]"> |
+ <div id="suspicious-warning" |
+ hidden$="[[!data.disableReasons.suspiciousInstall]]"> |
+ $i18n{itemSuspiciousInstall} |
+ </div> |
+ <div id="corrupted-warning" |
+ hidden$="[[!data.disableReasons.corruptInstall]]"> |
+ $i18n{itemCorruptInstall} |
+ </div> |
+ <div id="blacklisted-warning"><!-- No whitespace |
+ -->[[data.blacklistText]]<!-- so we can use :empty in css. |
+ --></div> |
+ </div> |
+ <template is="dom-if" if="[[inDevMode]]"> |
+ <div id="extension-id">[[data.id]]</div> |
+ <template is="dom-if" |
+ if="[[!computeInspectViewsHidden_(data.views)]]"> |
+ <div id="inspect-views"> |
+ <span>$i18n{itemInspectViews}</span> |
+ <paper-button on-tap="onInspectTap_"> |
+ [[computeFirstInspectLabel_(data.views)]] |
+ </paper-button> |
+ <paper-button |
+ hidden$="[[computeExtraViewsHidden_(data.views)]]" |
+ on-tap="onExtraInspectTap_"> |
+ [[computeExtraInspectLabel_(data.views)]] |
+ </paper-button> |
+ </div> |
+ </template> |
+ </template> |
</div> |
</div> |
- <template is="dom-if" if="[[hasWarnings_(data.*)]]"> |
- <div id="suspicious-warning" class="warning mild" |
- hidden$="[[!data.disableReasons.suspiciousInstall]]"> |
- $i18n{itemSuspiciousInstall} |
- </div> |
- <div id="corrupted-warning" class="warning severe" |
- hidden$="[[!data.disableReasons.corruptInstall]]"> |
- <span>$i18n{itemCorruptInstall}</span> |
- <paper-button id="repair-button" on-tap="onRepairTap_"> |
- $i18n{itemRepair} |
+ <div id="button-strip" class="layout horizontal"> |
+ <div class="layout flex horizontal center"> |
+ <paper-button id="details-button" on-tap="onDetailsTap_"> |
+ $i18n{itemDetails} |
+ </paper-button> |
+ <paper-button id="remove-button" on-tap="onRemoveTap_"> |
+ $i18n{itemRemove} |
+ </paper-button> |
+ <paper-button id="errors-button" on-tap="onErrorsTap_" |
+ hidden$="[[computeErrorsHidden_(data.*)]]"> |
+ $i18n{itemErrors} |
</paper-button> |
</div> |
- <div id="blacklisted-warning" class="warning severe"><!-- No whitespace |
- -->[[data.blacklistText]]<!-- ... so we can use :empty in css |
- --></div> |
- </template> |
+ <paper-button id="repair-button" class="action-button" |
+ on-tap="onRepairTap_" |
+ hidden$="[[!data.disableReasons.corruptInstall]]"> |
+ $i18n{itemRepair} |
+ </paper-button> |
+ <paper-button id="reload-button" on-tap="onReloadTap_" |
+ class="action-button" |
+ hidden$="[[!isTerminated_(data.state)]]"> |
+ $i18n{itemReload} |
+ </paper-button> |
+ <paper-toggle-button id="enable-toggle" class="action-button" |
+ checked="[[isEnabled_(data.state)]]" on-change="onEnableChange_" |
+ hidden$="[[!showEnableToggle_(data.*)]]"> |
+ </paper-toggle-button> |
+ </div> |
</div> |
</template> |
<script src="chrome://extensions/item.js"></script> |