Ui improvements

apps/remix-ide/src/app/tabs/debugger/debuggerUI.js

@@ -22,10 +22,6 @@ var css = csjs`
   .statusMessage {
     margin-left: 15px;
   }
-  .innerShift {
-    padding: 2px;
-    margin-left: 10px;
-  }
 `
 
 class DebuggerUI {
@@ -185,16 +181,16 @@ class DebuggerUI {
   }
 
   render () {
-    this.debuggerPanelsView = yo`<div class="${css.innerShift}"></div>`
-    this.debuggerHeadPanelsView = yo`<div class="${css.innerShift}"></div>`
-    this.stepManagerView = yo`<div class="${css.innerShift}"></div>`
+    this.debuggerPanelsView = yo`<div class="px-2"></div>`
+    this.debuggerHeadPanelsView = yo`<div class="px-2"></div>`
+    this.stepManagerView = yo`<div class="px-2"></div>`
 
     var view = yo`
       <div>
-        <div class="${css.innerShift}">
+        <div class="px-2">
           ${this.txBrowser.render()}
-          ${this.debuggerHeadPanelsView}
           ${this.stepManagerView}
+          ${this.debuggerHeadPanelsView}
         </div>
         <div class="${css.statusMessage}">${this.statusMessage}</div>
         ${this.debuggerPanelsView}

apps/remix-ide/src/app/tabs/debugger/debuggerUI/ButtonNavigator.js

@@ -45,14 +45,14 @@ function ButtonNavigator () {
 ButtonNavigator.prototype.render = function () {
   var self = this
   var view = yo`<div class="${css.buttons}">
-    <div class="${css.stepButtons} btn-group p-1">
+    <div class="${css.stepButtons} btn-group py-1">
       <button id='overback' class='btn btn-primary btn-sm ${css.navigator} ${css.stepButton} fas fa-reply' title='Step over back' onclick=${function () { self.event.trigger('stepOverBack') }} disabled=${this.overBackDisabled} ></button>
       <button id='intoback' data-id="buttonNavigatorIntoBack" class='btn btn-primary btn-sm ${css.navigator} ${css.stepButton} fas fa-level-up-alt' title='Step back' onclick=${function () { self.event.trigger('stepIntoBack') }} disabled=${this.intoBackDisabled} ></button>
       <button id='intoforward' data-id="buttonNavigatorIntoForward" class='btn btn-primary btn-sm ${css.navigator} ${css.stepButton} fas fa-level-down-alt' title='Step into' onclick=${function () { self.event.trigger('stepIntoForward') }} disabled=${this.intoForwardDisabled} ></button>
       <button id='overforward' class='btn btn-primary btn-sm ${css.navigator} ${css.stepButton} fas fa-share' title='Step over forward'onclick=${function () { self.event.trigger('stepOverForward') }} disabled=${this.overForwardDisabled} ></button>
     </div>
 
-    <div class="${css.jumpButtons} btn-group p-1">
+    <div class="${css.jumpButtons} btn-group py-1">
       <button class='btn btn-primary btn-sm ${css.navigator} ${css.jumpButton} fas fa-step-backward'  id='jumppreviousbreakpoint' data-id="buttonNavigatorJumpPreviousBreakpoint" title='Jump to the previous breakpoint' onclick=${function () { self.event.trigger('jumpPreviousBreakpoint') }} disabled=${this.jumpPreviousBreakpointDisabled} ></button>
       <button class='btn btn-primary btn-sm ${css.navigator} ${css.jumpButton} fas fa-eject' id='jumpout' title='Jump out' onclick=${function () { self.event.trigger('jumpOut') }} disabled=${this.jumpOutDisabled} ></button>
       <button class='btn btn-primary btn-sm ${css.navigator} ${css.jumpButton} fas fa-step-forward' id='jumpnextbreakpoint' data-id="buttonNavigatorJumpNextBreakpoint" title='Jump to the next breakpoint' onclick=${function () { self.event.trigger('jumpNextBreakpoint') }} disabled=${this.jumpNextBreakpointDisabled} ></button>

apps/remix-ide/src/app/tabs/debugger/debuggerUI/Slider.js

@@ -43,7 +43,7 @@ class Slider {
   render () {
     var self = this
     var view = yo`<div>
-        <input id='slider' data-id="slider" style='width: 100%' type='range' min=0 max=${this.max} value=0
+        <input id='slider' data-id="slider" class='w-100 my-2' type='range' min=0 max=${this.max} value=0
           onchange=${function () { self.onChange() }} oninput=${function () { self.onChange() }} disabled=${this.disabled} />
       </div>`
     if (!this.view) {

apps/remix-ide/src/app/tabs/debugger/debuggerUI/StepManager.js

@@ -49,7 +49,8 @@ StepManager.prototype.remove = function () {
 }
 
 StepManager.prototype.render = function () {
-  return yo`<div>
+  return yo`
+    <div class="py-1">
       ${this.slider.render()}
       ${this.buttonNavigator.render()}
     </div>`

apps/remix-ide/src/app/tabs/debugger/debuggerUI/TxBrowser.js

@@ -11,11 +11,6 @@ var css = csjs`
     display: flex;
     flex-direction: column;
   }
-  .txinputs {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-  }
   .txinput {
     width: inherit;
     font-size: small;
@@ -23,16 +18,9 @@ var css = csjs`
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  .txbuttons {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-  }
   .txbutton {
     width: inherit;
   }
-  .txbuttonstart {
-  }
   .txbutton:hover {
   }
   .vmargin {
@@ -110,10 +98,10 @@ TxBrowser.prototype.render = function () {
   var view = yo`
     <div class="${css.container}">
       <div class="${css.txContainer}">
-        <div class="${css.txinputs} p-1 input-group">
+        <div class=" py-1 d-flex justify-content-center w-100 input-group">
           ${this.state.txNumberInput}
         </div>
-        <div class="${css.txbuttons} btn-group p-1">
+        <div class="d-flex justify-content-center w-100 btn-group py-1">
           ${txButton}
         </div>
       </div>

apps/remix-ide/src/app/tabs/debugger/debuggerUI/VmDebugger.js

@@ -15,15 +15,6 @@ var SolidityLocals = require('./vmDebugger/SolidityLocals')
 var FullStoragesChangesPanel = require('./vmDebugger/FullStoragesChanges')
 var DropdownPanel = require('./vmDebugger/DropdownPanel')
 
-var css = csjs`
-  .stepDetail {
-    line-height: 20%;
-  }
-  .vmheadView {
-    margin-top:10px;
-  }
-`
-
 function VmDebugger (vmDebuggerLogic) {
   var self = this
   this.view
@@ -135,18 +126,19 @@ function VmDebugger (vmDebuggerLogic) {
 
 VmDebugger.prototype.renderHead = function () {
   this.solidityPanel = yo`
-    <div class="${css.solidityPanel} column w-100" hidden>
+    <div class="column w-100" hidden>
       ${this.functionPanel.render()}
       ${this.solidityLocals.render()}
       ${this.solidityState.render()}
     </div>
   `
+  // style here is a temprorary solution. Ui should be refactored
   const headView = yo`
-    <div id="vmheadView" class="${css.vmheadView} container">
-      <div class="row" >
+    <div id="vmheadView" class="mt-1 pr-1" style="padding-left: 7px;">
+      <div class="row px-1">
         ${this.solidityPanel}
         <div class="column w-100">${this.asmCode.render()}</div>
-        <div class="${css.stepDetail} column w-100">${this.stepDetail.render()}</div>
+        <div class="column w-100">${this.stepDetail.render()}</div>
       </div>
     </div>
   `
@@ -163,7 +155,7 @@ VmDebugger.prototype.remove = function () {
 
 VmDebugger.prototype.render = function () {
   const view = yo`
-    <div id="vmdebugger" class="pl-2">
+    <div id="vmdebugger" class="pl-1">
       <div>
         ${this.stackPanel.render()}
         ${this.memoryPanel.render()}

apps/remix-ide/src/app/tabs/debugger/debuggerUI/styles/basicStyles.js

@@ -9,14 +9,6 @@ module.exports = {
   font: {
     'font-family': 'arial,sans-serif'
   },
-  innerShift: {
-    'padding': '2px',
-    'margin-left': '10px'
-  },
-  container: {
-    'margin': '10px',
-    'padding': '5px'
-  },
   statusMessage: {
     'margin-left': '15px'
   },

apps/remix-ide/src/app/tabs/debugger/debuggerUI/vmDebugger/CodeListView.js

@@ -8,7 +8,7 @@ var csjs = require('csjs-inject')
 var css = csjs`
   .instructions {
     overflow-y: scroll;
-    max-height: 100px;
+    max-height: 130px;
   }
 `
 function CodeListView () {
@@ -69,7 +69,7 @@ CodeListView.prototype.renderAssemblyItems = function () {
     var codeView = this.code.map(function (item, i) {
       return yo`<div key=${i} value=${i}><span>${item}</span></div>`
     })
-    return yo`<div class=${css.instructions} id='asmitems' ref='itemsList'>
+    return yo`<div class="pl-3 my-2 small ${css.instructions}" id='asmitems' ref='itemsList'>
       ${codeView}
     </div>`
   }

apps/remix-ide/src/app/tabs/debugger/debuggerUI/vmDebugger/DropdownPanel.js

@@ -87,7 +87,7 @@ DropdownPanel.prototype.update = function (_data, _header) {
   this.view.querySelector('.dropdownpanel .dropdowncontent').style.display = 'block'
   this.view.querySelector('.dropdownpanel .dropdownrawcontent').innerText = JSON.stringify(_data, null, '\t')
   if (!this.displayContentOnly) {
-    this.view.querySelector('.title div.btn').style.display = 'block'
+    this.view.querySelector('.title div.btn-sm').style.display = 'block'
     this.view.querySelector('.title span').innerText = _header || ' '
   }
   this.message('')
@@ -108,13 +108,14 @@ DropdownPanel.prototype.render = function (overridestyle, node) {
   }
   overridestyle === undefined ? {} : overridestyle
   var self = this
-  var title = !self.displayContentOnly ? yo`<div class="${css.title} title">
+  var title = !self.displayContentOnly ? yo`<div class="${css.title} py-0 px-1 title">
       <div class="${css.icon} fas fa-caret-right" onclick=${function () { self.toggle() }} ></div>
       <div class="${css.name}" onclick=${function () { self.toggle() }} >${this.name}</div><span class="${css.nameDetail}" onclick=${function () { self.toggle() }} ></span>
-      <div onclick=${function () { self.copyClipboard() }} title='raw' class="${css.eyeButton} btn far fa-clipboard"></div>
+      <div onclick=${function () { self.copyClipboard() }} title='raw' class="${css.eyeButton} btn-sm far fa-clipboard"></div>
     </div>` : yo`<div></div>`
 
-  var contentNode = yo`<div class='dropdownpanel ${css.dropdownpanel}' style='display:none'>
+  var contentNode = yo`
+    <div class='dropdownpanel ${css.dropdownpanel}' style='display:none'>
       <i class="${css.refresh} fas fa-sync" aria-hidden="true"></i>
       <div class='dropdowncontent'>${node || content}</div>
       <div class='dropdownrawcontent' style='display:none'></div>

apps/remix-ide/src/app/ui/TreeView.js

@@ -9,7 +9,6 @@ var css = csjs`
     -webkit-margin-start: 0px;
     -webkit-margin-end: 0px;
     -webkit-padding-start: 0px;
-    margin-left: 10px;
   }
   .ul_tv {
     list-style-type: none;
@@ -75,7 +74,7 @@ class TreeView {
     var children = Object.keys(json).map((innerkey) => {
       return this.renderObject(json[innerkey], json, innerkey, expand, innerkey)
     })
-    return yo`<ul key=${key} data-id="treeViewUl${key}" class="${css.ul_tv}">${children}</ul>`
+    return yo`<ul key=${key} data-id="treeViewUl${key}" class="${css.ul_tv} px-2">${children}</ul>`
   }
 
   formatData (key, data, children, expand, keyPath) {