Cleanup debugger dashboard
Dave Page
parent
ef7737c709
commit
471cd72bb9
|
|
@ -1,19 +1,3 @@
|
|||
.btn-step-into, .btn-step-over, .btn-continue, .btn-toggle-breakpoint, .btn-clear-breakpoint, .btn-stop {
|
||||
background-color: #D2D2D2;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.debugger-toolbar {
|
||||
background-color: #D2D2D2;
|
||||
border: 2px solid #A9A9A9;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
padding: 0px;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
#container {
|
||||
position: absolute;
|
||||
top: 44px;
|
||||
|
|
@ -63,10 +47,10 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.pg-debugger-panel .breakpoints {
|
||||
.debugger-container .breakpoints {
|
||||
width: 0.9em;
|
||||
}
|
||||
|
||||
.pg-debugger-panel .CodeMirror-activeline-background {
|
||||
.debugger-container .CodeMirror-activeline-background {
|
||||
background: #50B0F0;
|
||||
}
|
||||
|
|
@ -19,40 +19,34 @@ try {
|
|||
{% block body %}
|
||||
|
||||
<nav class="navbar-inverse navbar-fixed-top">
|
||||
<div class="container-fluid debugger-toolbar">
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<div id="btn-toolbar" class="btn-toolbar" role="toolbar" aria-label="">
|
||||
<div class="btn-group" role="group" aria-label="">
|
||||
<button type="button" class="btn btn-default btn-step-into" title="{{ _('Step into') }}">
|
||||
<i class="fa fa-indent"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-default btn-step-over" title="{{ _('Step over') }}">
|
||||
<i class="fa fa-outdent"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-default btn-continue" title="{{ _('Continue/Start') }}">
|
||||
<i class="fa fa-play-circle"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="">
|
||||
<button type="button" class="btn btn-default btn-toggle-breakpoint" title="{{ _('Toggle breakpoint') }}">
|
||||
<i class="fa fa-circle"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-default btn-clear-breakpoint" title="{{ _('Clear all breakpoints') }}">
|
||||
<i class="fa fa-ban"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="">
|
||||
<button type="button" class="btn btn-default btn-stop" title="{{ _('Stop') }}">
|
||||
<i class="fa fa-stop-circle"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div id="btn-toolbar" class="btn-toolbar pg-prop-btn-group" role="toolbar" aria-label="">
|
||||
<div class="btn-group" role="group" aria-label="">
|
||||
<button type="button" class="btn btn-default btn-step-into" title="{{ _('Step into') }}">
|
||||
<i class="fa fa-indent"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-default btn-step-over" title="{{ _('Step over') }}">
|
||||
<i class="fa fa-outdent"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-default btn-continue" title="{{ _('Continue/Start') }}">
|
||||
<i class="fa fa-play-circle"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="">
|
||||
<button type="button" class="btn btn-default btn-toggle-breakpoint" title="{{ _('Toggle breakpoint') }}">
|
||||
<i class="fa fa-circle"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-default btn-clear-breakpoint" title="{{ _('Clear all breakpoints') }}">
|
||||
<i class="fa fa-ban"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="">
|
||||
<button type="button" class="btn btn-default btn-stop" title="{{ _('Stop') }}">
|
||||
<i class="fa fa-stop-circle"></i>
|
||||
</button>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div id="container"></div>
|
||||
<div id="container" class="debugger-container"></div>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1317,35 +1317,6 @@ define(
|
|||
'code', false, '100%', '100%',
|
||||
function(panel) {
|
||||
|
||||
var container = panel.layout().scene().find('.pg-debugger-panel');
|
||||
|
||||
// Create the wcSplitter used by wcDocker to split the single panel.
|
||||
var hSplitter = new wcSplitter(
|
||||
container, panel,
|
||||
wcDocker.ORIENTATION.VERTICAL
|
||||
);
|
||||
|
||||
hSplitter.scrollable(0, false, false);
|
||||
hSplitter.scrollable(1, true, true);
|
||||
|
||||
// Initialize this splitter with a layout in each pane.
|
||||
hSplitter.initLayouts(wcDocker.LAYOUT.SIMPLE, wcDocker.LAYOUT.SIMPLE);
|
||||
|
||||
// By default, the splitter splits down the middle, we split the main panel by 80%.
|
||||
hSplitter.pos(0.65);
|
||||
|
||||
var params = $('<div class="full-container params"></div>');
|
||||
hSplitter.right().addItem(params);
|
||||
|
||||
// Create wcDocker for tab set.
|
||||
var out_docker = new wcDocker(
|
||||
'.full-container', {
|
||||
allowContextMenu: false,
|
||||
allowCollapse: false,
|
||||
themePath: '{{ url_for('static', filename='css/wcDocker/Themes') }}',
|
||||
theme: 'pgadmin'
|
||||
});
|
||||
|
||||
// Create the parameters panel to display the arguments of the functions
|
||||
var parameters = new pgAdmin.Browser.Panel({
|
||||
name: 'parameters',
|
||||
|
|
@ -1402,49 +1373,50 @@ define(
|
|||
})
|
||||
|
||||
// Load all the created panels
|
||||
parameters.load(out_docker);
|
||||
local_variables.load(out_docker);
|
||||
messages.load(out_docker);
|
||||
results.load(out_docker);
|
||||
stack_pane.load(out_docker);
|
||||
parameters.load(self.docker);
|
||||
local_variables.load(self.docker);
|
||||
messages.load(self.docker);
|
||||
results.load(self.docker);
|
||||
stack_pane.load(self.docker);
|
||||
});
|
||||
|
||||
// Add all the panels to the docker
|
||||
self.parameters_panel = out_docker.addPanel('parameters', wcDocker.DOCK.LEFT);
|
||||
self.local_variables_panel = out_docker.addPanel('local_variables', wcDocker.DOCK.STACKED, self.parameters_panel);
|
||||
self.stack_pane_panel = out_docker.addPanel('stack_pane', wcDocker.DOCK.STACKED, self.parameters_panel);
|
||||
self.messages_panel = out_docker.addPanel('messages', wcDocker.DOCK.STACKED, self.parameters_panel);
|
||||
self.results_panel = out_docker.addPanel('results', wcDocker.DOCK.STACKED, self.parameters_panel);
|
||||
self.code_editor_panel = self.docker.addPanel('code', wcDocker.DOCK.TOP );
|
||||
|
||||
// Now create a tab widget and put that into one of the sub splits.
|
||||
var editor_pane = $('<div id="stack_editor_pane" class="full-container-pane info"></div>');
|
||||
var code_editor_area = $('<textarea id="debugger-editor-textarea"></textarea>').append(editor_pane);
|
||||
hSplitter.left().addItem(code_editor_area);
|
||||
self.parameters_panel = self.docker.addPanel(
|
||||
'parameters', wcDocker.DOCK.BOTTOM, self.code_editor_panel);
|
||||
self.local_variables_panel = self.docker.addPanel('local_variables', wcDocker.DOCK.STACKED, self.parameters_panel, {
|
||||
tabOrientation: wcDocker.TAB.TOP
|
||||
});
|
||||
self.messages_panel = self.docker.addPanel('messages', wcDocker.DOCK.STACKED, self.parameters_panel);
|
||||
self.results_panel = self.docker.addPanel(
|
||||
'results', wcDocker.DOCK.STACKED, self.parameters_panel);
|
||||
self.stack_pane_panel = self.docker.addPanel(
|
||||
'stack_pane', wcDocker.DOCK.STACKED, self.parameters_panel);
|
||||
|
||||
// To show the line-number and set breakpoint marker details by user.
|
||||
var editor = self.editor = CodeMirror.fromTextArea(
|
||||
code_editor_area.get(0), {
|
||||
lineNumbers: true,
|
||||
gutters: ["note-gutter", "CodeMirror-linenumbers", "breakpoints"],
|
||||
mode: "text/x-sql",
|
||||
readOnly: true
|
||||
});
|
||||
var editor_pane = $('<div id="stack_editor_pane" class="full-container-pane info"></div>');
|
||||
var code_editor_area = $('<textarea id="debugger-editor-textarea"></textarea>').append(editor_pane);
|
||||
self.code_editor_panel.layout().addItem(code_editor_area);
|
||||
|
||||
// To show the line-number and set breakpoint marker details by user.
|
||||
var editor = self.editor = CodeMirror.fromTextArea(
|
||||
code_editor_area.get(0), {
|
||||
lineNumbers: true,
|
||||
gutters: ["note-gutter", "CodeMirror-linenumbers", "breakpoints"],
|
||||
mode: "text/x-sql",
|
||||
readOnly: true
|
||||
});
|
||||
|
||||
// On loading the docker, register the callbacks
|
||||
var onLoad = function() {
|
||||
self.docker.finishLoading(100);
|
||||
self.docker.off(wcDocker.EVENT.LOADED);
|
||||
// Register the callback when user set/clear the breakpoint on gutter area.
|
||||
self.editor.on("gutterClick", self.onBreakPoint.bind(self), self);
|
||||
self.docker.finishLoading(100);
|
||||
self.docker.off(wcDocker.EVENT.LOADED);
|
||||
// Register the callback when user set/clear the breakpoint on gutter area.
|
||||
self.editor.on("gutterClick", self.onBreakPoint.bind(self), self);
|
||||
};
|
||||
|
||||
self.docker.startLoading('{{ _('Loading...') }}');
|
||||
self.docker.on(wcDocker.EVENT.LOADED, onLoad);
|
||||
|
||||
self.main_panel = self.docker.addPanel(
|
||||
'code', wcDocker.DOCK.TOP, null, {h: '100%', w: '100%'}
|
||||
);
|
||||
|
||||
// Create the toolbar view for debugging the function
|
||||
this.toolbarView = new DebuggerToolbarView();
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue