change style names

src/variables/utils/variableDescription.ts

@@ -14,11 +14,11 @@ export class VariableDescription extends Panel {
     this.model = model;
     this.currentVariable = this.model.variable;
     this.table = new VariableTableDescription(this.model);
-    this.table.addClass('debugger-variable__table');
+    this.table.addClass('jp-DebuggerSidebarVariable-table');
     this.addWidget(this.table);
 
     this.descriptionBox = new Panel();
-    this.descriptionBox.addClass('debugger-variable__description');
+    this.descriptionBox.addClass('jp-DebuggerSidebarVariable-description');
     this.addWidget(this.descriptionBox);
     this.descriptionBox.node.innerHTML = '<b> Select Variable </b>';
 

src/variables/utils/variableTableDescription.ts

@@ -2,7 +2,7 @@ import { h, VirtualDOM, VirtualElement } from '@phosphor/virtualdom';
 import { SplitPanel } from '@phosphor/widgets';
 import { IVariablesModel } from '../model';
 
-const ROW_CLASS = 'debugger-variables_table-row';
+const ROW_CLASS = 'jp-DebuggerSidebarVariables-table-row';
 const SELECTED_CLASS = '-selected';
 
 export class VariableTableDescription extends SplitPanel {
@@ -21,7 +21,7 @@ export class VariableTableDescription extends SplitPanel {
       h.tr(
         h.td(
           {
-            className: 'debugger-variables_table-head',
+            className: 'jp-DebuggerSidebarVariables-header',
             style: {
               width: '25%'
             }
@@ -30,7 +30,7 @@ export class VariableTableDescription extends SplitPanel {
         ),
         h.td(
           {
-            className: 'debugger-variables_table-head',
+            className: 'jp-DebuggerSidebarVariables-header',
             style: {
               width: '75%'
             }

src/variables/widget.ts

@@ -1,63 +1,55 @@
-import { Panel } from "@phosphor/widgets";
+import { Panel } from '@phosphor/widgets';
 import { IVariablesModel } from './model';
 import { VariableDescription } from './utils';
 
-
 const MOCK_DATA_ROW = {
-    variables: [
-        {
-            name: 'test 1',
-            value: 'function()',
-            type:'function',
-            description:'def test1(): return 0'
-        },
-        {
-            name: 'test 2',
-            value: 'function()',
-            type:'function',
-            description:'def test2(): return 0'
-        }
-    ]
-}
-
-
-export class VariablesWidget extends Panel {
-    
-    readonly model: IVariablesModel;
-
-    readonly header: Panel;
-    readonly label: Panel;
-    readonly body: Panel;
-    readonly variableDescription: Panel;
-
-
-    readonly model_header = {
-        label:'Variables',
-        class:'debugger-variables__header'
-    };
-
-    constructor(){
-        super();
-
-        this.model = IVariablesModel.create(MOCK_DATA_ROW.variables);
-
-
-        // header
-        this.header = new Panel();
-        this.header.addClass(this.model_header.class);
-        this.addWidget(this.header);
-
-        this.label = new Panel();
-        this.label.node.textContent = this.model_header.label;
-        this.label.addClass(this.model_header.class+'-label');
-        this.header.addWidget(this.label);
-
-        //body
-        this.variableDescription = new VariableDescription(this.model);
-        this.variableDescription.addClass('debugger-variables__body')
-        this.addWidget(this.variableDescription);
-
+  variables: [
+    {
+      name: 'test 1',
+      value: 'function()',
+      type: 'function',
+      description: 'def test1(): return 0'
+    },
+    {
+      name: 'test 2',
+      value: 'function()',
+      type: 'function',
+      description: 'def test2(): return 0'
     }
+  ]
+};
 
-
-}
+export class VariablesWidget extends Panel {
+  readonly model: IVariablesModel;
+
+  readonly header: Panel;
+  readonly label: Panel;
+  readonly body: Panel;
+  readonly variableDescription: Panel;
+
+  readonly model_header = {
+    label: 'Variables',
+    class: 'jp-DebuggerSidebarVariables-header'
+  };
+
+  constructor() {
+    super();
+
+    this.model = IVariablesModel.create(MOCK_DATA_ROW.variables);
+
+    // header
+    this.header = new Panel();
+    this.header.addClass(this.model_header.class);
+    this.addWidget(this.header);
+
+    this.label = new Panel();
+    this.label.node.textContent = this.model_header.label;
+    this.label.addClass(this.model_header.class + '-label');
+    this.header.addWidget(this.label);
+
+    //body
+    this.variableDescription = new VariableDescription(this.model);
+    this.variableDescription.addClass('jp-DebuggerSidebarVariables-body');
+    this.addWidget(this.variableDescription);
+  }
+}

style/index.css

@@ -9,7 +9,6 @@
   bottom: 0;
 }
 
-
 .jp-DebuggerSidebar {
   display: flex;
   flex-direction: column;
@@ -19,15 +18,12 @@
   min-width: 350px !important;
 }
 
-
-
-
-.jp-DebuggerSidebar  div:not(:first-child) .debugger-variables__header{
+.jp-DebuggerSidebar div:not(:first-child) .jp-DebuggerSidebarVariables-header {
   border-bottom: solid var(--jp-border-width) var(--jp-border-color1);
   border-top: solid var(--jp-border-width) var(--jp-border-color1);
 }
 
-.debugger-variables__header {
+.jp-DebuggerSidebarVariables-header {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -35,7 +31,7 @@
   height: 24px;
 }
 
-.debugger-variables__header-label {
+.jp-DebuggerSidebarVariables-header-label {
   text-transform: uppercase;
   font-weight: 600;
   font-size: var(--jp-ui-font-size0);
@@ -44,8 +40,7 @@
   padding-right: 4px;
 }
 
-
-.debugger-variables__body {
+.jp-DebuggerSidebarVariables-body {
   border-bottom: solid var(--jp-border-width) var(--jp-border-color2);
   min-height: 24px;
   height: 99%;
@@ -53,18 +48,17 @@
   flex-direction: column;
 }
 
-
-.debugger-variable__table {
+.jp-DebuggerSidebarVariable-table {
   min-height: 50px;
   flex-basis: 30%;
 }
 
-.debugger-variable__table table {
+.jp-DebuggerSidebarVariable-table table {
   width: 100%;
   border-collapse: collapse;
 }
 
-.debugger-variable__table .debugger-variables_table-head {
+.jp-DebuggerSidebarVariable-table .jp-DebuggerSidebarVariables-table-head {
   margin-bottom: 4px;
   border-top: var(--jp-border-width) solid var(--jp-border-color2);
   border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
@@ -74,28 +68,28 @@
   text-align: left;
 }
 
-.debugger-variables_table-head:hover , .debugger-variables_table-row:hover {
+.jp-DebuggerSidebarVariables-table-head:hover,
+.jp-DebuggerSidebarVariables-table-row:hover {
   background: var(--jp-layout-color2);
 }
 
-.debugger-variables_table-row-selected {
+.jp-DebuggerSidebarVariables-table-row-selected {
   color: white;
   background: var(--jp-brand-color1);
 }
 
-.debugger-variables_table-head + .debugger-variables_table-head {
+.jp-DebuggerSidebarVariables-table-head
+  + .jp-DebuggerSidebarVariables-table-head {
   border-left: var(--jp-border-width) solid var(--jp-border-color2);
 }
 
-
-
-.debugger-variable__description {
+.jp-DebuggerSidebarVariable-description {
   border-top: var(--jp-border-width) solid var(--jp-border-color2);
   min-height: 25px;
   padding: 10px;
 }
 
-.debugger-variable__description p {
+.jp-DebuggerSidebarVariable-description p {
   margin-top: 1rem;
   margin-bottom: 1rem;
-}
+}