Variable Explorer UI cleanup (microsoft#5379)

* variable explorer UI feedback fixes * add new entry * review feedback

Author: IanMatthewHuff

news/1 Enhancements/5274.md

@@ -0,0 +1 @@
+Variable explorer UI fixes via PM / designer

package.nls.json

@@ -222,7 +222,7 @@
  "DataScience.variableExplorerTypeColumn": "Type",
  "DataScience.variableExplorerSizeColumn": "Count",
  "DataScience.variableExplorerValueColumn": "Value",
- "DataScience.showDataExplorerTooltip": "Show variable in data explorer.",
+ "DataScience.showDataExplorerTooltip": "Show variable in data viewer.",
  "DataScience.dataExplorerInvalidVariableFormat": "'{0}' is not an active variable.",
  "DataScience.jupyterGetVariablesExecutionError": "Failure during variable extraction:\r\n{0}",
  "DataScience.loadingMessage": "loading ...",

src/client/common/application/types.ts

@@ -879,6 +879,7 @@ export type WebPanelMessage = {
 // Wraps the VS Code webview panel
 export const IWebPanel = Symbol('IWebPanel');
 export interface IWebPanel {
+ title: string;
  /**
  * Makes the webpanel show up.
  * @return A Promise that can be waited on

src/client/common/application/webPanel.ts

@@ -72,6 +72,16 @@ export class WebPanel implements IWebPanel {
  }
  }
 
+ public get title(): string {
+ return this.panel ? this.panel.title : '';
+ }
+
+ public set title(newTitle: string) {
+ if (this.panel) {
+ this.panel.title = newTitle;
+ }
+ }
+
  // tslint:disable-next-line:no-any
  private async load(mainScriptPath: string, embeddedCss?: string, settings?: any) {
  if (this.panel) {

src/client/datascience/data-viewing/dataViewer.ts

@@ -51,6 +51,15 @@ export class DataViewer extends WebViewHost<IDataViewerMapping> implements IData
  // Fill in our variable's beginning data
  this.variable = await this.prepVariable(variable);
 
+ // Create our new title with the variable name
+ let newTitle = `${localize.DataScience.dataExplorerTitle()} - ${variable.name}`;
+ const TRIM_LENGTH = 40;
+ if (newTitle.length > TRIM_LENGTH) {
+ newTitle = `${newTitle.substr(0, TRIM_LENGTH)}...`;
+ }
+
+ super.setTitle(newTitle);
+
  // Then show our web panel. Eventually we need to consume the data
  await super.show(true);
 

src/client/datascience/webViewHost.ts

@@ -87,6 +87,12 @@ export class WebViewHost<IMapping> implements IDisposable {
  }
  }
 
+ public setTitle(newTitle: string) {
+ if (!this.isDisposed && this.webPanel) {
+ this.webPanel.title = newTitle;
+ }
+ }
+
  //tslint:disable-next-line:no-any
  protected onMessage(message: string, payload: any) {
  switch (message) {

src/datascience-ui/history-react/image.tsx

@@ -15,6 +15,7 @@ export enum ImageName {
  ExpandAll,
  GoToSourceCode,
  Interrupt,
+ OpenInNewWindow,
  PopIn,
  PopOut,
  Redo,
@@ -51,6 +52,11 @@ const images: { [key: string] : { light: string; dark: string } } = {
  light: require('./images/Interrupt/Interrupt_16x_vscode.svg'),
  dark : require('./images/Interrupt/Interrupt_16x_vscode_dark.svg')
  },
+ OpenInNewWindow:
+ {
+ light: require('./images/OpenInNewWindow/OpenInNewWindow_16x_vscode.svg'),
+ dark : require('./images/OpenInNewWindow/OpenInNewWindow_16x_vscode_dark.svg')
+ },
  PopIn:
  {
  light: require('./images/PopIn/PopIn_16x_vscode.svg'),

src/datascience-ui/history-react/images/OpenInNewWindow/OpenInNewWindow_16x_vscode.svg

@@ -2,3 +2,7 @@
  margin: 5px;
  background-color: var(--vscode-editor-background);
 }
+
+#variable-explorer-data-grid {
+ margin: 4px;
+}