mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

bootstrap_debugger

Browse Source
pull/3094/head
yann300 6 years ago
parent 009f3aedcf
commit 3485584d44
5 changed files with 21 additions and 48 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 26
      src/app/debugger/debuggerUI/ButtonNavigator.js
  2. 18
      src/app/debugger/debuggerUI/TxBrowser.js
  3. 10
      src/app/debugger/debuggerUI/VmDebugger.js
  4. 4
      src/app/debugger/debuggerUI/vmDebugger/CodeListView.js
  5. 11
      src/app/debugger/debuggerUI/vmDebugger/DropdownPanel.js

26
src/app/debugger/debuggerUI/ButtonNavigator.js
Unescape View File

@ -3,8 +3,6 @@ var EventManager = require('../../../lib/events')
var yo = require('yo-yo')
var csjs = require('csjs-inject')
var styleGuide = require('../../ui/styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs`
.buttons {
@ -17,7 +15,6 @@ var css = csjs`
justify-content: center;
}
.stepButton {
${styles.rightPanel.debuggerTab.button_Debugger}
}
.jumpButtons {
width: 100%;
@ -25,13 +22,10 @@ var css = csjs`
justify-content: center;
}
.jumpButton {
${styles.rightPanel.debuggerTab.button_Debugger}
}
.navigator {
color: ${styles.rightPanel.debuggerTab.text_Primary};
}
.navigator:hover {
color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
}
`
@ -51,20 +45,20 @@ function ButtonNavigator () {
ButtonNavigator.prototype.render = function () {
var self = this
var view = yo`<div class="${css.buttons}">
<div class="${css.stepButtons}">
<button id='overback' title='Step over back' class='${css.navigator} ${css.stepButton} fa fa-reply' onclick=${function () { self.event.trigger('stepOverBack') }} disabled=${this.overBackDisabled} ></button>
<button id='intoback' title='Step back' class='${css.navigator} ${css.stepButton} fa fa-level-up' onclick=${function () { self.event.trigger('stepIntoBack') }} disabled=${this.intoBackDisabled} ></button>
<button id='intoforward' title='Step into' class='${css.navigator} ${css.stepButton} fa fa-level-down' onclick=${function () { self.event.trigger('stepIntoForward') }} disabled=${this.intoForwardDisabled} ></button>
<button id='overforward' title='Step over forward' class='${css.navigator} ${css.stepButton} fa fa-share' onclick=${function () { self.event.trigger('stepOverForward') }} disabled=${this.overForwardDisabled} ></button>
<div class="${css.stepButtons} btn-group p-1">
<button id='overback' class='btn btn-primary btn-sm' title='Step over back' class='${css.navigator} ${css.stepButton} fa fa-reply' onclick=${function () { self.event.trigger('stepOverBack') }} disabled=${this.overBackDisabled} ></button>
<button id='intoback' class='btn btn-primary btn-sm' title='Step back' class='${css.navigator} ${css.stepButton} fa fa-level-up' onclick=${function () { self.event.trigger('stepIntoBack') }} disabled=${this.intoBackDisabled} ></button>
<button id='intoforward' class='btn btn-primary btn-sm' title='Step into' class='${css.navigator} ${css.stepButton} fa fa-level-down' onclick=${function () { self.event.trigger('stepIntoForward') }} disabled=${this.intoForwardDisabled} ></button>
<button id='overforward' class='btn btn-primary btn-sm' title='Step over forward' class='${css.navigator} ${css.stepButton} fa fa-share' onclick=${function () { self.event.trigger('stepOverForward') }} disabled=${this.overForwardDisabled} ></button>
</div>
<div class="${css.jumpButtons}">
<button id='jumppreviousbreakpoint' title='Jump to the previous breakpoint' class='${css.navigator} ${css.jumpButton} fa fa-step-backward' onclick=${function () { self.event.trigger('jumpPreviousBreakpoint') }} disabled=${this.jumpPreviousBreakpointDisabled} ></button>
<button id='jumpout' title='Jump out' class='${css.navigator} ${css.jumpButton} fa fa-eject' onclick=${function () { self.event.trigger('jumpOut') }} disabled=${this.jumpOutDisabled} ></button>
<button id='jumpnextbreakpoint' title='Jump to the next breakpoint' class='${css.navigator} ${css.jumpButton} fa fa-step-forward' onclick=${function () { self.event.trigger('jumpNextBreakpoint') }} disabled=${this.jumpNextBreakpointDisabled} ></button>
<div class="${css.jumpButtons} btn-group p-1">
<button class='btn btn-primary btn-sm' id='jumppreviousbreakpoint' title='Jump to the previous breakpoint' class='${css.navigator} ${css.jumpButton} fa fa-step-backward' onclick=${function () { self.event.trigger('jumpPreviousBreakpoint') }} disabled=${this.jumpPreviousBreakpointDisabled} ></button>
<button class='btn btn-primary btn-sm' id='jumpout' title='Jump out' class='${css.navigator} ${css.jumpButton} fa fa-eject' onclick=${function () { self.event.trigger('jumpOut') }} disabled=${this.jumpOutDisabled} ></button>
<button class='btn btn-primary btn-sm' id='jumpnextbreakpoint' title='Jump to the next breakpoint' class='${css.navigator} ${css.jumpButton} fa fa-step-forward' onclick=${function () { self.event.trigger('jumpNextBreakpoint') }} disabled=${this.jumpNextBreakpointDisabled} ></button>
</div>
<div id='reverted' style="display:none">
<button id='jumptoexception' title='Jump to exception' class='${css.navigator} ${css.button} fa fa-exclamation-triangle' onclick=${function () { self.event.trigger('jumpToException') }} disabled=${this.jumpOutDisabled} >
<button class='btn btn-danger btn-sm' id='jumptoexception' title='Jump to exception' class='${css.navigator} ${css.button} fa fa-exclamation-triangle' onclick=${function () { self.event.trigger('jumpToException') }} disabled=${this.jumpOutDisabled} >
</button>
<span>State changes made during this call will be reverted.</span>
<span id='outofgas' style="display:none">This call will run out of gas.</span>

18
src/app/debugger/debuggerUI/TxBrowser.js
Unescape View File

@ -1,8 +1,6 @@
var EventManager = require('../../../lib/events')
var yo = require('yo-yo')
var csjs = require('csjs-inject')
var styleGuide = require('../../ui/styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs`
.container {
@ -19,7 +17,6 @@ var css = csjs`
justify-content: center;
}
.txinput {
${styles.rightPanel.debuggerTab.input_Debugger}
margin: 3px;
width: inherit;
}
@ -29,14 +26,11 @@ var css = csjs`
justify-content: center;
}
.txbutton {
${styles.rightPanel.debuggerTab.button_Debugger}
width: inherit;
}
.txbuttonstart {
${styles.rightPanel.debuggerTab.button_Debugger}
}
.txbutton:hover {
color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
}
.vmargin {
margin-top: 10px;
@ -99,13 +93,13 @@ TxBrowser.prototype.render = function () {
var self = this
var view = yo`<div class="${css.container}">
<div class="${css.txContainer}">
<div class="${css.txinputs}">
<input class="${css.txinput}" onkeyup=${function () { self.updateBlockN(arguments[0]) }} type='text' placeholder=${'Block number'} />
<input class="${css.txinput}" id='txinput' onkeyup=${function () { self.updateTxN(arguments[0]) }} type='text' placeholder=${'Transaction index or hash'} />
<div class="${css.txinputs} p-1 input-group">
<input class="form-control" class="${css.txinput}" onkeyup=${function () { self.updateBlockN(arguments[0]) }} type='text' placeholder=${'Block number'} />
<input class="form-control" class="${css.txinput}" id='txinput' onkeyup=${function () { self.updateTxN(arguments[0]) }} type='text' placeholder=${'Transaction index or hash'} />
</div>
<div class="${css.txbuttons}">
<button id='load' class='${css.txbutton}' title='start debugging' onclick=${function () { self.submit() }}>Start debugging</button>
<button id='unload' class='${css.txbutton}' title='stop debugging' onclick=${function () { self.unload() }}>Stop</button>
<div class="${css.txbuttons} btn-group p-1">
<button class='btn btn-primary btn-sm' id='load' class='${css.txbutton}' title='start debugging' onclick=${function () { self.submit() }}>Start debugging</button>
<button class='btn btn-primary btn-sm' id='unload' class='${css.txbutton}' title='stop debugging' onclick=${function () { self.unload() }}>Stop</button>
</div>
</div>
<span id='error'></span>

10
src/app/debugger/debuggerUI/VmDebugger.js
Unescape View File

@ -16,8 +16,6 @@ var DropdownPanel = require('./vmDebugger/DropdownPanel')
var css = csjs`
.asmCode {
float: left;
width: 50%;
}
.stepDetail {
}
@ -123,10 +121,10 @@ function VmDebugger (vmDebuggerLogic) {
}
VmDebugger.prototype.renderHead = function () {
var headView = yo`<div id='vmheadView' class=${css.vmheadView}>
<div>
<div class=${css.asmCode}>${this.asmCode.render()}</div>
<div class=${css.stepDetail}>${this.stepDetail.render()}</div>
var headView = yo`<div id='vmheadView' class="${css.vmheadView} container">
<div class="row" >
<div class="${css.asmCode} column">${this.asmCode.render()}</div>
<div class="${css.stepDetail} column">${this.stepDetail.render()}</div>
</div>
</div>`
if (!this.headView) {

4
src/app/debugger/debuggerUI/vmDebugger/CodeListView.js
Unescape View File

@ -4,12 +4,9 @@ var yo = require('yo-yo')
var DropdownPanel = require('./DropdownPanel')
var EventManager = require('../../../../lib/events')
var csjs = require('csjs-inject')
var styleGuide = require('../../../ui/styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs`
.instructions {
${styles.rightPanel.debuggerTab.box_Debugger}
overflow-y: scroll;
max-height: 150px;
}
@ -43,7 +40,6 @@ CodeListView.prototype.indexChanged = function (index) {
}
}
this.itemSelected = this.codeView.children[index]
this.itemSelected.setAttribute('style', 'background-color: ' + styles.rightPanel.debuggerTab.text_BgHighlight)
this.itemSelected.setAttribute('selected', 'selected')
if (this.itemSelected.firstChild) {
this.itemSelected.firstChild.setAttribute('style', 'margin-left: 2px')

11
src/app/debugger/debuggerUI/vmDebugger/DropdownPanel.js
Unescape View File

@ -5,13 +5,9 @@ var EventManager = require('../../../../lib/events')
var TreeView = require('../../../ui/TreeView') // TODO setup a direct reference to the UI components
var csjs = require('csjs-inject')
var styleGuide = require('../../../ui/styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs`
.title {
margin-top: 10px;
${styles.rightPanel.debuggerTab.dropdown_Debugger};
display: flex;
align-items: center;
}
@ -23,17 +19,14 @@ var css = csjs`
margin-left: 3px;
}
.icon {
color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
margin-right: 5%;
}
.eyeButton {
margin: 3px;
}
.eyeButton:hover {
color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
}
.dropdownpanel {
${styles.rightPanel.debuggerTab.dropdown_Debugger};
width: 100%;
}
.dropdownrawcontent {
@ -85,14 +78,12 @@ DropdownPanel.prototype.setLoading = function () {
DropdownPanel.prototype.setUpdating = function () {
if (!this.view) return
this.view.querySelector('.dropdownpanel .dropdowncontent').style.color = styles.appProperties.greyedText_color
}
DropdownPanel.prototype.update = function (_data, _header) {
if (!this.view) return
this.view.querySelector('.dropdownpanel .fa-refresh').style.display = 'none'
this.view.querySelector('.dropdownpanel .dropdowncontent').style.display = 'block'
this.view.querySelector('.dropdownpanel .dropdowncontent').style.color = styles.appProperties.mainText_Color
this.view.querySelector('.dropdownpanel .dropdownrawcontent').innerText = JSON.stringify(_data, null, '\t')
if (!this.displayContentOnly) {
this.view.querySelector('.title div.btn').style.display = 'block'
@ -130,7 +121,7 @@ DropdownPanel.prototype.render = function (overridestyle) {
<div class='message' style='display:none'></div>
</div>`
var view = yo`
<div>
<div class="border border-primary rounded p-1 m-1 bg-light">
<style>
@-moz-keyframes spin {
to { -moz-transform: rotate(359deg); }

Write Preview
Loading…
Cancel
Save