Time Machine Status Update 6

I give Huiqi another status update of the time-traveling debugger. We talked about sticky line numbers, file selection menu, hit indicators for file lines, the launch/goto bar, and future features.

Transcript

The following transcript was automatically generated by an algorithm.

00:02 : uh one of the things i did is um
00:05 : i
00:06 : i made it so that these line numbers
00:10 : get stuck on the side even if you scroll
00:16 : uh your scroll bar is going to
00:19 : the right
00:21 : oh nice
00:22 : so
00:24 : which will really help with the timeline
00:26 : because the lines in the timeline can be
00:30 : really long so you often have to scroll
00:32 : all the way over
00:33 : like how many look how many indentations
00:36 : there are
00:37 : so even even when you scroll over you
00:39 : can still see the
00:41 : line numbers
00:42 : and nice
00:44 : and that's helpful
00:46 : um
00:47 : and that oh there's also this drop down
00:50 : first of all
00:51 : that will allow you to select
00:54 : a different file
00:56 : okay a different code file to view
00:59 : yeah once i implemented that
01:02 : um because the point of it is you want
01:04 : to be able to jump around anywhere you
01:06 : want so like
01:08 : like i i know that the code is gonna hit
01:11 : my stack pane code at some point
01:15 : and i just want to go jump there so what
01:17 : you do is like oh go to the stack pane
01:20 : and i click there it either click or
01:24 : right click right click means
01:26 : reverse time until you hit that line and
01:29 : normal
01:30 : normal click means
01:32 : go forward until you hit that line right
01:34 : so you can you can just do one of the
01:36 : two to hit this line
01:39 : and then you can start stepping through
01:42 : the code like you normally would
01:44 : and
01:45 : and uh but one of the things that
01:48 : i wanted is a visual indication of
01:50 : whether a line ever got hit
01:54 : and that has shown the white lines
01:57 : have been hit at least once whereas the
02:00 : red lines have not
02:02 : oh nice
02:04 : yep
02:05 : so that's very helpful
02:07 : yeah so so there's that um and then very
02:10 : soon i found that um
02:13 : this
02:14 : oh there's some performance problems
02:16 : that i had to address
02:18 : in terms of
02:19 : sometimes the switching of files was
02:21 : slow because
02:23 : of this new requirement
02:25 : i find an okay way i i added some
02:29 : database indexes which made this query
02:31 : faster but also made the generation of
02:34 : the data slower
02:36 : so
02:38 : at the moment i have the indexes
02:41 : uh but i don't know what would be a
02:42 : better solution so i'm still going to
02:45 : think about that
02:47 : okay so those are the big features other
02:50 : than the next thing
02:52 : which i've been talking to you excitedly
02:54 : which is the uh launch bar
02:58 : the launch bar
03:00 : so
03:01 : um so you can go to like stack pane
03:04 : this is obviously is stolen from
03:08 : any of the popular editors nowadays have
03:11 : this thing where you do command p
03:14 : and then you have this search bar
03:17 : and you type in the name of the file but
03:20 : but you don't even have to type it right
03:22 : like if
03:24 : like maybe you do stg
03:27 : you misspelled string but string is
03:30 : still gonna show up so this is this is a
03:33 : fuzzy search and also another thing is
03:36 : um
03:39 : you can be very sloppy with your typing
03:43 : two words
03:47 : like i can i can just write abbreviated
03:50 : versions of the words jam together rwsr
03:54 : and i'll find raw search
03:57 : that's the sequence that you talked
03:59 : about yeah uh it's
04:01 : a string subsequence um
04:05 : we'll talk a little bit about that when
04:07 : we when we get to how this stuff works
04:10 : uh but but basically
04:13 : i reverse engineered this feature
04:16 : so i have a
04:18 : i have this now now it's very quick to
04:21 : like i want to go to the cache
04:25 : i jump to the cache
04:27 : i can start
04:29 : you know jumping to the lines that are
04:31 : in the cache implementation and see
04:34 : and see you know
04:37 : again
04:38 : one trick you can use with a debugger
04:40 : like this is
04:41 : you can jump to a line and then you
04:43 : figure out who called me you just go
04:46 : backwards outside and now you know who
04:48 : who called me
04:50 : um
04:51 : you yeah
04:52 : so
04:54 : um so you can jump to a file like uh you
04:58 : can jump hbox for example you could also
05:01 : jump to a
05:02 : oh this is jump to step you can also
05:04 : jump to a function
05:06 : so i want to jump to the layout function
05:09 : and and
05:11 : now there's a lot of layout functions
05:13 : okay and that's unfortunate so
05:18 : uh
05:19 : i i put this the file name next to it to
05:22 : let you distinguish
05:24 : turns out there's three different layout
05:26 : functions in window because in the
05:28 : window file i put three separate
05:30 : components in there
05:33 : because the window has a title bar
05:36 : and and also the window border is
05:39 : another component and both of them are
05:41 : used by the window
05:42 : um i could split them up but this you
05:45 : know
05:45 : there's some
05:46 : confusion there potentially
05:49 : um
05:50 : but i i guess one enhancement i probably
05:53 : want to do is allow this
05:56 : the
05:57 : fuzzy search typing
05:59 : to also be matching on the file name as
06:01 : well like maybe i can say layout scroll
06:05 : view
06:07 : and then i'll get the layout for just
06:09 : the scroll view
06:10 : i know i know that
06:13 : i know that uh vs code does that
06:17 : um so i think that's possible uh it does
06:22 : require the code to do more work
06:26 : so you can jump to files jump to
06:28 : functions
06:30 : um
06:31 : like um
06:33 : even a class
06:35 : uh
06:36 : least recently used cash so that that's
06:38 : the least recently used cash
06:41 : that you made so um you could also jump
06:44 : to a
06:46 : you could type you could type in a
06:48 : specific uh snapshot number and it'll
06:51 : jump there
06:52 : so
06:54 : 456 or something and then i'll jump
06:57 : there this is 456. and the way you can
07:00 : the way you can see that this is 456 is
07:02 : by going to the timeline this is
07:05 : snapshot number 456.
07:08 : so so those are the jumping around
07:10 : features or navigation features
07:14 : uh yeah i think that's mostly what i did
07:18 : uh since last time
07:21 : there's a whole bunch of bugs that i'm
07:23 : gonna need to solve for example
07:26 : um if you
07:27 : currently the drop downs don't close
07:30 : when you click away
07:32 : so that's kind of a problem
07:34 : um like like this like this one
07:37 : they don't close when you click away you
07:40 : can hit escape to get it to close
07:43 : but clicking away doesn't close it and
07:45 : uh
07:46 : it it's not exactly straightforward to
07:50 : make that happen
07:51 : right now so
07:53 : so i'm thinking about how to fix that
07:55 : um so that's like a short-term
07:58 : goal
07:59 : um long-term goal-wise
08:02 : the things i'm really interested it goes
08:05 : back to the visualization ideas that we
08:07 : talked about
08:10 : so and and this timeline is one of those
08:14 : concepts we talked about and we still
08:16 : are
08:17 : i mean it it can be useful but not
08:20 : immediately useful in most cases just
08:23 : because there's too much data
08:25 : um
08:27 : and maybe ways of enhancing this like
08:30 : one thing one thing i already done is
08:32 : like i add a little label as to which
08:35 : file this line is coming from
08:39 : right here
08:41 : and if it if it changed files like
08:44 : here
08:45 : it changed file from util.pi to frozen
08:48 : import lib bootstrap
08:50 : and then it shows you hey it changed and
08:53 : then it came back to uto. over here
08:56 : that's probably not the best indicator
08:59 : but it was like an easy fix that i put
09:02 : in
09:03 : so maybe there's a better way to
09:05 : indicate like look scrolling through
09:07 : this timeline
09:08 : where you are in the code maybe with
09:11 : combination of labeling and color coding
09:16 : and maybe allow you to expand and
09:18 : collapse
09:20 : i don't know i don't know i think
09:22 : there's a way to to make it good i just
09:24 : don't know what it is yet
09:26 : and and also putting putting that um
09:30 : that call graph
09:31 : in here as well
09:34 : which currently i haven't done
09:36 : uh it's the c calls thing
09:41 : like something like that like
09:43 : the call graph actually when i was
09:45 : working on this um
09:47 : fuzzy search functionality
09:50 : this call graph thing was very helpful
09:53 : in helping me debug the thing
09:56 : i just used that mostly
09:59 : to debug my algorithm
10:02 : so i think this can be
10:05 : really useful and again it probably can
10:07 : be enhanced
10:09 : in various ways like we need to find a
10:12 : best way to present this information
10:16 : um but uh
10:20 : another future goal is
10:22 : to have
10:23 : oh the the object lifetime thing where
10:27 : yeah
10:29 : where i can say hey
10:30 : show me the last time this root element
10:33 : got mutated something like that or even
10:36 : this show me the last time that
10:38 : or the next time that this object got
10:41 : mutated
10:42 : yeah that would be
10:43 : yeah oh and another idea i have in the
10:47 : further down in the horizon is a
10:50 : hierarchical scroll bars
10:52 : which which
10:53 : comes from
10:55 : comes from
10:57 : that timeline book that i showed you
11:02 : where it has like multiple
11:06 : multiple scales
11:07 : of timeline
11:09 : right
11:10 : like you have a scroll bar here
11:15 : um and basically this is saying hey
11:18 : this range
11:20 : is a
11:21 : zoom in of this section
11:25 : in the overall timeline right
11:29 : but sometimes you get a situation where
11:32 : well actually it's not hard to get that
11:34 : situation now because
11:37 : if you just look at the timeline
11:40 : you don't see a knob
11:43 : right you don't see a knob because it's
11:46 : too small to be seen
11:49 : i i i need to i need to make it show up
11:52 : anyway like maybe just make it the
11:55 : smallest it can be is one
11:57 : um
11:58 : i need to
12:00 : make it show up anyway even if if it's
12:02 : too small to be seen
12:04 : but my my point is we could have a
12:06 : hierarchical timeline
12:08 : where
12:10 : where maybe maybe the knob is really
12:13 : small here
12:16 : but in reality
12:18 : um
12:20 : you know when when the knob is really
12:22 : small
12:24 : this this shown range is probably not
12:27 : even that much it's probably like only
12:30 : that much right
12:32 : this little bit
12:34 : right and if that's the case what i want
12:36 : to do is
12:38 : have a second scroll bar
12:42 : that would be like that where this range
12:49 : maps to this range and then this range
12:53 : maps to this range
12:57 : but how do you know how many layers of
12:59 : scroll bar to have
13:03 : we have enough scroll bars when
13:06 : it is true that like everything can fit
13:10 : basically
13:12 : when this range correctly reflects
13:15 : this
13:16 : this outer range that is visible and
13:19 : this and this range
13:21 : correctly reflects this range and so and
13:24 : if we need even more scroll bars we'll
13:27 : have even more screw bars
13:30 : it's kind of like google map but the
13:32 : google map doesn't have a scroll bar
13:34 : because you don't use scroll bar to
13:36 : scroll but that's like the idea you have
13:40 : like uh very small range on your phone
13:44 : but there's actually a lot so if you
13:47 : zoom in i mean zoom out then you get a
13:50 : bigger scroll area will move area
13:53 : yeah