<!DOCTYPE html>
<html>
<head>
<title>hdb</title>
<!-- Bootstrap -->
<link href="db/bootstrap.css" rel="stylesheet" media="screen">
<link href="db/css-treeview.css" rel="stylesheet" media="screen">
<link href="db/debugger.css" rel="stylesheet" media="screen">
<link rel="icon" href="/db/favicon.ico" type="image/x-icon" />
<script src="db/jquery.js"></script>
<script src="db/bootstrap.js"></script>
<script src="db/handlebars.js"></script>
<script src="db/perlvalue.js"></script>
<script src="db/filemanager.js"></script>
<script src="db/stackmanager.js"></script>
<script src="db/jquery.scrollTo.js"></script>
<script src="db/filepicker.js"></script>
<script src="db/debugger.js"></script>
<script>
$(document).ready(function() {
var d = new Debugger('div.debugger-window');
d.run();
});
</script>
<! template for the sub picker >
<script id="sub-picker-template" type="text/x-handlebars-template">
<div class="modal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>Subroutines</h4>
</div>
<div class="modal-body css-treeview">
<ul></ul>
</div>
</div>
</script>
<! template for the tree view inside the sub picker>
<script id="sub-picker-tree" type="text/x-handlebars-template">
{{#each subs}}
<li>
<a class="subroutine" data-package="{{#if ../package_name}}{{../../package_name}}{{else}}main{{/if}}" data-sub="{{this}}">{{this}}</a>
</li>
{{/each}}
{{#each packages}}
<li>
<input unfilled="true" type="checkbox" id="{{#if ../package_name}}{{../../package_name}}::{{/if}}{{this}}" />
<label for="{{#if ../package_name}}{{../../package_name}}::{{/if}}{{this}}">{{this}}</label>
<ul></ul>
</li>
{{/each}}
</script>
<! template for forked child modal>
<script id="forked-child-modal-template" type="text/x-handlebars-template">
<div class="modal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Alert</h3>
</div>
<div class="modal-body">
Child process forked with pid {{pid}}
</div>
<div class="modal-footer">
<a href="{{run}}" class="btn run-child">Detach</a>
<a href="{{uri}}" class="btn btn-primary debug-child" target="_blank">Open</a>
</div>
</div>
</script>
<! Template for the execution trace difference notifiaction>
<script id="trace-diff-modal-template" type="text/x-handlebars-template">
<div class="modal">
<div class="modal-header">
Stopped
<div>
<div class="modal-body">
Execution has deviated from the trace file. The next expected line was
{{#if expected_offset}}
{{expected_subroutine}} line {{expected_offset}}
in {{expected_filename}}:{{expected_line}}
{{else}}
<dl>
<dt>package</dt>
<dd>{{expected_package}}</dd>
<dt>file</dt>
<dd>{{expected_filename}}</dd>
<dt>subroutine</dt>
<dd>{{expected_subroutine}}</dd>
<dt>line</dt>
<dd>{{expected_line}}</dd>
</dl>
{{/if}}
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">Ok</button>
</div>
</div>
</script>
<! template for 'program terminated' modal>
<script id="program-terminated-modal-template" type="text/x-handlebars-template">
<div class="modal">
<div class="modal-header">Program Terminated</div>
<div class="modal-body">
Debugged program terminated with exit code {{exit_code}}
{{#if exception}}
<br>
Exception in {{subroutine}} at {{filename}}:{{line}}
<div class="alert alert-error">{{exception}}</div>
{{/if}}
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">Ok</button>
<button class="btn btn-danger control-button" data-action="exit" data-dismiss="modal">Exit</button>
</div>
</div>
</script>
<! template for save/load breakpoints>
<script id="save-load-breakpoints-modal-template" type="text/x-handlebars-template">
<div class="modal">
<form>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>{{action}} Breakpoints</h3>
</div>
<div class="modal-body">
<div class="control-group">
<label class="control-label" for="filename">Breakpoint file</label>
<div class="controls">
<input type="text" autofocus="autofocus" value="{{filename}}" class="span3" name="filename">
</div>
</div>
<div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">{{action}}</button>
</div>
</form>
</div>
</script>
<! template for the file tabs along the top>
<script id="file-tab-template" type="text/x-handlebars-template">
<li data-contentid="{{id}}" class="trunc-left {{#active}}active{{/active}}">
<a href="#{{id}}" data-toggle="tab">
{{#if closable}}<span class="remove-loaded-file close-button">
<i class="icon-remove-sign icon-white"></i>
</span>
{{/if}}
{{label}}</a>
</li>
</script>
<! template for Bootstrap stack nav tabs>
<script id="nav-tab-template" type="text/x-handlebars-template">
<li{{#id}} id="{{id}}"{{/id}} class="stack-tab {{class}}{{#active}} active{{/active}}">
</li>
</script>
<! template for Bootstrap nav tabs contents>
<script id="nav-tab-content-template" type="text/x-handlebars-template">
<a href="#{{tabId}}" data-toggle="tab" rel="tooltip" data-html="true" data-placement="right" title="{{longlabel}}<br>{{filename}}: {{lineno}}">{{wantarray}}{{label}}</a>
</script>
<! template for Bootstrap nav panes>
<script id="nav-pane-template" type="text/x-handlebars-template">
<div id="{{tabId}}" class="tab-pane{{#active}} active{{/active}}">
<div class="current-sub-and-args alert">{{#if banner}}{{banner}}{{else}} {{/if}}</div>
<div class="managed-height program-code-container" data-filename="{{filename}}">
{{{html}}}
</div>
</div>
</script>
<! template for program file contents>
<script id="program-listing-template" type="text/x-handlebars-template">
<div class="program-code" data-filename="{{filename}}">
{{#rows}}
<div class="{{#active}}active{{/active}}{{#unbreakable}} unbreakable{{/unbreakable}}{{#breakpoint}} breakpoint{{/breakpoint}}{{#inactivebreakpoint}} inactive-breakpoint{{/inactivebreakpoint}}{{#action}} bpaction{{/action}} code-line" data-lineno="{{line}}">
<span class="lineno"><span>{{line}}</span></span>
<span class="code">{{code}}</span>
</div>
{{/rows}}
</div>
</script>
<! template for the top bar of the program stack windows - show the current sub & args>
<script id="current-sub-and-args-template" type="text/x-handlebars-template">
<span class="current-subroutine">{{subroutine}}</span>
(
<ul class="sub-arg-list">
{{#each subArgs}}
<li class="sub-arg">{{{this}}}</li>
{{/each}}
</ul>
)
</script>
<! template for watched expression>
<script id="watched-expr-template" type="text/x-handlebars-template">
<div class="watched-expression" data-expr="{{expr}}">
<span>
<span class="remove-watched-expression close-button">
<i class="icon-remove-sign icon-white"></i>
</span>
</span>
<span class="expr label label-inverse">{{expr}}</span>
<span>: </span>
<span class="value">{{value}}</span>
</div>
</script>
<! template for a breakpoint condition in the breakpoint menu/list>
<script id="breakpoint-condition-template" type="text/x-handlebars-template">
{{#ifDefined condition}}<span>{{condition}}</span>
{{else}}<span class="label">none</span>{{/ifDefined}}
</script>
<! template for a breakpoint action in the breakpoint menu/list>
<script id="breakpoint-action-template" type="text/x-handlebars-template">
{{#ifDefined action}}<span>{{action}}</span>
{{else}}<span class="label">none</span>{{/ifDefined}}
</script>
<! template for the breakpoint right-click menu>
<script id="breakpoint-right-click-template" type="text/x-handlebars-template">
<div class="breakpoint-marker" data-filename="{{filename}}" data-lineno="{{lineno}}">
<div>
<input type="checkbox" class="toggle-breakpoint" {{#if conditionEnabled}}checked="checked"{{/if}}>
<i class="icon-stop"></i>
<span class="breakpoint-condition">
{{>breakpoint-condition-template}}
</span>
</div>
<div>
<input type="checkbox" class="toggle-action" {{#if actionEnabled}}checked="checked"{{/if}}>
<i class="icon-tasks"></i>
<span class="action">
{{>breakpoint-action-template}}
</span>
</div>
</div>
</script>
<! template for an item in the breakpoints pane list>
<script id="breakpoint-list-item-template" type="text/x-handlebars-template">
<li class="breakpoint-list-item" data-filename="{{filename}}" data-lineno="{{lineno}}">
<div>
<span class="remove-breakpoint close-button">
<i class="icon-remove-sign icon-white"></i>
</span>
<small>line {{lineno}}</small>
<i class="icon-share-alt breakpoint-goto"></i>
</div>
{{> breakpoint-right-click-template}}
</li>
</script>
</head>
<body>
<div id="columnator" class="debugger-window">
<div class="container-column">
<div class="row">
<div id="controls" class="span6 offset1">
<button class="btn control-button" data-action="stepin">Step In</button>
<button class="btn control-button" data-action="stepover">Step Over</button>
<button class="btn control-button" data-action="stepout">Step Out</button>
<button class="btn btn-primary control-button" data-action="continue">Run</button>
<button class="btn btn-danger control-button pull-right" data-action="exit">Exit</button>
</div>
</div>
<div id="filewindow" class="tabbable">
<ul class="nav nav-tabs">
<li id="program-name" class="active trunc-left"><a href="#stack" data-toggle="tab">Program Name</a></li>
<li><span id="add-file"><i class="icon-plus"></i></span></li>
</ul>
<div id="file-content" class="tab-content">
<div id="stack" class="tab-pane active tabbable tabs-left">
<ul id="stack-tabs" class="nav nav-tabs managed-height"></ul>
<div class="tab-content"></div>
</div>
</div>
</div>
</div>
<div id="drag-divider" class="container-column managed-height"></div>
<div id="side-tray" class="container-column">
<div id="breakpoint-container" class="container-column">
<div id="breakpoints" class="container-column managed-height">
<div>
<strong>Breakpoints</strong>
<a href="#" id="save-breakpoints" class="btn save-load-breakpoints" title="Save Breakpoints">
<i class="icon-hdd"></i></a>
<a href="#" id="load-breakpoints" class="btn save-load-breakpoints" title="Load Breakpoints">
<i class="icon-folder-open"></i></a>
</div>
<ol id="breakpoints-list"></ul>
</div>
<div id="breakpoint-container-handle" class="container-column managed-height">
<div style="height: 50%"></div>
<i id="breakpoint-container-handle-icon" class="icon-chevron-right"></i>
</div>
</div>
<div id="watch-expressions" class="container-column managed-height">
<div id="watch-expressions-title">
<strong>Watch Expressions</strong>
<button class="btn btn-mini" id="add-watch-expr" type="button"><i class="icon-plus"></i></button>
</div>
<div id="watch-expressions-container" class="managed-height"></div>
</div>
</div>
</div>
</body>
</html>