callh - better icons for calls/callers

src/vs/workbench/contrib/callHierarchy/browser/callHierarchyPeek.ts

@@ -40,25 +40,29 @@ const enum State {
 	Data = 'data'
 }
 
-class ToggleHierarchyDirectionAction extends Action {
-
-	constructor(public direction: () => CallHierarchyDirection, callback: () => void) {
-		super('toggle.dir', undefined, 'call-hierarchy-toggle', true, () => {
-			callback();
-			this._update();
+class ChangeHierarchyDirectionAction extends Action {
+
+	constructor(direction: CallHierarchyDirection, updateDirection: (direction: CallHierarchyDirection) => void) {
+		super('', undefined, '', true, () => {
+			if (direction === CallHierarchyDirection.CallsTo) {
+				direction = CallHierarchyDirection.CallsFrom;
+			} else {
+				direction = CallHierarchyDirection.CallsTo;
+			}
+			updateDirection(direction);
+			update();
 			return Promise.resolve();
 		});
-		this._update();
-	}
-
-	private _update() {
-		if (this.direction() === CallHierarchyDirection.CallsFrom) {
-			this.label = localize('toggle.from', "Calls From...");
-			this.checked = true;
-		} else {
-			this.label = localize('toggle.to', "Calls To...");
-			this.checked = false;
-		}
+		const update = () => {
+			if (direction === CallHierarchyDirection.CallsFrom) {
+				this.label = localize('toggle.from', "Showing Calls");
+				this.class = 'calls-from';
+			} else {
+				this.label = localize('toggle.to', "Showing Callers");
+				this.class = 'calls-to';
+			}
+		};
+		update();
 	}
 }
 
@@ -86,7 +90,7 @@ class LayoutInfo {
 
 export class CallHierarchyTreePeekWidget extends PeekViewWidget {
 
-	private _toggleDirection: ToggleHierarchyDirectionAction;
+	private _changeDirectionAction: ChangeHierarchyDirectionAction;
 	private _parent: HTMLElement;
 	private _message: HTMLElement;
 	private _splitView: SplitView;
@@ -363,18 +367,17 @@ export class CallHierarchyTreePeekWidget extends PeekViewWidget {
 			);
 		}
 
-		if (!this._toggleDirection) {
-			this._toggleDirection = new ToggleHierarchyDirectionAction(
-				() => this._direction,
-				() => {
-					let newDirection = this._direction === CallHierarchyDirection.CallsFrom ? CallHierarchyDirection.CallsTo : CallHierarchyDirection.CallsFrom;
+		if (!this._changeDirectionAction) {
+			const changeDirection = (newDirection: CallHierarchyDirection) => {
+				if (this._direction !== newDirection) {
 					this._treeViewStates.set(this._direction, this._tree.getViewState());
 					this._direction = newDirection;
 					this.showItem(item);
 				}
-			);
-			this._actionbarWidget.push(this._toggleDirection, { label: false, icon: true });
-			this._disposables.push(this._toggleDirection);
+			};
+			this._changeDirectionAction = new ChangeHierarchyDirectionAction(this._direction, changeDirection);
+			this._disposables.push(this._changeDirectionAction);
+			this._actionbarWidget.push(this._changeDirectionAction, { icon: true, label: false });
 		}
 	}
 

src/vs/workbench/contrib/callHierarchy/browser/media/CallerOrCalleeView_16x.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><style type="text/css">.icon-canvas-transparent{opacity:0;fill:#F6F6F6;} .icon-vs-out{fill:#F6F6F6;} .icon-vs-bg{fill:#424242;} .icon-vs-action-blue{fill:#00539C;}</style><path class="icon-canvas-transparent" d="M16 16h-16v-16h16v16z" id="canvas"/><path class="icon-vs-out" d="M15.989 8l-2 2h2v4h-2l2 2h-6l-3.989-3.989v2.287l-.497.289c-.464.27-.983.413-1.503.413-1.654 0-3-1.346-3-3v-6c0-1.654 1.346-3 3-3 .52 0 1.039.143 1.503.413l.497.289v4.298h-2v2h2v1.989l3.989-3.989h-3l2-2h-2v-4h2l-2-2h6l3 3 .011 1.989-3.011 3.011h3z" id="outline"/><path class="icon-vs-bg" d="M4 4c.366 0 .705.105 1 .277v2.723h-2v4h2v2.723c-.295.171-.634.277-1 .277-1.104 0-2-.896-2-2v-6c0-1.104.896-2 2-2z" id="iconBg"/><path class="icon-vs-action-blue" d="M11.989 1h-2l2 2h-4v2h4l-2 2h2l3-3-3-3zm-4 11l3 3h2l-2-2h4v-2h-4l2-2h-2l-3 3z" id="colorAction"/></svg>
\ No newline at end of file

src/vs/workbench/contrib/callHierarchy/browser/media/CallerOrCalleeView_16x_dark.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><style>.icon-canvas-transparent{opacity:0;fill:#f6f6f6}.icon-vs-out{fill:#f6f6f6}.icon-vs-bg{fill:#424242}.icon-vs-action-blue{fill:#00539c}</style><path class="icon-canvas-transparent" d="M16 16H0V0h16v16z" id="canvas"/><path class="icon-vs-out" d="M15.989 8l-2 2h2v4h-2l2 2h-6L6 12.011v2.287l-.497.289C5.039 14.857 4.52 15 4 15c-1.654 0-3-1.346-3-3V6c0-1.654 1.346-3 3-3 .52 0 1.039.143 1.503.413L6 3.702V8H4v2h2v1.989L9.989 8h-3l2-2h-2V2h2l-2-2h6l3 3L16 4.989 12.989 8h3z" id="outline"/><path class="icon-vs-bg" d="M4 4c.366 0 .705.105 1 .277V7H3v4h2v2.723A1.987 1.987 0 0 1 4 14a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" id="iconBg"/><path class="icon-vs-action-blue" d="M11.989 1h-2l2 2h-4v2h4l-2 2h2l3-3-3-3zm-4 11l3 3h2l-2-2h4v-2h-4l2-2h-2l-3 3z" id="colorAction"/></svg>
\ No newline at end of file

src/vs/workbench/contrib/callHierarchy/browser/media/callHierarchy.css

@@ -18,16 +18,18 @@
 	padding-top: 3em;
 }
 
-.monaco-workbench .call-hierarchy-toggle {
-	background-image: url(CallerOrCalleeView_16x.svg);
+.monaco-workbench .action-label.calls-to {
+	background-image: url(files_CallTo_CallTo_16x.svg);
 	background-size: 14px 14px;
 	background-repeat: no-repeat;
 	background-position: left center;
 }
 
-.vs-dark .monaco-workbench .call-hierarchy-toggle,
-.hc-dark .monaco-workbench .call-hierarchy-toggle {
-	background-image: url(CallerOrCalleeView_16x_dark.svg);
+.monaco-workbench .action-label.calls-from {
+	background-image: url(files_CallFrom_CallFrom_16x.svg);
+	background-size: 14px 14px;
+	background-repeat: no-repeat;
+	background-position: left center;
 }
 
 .monaco-workbench .call-hierarchy .monaco-split-view2.horizontal > .split-view-container > .split-view-view{

src/vs/workbench/contrib/callHierarchy/browser/media/files_CallFrom_CallFrom_16x.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><style>.icon-canvas-transparent{opacity:0;fill:#f6f6f6}.icon-vs-out{fill:#f6f6f6}.icon-vs-bg{fill:#424242}</style><path class="icon-canvas-transparent" d="M16 16H0V0h16v16z" id="canvas"/><path class="icon-vs-out" d="M12 6v4h2v4.987l-.398.3A3.46 3.46 0 0 1 11.5 16C9.57 16 8 14.43 8 12.5V9.006H6.344l1.318 1.322-2.119 2.119L1 7.92v-.798l4.55-4.55 2.12 2.12-1.309 1.313H8V3.5C8 1.57 9.57 0 11.5 0a3.46 3.46 0 0 1 2.102.713l.398.3V6h-2z" id="outline"/><path class="icon-vs-bg" d="M11 10.051V11h2v3.489a2.476 2.476 0 0 1-1.5.511A2.5 2.5 0 0 1 9 12.5v-9A2.5 2.5 0 0 1 11.5 1c.565 0 1.081.194 1.5.511V5h-2v5.051zM6.257 4.693l-.707-.707L2.016 7.52l3.526 3.514.707-.707-2.314-2.322h4.12v-1H3.953l2.304-2.312z" id="iconBg"/></svg>
\ No newline at end of file

src/vs/workbench/contrib/callHierarchy/browser/media/files_CallTo_CallTo_16x.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><style>.icon-canvas-transparent{opacity:0;fill:#f6f6f6}.icon-vs-out{fill:#f6f6f6}.icon-vs-bg{fill:#424242}</style><path class="icon-canvas-transparent" d="M16 16H0V0h16v16z" id="canvas"/><path class="icon-vs-out" d="M3.727 9.006H1.016v-3h2.693L2.4 4.692l2.12-2.12L8 6.052V3.5C8 1.57 9.57 0 11.5 0c.758 0 1.485.247 2.103.713l.362.273v14.028l-.362.273A3.465 3.465 0 0 1 11.5 16C9.57 16 8 14.43 8 12.5V8.986l-3.473 3.461-2.119-2.119 1.319-1.322z" id="outline"/><path class="icon-vs-bg" d="M11 10.051V11h2v3.489a2.476 2.476 0 0 1-1.5.511A2.5 2.5 0 0 1 9 12.5v-9A2.5 2.5 0 0 1 11.5 1c.565 0 1.081.194 1.5.511V5h-2v5.051zM3.813 4.693l2.305 2.312H2.016v1h4.12l-2.314 2.322.707.707L8.055 7.52 4.52 3.986l-.707.707z" id="iconBg"/></svg>
\ No newline at end of file