From 03f82561a619985e36349767d5dfbfd600e10325 Mon Sep 17 00:00:00 2001
From: Chad Smith <chadsmith27@gmail.com>
Date: Wed, 4 Jan 2017 17:09:52 -0800
Subject: [PATCH 1/7] saving wip

---
 gdbgui/static/js/gdbgui.js   | 63 +++++++++++++++++++++++++++---------
 gdbgui/templates/gdbgui.jade | 15 +++++++++
 2 files changed, 62 insertions(+), 16 deletions(-)

diff --git a/gdbgui/static/js/gdbgui.js b/gdbgui/static/js/gdbgui.js
index ad657687..dc46d496 100644
--- a/gdbgui/static/js/gdbgui.js
+++ b/gdbgui/static/js/gdbgui.js
@@ -288,8 +288,13 @@ const Breakpoint = {
              links.push(`<a class='view_file pointer' data-fullname=${breakpoint.fullname || ''} data-line=${breakpoint.line || ''} data-highlight=false>View</a>`)
         }
         links.push(`<a class="gdb_cmd pointer" data-cmd0="-break-delete ${breakpoint.number}" data-cmd1="-break-list">remove</a>`)
-
         bkpt[' '] = links.join(' | ')
+
+        // turn address into link
+        if (bkpt['addr']){
+            bkpt['addr'] =  Memory.make_addr_into_link(bkpt['addr'])
+        }
+
         // add the breakpoint if it's not stored already
         if(Breakpoint.breakpoints.indexOf(bkpt) === -1){
             Breakpoint.breakpoints.push(bkpt)
@@ -508,7 +513,7 @@ const Disassembly = {
             }
         }
         for(let i of asm_insns){
-            let assembly = i['line_asm_insn'].map(el => `${el['func-name']}+${el['offset']} ${el.address} ${el.inst}`)
+            let assembly = i['line_asm_insn'].map(el => `${el['func-name']}+${el['offset']} ${Memory.make_addr_into_link(el.address)} ${el.inst}`)
             let line_link = `<a class='view_file pointer' data-fullname=${i.fullname || ''} data-line=${i.line || ''} data-highlight=false>${i.line} view</a>`
             let source_line = '(file not loaded)'
             if(i.line <= source_code.length){
@@ -528,6 +533,9 @@ const Stack = {
             if ('fullname' in s){
                 s[' '] = `<a class='view_file pointer' data-fullname=${s.fullname || ''} data-line=${s.line || ''} data-highlight=true>View</a>`
             }
+            if ('addr' in s){
+                s.addr = Memory.make_addr_into_link(s.addr)
+            }
         }
 
         let [columns, data] = Util.get_table_data_from_objs(stack)
@@ -653,6 +661,25 @@ const GdbCommandInput = {
     }
 }
 
+const Memory = {
+    el: $('#memory'),
+    init: function(){
+        $("body").on("click", ".memory_address", Memory.click_memory_address)
+    },
+    click_memory_address: function(e){
+        let addr = e.currentTarget.dataset['memory_address']
+        GdbApi.run_gdb_command(` -data-read-memory-bytes ${addr} 1`)
+    },
+    render_memory: function(mi_memory_data){
+        let data = mi_memory_data.map(m => _.values(m))
+        let table = Util.get_table(_.keys(mi_memory_data[0]), data)
+        Memory.el.html(table)
+    },
+    make_addr_into_link: function(addr){
+        return `<a class='pointer memory_address' data-memory_address='${addr}'>${addr}</a>`
+    }
+}
+
 const GlobalEvents = {
     // Initialize
     init: function(){
@@ -698,28 +725,31 @@ const process_gdb_response = function(response_array){
                 Breakpoint.store_breakpoint(r.payload.bkpt)
                 Breakpoint.render_breakpoint_table()
                 SourceCode.fetch_and_render_file(r.payload.bkpt.fullname, r.payload.bkpt.line, {'highlight': false, 'scroll': true})
-
-            } else if ('BreakpointTable' in r.payload){
+            }
+            if ('BreakpointTable' in r.payload){
                 Breakpoint.assign_breakpoints_from_mi_breakpoint_table(r.payload)
                 SourceCode.rerender()
-
-            } else if ('stack' in r.payload) {
+            }
+            if ('stack' in r.payload) {
                 Stack.render_stack(r.payload.stack)
-
-            } else if ('register-names' in r.payload) {
+            }
+            if ('register-names' in r.payload) {
                 Registers.set_register_names(r.payload['register-names'])
-
-            } else if ('register-values' in r.payload) {
+            }
+            if ('register-values' in r.payload) {
                 Registers.render_registers(r.payload['register-values'])
-
-            } else if ('asm_insns' in r.payload) {
+            }
+            if ('asm_insns' in r.payload) {
                 Disassembly.render_disasembly(r.payload.asm_insns)
-
-            } else if ('files' in r.payload){
+            }
+            if ('files' in r.payload){
                 SourceFileAutocomplete.input.list = _.uniq(r.payload.files.map(f => f.fullname)).sort()
                 SourceFileAutocomplete.input.evaluate()
-
-            } // else if (your check here) {
+            }
+            if ('memory' in r.payload){
+                Memory.render_memory(r.payload.memory)
+            }
+            // if (your check here) {
             //      render your custom compenent here!
             // }
 
@@ -772,6 +802,7 @@ SourceCode.init()
 Disassembly.init()
 BinaryLoader.init()
 SourceFileAutocomplete.init()
+Memory.init()
 
 window.addEventListener("beforeunload", BinaryLoader.onclose)
 
diff --git a/gdbgui/templates/gdbgui.jade b/gdbgui/templates/gdbgui.jade
index 23299e2f..7b0e47fd 100644
--- a/gdbgui/templates/gdbgui.jade
+++ b/gdbgui/templates/gdbgui.jade
@@ -134,6 +134,21 @@ body
                     span.glyphicon.glyphicon-refresh.padding_left
             div#disassembly.gdb_content_div
 
+        div.col-md-6.no_padding
+            div.titlebar
+                span.lighttext variables
+                span.glyphicon.glyphicon-plus.resizer.pointer(data-target_selector="#variables" data-resize_type="enlarge")
+                span.glyphicon.glyphicon-minus.resizer.pointer(data-target_selector="#variables" data-resize_type="shrink")
+            div#variables.gdb_content_div
+
+        div.col-md-6.no_padding
+            div.titlebar
+                span.lighttext memory
+                span.glyphicon.glyphicon-plus.resizer.pointer(data-target_selector="#memory" data-resize_type="enlarge")
+                span.glyphicon.glyphicon-minus.resizer.pointer(data-target_selector="#memory" data-resize_type="shrink")
+            div#memory.gdb_content_div
+
+
         div.col-md-6.no_padding
             div.titlebar
                 span.lighttext gdb machine interface output

From 8b7a0c1cbc65af12517156e905b5e864dcf38a2b Mon Sep 17 00:00:00 2001
From: Chad Smith <chadsmith27@gmail.com>
Date: Thu, 5 Jan 2017 08:55:35 -0800
Subject: [PATCH 2/7] remember last binaries entered; update colors on gdb
 command input; watch more files for changes when reloading in debug mode

---
 gdbgui/backend.py            | 12 +++++++-----
 gdbgui/static/css/gdbgui.css | 10 ++++++++++
 gdbgui/static/js/gdbgui.js   | 27 ++++++++++++++++++++++-----
 gdbgui/templates/gdbgui.jade | 12 ++++++++----
 4 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/gdbgui/backend.py b/gdbgui/backend.py
index 82f0815b..df5ba60e 100755
--- a/gdbgui/backend.py
+++ b/gdbgui/backend.py
@@ -30,12 +30,14 @@ def client_error(obj):
 
 
 def get_extra_files():
+    extra_dirs = [STATIC_DIR, TEMPLATE_DIR]
     extra_files = []
-    for dirname, dirs, files in os.walk(TEMPLATE_DIR):
-        for filename in files:
-            filename = os.path.join(dirname, filename)
-            if os.path.isfile(filename):
-                extra_files.append(filename)
+    for extra_dir in extra_dirs:
+        for dirname, dirs, files in os.walk(extra_dir):
+            for filename in files:
+                filename = os.path.join(dirname, filename)
+                if os.path.isfile(filename):
+                    extra_files.append(filename)
     return extra_files
 
 
diff --git a/gdbgui/static/css/gdbgui.css b/gdbgui/static/css/gdbgui.css
index 532557d7..605ead76 100644
--- a/gdbgui/static/css/gdbgui.css
+++ b/gdbgui/static/css/gdbgui.css
@@ -24,6 +24,16 @@ table{
   color: #f9f9f9 !important;
   font-family: monospace !important;
 }
+#gdb_command{
+  padding-left: 45px;
+  border-top: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  font-size: 0.9em !important;
+  background-color: #3c3c3c !important;
+  color: #f9f9f9 !important;
+  font-family: monospace !important;
+}
 #stdout {
   color: black;
 }
diff --git a/gdbgui/static/js/gdbgui.js b/gdbgui/static/js/gdbgui.js
index dc46d496..3e9de7dd 100644
--- a/gdbgui/static/js/gdbgui.js
+++ b/gdbgui/static/js/gdbgui.js
@@ -580,21 +580,24 @@ const Prefs = {
 
 const BinaryLoader = {
     el: $('#binary'),
+    el_past_binaries: $('#past_binaries'),
     init: function(){
         // events
         $('#set_target_app').click(BinaryLoader.click_set_target_app)
         BinaryLoader.el.keydown(BinaryLoader.keydown_on_binary_input)
 
         try{
-            BinaryLoader.last_binary = localStorage.getItem('last_binary') || ''
-            BinaryLoader.render(BinaryLoader.last_binary)
+            BinaryLoader.past_binaries = _.uniq(JSON.parse(localStorage.getItem('past_binaries')))
+            BinaryLoader.render(BinaryLoader.past_binaries[0])
         } catch(err){
-            BinaryLoader.last_binary = ''
+            BinaryLoader.past_binaries = []
         }
-
+        // update list of old binarys
+        BinaryLoader.render_past_binary_options_datalist()
     },
+    past_binaries: [],
     onclose: function(){
-        localStorage.setItem('last_binary',  BinaryLoader.el.val())
+        localStorage.setItem('past_binaries', JSON.stringify(BinaryLoader.past_binaries) || [])
         return null
     },
     click_set_target_app: function(e){
@@ -602,10 +605,18 @@ const BinaryLoader = {
     },
     set_target_app: function(){
         var binary_and_args = _.trim(BinaryLoader.el.val())
+
         if (binary_and_args === ''){
             Status.render('enter a binary path before attempting to load')
             return
         }
+
+        // save to list of binaries used that autopopulates the input dropdown
+        _.remove(BinaryLoader.past_binaries, i => i === binary_and_args)
+        BinaryLoader.past_binaries.unshift(binary_and_args)
+        BinaryLoader.render_past_binary_options_datalist()
+
+        // find the binary and arguments so gdb can be told which is which
         let binary, args, cmds
         let index_of_first_space = binary_and_args.indexOf(' ')
         if( index_of_first_space === -1){
@@ -615,8 +626,11 @@ const BinaryLoader = {
             binary = binary_and_args.slice(0, index_of_first_space)
             args = binary_and_args.slice(index_of_first_space + 1, binary_and_args.length)
         }
+
+        // tell gdb which arguments to use when calling the binary, before loading the binary
         cmds = [`-exec-arguments ${args}`, `-file-exec-and-symbols ${binary}`]
 
+        // reload breakpoints after sending to make sure they're up to date
         if (Prefs.auto_reload_breakpoints()){
             cmds.push('-break-list')
         }
@@ -631,6 +645,9 @@ const BinaryLoader = {
             BinaryLoader.set_target_app()
         }
     },
+    render_past_binary_options_datalist: function(){
+        BinaryLoader.el_past_binaries.html(BinaryLoader.past_binaries.map(b => `<option>${b}</option`))
+    },
 }
 
 const GdbCommandInput = {
diff --git a/gdbgui/templates/gdbgui.jade b/gdbgui/templates/gdbgui.jade
index 7b0e47fd..92663008 100644
--- a/gdbgui/templates/gdbgui.jade
+++ b/gdbgui/templates/gdbgui.jade
@@ -65,7 +65,7 @@ body
                 span#source_code_heading.lighttext (no source code file loaded)
 
             div
-                input#source_file_input.dropdown-input(autocomplete='off', placeholder='Enter path here, or select from dropdown', style="width: 500px")
+                input#source_file_input.dropdown-input(autocomplete='off', placeholder='Enter source file path here, or select from dropdown', style="width: 500px")
 
                 button.dropdown-btn(type="button")
                     span.caret
@@ -81,6 +81,7 @@ body
                         td Source code will be displayed here when applicable
 
         div.col-md-12.no_padding
+            //- text/buttons above the gdb console output
             div.titlebar
                 span.lighttext gdb console
                 div.btn-group
@@ -90,10 +91,13 @@ body
                         span.glyphicon.glyphicon-download.padding_left
                 span.glyphicon.glyphicon-plus.resizer.pointer(data-target_selector="#console" data-resize_type="enlarge")
                 span.glyphicon.glyphicon-minus.resizer.pointer(data-target_selector="#console" data-resize_type="shrink")
+
+            //- gdb console output
             div#console.gdb_content_div(style='border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0')
-            div(style="position: relative")
-                span.gdb_console(style="position: absolute; left: 5px; margin-top: 9px") (gdb)
-                input.form-control.dropdown-input.gdb_console#gdb_command(type="text", autocomplete="on", data-list="#gdb_command_reference", style="padding-left: 45px; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0", placeholder='enter any gdb command, or gdb machine interface command')
+
+            //- gdb console input
+            span(style="position: absolute; left: 5px; margin-top: 9px; color: #777; font-family: monospace; font-size: 0.9em") (gdb)
+            input.form-control.dropdown-input#gdb_command(type="text", autocomplete="on", data-list="#gdb_command_reference", placeholder='enter any gdb command, or gdb machine interface command')
 
 
         div.col-md-6.no_padding

From 1b19dd44268a05af2167ab1761b67466f5e0cb57 Mon Sep 17 00:00:00 2001
From: Chad Smith <chadsmith27@gmail.com>
Date: Thu, 5 Jan 2017 14:20:22 -0800
Subject: [PATCH 3/7] need to change variable storage scheme to have unique
 keys, or just use arrays instead

---
 README.md                    |   2 +-
 gdbgui/static/css/gdbgui.css |   2 +-
 gdbgui/static/js/gdbgui.js   | 265 ++++++++++++++++++++++++++++++++++-
 gdbgui/templates/gdbgui.jade |  34 +++--
 4 files changed, 284 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 4ceb0122..f89b0a58 100644
--- a/README.md
+++ b/README.md
@@ -73,7 +73,7 @@ Despite this list, gdbgui is quite usable in its current form
 
 * ~~allow argument passing to the inferior process being debugged~~
 * ~~add links back to github, etc~~
-* escape brackets on system <includes> so they don't disappear
+* ~~escape brackets on system <includes> so they don't disappear~~
 * add button to widen windows
 * add clear button to windows
 * improve toolbar styling, change color when error occurs
diff --git a/gdbgui/static/css/gdbgui.css b/gdbgui/static/css/gdbgui.css
index 605ead76..1440da91 100644
--- a/gdbgui/static/css/gdbgui.css
+++ b/gdbgui/static/css/gdbgui.css
@@ -47,7 +47,7 @@ table{
 }
 .sent_command:hover{
   /* lighten background */
-  background-color:rgba(255,255,255,0.5)
+  background-color:rgba(255,255,255,0.1)
 }
 .disabled {
     z-index: 1000;
diff --git a/gdbgui/static/js/gdbgui.js b/gdbgui/static/js/gdbgui.js
index 3e9de7dd..0ef17fc2 100644
--- a/gdbgui/static/js/gdbgui.js
+++ b/gdbgui/static/js/gdbgui.js
@@ -87,7 +87,19 @@ const GdbApi = {
             error: Status.render_ajax_error_msg
         })
     },
-    run_gdb_command: function(cmd){
+    /**
+     * runs a gdb cmd (or commands) directly in gdb on the backend
+     * validates command before sending, and updates the gdb console and status bar
+     * @param cmd: a string or array of strings, that are directly evaluated by gdb
+     * @param success_callback: function to be called upon successful completion.  The data returned
+     *                          is an object. See pygdbmi for a description of the format.
+     *                          The default callback works in most cases, but in some cases a the response is stateful and
+     *                          requires a specific callback. For example, when creating a variable in gdb
+     *                          to watch, gdb returns generic looking data that a generic callback could not
+     *                          figure out how to handle.
+     * @return nothing
+     */
+    run_gdb_command: function(cmd, success_callback=process_gdb_response){
         if(_.trim(cmd) === ''){
             return
         }
@@ -113,7 +125,7 @@ const GdbApi = {
             cache: false,
             method: 'POST',
             data: {'cmd': cmd},
-            success: process_gdb_response,
+            success: success_callback,
             error: Status.render_ajax_error_msg,
         })
     },
@@ -195,10 +207,10 @@ const GdbConsoleComponent = {
         if(_.isString(s)){
             strings = [s]
         }
-        strings.map(string => GdbConsoleComponent.el.append(`<p class='no_margin output'>${Util.escape(string)}</span>`))
+        strings.map(string => GdbConsoleComponent.el.append(`<p class='no_margin output'>${Util.escape(string)}</p>`))
     },
     add_sent_commands(cmds){
-        cmds.map(cmd => GdbConsoleComponent.el.append(`<p class='no_margin output sent_command pointer' data-cmd="${cmd}">${Util.escape(cmd)}</span>`))
+        cmds.map(cmd => GdbConsoleComponent.el.append(`<p class='no_margin output sent_command pointer' data-cmd="${cmd}">${Util.escape(cmd)}</p>`))
         GdbConsoleComponent.scroll_to_bottom()
     },
     scroll_to_bottom: function(){
@@ -244,6 +256,9 @@ const History = {
 
 const GdbMiOutput = {
     el: $('#gdb_mi_output'),
+    init: function(){
+        $('.clear_mi_output').click(GdbMiOutput.clear)
+    },
     clear: function(){
         GdbMiOutput.el.html('')
     },
@@ -354,6 +369,8 @@ const SourceCode = {
             if (line_num === current_line){
               tags = `id=current_line ${options.highlight ? 'class=highlight' : ''}`
             }
+            line = line.replace("<", "&lt;")
+            line = line.replace(">", "&gt;")
             tbody.push(`<tr class='source_code ${breakpoint_class}' data-line=${line_num}>
                 <td class='gutter'><div></div></td>
                 <td class='line_num'>${line_num}</td>
@@ -528,10 +545,13 @@ const Disassembly = {
 
 const Stack = {
     el: $('#stack'),
+    init: function(){
+        $("body").on("click", ".select_frame", Stack.click_select_frame)
+    },
     render_stack: function(stack){
         for (let s of stack){
             if ('fullname' in s){
-                s[' '] = `<a class='view_file pointer' data-fullname=${s.fullname || ''} data-line=${s.line || ''} data-highlight=true>View</a>`
+                s[' '] = `<a class='select_frame pointer' data-fullname=${s.fullname} data-line=${s.line || ''} data-framenum=${s.level} data-highlight=true>View</a>`
             }
             if ('addr' in s){
                 s.addr = Memory.make_addr_into_link(s.addr)
@@ -541,6 +561,20 @@ const Stack = {
         let [columns, data] = Util.get_table_data_from_objs(stack)
         Stack.el.html(Util.get_table(columns, data))
     },
+    /**
+     * select a frame and jump to the line in source code
+     * triggered when clicking on an object with the "select_frame" class
+     * must have data attributes: framenum, fullname, line
+     *
+     */
+    click_select_frame: function(e){
+        Stack.select_frame(e.currentTarget.dataset.framenum)
+        SourceCode.click_view_file(e)
+        Variables.refresh_all_for_current_frame()
+    },
+    select_frame: function(framenum){
+        GdbApi.run_gdb_command(`-stack-select-frame ${framenum}`)
+    }
 }
 
 const Registers = {
@@ -697,6 +731,218 @@ const Memory = {
     }
 }
 
+/**
+ * https://sourceware.org/gdb/onlinedocs/gdb/GDB_002fMI-Variable-Objects.html#GDB_002fMI-Variable-Objects
+ */
+const Variables = {
+    el: $('#variables'),
+    el_input: $('#variable_input'),
+    init: function(){
+        // create new var when enter is pressed
+        Variables.el_input.keydown(Variables.keydown_on_input)
+
+        // remove var when icon is clicked
+        $("body").on("click", ".delete_gdb_variable", Variables.click_delete_gdb_variable)
+        Variables.render()
+    },
+    state: {
+        waiting_for_create_var_response: false,
+        waiting_for_children_list_response: false,
+        children_being_retrieve_for_var: null,
+        expression_being_created: null,
+        expression_to_gdb_data: {},
+        array_of_variable_objs: []
+    },
+    get_obj_from_gdb_var_name: function(gdb_var_name){
+        for(let key in Variables.state.expression_to_gdb_data){
+            let obj = Variables.state.expression_to_gdb_data[key]
+            if (obj.name === gdb_var_name){
+                return obj
+            }
+        }
+        return null
+    },
+    get_expression_from_gdb_var_name: function(gdb_var_name){
+        for(let key in Variables.state.expression_to_gdb_data){
+            let obj = Variables.state.expression_to_gdb_data[key]
+            if (obj.name === gdb_var_name){
+                return key
+            }
+        }
+        return undefined
+    },
+    delete_local_gdb_var_data: function(gdb_var_name){
+        let key = Variables.get_expression_from_gdb_var_name(gdb_var_name)
+        if(key){
+            delete Variables.state.expression_to_gdb_data[key]
+        }
+    },
+    keydown_on_input: function(e){
+        if((e.keyCode === ENTER_BUTTON_NUM)) {
+            let expr = Variables.el_input.val()
+            if(_.trim(expr) !== ''){
+                Variables.create_variable(Variables.el_input.val())
+            }
+        }
+    },
+    create_variable: function(expression){
+        if(Variables.waiting_for_create_var_response === true){
+            Status.render(`cannot create a new variable before finishing creation of expression "${Variables.state.expression_being_created}"`)
+            return
+        }
+        Variables.state.waiting_for_create_var_response = true
+        Variables.expression_being_created = expression
+        // - means auto assign variable name in gdb
+        // * means evaluate it at the current frame
+        // need to use custom callback due to stateless nature of gdb's response
+        // Variables.callback_after_create_variable
+        GdbApi.run_gdb_command(`-var-create - * ${expression}`, Variables.callback_after_create_variable)
+    },
+    callback_after_create_variable: function(mi_response_array){
+        Variables.state.waiting_for_create_var_response = false
+
+        mi_response_array.map(r => GdbMiOutput.add_mi_output(r))
+
+        if(mi_response_array.length === 1){
+            let r = mi_response_array[0]
+            if(r.type === 'result' && r.message === 'done'){
+               // an example payload:
+               // "payload": {
+               //      "has_more": "0",
+               //      "name": "var2",
+               //      "numchild": "0",
+               //      "thread-id": "1",
+               //      "type": "int",
+               //      "value": "0"
+               //  },
+
+               // add the children key and initialize to empty array
+                r.payload.children = []
+
+                // save this payload
+                Variables.state.expression_to_gdb_data[Variables.expression_being_created] = r.payload
+
+                // fetch info on children if necessary
+                if(parseInt(r.payload.numchild) > 0){
+                    Variables.get_children_for_var(r.payload.name)
+                }
+
+            }else{
+                // this is an unexpected case. Let the status bar render some info to help debug the issue.
+                Status.render_from_gdb_mi_response(r)
+            }
+        }else{
+            process_gdb_response(mi_response_array)
+        }
+        Variables.render()
+    },
+    get_children_for_var: function(gdb_variable_name){
+        if(Variables.state.waiting_for_children_list_response === true){
+            Status.render(`cannot search for children of ${gdb_variable_name} while waiting for response from ${Variables.state.children_being_retrieved_for_var}`)
+            return
+        }
+        Variables.state.children_being_retrieved_for_var = gdb_variable_name
+        Variables.state.waiting_for_children_list_response = true
+        GdbApi.run_gdb_command(`-var-list-children --all-values ${gdb_variable_name}`, Variables.callback_after_list_children)
+    },
+    callback_after_list_children: function(mi_response_array){
+        Variables.state.waiting_for_children_list_response = false
+
+        mi_response_array.map(r => GdbMiOutput.add_mi_output(r))
+
+        let r = mi_response_array[0]
+        let obj = Variables.get_obj_from_gdb_var_name(Variables.state.children_being_retrieved_for_var)
+        if(obj){
+            obj.children = r.payload.children
+        }
+        Variables.render()
+    },
+    render: function(){
+        const col_names = ['', 'expression (type): value', 'gdb var']
+        const child_display = function(child){
+            return child.name
+        }
+        let table_data = []
+
+        for(let expression in Variables.state.expression_to_gdb_data){
+            let obj = Variables.state.expression_to_gdb_data[expression]
+            if(obj.in_scope === 'true' || _.isUndefined(obj.in_scope)){
+                table_data.push(Variables.get_rendered_var(expression, obj))
+            }
+        }
+
+        Variables.el.html(Util.get_table(col_names, table_data))
+    },
+    get_rendered_var: function(expression, obj){
+        console.log(obj.in_scope)
+
+        let child_tree = `<ul>
+
+        </ul>`
+        let child_li = ''
+        for(let child of obj.children){
+            child_li += `<li>${child.exp} (${child.type}): ${child.value}</li>`
+
+            // TODO handle children of children
+            // if(parseInt(child.numchild) > 0){
+            //     child_name_and_val = '+ ' + child_name_and_val
+            // }
+        }
+
+        let delete_button = `<span class='glyphicon glyphicon-remove delete_gdb_variable pointer' data-gdb_variable='${obj.name}' />`
+
+        let expression_and_value = `
+        <ul>
+        <li>${expression} (${obj.type}): ${obj.value}
+            <ul>
+                ${child_li}
+            </ul>
+        <ul>
+        `
+        return [delete_button, expression_and_value, obj.name]
+    },
+    update_variable_values: function(){
+        GdbApi.run_gdb_command(`-var-update *`)
+    },
+    handle_changelist: function(changelist_array){
+        for(let c of changelist_array){
+            let obj = Variables.get_obj_from_gdb_var_name(c.name)
+            if(obj){
+                _.assign(obj, c)
+            }
+        }
+        Variables.render()
+    },
+    click_delete_gdb_variable: function(e){
+        // delete locally
+        Variables.delete_local_gdb_var_data(e.currentTarget.dataset.gdb_variable)
+
+        // delete in gdb too
+        GdbApi.run_gdb_command(`-var-delete ${e.currentTarget.dataset.gdb_variable}`)
+
+        // re-render variables in browser
+        Variables.render()
+    }
+}
+
+const AllLocalVariables = {
+    el: $('#all_local_variables'),
+    render: function(data){
+        const col_names = ['variable', 'value']
+        let table_data = []
+        for(let obj of data){
+            let value_str = JSON.stringify(obj.value, null, 4).replace(/[^(\\)]\\n/g)
+            table_data.push([obj.name, `<p class='pre'>${value_str}</p>`])
+        }
+
+        Variables.el.html(Util.get_table(col_names, table_data))
+    },
+    refresh_all_for_current_frame: function(){
+        GdbApi.run_gdb_command(`-stack-list-locals --all-values`)
+    }
+}
+
+
 const GlobalEvents = {
     // Initialize
     init: function(){
@@ -766,6 +1012,12 @@ const process_gdb_response = function(response_array){
             if ('memory' in r.payload){
                 Memory.render_memory(r.payload.memory)
             }
+            if ('locals' in r.payload){
+                AllLocalVariables.render(r.payload.locals)
+            }
+            if ('changelist' in r.payload){
+                Variables.handle_changelist(r.payload.changelist)
+            }
             // if (your check here) {
             //      render your custom compenent here!
             // }
@@ -815,11 +1067,14 @@ GlobalEvents.init()
 GdbApi.init()
 GdbCommandInput.init()
 GdbConsoleComponent.init()
+GdbMiOutput.init()
+Stack.init()
 SourceCode.init()
 Disassembly.init()
 BinaryLoader.init()
 SourceFileAutocomplete.init()
 Memory.init()
+Variables.init()
 
 window.addEventListener("beforeunload", BinaryLoader.onclose)
 
diff --git a/gdbgui/templates/gdbgui.jade b/gdbgui/templates/gdbgui.jade
index 92663008..f5368498 100644
--- a/gdbgui/templates/gdbgui.jade
+++ b/gdbgui/templates/gdbgui.jade
@@ -40,15 +40,15 @@ body
 
                 //- premade buttons
                 div.btn-group.btn-group-xs(role="group")
-                    button.btn.btn-default.gdb_cmd(type='button', data-cmd0='-break-list', data-cmd1='-exec-run', title='Starts execution of the inferior from the beginning. The inferior executes until either a breakpoint is encountered or the program exits. In the latter case the output will include an exit code, if the program has exited exceptionally. (-exec-run)') Run
+                    button.btn.btn-default.gdb_cmd(type='button', data-cmd0='-break-list', data-cmd1='-exec-run', , title='Starts execution of the inferior from the beginning. The inferior executes until either a breakpoint is encountered or the program exits. In the latter case the output will include an exit code, if the program has exited exceptionally. (-exec-run)') Run
                         span.glyphicon.glyphicon-off.padding_left
-                    button.btn.btn-default.gdb_cmd(type='button', data-cmd='-exec-continue', title='Resumes the execution of the inferior program, which will continue to execute until it reaches a debugger stop event. (-exec-continue)') Continue
+                    button.btn.btn-default.gdb_cmd(type='button', data-cmd0='-exec-continue', data-cmd1='-var-update --all-values *', title='Resumes the execution of the inferior program, which will continue to execute until it reaches a debugger stop event. (-exec-continue)') Continue
                         span.glyphicon.glyphicon-play.padding_left
-                    button.btn.btn-default.gdb_cmd(type='button', data-cmd='-exec-next', title="Resumes execution of the inferior program, stopping when the beginning of the next source line is reached. (-exec-next)") Next
+                    button.btn.btn-default.gdb_cmd(type='button', data-cmd0='-exec-next', data-cmd1='-var-update --all-values *', title="Resumes execution of the inferior program, stopping when the beginning of the next source line is reached. (-exec-next)") Next
                         span.glyphicon.glyphicon-step-forward.padding_left
-                    button.btn.btn-default.gdb_cmd(type='button', data-cmd='-exec-step', title="Resumes execution of the inferior program, stopping when the beginning of the next source line is reached, if the next source line is not a function call. If it is, stop at the first instruction of the called function. (-exec-step)") Step
+                    button.btn.btn-default.gdb_cmd(type='button', data-cmd0='-exec-step', data-cmd1='-var-update --all-values *', title="Resumes execution of the inferior program, stopping when the beginning of the next source line is reached, if the next source line is not a function call. If it is, stop at the first instruction of the called function. (-exec-step)") Step
                         span.glyphicon.glyphicon-arrow-down.padding_left
-                    button.btn.btn-default.gdb_cmd(type='button', data-cmd='-exec-return', title="Makes current function return immediately. Doesn't execute the inferior. Displays the new current frame. (-exec-return)") Return
+                    button.btn.btn-default.gdb_cmd(type='button', data-cmd0='-exec-return', data-cmd1='-var-update --all-values *', title="Makes current function return immediately. Doesn't execute the inferior. Displays the new current frame. (-exec-return)") Return
                         span.glyphicon.glyphicon-arrow-up.padding_left
                     button.btn.btn-default.gdb_cmd(type='button', data-cmd0='-break-insert main', data-cmd1='-break-list', title="Add breakpoint at the 'main' function (-break-insert main)") Add Breakpoint to Main
                         span.glyphicon.glyphicon-flag.padding_left
@@ -100,6 +100,21 @@ body
             input.form-control.dropdown-input#gdb_command(type="text", autocomplete="on", data-list="#gdb_command_reference", placeholder='enter any gdb command, or gdb machine interface command')
 
 
+        div.col-md-6.no_padding
+            div.titlebar
+                span.lighttext variables
+                span.glyphicon.glyphicon-plus.resizer.pointer(data-target_selector="#variables" data-resize_type="enlarge")
+                span.glyphicon.glyphicon-minus.resizer.pointer(data-target_selector="#variables" data-resize_type="shrink")
+                input#variable_input.form-control(placeholder='expression to watch for current frame')
+            div#variables.gdb_content_div
+
+        div.col-md-6.no_padding
+            div.titlebar
+                span.lighttext All Local Variables
+                span.glyphicon.glyphicon-plus.resizer.pointer(data-target_selector="#all_local_variables" data-resize_type="enlarge")
+                span.glyphicon.glyphicon-minus.resizer.pointer(data-target_selector="#all_local_variables" data-resize_type="shrink")
+            div#all_local_variables.gdb_content_div
+
         div.col-md-6.no_padding
             div.titlebar
                 span.lighttext breakpoints
@@ -138,13 +153,6 @@ body
                     span.glyphicon.glyphicon-refresh.padding_left
             div#disassembly.gdb_content_div
 
-        div.col-md-6.no_padding
-            div.titlebar
-                span.lighttext variables
-                span.glyphicon.glyphicon-plus.resizer.pointer(data-target_selector="#variables" data-resize_type="enlarge")
-                span.glyphicon.glyphicon-minus.resizer.pointer(data-target_selector="#variables" data-resize_type="shrink")
-            div#variables.gdb_content_div
-
         div.col-md-6.no_padding
             div.titlebar
                 span.lighttext memory
@@ -158,6 +166,8 @@ body
                 span.lighttext gdb machine interface output
                 span.glyphicon.glyphicon-plus.resizer.pointer(data-target_selector="#gdb_mi_output" data-resize_type="enlarge")
                 span.glyphicon.glyphicon-minus.resizer.pointer(data-target_selector="#gdb_mi_output" data-resize_type="shrink")
+                button.btn.btn-default.btn-xs.clear_mi_output(type='button', title='Clear (clears ui element, does not send a gdb command)') Clear
+                        span.glyphicon.glyphicon-ban-circle.padding_left
             div#gdb_mi_output.gdb_content_div
 
 footer(style='height:200px; width:100%; margin:0; margin-top: 50px; padding:20px; background-color: #f5f5f5')

From 9f5080ed47696552b518da609843bb69b5ff37e1 Mon Sep 17 00:00:00 2001
From: Chad Smith <chadsmith27@gmail.com>
Date: Thu, 5 Jan 2017 17:06:37 -0800
Subject: [PATCH 4/7] variables can be displayed one level deep; all local
 vairables can also be displayed

---
 gdbgui/static/css/gdbgui.css |  9 ++--
 gdbgui/static/js/gdbgui.js   | 98 +++++++++++++++++++-----------------
 gdbgui/templates/gdbgui.jade |  1 +
 3 files changed, 58 insertions(+), 50 deletions(-)

diff --git a/gdbgui/static/css/gdbgui.css b/gdbgui/static/css/gdbgui.css
index 1440da91..60fdf384 100644
--- a/gdbgui/static/css/gdbgui.css
+++ b/gdbgui/static/css/gdbgui.css
@@ -6,6 +6,9 @@ body{
 table{
   font-size: 0.9em;
 }
+.monospace{
+  font-family: monospace;
+}
 .lighttext{
   color: #4a4a4a;
 }
@@ -75,11 +78,12 @@ table{
   background: rgba(255, 255, 0, 0.5);
 }
 .breakpoint td.gutter div{
-  background: blue;
+  background: #ff3838;
   width: 0.9em;
   height: 0.9em;
   border-radius: 50%;
   border-color: black;
+  margin-left: 5px;
 }
 .no_breakpoint td.gutter div{
   /*background: blue;*/
@@ -93,7 +97,7 @@ table{
 }
 .gutter{
   width: 0.9em;
-  padding-right: 5px;
+  padding-right: 30px;
   background: #d4ffab;
 }
 .pre{
@@ -104,7 +108,6 @@ pre{
 }
 .source_code:hover td, .source_code:hover td pre{
   background-color: lightblue;
-  cursor: pointer;
 }
 .source_code td{
   background-color: #f7f7f7
diff --git a/gdbgui/static/js/gdbgui.js b/gdbgui/static/js/gdbgui.js
index 0ef17fc2..aaf1959b 100644
--- a/gdbgui/static/js/gdbgui.js
+++ b/gdbgui/static/js/gdbgui.js
@@ -336,8 +336,8 @@ const SourceCode = {
     rendered_source_file_fullname: null,
     rendered_source_file_line: null,
     init: function(){
-        $("body").on("click", ".breakpoint", SourceCode.click_breakpoint)
-        $("body").on("click", ".no_breakpoint", SourceCode.click_source_file_gutter_with_no_breakpoint)
+        $("body").on("click", ".breakpoint .gutter", SourceCode.click_breakpoint)
+        $("body").on("click", ".no_breakpoint .gutter", SourceCode.click_source_file_gutter_with_no_breakpoint)
         $("body").on("click", ".view_file", SourceCode.click_view_file)
     },
     cached_source_files: [],  // list with keys fullname, source_code
@@ -371,8 +371,8 @@ const SourceCode = {
             }
             line = line.replace("<", "&lt;")
             line = line.replace(">", "&gt;")
-            tbody.push(`<tr class='source_code ${breakpoint_class}' data-line=${line_num}>
-                <td class='gutter'><div></div></td>
+            tbody.push(`<tr class='source_code ${breakpoint_class}'>
+                <td class='gutter pointer' data-line=${line_num}><div></div></td>
                 <td class='line_num'>${line_num}</td>
                 <td class='line_of_code'><pre ${tags}>${line}</pre></td>
                 </tr>
@@ -570,7 +570,7 @@ const Stack = {
     click_select_frame: function(e){
         Stack.select_frame(e.currentTarget.dataset.framenum)
         SourceCode.click_view_file(e)
-        Variables.refresh_all_for_current_frame()
+        AllLocalVariables.clear()
     },
     select_frame: function(framenum){
         GdbApi.run_gdb_command(`-stack-select-frame ${framenum}`)
@@ -750,32 +750,34 @@ const Variables = {
         waiting_for_children_list_response: false,
         children_being_retrieve_for_var: null,
         expression_being_created: null,
-        expression_to_gdb_data: {},
-        array_of_variable_objs: []
+        variables: []
+    },
+    save_new_variable: function(expression, gdb_var_name, mi_obj){
+        Variables.state.variables.push({'expression': expression, 'gdb_var_name': gdb_var_name, 'mi_obj': mi_obj})
     },
     get_obj_from_gdb_var_name: function(gdb_var_name){
-        for(let key in Variables.state.expression_to_gdb_data){
-            let obj = Variables.state.expression_to_gdb_data[key]
-            if (obj.name === gdb_var_name){
-                return obj
-            }
+        let objs = Variables.state.variables.filter(v => v.gdb_var_name === gdb_var_name)
+        if(objs.length === 1){
+            return objs[0]
         }
-        return null
+        return undefined
+    },
+    get_obj_from_expression: function(expression){
+        let objs = Variables.state.variables.filter(v => v.expression === expression)
+        if(objs.length === 1){
+            return objs[0]
+        }
+        return undefined
     },
     get_expression_from_gdb_var_name: function(gdb_var_name){
-        for(let key in Variables.state.expression_to_gdb_data){
-            let obj = Variables.state.expression_to_gdb_data[key]
-            if (obj.name === gdb_var_name){
-                return key
-            }
+        let objs = Variables.state.variables.filter(v => v.gdb_var_name === gdb_var_name)
+        if(objs.length === 1){
+            return objs[0].expression
         }
         return undefined
     },
     delete_local_gdb_var_data: function(gdb_var_name){
-        let key = Variables.get_expression_from_gdb_var_name(gdb_var_name)
-        if(key){
-            delete Variables.state.expression_to_gdb_data[key]
-        }
+        _.remove(Variables.state.variables, v => v.gdb_var_name === gdb_var_name)
     },
     keydown_on_input: function(e){
         if((e.keyCode === ENTER_BUTTON_NUM)) {
@@ -820,12 +822,12 @@ const Variables = {
                 r.payload.children = []
 
                 // save this payload
-                Variables.state.expression_to_gdb_data[Variables.expression_being_created] = r.payload
+                Variables.save_new_variable(Variables.expression_being_created, r.payload.name, r.payload)
 
-                // fetch info on children if necessary
-                if(parseInt(r.payload.numchild) > 0){
-                    Variables.get_children_for_var(r.payload.name)
-                }
+                // // fetch info on children if necessary
+                // if(parseInt(r.payload.numchild) > 0){
+                //     Variables.get_children_for_var(r.payload.name)
+                // }
 
             }else{
                 // this is an unexpected case. Let the status bar render some info to help debug the issue.
@@ -845,18 +847,18 @@ const Variables = {
         Variables.state.waiting_for_children_list_response = true
         GdbApi.run_gdb_command(`-var-list-children --all-values ${gdb_variable_name}`, Variables.callback_after_list_children)
     },
-    callback_after_list_children: function(mi_response_array){
-        Variables.state.waiting_for_children_list_response = false
+    // callback_after_list_children: function(mi_response_array){
+    //     Variables.state.waiting_for_children_list_response = false
 
-        mi_response_array.map(r => GdbMiOutput.add_mi_output(r))
+    //     mi_response_array.map(r => GdbMiOutput.add_mi_output(r))
 
-        let r = mi_response_array[0]
-        let obj = Variables.get_obj_from_gdb_var_name(Variables.state.children_being_retrieved_for_var)
-        if(obj){
-            obj.children = r.payload.children
-        }
-        Variables.render()
-    },
+    //     let r = mi_response_array[0]
+    //     let obj = Variables.get_obj_from_gdb_var_name(Variables.state.children_being_retrieved_for_var)
+    //     if(obj){
+    //         obj.mi_obj.children = r.payload.children
+    //     }
+    //     Variables.render()
+    // },
     render: function(){
         const col_names = ['', 'expression (type): value', 'gdb var']
         const child_display = function(child){
@@ -864,23 +866,22 @@ const Variables = {
         }
         let table_data = []
 
-        for(let expression in Variables.state.expression_to_gdb_data){
-            let obj = Variables.state.expression_to_gdb_data[expression]
+        for(let obj of Variables.state.variables){
+            console.log(obj.in_scope)
             if(obj.in_scope === 'true' || _.isUndefined(obj.in_scope)){
-                table_data.push(Variables.get_rendered_var(expression, obj))
+                table_data.push(Variables.get_rendered_var(obj.expression, obj.mi_obj))
             }
         }
 
         Variables.el.html(Util.get_table(col_names, table_data))
     },
-    get_rendered_var: function(expression, obj){
-        console.log(obj.in_scope)
+    get_rendered_var: function(expression, mi_obj){
 
         let child_tree = `<ul>
 
         </ul>`
         let child_li = ''
-        for(let child of obj.children){
+        for(let child of mi_obj.children){
             child_li += `<li>${child.exp} (${child.type}): ${child.value}</li>`
 
             // TODO handle children of children
@@ -889,17 +890,17 @@ const Variables = {
             // }
         }
 
-        let delete_button = `<span class='glyphicon glyphicon-remove delete_gdb_variable pointer' data-gdb_variable='${obj.name}' />`
+        let delete_button = `<span class='glyphicon glyphicon-remove delete_gdb_variable pointer' data-gdb_variable='${mi_obj.name}' />`
 
         let expression_and_value = `
         <ul>
-        <li>${expression} (${obj.type}): ${obj.value}
+        <li>${expression} (${mi_obj.type}): ${mi_obj.value}
             <ul>
                 ${child_li}
             </ul>
         <ul>
         `
-        return [delete_button, expression_and_value, obj.name]
+        return [delete_button, expression_and_value, mi_obj.name]
     },
     update_variable_values: function(){
         GdbApi.run_gdb_command(`-var-update *`)
@@ -935,10 +936,13 @@ const AllLocalVariables = {
             table_data.push([obj.name, `<p class='pre'>${value_str}</p>`])
         }
 
-        Variables.el.html(Util.get_table(col_names, table_data))
+        AllLocalVariables.el.html(Util.get_table(col_names, table_data))
     },
     refresh_all_for_current_frame: function(){
         GdbApi.run_gdb_command(`-stack-list-locals --all-values`)
+    },
+    clear: function(){
+        AllLocalVariables.el.html('')
     }
 }
 
diff --git a/gdbgui/templates/gdbgui.jade b/gdbgui/templates/gdbgui.jade
index f5368498..7ece22ee 100644
--- a/gdbgui/templates/gdbgui.jade
+++ b/gdbgui/templates/gdbgui.jade
@@ -111,6 +111,7 @@ body
         div.col-md-6.no_padding
             div.titlebar
                 span.lighttext All Local Variables
+                button.btn.btn-default.btn-xs.gdb_cmd(type='button', data-cmd='-stack-list-locals --all-values', title="Refresh all data names and values (-stack-list-locals --all-values')") Refresh
                 span.glyphicon.glyphicon-plus.resizer.pointer(data-target_selector="#all_local_variables" data-resize_type="enlarge")
                 span.glyphicon.glyphicon-minus.resizer.pointer(data-target_selector="#all_local_variables" data-resize_type="shrink")
             div#all_local_variables.gdb_content_div

From 8ffe536fcb60cc63d72f2e610f361fd2b1993353 Mon Sep 17 00:00:00 2001
From: Chad Smith <chadsmith27@gmail.com>
Date: Fri, 6 Jan 2017 11:03:00 -0800
Subject: [PATCH 5/7] some css cleanup

---
 README.md                    |   2 +-
 gdbgui/static/css/gdbgui.css | 106 +++++++++++++++++++++--------------
 gdbgui/static/js/gdbgui.js   |  44 +++++++++------
 gdbgui/templates/gdbgui.jade |  22 ++++----
 4 files changed, 102 insertions(+), 72 deletions(-)

diff --git a/README.md b/README.md
index f89b0a58..a723ee03 100644
--- a/README.md
+++ b/README.md
@@ -74,6 +74,7 @@ Despite this list, gdbgui is quite usable in its current form
 * ~~allow argument passing to the inferior process being debugged~~
 * ~~add links back to github, etc~~
 * ~~escape brackets on system <includes> so they don't disappear~~
+* ~~only make gutter create/delete breakpoints, not anywhere in source file~~
 * add button to widen windows
 * add clear button to windows
 * improve toolbar styling, change color when error occurs
@@ -82,4 +83,3 @@ Despite this list, gdbgui is quite usable in its current form
 * add autocompletion and documentation of all commands
 * add ability to view/inspect variables
 * add ability to view/inspect memory
-* only make gutter create/delete breakpoints, not anywhere in source file
diff --git a/gdbgui/static/css/gdbgui.css b/gdbgui/static/css/gdbgui.css
index 60fdf384..3c70a07c 100644
--- a/gdbgui/static/css/gdbgui.css
+++ b/gdbgui/static/css/gdbgui.css
@@ -1,3 +1,4 @@
+/* styling for all html tags */
 body{
   background: #ccc;
   color: grey;
@@ -6,6 +7,14 @@ body{
 table{
   font-size: 0.9em;
 }
+pre{
+  overflow: visible !important;
+}
+
+/* styling for generic classes */
+.pre{
+  white-space: pre;
+}
 .monospace{
   font-family: monospace;
 }
@@ -16,12 +25,32 @@ table{
   /* glyphicons are too bold, make them lighter*/
     color: #848484;
 }
+/* components get their own titlebars */
 .titlebar{
   width: 100%;
   color: black;
   background-color: white;
 }
-#console, .gdb_console{
+.pointer{
+  cursor: pointer;
+}
+
+/* specific styling for ids */
+#always_on_top{
+  position: fixed;
+  top: 0;
+  margin-top: 0;
+  height: 102px;
+  width: 100%;
+  border-bottom: black;
+  border-style: solid;
+  border-width: 0px;
+  border-bottom-width: 1px;
+  z-index: 1000;
+  background: #f1f1f1;
+  border-bottom-color: #ccc;
+}
+#console{
   font-size: 0.9em !important;
   background-color: #292929 !important;
   color: #f9f9f9 !important;
@@ -37,17 +66,11 @@ table{
   color: #f9f9f9 !important;
   font-family: monospace !important;
 }
-#stdout {
-  color: black;
-}
-#console, #stdout, #gdb_mi_output{
+#gdb_mi_output{
   font-family: monospace;
   overflow: auto;
   font-size: 0.9em;
 }
-.pointer{
-  cursor: pointer;
-}
 .sent_command:hover{
   /* lighten background */
   background-color:rgba(255,255,255,0.1)
@@ -58,16 +81,12 @@ table{
     opacity: 0.6;
     pointer-events: none;
 }
-.no_margin{
+.margin_sm{
   margin: 2px;
 }
 .no_padding{
   padding: 2px !important;
 }
-.code{
-  overflow: auto;
-  font-size: 0.9em;
-}
 .code pre, table.code {
     margin: 0px;
     padding: 0px;
@@ -77,40 +96,38 @@ table{
 .highlight{
   background: rgba(255, 255, 0, 0.5);
 }
-.breakpoint td.gutter div{
-  background: #ff3838;
-  width: 0.9em;
-  height: 0.9em;
-  border-radius: 50%;
-  border-color: black;
-  margin-left: 5px;
-}
-.no_breakpoint td.gutter div{
-  /*background: blue;*/
-  width: 0.9em;
-  height: 0.9em;
-  border-radius: 50%;
-  border-color: black;
-}
-.active_breakpoint{
-  background: red;
-}
-.gutter{
-  width: 0.9em;
-  padding-right: 30px;
-  background: #d4ffab;
+.right_border{
+  border-width: 0;
+  border-right: 1px;
+  border-style: solid;
+  border-color: #c7c7c7;
 }
-.pre{
-  white-space: pre;
+.line_num{
+  padding-left: 10px;
+  padding-right: 10px;
+  font-family: monospace;
+  font-size: 0.9em;
+  color: #ababab;
+  cursor: pointer;
 }
-pre{
-  overflow: visible !important;
+/* the line number has its style changed if it has a breakpoint */
+.line_num.breakpoint{
+  background: #33cdff;
+  color: black;
+  border-style: solid;
+  border-color: #000000;
+  border-width: 1px;
 }
-.source_code:hover td, .source_code:hover td pre{
-  background-color: lightblue;
+/* set background color over souce code only */
+.source_code_row.line_of_code td{
+  background-color: #f7f7f7;
 }
-.source_code td{
-  background-color: #f7f7f7
+.line_of_code pre{
+  margin-left: 10px;
+}
+/* when hovering, set background color of entire row */
+.source_code_row:hover td, .source_code_row:hover td pre{
+  background-color: lightblue;
 }
 .padding_left{
   padding-left: 5px;
@@ -133,11 +150,14 @@ pre{
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 }
+/* auto-complete librarie's dropdown should only be 200px high, and should
+have scrollbar, so it doesn't take over the page */
 .awesomplete  ul {
   overflow: auto;
   max-height: 200px;
 }
 
+/* show a flash of color */
 .flash {
     -webkit-animation-name: flash-animation;
     -webkit-animation-duration: 1.0s;
diff --git a/gdbgui/static/js/gdbgui.js b/gdbgui/static/js/gdbgui.js
index aaf1959b..13d55831 100644
--- a/gdbgui/static/js/gdbgui.js
+++ b/gdbgui/static/js/gdbgui.js
@@ -207,10 +207,10 @@ const GdbConsoleComponent = {
         if(_.isString(s)){
             strings = [s]
         }
-        strings.map(string => GdbConsoleComponent.el.append(`<p class='no_margin output'>${Util.escape(string)}</p>`))
+        strings.map(string => GdbConsoleComponent.el.append(`<p class='margin_sm output'>${Util.escape(string)}</p>`))
     },
     add_sent_commands(cmds){
-        cmds.map(cmd => GdbConsoleComponent.el.append(`<p class='no_margin output sent_command pointer' data-cmd="${cmd}">${Util.escape(cmd)}</p>`))
+        cmds.map(cmd => GdbConsoleComponent.el.append(`<p class='margin_sm output sent_command pointer' data-cmd="${cmd}">${Util.escape(cmd)}</p>`))
         GdbConsoleComponent.scroll_to_bottom()
     },
     scroll_to_bottom: function(){
@@ -270,7 +270,7 @@ const GdbMiOutput = {
             'status': "text-danger",
             'console': "text-info",
         }
-        GdbMiOutput.el.append(`<p class='pre ${text_class[mi_obj.type]} no_margin output'>${mi_obj.type}:\n${JSON.stringify(mi_obj, null, 4).replace(/[^(\\)]\\n/g)}</span>`)
+        GdbMiOutput.el.append(`<p class='pre ${text_class[mi_obj.type]} margin_sm output'>${mi_obj.type}:\n${JSON.stringify(mi_obj, null, 4).replace(/[^(\\)]\\n/g)}</span>`)
     },
     scroll_to_bottom: function(){
         GdbMiOutput.el.animate({'scrollTop': GdbMiOutput.el.prop('scrollHeight')})
@@ -336,20 +336,22 @@ const SourceCode = {
     rendered_source_file_fullname: null,
     rendered_source_file_line: null,
     init: function(){
-        $("body").on("click", ".breakpoint .gutter", SourceCode.click_breakpoint)
-        $("body").on("click", ".no_breakpoint .gutter", SourceCode.click_source_file_gutter_with_no_breakpoint)
+        $("body").on("click", ".source_code_row td .line_num", SourceCode.click_gutter)
         $("body").on("click", ".view_file", SourceCode.click_view_file)
     },
     cached_source_files: [],  // list with keys fullname, source_code
-    click_breakpoint: function(e){
+    click_gutter: function(e){
         let line = e.currentTarget.dataset.line
-        // todo: embed fullname in the dom instead of depending on state
-        Breakpoint.remove_breakpoint_if_present(SourceCode.rendered_source_file_fullname, line)
-    },
-    click_source_file_gutter_with_no_breakpoint: function(e){
-        let line = e.currentTarget.dataset.line
-        let cmd = [`-break-insert ${SourceCode.rendered_source_file_fullname}:${line}`, '-break-list']
-        GdbApi.run_gdb_command(cmd)
+        let has_breakpoint = (e.currentTarget.dataset.has_breakpoint === 'true')
+        if(has_breakpoint){
+            // clicked gutter with a breakpoint, remove it
+            Breakpoint.remove_breakpoint_if_present(SourceCode.rendered_source_file_fullname, line)
+
+        }else{
+            // clicked with no breakpoint, add it, and list all breakpoints to make sure breakpoint table is up to date
+            let cmd = [`-break-insert ${SourceCode.rendered_source_file_fullname}:${line}`, '-break-list']
+            GdbApi.run_gdb_command(cmd)
+        }
     },
     render_cached_source_file: function(){
         SourceCode.fetch_and_render_file(SourceCode.rendered_source_file_fullname, SourceCode.rendered_source_file_line, {'highlight': false, 'scroll': true})
@@ -364,17 +366,23 @@ const SourceCode = {
             bkpt_lines = Breakpoint.get_breakpoint_lines_For_file(fullname)
 
         for (let line of source_code){
-            let breakpoint_class = (bkpt_lines.indexOf(line_num) !== -1) ? 'breakpoint': 'no_breakpoint';
+            let has_breakpoint = bkpt_lines.indexOf(line_num) !== -1
+            let breakpoint_class = has_breakpoint ? 'breakpoint' : ''
             let tags = ''
             if (line_num === current_line){
               tags = `id=current_line ${options.highlight ? 'class=highlight' : ''}`
             }
             line = line.replace("<", "&lt;")
             line = line.replace(">", "&gt;")
-            tbody.push(`<tr class='source_code ${breakpoint_class}'>
-                <td class='gutter pointer' data-line=${line_num}><div></div></td>
-                <td class='line_num'>${line_num}</td>
-                <td class='line_of_code'><pre ${tags}>${line}</pre></td>
+            tbody.push(`
+                <tr class='source_code_row'>
+                    <td class='right_border'>
+                        <div class='line_num ${breakpoint_class}' data-line=${line_num} data-has_breakpoint=${has_breakpoint}>${line_num}</div>
+                    </td>
+
+                    <td class='line_of_code'>
+                        <pre ${tags}>${line}</pre>
+                    </td>
                 </tr>
                 `)
             line_num++;
diff --git a/gdbgui/templates/gdbgui.jade b/gdbgui/templates/gdbgui.jade
index 7ece22ee..8d9931c3 100644
--- a/gdbgui/templates/gdbgui.jade
+++ b/gdbgui/templates/gdbgui.jade
@@ -18,17 +18,11 @@ head
     script(type="text/javascript" src='static/vendor/js/awesomeplete.min.js')
 
 body
-    div.container-fluid(style="position: fixed; top: 0; margin-top: 0;
-                                height: 30px; width: 100%;
-                                border-bottom: black; border-style: solid; border-width: 0px; border-bottom-width: 1px;
-                                z-index: 1000; background: #f1f1f1; border-bottom-color: #ccc;")
-        div.row
-            div(style="height: 20px; margin-top: 5px; margin-left: 10px")
-                span Status:&nbsp
-                span#status GDB is waiting to run a command
 
-    div.container-fluid(style="margin-top: 35px")
-        div.row
+    //- this container stays on top, no matter what
+    div.container-fluid#always_on_top
+
+        div.row(style='max-height: 80px')
             div.col-md-12
                 //- binary selection
                 form(role=form)
@@ -57,6 +51,14 @@ body
 
                     button.btn.btn-default.get_gdb_response(type="button") Get GDB Response
 
+        div.row
+            div(style="height: 20px; margin-top: 5px; margin-left: 15px")
+                span Status:&nbsp
+                span#status GDB is waiting to run a command
+
+    //- the div after the "always on top" div must givei a margin on top at least as tall as the "always on top" div
+    div.container-fluid(style="margin-top: 110px")
+
 
         //- source
         div.no_padding.col-md-12#source_div

From 3af12eb78f0615c3f61d02fb94f2f61a39b8db72 Mon Sep 17 00:00:00 2001
From: Chad Smith <chadsmith27@gmail.com>
Date: Fri, 6 Jan 2017 15:02:03 -0800
Subject: [PATCH 6/7] able to render variables with nested structures

---
 gdbgui/static/css/gdbgui.css |  34 +++++--
 gdbgui/static/js/gdbgui.js   | 171 +++++++++++++++++++++++++----------
 2 files changed, 149 insertions(+), 56 deletions(-)

diff --git a/gdbgui/static/css/gdbgui.css b/gdbgui/static/css/gdbgui.css
index 3c70a07c..f92bbad4 100644
--- a/gdbgui/static/css/gdbgui.css
+++ b/gdbgui/static/css/gdbgui.css
@@ -34,6 +34,15 @@ pre{
 .pointer{
   cursor: pointer;
 }
+.gdb_content_div{
+  overflow: auto;
+  height: 150px;
+  background-color: #f7f7f7;
+  border-color: grey;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 2px;
+}
 
 /* specific styling for ids */
 #always_on_top{
@@ -96,7 +105,8 @@ pre{
 .highlight{
   background: rgba(255, 255, 0, 0.5);
 }
-.right_border{
+.line_num_container{
+  width: 50px;
   border-width: 0;
   border-right: 1px;
   border-style: solid;
@@ -135,15 +145,6 @@ pre{
 .line_of_code{
   height: 18px
 }
-.gdb_content_div{
-  overflow: auto;
-  height: 150px;
-  background-color: #f7f7f7;
-  border-color: grey;
-  border-style: solid;
-  border-width: 1px;
-  border-radius: 2px;
-}
 .dropdown-btn {
     vertical-align: top;
     height: 30px;
@@ -175,3 +176,16 @@ have scrollbar, so it doesn't take over the page */
     from { background: yellow; }
     to   { background: default; }
 }
+
+#variables li{
+  list-style: none;
+}
+
+#variables ul.variable{
+    padding-left: 5px;
+    border: 0px;
+}
+#variables li:hover{
+  /* lighten background */
+  background-color: #ffffc0;
+}
diff --git a/gdbgui/static/js/gdbgui.js b/gdbgui/static/js/gdbgui.js
index 13d55831..9413d175 100644
--- a/gdbgui/static/js/gdbgui.js
+++ b/gdbgui/static/js/gdbgui.js
@@ -270,7 +270,9 @@ const GdbMiOutput = {
             'status': "text-danger",
             'console': "text-info",
         }
-        GdbMiOutput.el.append(`<p class='pre ${text_class[mi_obj.type]} margin_sm output'>${mi_obj.type}:\n${JSON.stringify(mi_obj, null, 4).replace(/[^(\\)]\\n/g)}</span>`)
+        let mi_obj_dump = JSON.stringify(mi_obj, null, 4)
+        mi_obj_dump = mi_obj_dump.replace(/[^(\\)]\\n/g).replace("<", "&lt;").replace(">", "&gt;")
+        GdbMiOutput.el.append(`<p class='pre ${text_class[mi_obj.type]} margin_sm output'>${mi_obj.type}:<br>${mi_obj_dump}</span>`)
     },
     scroll_to_bottom: function(){
         GdbMiOutput.el.animate({'scrollTop': GdbMiOutput.el.prop('scrollHeight')})
@@ -376,7 +378,7 @@ const SourceCode = {
             line = line.replace(">", "&gt;")
             tbody.push(`
                 <tr class='source_code_row'>
-                    <td class='right_border'>
+                    <td class='line_num_container right_border'>
                         <div class='line_num ${breakpoint_class}' data-line=${line_num} data-has_breakpoint=${has_breakpoint}>${line_num}</div>
                     </td>
 
@@ -670,7 +672,7 @@ const BinaryLoader = {
         }
 
         // tell gdb which arguments to use when calling the binary, before loading the binary
-        cmds = [`-exec-arguments ${args}`, `-file-exec-and-symbols ${binary}`]
+        cmds = [`-exec-arguments ${args}`, `-file-exec-and-symbols ${binary}`, `-break-insert main`, `-break-list`, `-exec-run`]
 
         // reload breakpoints after sending to make sure they're up to date
         if (Prefs.auto_reload_breakpoints()){
@@ -751,6 +753,7 @@ const Variables = {
 
         // remove var when icon is clicked
         $("body").on("click", ".delete_gdb_variable", Variables.click_delete_gdb_variable)
+        $("body").on("click", ".toggle_children_visibility", Variables.click_toggle_children_visibility)
         Variables.render()
     },
     state: {
@@ -760,15 +763,50 @@ const Variables = {
         expression_being_created: null,
         variables: []
     },
-    save_new_variable: function(expression, gdb_var_name, mi_obj){
-        Variables.state.variables.push({'expression': expression, 'gdb_var_name': gdb_var_name, 'mi_obj': mi_obj})
+    save_new_variable: function(expression, obj){
+        obj.expression = expression
+        Variables.state.variables.push(obj)
     },
+    get_child_with_name: function(children, name){
+        for(let child of children){
+            if(child.name === name){
+                return child
+            }
+        }
+        return undefined
+    },
+    /**
+     * Get object from gdb variable name. gdb variable names are unique, and don't match
+     * the expression being evaluated. If drilling down into fields of structures, the
+     * gdb variable name has dot notation, such as 'var.field1.field2'.
+     * @param gdb_var_name: gdb variable name to find corresponding cached object. Can have dot notation
+     * @return: object if found, or undefined if not found
+     */
     get_obj_from_gdb_var_name: function(gdb_var_name){
-        let objs = Variables.state.variables.filter(v => v.gdb_var_name === gdb_var_name)
+        // gdb provides names in dot notation
+        let gdb_var_names = Variables.state.children_being_retrieved_for_var.split('.'),
+            top_level_var_name = gdb_var_names[0],
+            children_names = gdb_var_names.slice(1, gdb_var_names.length)
+
+        let objs = Variables.state.variables.filter(v => v.name === top_level_var_name)
+
         if(objs.length === 1){
-            return objs[0]
+            // we found our top level object
+            let obj = objs[0]
+            let name_to_find = top_level_var_name
+            for(let i = 0; i < (children_names.length); i++){
+                // append the '.' and field name to find as a child of the object we're looking at
+                name_to_find += `.${children_names[i]}`
+
+                // our new object is this child
+                obj = Variables.get_child_with_name(obj.children, name_to_find)
+            }
+            return obj
+
+        }else{
+            console.error('couldnt find var')
+            return undefined
         }
-        return undefined
     },
     get_obj_from_expression: function(expression){
         let objs = Variables.state.variables.filter(v => v.expression === expression)
@@ -785,7 +823,7 @@ const Variables = {
         return undefined
     },
     delete_local_gdb_var_data: function(gdb_var_name){
-        _.remove(Variables.state.variables, v => v.gdb_var_name === gdb_var_name)
+        _.remove(Variables.state.variables, v => v.name === gdb_var_name)
     },
     keydown_on_input: function(e){
         if((e.keyCode === ENTER_BUTTON_NUM)) {
@@ -808,6 +846,15 @@ const Variables = {
         // Variables.callback_after_create_variable
         GdbApi.run_gdb_command(`-var-create - * ${expression}`, Variables.callback_after_create_variable)
     },
+    /**
+     * gdb returns objects for its variables that need a little more data
+     * add the children array
+     * parse numchild string to integer
+     */
+    prepare_gdb_obj_for_storage: function(obj){
+        obj.children = []
+        obj.numchild = parseInt(obj.numchild)
+    },
     callback_after_create_variable: function(mi_response_array){
         Variables.state.waiting_for_create_var_response = false
 
@@ -827,10 +874,10 @@ const Variables = {
                //  },
 
                // add the children key and initialize to empty array
-                r.payload.children = []
+                Variables.prepare_gdb_obj_for_storage(r.payload)
 
                 // save this payload
-                Variables.save_new_variable(Variables.expression_being_created, r.payload.name, r.payload)
+                Variables.save_new_variable(Variables.expression_being_created, r.payload)
 
                 // // fetch info on children if necessary
                 // if(parseInt(r.payload.numchild) > 0){
@@ -855,60 +902,93 @@ const Variables = {
         Variables.state.waiting_for_children_list_response = true
         GdbApi.run_gdb_command(`-var-list-children --all-values ${gdb_variable_name}`, Variables.callback_after_list_children)
     },
-    // callback_after_list_children: function(mi_response_array){
-    //     Variables.state.waiting_for_children_list_response = false
+    /**
+     * Got data regarding children of a gdb variable. It could be an immediate child, or grandchild, etc.
+     * We need to get the variable, then store this array as its children, and re-render.
+     */
+    callback_after_list_children: function(mi_response_array){
+        Variables.state.waiting_for_children_list_response = false
+
+        mi_response_array.map(r => GdbMiOutput.add_mi_output(r))
+
+        let r = mi_response_array[0]
 
-    //     mi_response_array.map(r => GdbMiOutput.add_mi_output(r))
+        // add array of children, and initialize to empty
+        r.payload.children.map(child_obj => Variables.prepare_gdb_obj_for_storage(child_obj))
 
-    //     let r = mi_response_array[0]
-    //     let obj = Variables.get_obj_from_gdb_var_name(Variables.state.children_being_retrieved_for_var)
-    //     if(obj){
-    //         obj.mi_obj.children = r.payload.children
-    //     }
-    //     Variables.render()
-    // },
+        let obj = Variables.get_obj_from_gdb_var_name(Variables.state.children_being_retrieved_for_var)
+
+
+        if(obj){
+            obj.children = r.payload.children
+        }else{
+            console.error(`attempted to save children for existing var, but couldn't find it: ${Variables.state.children_being_retrieved_for_var}`)
+        }
+        Variables.render()
+    },
     render: function(){
         const col_names = ['', 'expression (type): value', 'gdb var']
         const child_display = function(child){
             return child.name
         }
-        let table_data = []
+        let html = ''
 
         for(let obj of Variables.state.variables){
             console.log(obj.in_scope)
             if(obj.in_scope === 'true' || _.isUndefined(obj.in_scope)){
-                table_data.push(Variables.get_rendered_var(obj.expression, obj.mi_obj))
+                if(parseInt(obj.numchild) > 0){
+                    html += Variables.get_ul_for_var_with_children(obj.expression, obj, true)
+                }else{
+                    html += Variables.get_ul_for_var_without_children(obj.expression, obj, true)
+                }
             }
         }
 
-        Variables.el.html(Util.get_table(col_names, table_data))
+        Variables.el.html(html)
     },
-    get_rendered_var: function(expression, mi_obj){
-
-        let child_tree = `<ul>
-
-        </ul>`
-        let child_li = ''
+    get_ul_for_var_with_children: function(expression, mi_obj, is_root=false){
+        let child_tree = '<ul>'
         for(let child of mi_obj.children){
-            child_li += `<li>${child.exp} (${child.type}): ${child.value}</li>`
-
-            // TODO handle children of children
-            // if(parseInt(child.numchild) > 0){
-            //     child_name_and_val = '+ ' + child_name_and_val
-            // }
+            if(parseInt(child.numchild) > 0){
+                child_tree += `<li>${Variables.get_ul_for_var_with_children(child.exp, child)}</li>`
+            }else{
+                child_tree += `<li>${Variables.get_ul_for_var_without_children(child.exp, child)}</li>`
+            }
         }
+        child_tree += '</ul>'
 
-        let delete_button = `<span class='glyphicon glyphicon-remove delete_gdb_variable pointer' data-gdb_variable='${mi_obj.name}' />`
-
+        let delete_button = is_root ? `<span class='glyphicon glyphicon-remove delete_gdb_variable pointer' data-gdb_variable='${mi_obj.name}' />` : ''
         let expression_and_value = `
-        <ul>
-        <li>${expression} (${mi_obj.type}): ${mi_obj.value}
-            <ul>
-                ${child_li}
-            </ul>
-        <ul>
+        <ul class='variable'>
+            <li class='toggle_children_visibility pointer' data-gdb_variable_name='${mi_obj.name}'>
+                ${delete_button}
+                + ${expression}: ${mi_obj.value} (${mi_obj.type}, ${mi_obj.name})
+                ${child_tree}
+            </li>
+        </ul>
         `
-        return [delete_button, expression_and_value, mi_obj.name]
+        return expression_and_value
+    },
+    get_ul_for_var_without_children: function(expression, mi_obj, is_root=false){
+        let delete_button = is_root ? `<span class='glyphicon glyphicon-remove delete_gdb_variable pointer' data-gdb_variable='${mi_obj.name}' />` : ''
+        return `
+            <ul class='variable'>
+                <li data-gdb_variable_name='${mi_obj.name}'>
+                    ${delete_button}
+                    ${expression}: ${mi_obj.value} (${mi_obj.type}, ${mi_obj.name})
+                </li>
+            </ul>
+            `
+    },
+    click_toggle_children_visibility: function(e){
+        let children_uls = $(e.currentTarget).children('ul')
+        if(children_uls.length > 0){
+            // we have already fetched the data for these from gdb
+             $(e.currentTarget).children('ul').toggle()
+        }else{
+            // we need to fetch the child data
+            Variables.get_children_for_var(e.currentTarget.dataset.gdb_variable_name)
+        }
     },
     update_variable_values: function(){
         GdbApi.run_gdb_command(`-var-update *`)
@@ -954,7 +1034,6 @@ const AllLocalVariables = {
     }
 }
 
-
 const GlobalEvents = {
     // Initialize
     init: function(){

From 4e0d6913fdbc3bd6a7a4f3199362c4f6979d6f9e Mon Sep 17 00:00:00 2001
From: Chad Smith <chadsmith27@gmail.com>
Date: Fri, 6 Jan 2017 17:06:38 -0800
Subject: [PATCH 7/7] adjust position of variable input

---
 README.md                    |  4 +--
 gdbgui/static/css/gdbgui.css |  9 +++--
 gdbgui/static/js/gdbgui.js   | 66 ++++++++++++++++++++++--------------
 gdbgui/templates/gdbgui.jade | 51 +++++++++++++---------------
 4 files changed, 74 insertions(+), 56 deletions(-)

diff --git a/README.md b/README.md
index a723ee03..c3f0cacd 100644
--- a/README.md
+++ b/README.md
@@ -75,11 +75,11 @@ Despite this list, gdbgui is quite usable in its current form
 * ~~add links back to github, etc~~
 * ~~escape brackets on system <includes> so they don't disappear~~
 * ~~only make gutter create/delete breakpoints, not anywhere in source file~~
+* ~~add ability to view/inspect variables~~
+* ~~add ability to view/inspect memory~~
 * add button to widen windows
 * add clear button to windows
 * improve toolbar styling, change color when error occurs
 * add preference ui elements (auto-refresh various windows after command is sent; show/hide windows as desired)
 * make flash of color fade out when snapping to source code lines or restoring old history
 * add autocompletion and documentation of all commands
-* add ability to view/inspect variables
-* add ability to view/inspect memory
diff --git a/gdbgui/static/css/gdbgui.css b/gdbgui/static/css/gdbgui.css
index f92bbad4..90a33a20 100644
--- a/gdbgui/static/css/gdbgui.css
+++ b/gdbgui/static/css/gdbgui.css
@@ -25,6 +25,9 @@ pre{
   /* glyphicons are too bold, make them lighter*/
     color: #848484;
 }
+.flex{
+  display: flex;
+}
 /* components get their own titlebars */
 .titlebar{
   width: 100%;
@@ -186,6 +189,8 @@ have scrollbar, so it doesn't take over the page */
     border: 0px;
 }
 #variables li:hover{
-  /* lighten background */
-  background-color: #ffffc0;
+  background-color: #c0eeff;
+}
+.toggle_children_visibility{
+  font-weight: bold;
 }
diff --git a/gdbgui/static/js/gdbgui.js b/gdbgui/static/js/gdbgui.js
index 9413d175..8b680a7a 100644
--- a/gdbgui/static/js/gdbgui.js
+++ b/gdbgui/static/js/gdbgui.js
@@ -672,7 +672,7 @@ const BinaryLoader = {
         }
 
         // tell gdb which arguments to use when calling the binary, before loading the binary
-        cmds = [`-exec-arguments ${args}`, `-file-exec-and-symbols ${binary}`, `-break-insert main`, `-break-list`, `-exec-run`]
+        cmds = [`-exec-arguments ${args}`, `-file-exec-and-symbols ${binary}`, `-break-insert main`, `-break-list`]
 
         // reload breakpoints after sending to make sure they're up to date
         if (Prefs.auto_reload_breakpoints()){
@@ -784,7 +784,7 @@ const Variables = {
      */
     get_obj_from_gdb_var_name: function(gdb_var_name){
         // gdb provides names in dot notation
-        let gdb_var_names = Variables.state.children_being_retrieved_for_var.split('.'),
+        let gdb_var_names = gdb_var_name.split('.'),
             top_level_var_name = gdb_var_names[0],
             children_names = gdb_var_names.slice(1, gdb_var_names.length)
 
@@ -850,10 +850,12 @@ const Variables = {
      * gdb returns objects for its variables that need a little more data
      * add the children array
      * parse numchild string to integer
+     * store whether the object is expanded or collapsed, showing children
      */
     prepare_gdb_obj_for_storage: function(obj){
         obj.children = []
         obj.numchild = parseInt(obj.numchild)
+        obj.show_children_in_ui = false
     },
     callback_after_create_variable: function(mi_response_array){
         Variables.state.waiting_for_create_var_response = false
@@ -879,11 +881,6 @@ const Variables = {
                 // save this payload
                 Variables.save_new_variable(Variables.expression_being_created, r.payload)
 
-                // // fetch info on children if necessary
-                // if(parseInt(r.payload.numchild) > 0){
-                //     Variables.get_children_for_var(r.payload.name)
-                // }
-
             }else{
                 // this is an unexpected case. Let the status bar render some info to help debug the issue.
                 Status.render_from_gdb_mi_response(r)
@@ -934,9 +931,8 @@ const Variables = {
         let html = ''
 
         for(let obj of Variables.state.variables){
-            console.log(obj.in_scope)
             if(obj.in_scope === 'true' || _.isUndefined(obj.in_scope)){
-                if(parseInt(obj.numchild) > 0){
+                if(obj.numchild > 0) {
                     html += Variables.get_ul_for_var_with_children(obj.expression, obj, true)
                 }else{
                     html += Variables.get_ul_for_var_without_children(obj.expression, obj, true)
@@ -947,24 +943,34 @@ const Variables = {
         Variables.el.html(html)
     },
     get_ul_for_var_with_children: function(expression, mi_obj, is_root=false){
-        let child_tree = '<ul>'
-        for(let child of mi_obj.children){
-            if(parseInt(child.numchild) > 0){
-                child_tree += `<li>${Variables.get_ul_for_var_with_children(child.exp, child)}</li>`
+        let child_tree = ''
+        if(mi_obj.show_children_in_ui){
+            child_tree = '<ul>'
+            if(mi_obj.children.length > 0){
+                for(let child of mi_obj.children){
+                    if(child.numchild > 0){
+                        child_tree += `<li>${Variables.get_ul_for_var_with_children(child.exp, child)}</li>`
+                    }else{
+                        child_tree += `<li>${Variables.get_ul_for_var_without_children(child.exp, child)}</li>`
+                    }
+                }
             }else{
-                child_tree += `<li>${Variables.get_ul_for_var_without_children(child.exp, child)}</li>`
+                child_tree += '<li>fetching from gdb...</li>'
             }
+
+            child_tree += '</ul>'
         }
-        child_tree += '</ul>'
 
         let delete_button = is_root ? `<span class='glyphicon glyphicon-remove delete_gdb_variable pointer' data-gdb_variable='${mi_obj.name}' />` : ''
+        let expanded = mi_obj.show_children_in_ui ? 'expanded' : '',
+            plus_or_minus = mi_obj.show_children_in_ui ? '-' : '+'
         let expression_and_value = `
         <ul class='variable'>
-            <li class='toggle_children_visibility pointer' data-gdb_variable_name='${mi_obj.name}'>
+            <li class='toggle_children_visibility pointer ${expanded}' data-gdb_variable_name='${mi_obj.name}'>
                 ${delete_button}
-                + ${expression}: ${mi_obj.value} (${mi_obj.type}, ${mi_obj.name})
-                ${child_tree}
+                ${plus_or_minus} ${expression}: ${mi_obj.value} (${mi_obj.type})
             </li>
+            ${child_tree}
         </ul>
         `
         return expression_and_value
@@ -975,20 +981,28 @@ const Variables = {
             <ul class='variable'>
                 <li data-gdb_variable_name='${mi_obj.name}'>
                     ${delete_button}
-                    ${expression}: ${mi_obj.value} (${mi_obj.type}, ${mi_obj.name})
+                    ${expression}: ${mi_obj.value} (${mi_obj.type})
                 </li>
             </ul>
             `
     },
     click_toggle_children_visibility: function(e){
-        let children_uls = $(e.currentTarget).children('ul')
-        if(children_uls.length > 0){
-            // we have already fetched the data for these from gdb
-             $(e.currentTarget).children('ul').toggle()
+        let gdb_var_name = e.currentTarget.dataset.gdb_variable_name
+        let obj = Variables.get_obj_from_gdb_var_name(gdb_var_name)
+
+        if($(e.currentTarget).hasClass('expanded')){
+            // collapse
+            obj.show_children_in_ui = false
         }else{
-            // we need to fetch the child data
-            Variables.get_children_for_var(e.currentTarget.dataset.gdb_variable_name)
+            // show
+            obj.show_children_in_ui = true
+            if(obj.children.length === 0){
+                // need to fetch child data
+                Variables.get_children_for_var(gdb_var_name)
+            }
         }
+        $(e.currentTarget).toggleClass('expanded')
+        Variables.render()
     },
     update_variable_values: function(){
         GdbApi.run_gdb_command(`-var-update *`)
@@ -1003,6 +1017,8 @@ const Variables = {
         Variables.render()
     },
     click_delete_gdb_variable: function(e){
+        e.stopPropagation()
+
         // delete locally
         Variables.delete_local_gdb_var_data(e.currentTarget.dataset.gdb_variable)
 
diff --git a/gdbgui/templates/gdbgui.jade b/gdbgui/templates/gdbgui.jade
index 8d9931c3..14301a54 100644
--- a/gdbgui/templates/gdbgui.jade
+++ b/gdbgui/templates/gdbgui.jade
@@ -34,15 +34,15 @@ body
 
                 //- premade buttons
                 div.btn-group.btn-group-xs(role="group")
-                    button.btn.btn-default.gdb_cmd(type='button', data-cmd0='-break-list', data-cmd1='-exec-run', , title='Starts execution of the inferior from the beginning. The inferior executes until either a breakpoint is encountered or the program exits. In the latter case the output will include an exit code, if the program has exited exceptionally. (-exec-run)') Run
+                    button.btn.btn-default.gdb_cmd(type='button', data-cmd0='-break-list', data-cmd1='-exec-run', data-cmd2='-stack-list-frames', title='Starts execution of the inferior from the beginning. The inferior executes until either a breakpoint is encountered or the program exits. In the latter case the output will include an exit code, if the program has exited exceptionally. (-exec-run)') Run
                         span.glyphicon.glyphicon-off.padding_left
-                    button.btn.btn-default.gdb_cmd(type='button', data-cmd0='-exec-continue', data-cmd1='-var-update --all-values *', title='Resumes the execution of the inferior program, which will continue to execute until it reaches a debugger stop event. (-exec-continue)') Continue
+                    button.btn.btn-default.gdb_cmd(type='button', data-cmd0='-exec-continue', data-cmd1='-var-update --all-values *', data-cmd2='-stack-list-frames', title='Resumes the execution of the inferior program, which will continue to execute until it reaches a debugger stop event. (-exec-continue)') Continue
                         span.glyphicon.glyphicon-play.padding_left
-                    button.btn.btn-default.gdb_cmd(type='button', data-cmd0='-exec-next', data-cmd1='-var-update --all-values *', title="Resumes execution of the inferior program, stopping when the beginning of the next source line is reached. (-exec-next)") Next
+                    button.btn.btn-default.gdb_cmd(type='button', data-cmd0='-exec-next', data-cmd1='-var-update --all-values *', data-cmd2='-stack-list-frames', title="Resumes execution of the inferior program, stopping when the beginning of the next source line is reached. (-exec-next)") Next
                         span.glyphicon.glyphicon-step-forward.padding_left
-                    button.btn.btn-default.gdb_cmd(type='button', data-cmd0='-exec-step', data-cmd1='-var-update --all-values *', title="Resumes execution of the inferior program, stopping when the beginning of the next source line is reached, if the next source line is not a function call. If it is, stop at the first instruction of the called function. (-exec-step)") Step
+                    button.btn.btn-default.gdb_cmd(type='button', data-cmd0='-exec-step', data-cmd1='-var-update --all-values *', data-cmd2='-stack-list-frames', title="Resumes execution of the inferior program, stopping when the beginning of the next source line is reached, if the next source line is not a function call. If it is, stop at the first instruction of the called function. (-exec-step)") Step
                         span.glyphicon.glyphicon-arrow-down.padding_left
-                    button.btn.btn-default.gdb_cmd(type='button', data-cmd0='-exec-return', data-cmd1='-var-update --all-values *', title="Makes current function return immediately. Doesn't execute the inferior. Displays the new current frame. (-exec-return)") Return
+                    button.btn.btn-default.gdb_cmd(type='button', data-cmd0='-exec-return', data-cmd1='-var-update --all-values *', data-cmd2='-stack-list-frames', title="Makes current function return immediately. Doesn't execute the inferior. Displays the new current frame. (-exec-return)") Return
                         span.glyphicon.glyphicon-arrow-up.padding_left
                     button.btn.btn-default.gdb_cmd(type='button', data-cmd0='-break-insert main', data-cmd1='-break-list', title="Add breakpoint at the 'main' function (-break-insert main)") Add Breakpoint to Main
                         span.glyphicon.glyphicon-flag.padding_left
@@ -101,22 +101,14 @@ body
             span(style="position: absolute; left: 5px; margin-top: 9px; color: #777; font-family: monospace; font-size: 0.9em") (gdb)
             input.form-control.dropdown-input#gdb_command(type="text", autocomplete="on", data-list="#gdb_command_reference", placeholder='enter any gdb command, or gdb machine interface command')
 
-
-        div.col-md-6.no_padding
-            div.titlebar
-                span.lighttext variables
-                span.glyphicon.glyphicon-plus.resizer.pointer(data-target_selector="#variables" data-resize_type="enlarge")
-                span.glyphicon.glyphicon-minus.resizer.pointer(data-target_selector="#variables" data-resize_type="shrink")
-                input#variable_input.form-control(placeholder='expression to watch for current frame')
-            div#variables.gdb_content_div
-
         div.col-md-6.no_padding
             div.titlebar
-                span.lighttext All Local Variables
-                button.btn.btn-default.btn-xs.gdb_cmd(type='button', data-cmd='-stack-list-locals --all-values', title="Refresh all data names and values (-stack-list-locals --all-values')") Refresh
-                span.glyphicon.glyphicon-plus.resizer.pointer(data-target_selector="#all_local_variables" data-resize_type="enlarge")
-                span.glyphicon.glyphicon-minus.resizer.pointer(data-target_selector="#all_local_variables" data-resize_type="shrink")
-            div#all_local_variables.gdb_content_div
+                span.lighttext stack
+                span.glyphicon.glyphicon-plus.resizer.pointer(data-target_selector="#stack" data-resize_type="enlarge")
+                span.glyphicon.glyphicon-minus.resizer.pointer(data-target_selector="#stack" data-resize_type="shrink")
+                button.btn.btn-default.btn-xs.gdb_cmd(type='button', data-cmd='-stack-list-frames', title='Refresh stack (-stack-list-frames)') Refresh
+                    span.glyphicon.glyphicon-refresh.padding_left
+            div#stack.gdb_content_div
 
         div.col-md-6.no_padding
             div.titlebar
@@ -125,17 +117,15 @@ body
                     span.glyphicon.glyphicon-refresh.padding_left
                 span.glyphicon.glyphicon-plus.resizer.pointer(data-target_selector="#breakpoints" data-resize_type="enlarge")
                 span.glyphicon.glyphicon-minus.resizer.pointer(data-target_selector="#breakpoints" data-resize_type="shrink")
-
             div#breakpoints.gdb_content_div
 
         div.col-md-6.no_padding
-            div.titlebar
-                span.lighttext stack
-                span.glyphicon.glyphicon-plus.resizer.pointer(data-target_selector="#stack" data-resize_type="enlarge")
-                span.glyphicon.glyphicon-minus.resizer.pointer(data-target_selector="#stack" data-resize_type="shrink")
-                button.btn.btn-default.btn-xs.gdb_cmd(type='button', data-cmd='-stack-list-frames', title='Refresh stack (-stack-list-frames)') Refresh
-                    span.glyphicon.glyphicon-refresh.padding_left
-            div#stack.gdb_content_div
+            div.titlebar.flex
+                span.lighttext variables
+                span.glyphicon.glyphicon-plus.resizer.pointer(data-target_selector="#variables" data-resize_type="enlarge")
+                span.glyphicon.glyphicon-minus.resizer.pointer(data-target_selector="#variables" data-resize_type="shrink")
+                input#variable_input.form-control(placeholder='reach breakpoint, then enter expression or variable and press enter')
+            div#variables.gdb_content_div
 
         div.col-md-6.no_padding
             div.titlebar
@@ -163,6 +153,13 @@ body
                 span.glyphicon.glyphicon-minus.resizer.pointer(data-target_selector="#memory" data-resize_type="shrink")
             div#memory.gdb_content_div
 
+        div.col-md-6.no_padding
+            div.titlebar
+                span.lighttext All Local Variables
+                button.btn.btn-default.btn-xs.gdb_cmd(type='button', data-cmd='-stack-list-locals --all-values', title="Refresh all data names and values (-stack-list-locals --all-values')") Refresh
+                span.glyphicon.glyphicon-plus.resizer.pointer(data-target_selector="#all_local_variables" data-resize_type="enlarge")
+                span.glyphicon.glyphicon-minus.resizer.pointer(data-target_selector="#all_local_variables" data-resize_type="shrink")
+            div#all_local_variables.gdb_content_div
 
         div.col-md-6.no_padding
             div.titlebar