small fixy

src/debugger.ts

@@ -12,7 +12,6 @@ import { IDisposable } from '@phosphor/disposable';
 import { DebuggerSidebar } from './sidebar';
 
 export class Debugger extends BoxPanel {
-
   readonly model: Debugger.Model;
 
   readonly tabs = new TabPanel();
@@ -31,8 +30,6 @@ export class Debugger extends BoxPanel {
     this.addWidget(this.sidebar);
   }
 
-  
-
   dispose(): void {
     if (this.isDisposed) {
       return;

src/variables/model.ts

@@ -1,66 +1,57 @@
 import { IVariable } from './variable';
 import { Signal, ISignal } from '@phosphor/signaling';
 
-
 export interface IVariablesModel {
-    changeCurrentVariable: any;
-    getCurrentDescription(): string;
-    variable: IVariable;
-
+  variables: IVariable[];
+  changeCurrentVariable: ISignal<Model, IVariable>;
+  getCurrentDescription(): string;
+  variable: IVariable;
 }
 
-
-
 export namespace IVariablesModel {
-    export function create(model: IVariable[]) {
-        return new Model(model);
-    }
+  export function create(model: IVariable[]) {
+    return new Model(model);
+  }
 }
 
 export class Model implements IVariablesModel {
-   
-
-    constructor(model: IVariable[]) {
-        this.variables = model;
-    }
-
-    get changeCurrentVariable(): ISignal<this, IVariable>{
-        return this._chenageCurrentVariable;
-    }
-
-    get variables(): IVariable[] {
-       return this._state;
-    }
+  constructor(model: IVariable[]) {
+    this.variables = model;
+  }
 
-    set variables(variables: IVariable[]) {
-        this._state = variables;
-    }
+  get changeCurrentVariable(): ISignal<this, IVariable> {
+    return this._chenageCurrentVariable;
+  }
 
-    get variable(): IVariable {
-        return this._currentVariabile;
-    }
+  get variables(): IVariable[] {
+    return this._state;
+  }
 
-    set variable(variable: IVariable) {
-        if(this._currentVariabile === variable) {
-            return
-        }
-        this._currentVariabile = variable;
-        this._chenageCurrentVariable.emit(variable);
-    }
+  set variables(variables: IVariable[]) {
+    this._state = variables;
+  }
 
-    getCurrentVariables(): IVariable[] {
-        return this.variables;
-    }
+  get variable(): IVariable {
+    return this._currentVariabile;
+  }
 
-    getCurrentDescription(): IVariable["description"] {
-        return (this.variable)? this.variable.description:'none';
+  set variable(variable: IVariable) {
+    if (this._currentVariabile === variable) {
+      return;
     }
+    this._currentVariabile = variable;
+    this._chenageCurrentVariable.emit(variable);
+  }
 
-  
-
-    private _currentVariabile: IVariable;
-    private _state: IVariable[];
-    private _chenageCurrentVariable = new Signal<this , IVariable>(this);
+  getCurrentVariables(): IVariable[] {
+    return this.variables;
+  }
 
+  getCurrentDescription(): IVariable['description'] {
+    return this.variable ? this.variable.description : 'none';
+  }
 
+  private _currentVariabile: IVariable;
+  private _state: IVariable[];
+  private _chenageCurrentVariable = new Signal<this, IVariable>(this);
 }

src/variables/utils/index.ts

@@ -1,2 +1,2 @@
-export * from './variableTableDescription'
-export * from './variableDescription';
+export * from './variableTableDescription';
+export * from './variableDescription';

src/variables/utils/toogle/index.ts

@@ -0,0 +1 @@
+export * from './variableSearch';

src/variables/utils/toogle/variableSearch.ts

@@ -0,0 +1,7 @@
+import { Widget } from '@phosphor/widgets';
+
+export class VariablesSearch extends Widget {
+  constructor() {
+    super();
+  }
+}

src/variables/utils/variableDescription.ts

@@ -1,46 +1,45 @@
-import { Panel } from "@phosphor/widgets";
+import { Panel } from '@phosphor/widgets';
 import { VariableTableDescription } from './variableTableDescription';
 import { IVariablesModel } from '../model';
-import { IVariable } from "../variable";
-
-
+import { IVariable } from '../variable';
 
 export class VariableDescription extends Panel {
-    
-    readonly table: Panel;
-    readonly descriptionBox: Panel; 
-    model: IVariablesModel;
-    currentVariable: any;
-
-    constructor(model: IVariablesModel){
-        super();
-        this.model = model;
-        this.currentVariable = this.model.variable;
-        this.table = new VariableTableDescription(this.model);
-        this.table.addClass('debugger-variable__table');
-        this.addWidget(this.table);
-
-        this.descriptionBox = new Panel();
-        this.descriptionBox.addClass('debugger-variable__description');
-        this.addWidget(this.descriptionBox);
-        this.descriptionBox.node.innerHTML = '<b> Select Variable </b>';
-        
-        //observable change current variable
-        this.model.changeCurrentVariable.connect( (model: IVariablesModel , variable: IVariable) => {
-            console.log(variable);
-            this.descriptionBox.node.innerHTML = this.renderDescription(this.model.variable);
-        }); 
-    }
-
-
-
-    // consider 
-
-    protected renderDescription(variable : IVariable) {
-        const descriptionElementDOM = `<b>name: ${variable.name}</b>
+  readonly table: Panel;
+  readonly descriptionBox: Panel;
+  model: IVariablesModel;
+  currentVariable: any;
+
+  constructor(model: IVariablesModel) {
+    super();
+    this.model = model;
+    this.currentVariable = this.model.variable;
+    this.table = new VariableTableDescription(this.model);
+    this.table.addClass('debugger-variable__table');
+    this.addWidget(this.table);
+
+    this.descriptionBox = new Panel();
+    this.descriptionBox.addClass('debugger-variable__description');
+    this.addWidget(this.descriptionBox);
+    this.descriptionBox.node.innerHTML = '<b> Select Variable </b>';
+
+    //observable change current variable
+    this.model.changeCurrentVariable.connect(
+      (model: IVariablesModel, variable: IVariable) => {
+        console.log(variable);
+        this.descriptionBox.node.innerHTML = this.renderDescription(
+          this.model.variable
+        );
+      }
+    );
+  }
+
+  // consider
+
+  protected renderDescription(variable: IVariable) {
+    const descriptionElementDOM = `<b>name: ${variable.name}</b>
                                        <p>type: ${variable.type} </p>
                                        Description:
-                                       <p>${variable.description}</p> `
-        return descriptionElementDOM;
-    }
-}
+                                       <p>${variable.description}</p> `;
+    return descriptionElementDOM;
+  }
+}

src/variables/utils/variableTableDescription.ts

@@ -1,115 +1,114 @@
-import { h, VirtualDOM, VirtualElement } from "@phosphor/virtualdom";
+import { h, VirtualDOM, VirtualElement } from '@phosphor/virtualdom';
 import { SplitPanel } from '@phosphor/widgets';
-
-
+import { IVariablesModel } from '../model';
 
 const ROW_CLASS = 'debugger-variables_table-row';
 const SELECTED_CLASS = '-selected';
 
-
 export class VariableTableDescription extends SplitPanel {
-
-    private _model: any;
-
-    constructor(model: any) {
-        super();
-        this._model = model;
-        this.renderHead();
-        this.renderBody();
-    }
-
-    protected renderHead() {
-        const header = h.table(
-            h.tr(
-                h.td(
-                    {
-                        className: 'debugger-variables_table-head',
-                        style: {
-                            width: '25%'
-                        }
-                    }, 'Name'),
-                h.td({
-                    className: 'debugger-variables_table-head',
-                    style: {
-                        width: '75%'
-                    }
-                }, 'Value')
-            )
+  private _model: IVariablesModel;
+
+  constructor(model: IVariablesModel) {
+    super();
+    this._model = model;
+    this.renderHead();
+    this.renderBody();
+  }
+
+  //render head of table
+  protected renderHead() {
+    const header = h.table(
+      h.tr(
+        h.td(
+          {
+            className: 'debugger-variables_table-head',
+            style: {
+              width: '25%'
+            }
+          },
+          'Name'
+        ),
+        h.td(
+          {
+            className: 'debugger-variables_table-head',
+            style: {
+              width: '75%'
+            }
+          },
+          'Value'
         )
-        this.node.appendChild(VirtualDOM.realize(header));
+      )
+    );
+    this.node.appendChild(VirtualDOM.realize(header));
+  }
+
+  // render body of table
+  protected renderBody() {
+    const body = h.div(
+      h.table(
+        this.renderVariableNodes({
+          variables: this._model.variables,
+          nodes: [],
+          indent: 0
+        })
+      )
+    );
+    VirtualDOM.render(body, this.node);
+  }
+
+  protected renderVariableNodes(context: {
+    readonly variables: Array<any>;
+    readonly nodes: Array<any>;
+    readonly indent: number;
+  }) {
+    let table: VirtualElement[] = [];
+    for (const variable of context.variables) {
+      table.push(this.renderRow(variable, context.indent + 1));
     }
-
-    protected renderBody() {
-        const body = h.div(
-            h.table(
-                this.renderVariableNodes({
-                    variables: this._model.variables,
-                    nodes: [],
-                    indent: 0
-                })
-            )
-        );
-        // this.node.appendChild(VirtualDOM.realize(body));
-        VirtualDOM.render(body,this.node);
-    }
-
-
-    protected renderVariableNodes(context: {
-        readonly variables: Array<any>;
-        readonly nodes: Array<any>;
-        readonly indent: number;
-    }) {
-        let table: VirtualElement[] = [];
-        for (const variable of context.variables) {
-            table.push(this.renderRow(variable, context.indent + 1))
-        }
-        return table;
-    }
-
-
-
-    protected renderRow(variable: any, indent: number) {
-        return h.tr({
-            className: this.createVariableNodeClass(variable)  ,
-            onmousedown: (scope) => this.setCurrentVariable(variable, scope),
-            ondblclick: () => { }
+    return table;
+  }
+
+  // render One row of table
+  protected renderRow(variable: any, indent: number) {
+    return h.tr(
+      {
+        className: `${ROW_CLASS}`,
+        onmousedown: scope => this.setCurrentVariable(variable, scope),
+        ondblclick: () => {}
+      },
+      h.td(
+        {
+          className: '',
+          style: {
+            paddingLeft: `${12 * indent}px`,
+            width: `${25}%`
+          }
         },
-            h.td({
-                className: '',
-                style: {
-                    paddingLeft: `${12 * indent}px`,
-                    width: `${25}%`
-                }
-            },
-                h.span({ className: '' }),
-                variable.name
-            ),
-            h.td({
-                className: '',
-                style: {
-                    paddingLeft: `12px`,
-                    width: `${75}%`
-                }
-            }, variable.value)
-        );
-    }
-
-
-    protected createVariableNodeClass(variable: any): string {
-        return (variable === this._model.variable)? `${ROW_CLASS}${SELECTED_CLASS}`:ROW_CLASS;
-    }
-
-    protected clearClassName(rowNodes: Array<any>) {
-        rowNodes.forEach( ele => {
-            ele.className = `${ROW_CLASS}`;
-        });
-    };
-
-    protected setCurrentVariable(variable: any, scope:any) {
-        this._model.variable = variable;
-        this.clearClassName(scope.path[2].childNodes);
-        scope.path[1].className = `${ROW_CLASS}${SELECTED_CLASS}`;
-    }
-
-
-}
+        h.span({ className: '' }),
+        variable.name
+      ),
+      h.td(
+        {
+          className: '',
+          style: {
+            paddingLeft: `12px`,
+            width: `${75}%`
+          }
+        },
+        variable.value
+      )
+    );
+  }
+
+  protected clearClassName(rowNodes: Array<any>) {
+    rowNodes.forEach(ele => {
+      ele.className = `${ROW_CLASS}`;
+    });
+  }
+
+  protected setCurrentVariable(variable: any, scope: any) {
+    this._model.variable = variable;
+    this.clearClassName(scope.path[2].childNodes);
+    scope.path[1].className = `${ROW_CLASS}${SELECTED_CLASS}`;
+  }
+}