pimp up extension actions

src/vs/base/browser/ui/actionbar/actionbar.css

@@ -36,7 +36,7 @@
 	cursor: default;
 }
 
-.monaco-action-bar .action-item.active {
+.monaco-action-bar.animated .action-item.active {
 	-ms-transform: translate(0, -3px);
 	-webkit-transform: translate(0, -3px);
 	-moz-transform: translate(0, -3px);
@@ -77,7 +77,7 @@
 	margin-right: .8em;
 }
 
-.monaco-action-bar.vertical .action-item.active {
+.monaco-action-bar.animated.vertical .action-item.active {
 	-ms-transform: translate(5px, 0);
 	-webkit-transform: translate(5px, 0);
 	-moz-transform: translate(5px, 0);

src/vs/base/browser/ui/actionbar/actionbar.ts

@@ -137,7 +137,7 @@ export class BaseActionItem extends EventEmitter implements IActionItem {
 
 	public onClick(event: Event): void {
 		DOM.EventHelper.stop(event, true);
-		
+
 		let context: any;
 		if (types.isUndefinedOrNull(this._context)) {
 			context = event;
@@ -388,6 +388,7 @@ export interface IActionBarOptions {
 	actionItemProvider?: IActionItemProvider;
 	actionRunner?: IActionRunner;
 	ariaLabel?: string;
+	animated?: boolean;
 }
 
 let defaultOptions: IActionBarOptions = {
@@ -440,6 +441,10 @@ export class ActionBar extends EventEmitter implements IActionRunner {
 		this.domNode = document.createElement('div');
 		this.domNode.className = 'monaco-action-bar';
 
+		if (options.animated !== false) {
+			DOM.addClass(this.domNode, 'animated');
+		}
+
 		let isVertical = this.options.orientation === ActionsOrientation.VERTICAL;
 		if (isVertical) {
 			this.domNode.className += ' vertical';

src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts

@@ -28,7 +28,7 @@ import { IExtensionsViewlet } from './extensions';
 import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
 import { CombinedInstallAction, UpdateAction } from './extensionsActions';
 
-const actionOptions = { icon: true, label: false };
+const actionOptions = { icon: true, label: true };
 
 export class ExtensionEditor extends BaseEditor {
 
@@ -85,7 +85,7 @@ export class ExtensionEditor extends BaseEditor {
 		this.description = append(details, $('.description'));
 
 		const actions = append(details, $('.actions'));
-		this.actionBar = new ActionBar(actions);
+		this.actionBar = new ActionBar(actions, { animated: false });
 
 		this.body = append(root, $('.body'));
 	}

src/vs/workbench/parts/extensions/electron-browser/extensionsActions.ts

@@ -117,7 +117,7 @@ export class InstallAction extends Action {
 	private disposables: IDisposable[] = [];
 
 	constructor(private model: ExtensionsModel, private extension: IExtension) {
-		super('extensions.install', nls.localize('installAction', "Install"), 'octicon octicon-cloud-download', false);
+		super('extensions.install', nls.localize('installAction', "Install"), 'extension-action install', false);
 
 		this.disposables.push(this.model.onChange(() => this.updateEnablement()));
 		this.updateEnablement();
@@ -177,7 +177,7 @@ export class UninstallAction extends Action {
 	private disposables: IDisposable[] = [];
 
 	constructor(private model: ExtensionsModel, private extension: IExtension) {
-		super('extensions.uninstall', nls.localize('uninstall', "Uninstall"), 'octicon octicon-x', false);
+		super('extensions.uninstall', nls.localize('uninstall', "Uninstall"), 'extension-action uninstall', false);
 
 		this.disposables.push(this.model.onChange(() => this.updateEnablement()));
 		this.updateEnablement();
@@ -194,7 +194,6 @@ export class UninstallAction extends Action {
 			return TPromise.as(null);
 		}
 
-
 		return this.model.uninstall(this.extension);
 
 		// this.enabled = false;
@@ -297,13 +296,13 @@ export class CombinedInstallAction extends Action {
 
 export class UpdateAction extends Action {
 
-	private static EnabledClass = 'extension-update-action octicon octicon-cloud-download';
+	private static EnabledClass = 'extension-action update';
 	private static DisabledClass = `${ UpdateAction.EnabledClass } disabled`;
 
 	private disposables: IDisposable[] = [];
 
 	constructor(private model: ExtensionsModel, private extension: IExtension) {
-		super('extensions.install', nls.localize('installAction', "Install"), UpdateAction.DisabledClass, false);
+		super('extensions.update', nls.localize('updateAction', "Update"), UpdateAction.DisabledClass, false);
 
 		this.disposables.push(this.model.onChange(() => this.updateEnablement()));
 		this.updateEnablement();

src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts

@@ -32,7 +32,7 @@ export class Delegate implements IDelegate<IExtension> {
 	getTemplateId() { return 'extension'; }
 }
 
-const actionOptions = { icon: true, label: false };
+const actionOptions = { icon: true, label: true };
 
 export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 
@@ -57,7 +57,7 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 		const version = append(header, $('span.version.ellipsis'));
 		const author = append(header, $('span.author.ellipsis'));
 		const description = append(details, $('.description.ellipsis'));
-		const actionbar = new ActionBar(details);
+		const actionbar = new ActionBar(details, { animated: false });
 		const disposables = [];
 
 		const result = { extension: null, element, icon, name, version, author, description, actionbar, disposables };
@@ -89,13 +89,12 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 		data.description.textContent = extension.description;
 
 		const version = new Label(data.version, this.model, extension, e => e.version);
-
 		const installAction = new CombinedInstallAction(this.model, extension);
 		const updateAction = new UpdateAction(this.model, extension);
 		data.actionbar.clear();
 		data.actionbar.push([updateAction, installAction], actionOptions);
 
-			data.disposables.push(version, installAction, updateAction);
+		data.disposables.push(version, installAction, updateAction);
 	}
 
 	disposeTemplate(data: ITemplateData): void {

src/vs/workbench/parts/extensions/electron-browser/media/extensionActions.css

@@ -3,6 +3,53 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.monaco-action-bar .action-item .icon.extension-update-action.disabled {
+.monaco-action-bar .action-item .action-label.extension-action {
+	border: 1px solid #CCC;
+	color: #6C6C6C;
+	background-color: #E2E2E2;
+	padding: 0 5px;
+	line-height: initial;
+}
+
+.monaco-action-bar .action-item:not(.disabled):hover .action-label.extension-action {
+	background-color: #D9D9D9;
+}
+
+.monaco-action-bar .action-item:not(.disabled):active .action-label.extension-action {
+	background-color: #C9C9C9;
+}
+
+.vs-dark .monaco-action-bar .action-item .action-label.extension-action {
+	border: 1px solid #545454;
+	color: #CCC;
+	background-color: #3A3A3A;
+}
+
+.vs-dark .monaco-action-bar .action-item:not(.disabled):hover .action-label.extension-action {
+	background-color: #464646;
+}
+
+.vs-dark .monaco-action-bar .action-item:not(.disabled):active .action-label.extension-action {
+	background-color: #505050;
+}
+
+.monaco-action-bar .action-item .action-label.extension-action.install,
+.monaco-action-bar .action-item .action-label.extension-action.update {
+	color: white;
+	background-color: #327e36;
+	border-color: #519A55;
+}
+
+.monaco-action-bar .action-item:not(.disabled):hover .action-label.extension-action.install,
+.monaco-action-bar .action-item:not(.disabled):hover .action-label.extension-action.update {
+	background-color: #478E4B;
+}
+
+.monaco-action-bar .action-item:not(.disabled):active .action-label.extension-action.install,
+.monaco-action-bar .action-item:not(.disabled):active .action-label.extension-action.update {
+	background-color: #6DA770;
+}
+
+.monaco-action-bar .action-item.disabled .action-label.extension-action.update {
 	display: none;
 }
\ No newline at end of file

src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css

@@ -80,6 +80,11 @@
 	padding-left: 6px;
 }
 
+.extensions-viewlet > .extensions .extension > .details > .monaco-action-bar .action-label {
+	margin-right: 0;
+	margin-left: 0.3em;
+}
+
 .extensions-viewlet > .extensions .extension .ellipsis {
 	overflow: hidden;
 	white-space: nowrap;