<a:application xmlns:a="http://ajax.org/2005/aml">
    <a:bar id="tbDebug">
        <!--a:button
          icon="chromium_16.png"
          caption="Debug Chrome"
          onclick="require('ext/run/run').debugChrome()"
          disabled="{stConnected.active}" /-->      
        <a:splitbutton id="btnDebug"
          icon     = "bug.png"
          caption  = "debug"
          onclick  = "require('ext/run/run').run(true)"
          disabled = "{stProcessRunning.active and 1}"
          submenu  = "mnuDebugCfg" />
        <a:divider skin="c9-divider" />
        <a:button id="btnResume" tooltip="Resume"
          icon     = "play.png"
          onclick  = "dbg.continueScript();"
          skin     = "c9-toolbarbutton"
          disabled = "{!stDebugProcessRunning.active or stRunning.active}" />
        <a:button  tooltip="Suspend"
          skin     = "c9-toolbarbutton"
          icon     = "pause.png"
          onclick  = "dbg.suspend();"
          disabled = "{!stDebugProcessRunning.active or !stRunning.active}"/>
        <a:divider skin="c9-divider" />
        <a:button id="btnStepInto" tooltip="Step Into"
          icon     = "stepinto.png" 
          skin     = "c9-toolbarbutton"
          onclick  = "dbg.stepInto();" 
          disabled = "{!stDebugProcessRunning.active or stRunning.active}" />
        <a:button id="btnStepOver" tooltip="Step Over"
          icon     = "step.png"
          skin     = "c9-toolbarbutton"
          onclick  = "dbg.stepNext();"
          disabled = "{!stDebugProcessRunning.active or stRunning.active}" />
        <a:button id="btnStepOut" tooltip="Step Out"
          icon     = "stepback.png" 
          skin     = "c9-toolbarbutton"
          onclick  = "dbg.stepOut();"
          disabled = "{!stDebugProcessRunning.active or stRunning.active}" />
    </a:bar>
    
    <a:tab id="tabDebug" skin="docktab" visible="false" activepage="-1">
        <a:page id="dbgCallStack" caption="Call Stack" render="runtime">
            <a:datagrid
              id         = "dgStack"
              anchors    = "0 0 0 0"
              border     = "0"
              options    = "size|move"
              caching    = "false"
              prerender  = "false"
              model      = "mdlDbgStack"
              disabled   = "{!stDebugProcessRunning.active or stRunning.active}"
              selected   = "{dbg.activeframe}">
                <a:actions />
                <a:each match="[frame]">
                    <a:column caption="Function" value="[@name]" width="100%" icon2="debugger/stckframe_obj.gif" />
                    <a:column caption="Script" value="[@script]" width="50" />
                    <a:column caption="Ln" value="[@line]" width="25"/>
                    <a:column caption="Col" value="[@column]" width="25"/>
                </a:each>
            </a:datagrid>
        </a:page>
        <a:page id="dbInteractive" caption="Interactive" render="runtime">
            <a:vbox anchors="0 0 0 0">
                <a:toolbar>
                    <a:bar border="0 0 1 0">
                        <a:button
                          disabled = "{!stDebugProcessRunning.active or stRunning.active}"
                          caption  = "Execute" 
                          tooltip  = "Ctrl+Enter"
                          onclick  = "
                            require('ext/debugger/inspector').consoleTextHandler({keyCode:13,ctrlKey:true})
                          " />
                        <a:button
                          disabled2 = "{!txtCode.value.trim()}"
                          caption  = "Clear" 
                          onclick  = "
                            txtCode.clear();
                          " />
                        <a:divider skin2="c9-divider"/>
                        <a:dropdown id="lstScripts"
                          skin2       = "black_dropdown"
                          margin     = "3 0 0 4"
                          width      = "120"
                          maxitems   = "10"
                          model      = "mdlDbgSources"
                          disabled   = "{!stDebugProcessRunning.active and 1}" 
                          each       = "[file]"
                          caption    = "[@text]"
                          autoselect = "false"
                          icon       = "debugger/file_obj.gif" />
                    </a:bar>
                </a:toolbar>
                <a:codeeditor id="txtCode" 
                  flex      = "1"
                  disabled  = "{stRunning.active or !stDebugProcessRunning.active}"
                  onkeydown = "return require('ext/debugger/inspector').consoleTextHandler(event)" 
                  realtime  = "true"
                  border    = "0" 
                  model     = "{require('ext/settings/settings').model}" 
                  value     = "[auto/console/input]"
                  softtabs          = "[{require('ext/settings/settings').model}::editors/code/@softtabs]"
                  tabsize           = "[{require('ext/settings/settings').model}::editors/code/@tabsize]"
                  scrollspeed       = "[{require('ext/settings/settings').model}::editors/code/@scrollspeed]"
                  theme             = "[{require('ext/settings/settings').model}::editors/code/@theme]"
                  selectstyle       = "[{require('ext/settings/settings').model}::editors/code/@selectstyle]"
                  activeline        = "[{require('ext/settings/settings').model}::editors/code/@activeline]"
                  showinvisibles    = "[{require('ext/settings/settings').model}::editors/code/@showinvisibles]"
                  showprintmargin   = "false"
                  printmargincolumn = "0" />
            </a:vbox>
        </a:page>
        <a:page id="dbgVariable" caption="Variables" render="runtime">
            <a:datagrid id="dgVars"
              anchors    = "0 0 0 0" 
              border     = "0"
              options    = "size|move"
              prerender  = "false"
              caching    = "false"
              model      = "[{dgStack.selected}::vars]"
              disabled   = "{!stDebugProcessRunning.active or stRunning.active}"
              loading-message = "Calculating...">
                <a:actions />
                <a:each match="[item|globals]" sort="[@name]">
                    <a:insert match="[globals]" get="{adbg.loadFrame(dbg, {dgStack.selected})}"/>
                    <a:insert match="[item[@children='true']]" get="{adbg.loadObjects(dbg, %[.])}" />
                    <a:column caption="Property" value="{[@name] || 'Globals'}" width="40%" icon="debugger/genericvariable_obj.gif" tree="true" />
                    <a:column caption="Value" value="[@value]" width="60%" />
                    <a:column caption="Type" value="[@type]" width="50"/>
                </a:each>
            </a:datagrid>
        </a:page>
        <a:page id="dbgBreakpoints" caption="Breakpoints" render="runtime">
            <a:list id="lstBreakpoints"
              autoselect = "false"
              reselectable = "true"
              anchors    = "0 0 0 0"
              border     = "0"
              model      = "mdlDbgBreakpoints"
              each       = "[breakpoint]"
              caption    = "[@text]"
              icon       = "debugger/brkp_obj.png">
                <a:actions />
            </a:list>
        </a:page>
        <a:model id="mdlAceAnnotations"></a:model>
        <a:page id="aceAnnotations" caption="Bugs" render="runtime">
            <a:datagrid id="dgAceAnnotations"
              anchors    = "0 0 0 0" 
              border     = "0"
              options    = "size|move"
              prerender  = "false"
              caching    = "false"
              onafterchoose = "require('ext/debugger/debugger').goToAnnotation()"
              model      = "mdlAceAnnotations"
              loading-message = "Loading..."
              empty-message = "None found">
                <a:each match="[annotation]" sort="[@line]">
                    <a:column type="icon" width="20" icon="debugger/[@type]_obj.gif" />
                    <a:column caption="Line" value="[@line]" width="50" />
                    <a:column caption="Description" value="[@text]" width="100%" />
                </a:each>
            </a:datagrid>
        </a:page>
    </a:tab>
</a:application>