Problem-solving. With KAubersnek

Straight into this.

KAubersnek is my project to create a personal (and only for me at this point) web browser that will aid me in developing websites by providing me with custom developer-focused tools (and will serve as a piece within my future portfolio of work). However. Currently, I am far from realising that goal. But for now, I have been making considerable progress in maturing the basic web browser itself into a usable frame to work with.

2017-06-18_1508
KAubersnek as it looks currently (2017-06-18)

The UI is currently based heavily on the open-source Chromium (of which Google Chrome is a well-known release of) UI. But one of the goals for reaching what I am calling the “full operational capability milestone” is to have a custom tab design. However, designing the UI is currently taking a backseat role in favour of allowing the UI to be more flexible for when I add crucial features take enable the browser to be fully operational.

So that’s pretty much the overview, but today when I was working around a me-induced bug/oversight, I thought that I might be cool to write down this problem with a methodical solution so that I could convey what it is like to be a programmer (at least in my eyes) when solving a problem. Here goes nothing. Also, one more thing. This is written in a way that allows it to be understood (I hope) by almost anyone with at least some basic idea what programming is like. To that end, I will be attempting to explain some of the more complex concepts that people might have trouble getting their heads around. But I at least hope you know what a class, object or a control is. If not, you might want to look them up first.

The problem
When loading a website in the browser, you had to remain on the current tab until the page was loaded. Otherwise, switching tabs during the download resulted in some of the results of the download (namely the website’s title) being applied to the wrong tab. This was because the code originally forwarded the downloaded title from the user control the GeckoWebBrowser object is a member of, to the currently-active tab on the TabControl object which is housed on the main form. As aforementioned, this was a simple oversight as it was just a case of the data being sent to the wrong object in some specific cases.

What it looks like
2017-06-18_2125.png

Listed process ‘chart’

  1. A webpage download action is taken by the user within the browser; via URL navigation, web search or hyperlink navigation
  2. The user switches tab whilst the download is in progress
  3. The download completes within the other tab, and the DocumentComplete event is triggered on that instance of the browser
    • The DocumentComplete event gets triggered when the GeckoWebBrowser object declares that it has finished downloading the webpage and its content
  4. The DocumentComplete event code sets the text of the currently-selected tab as the DocumentTitle of the downloaded webpage, as reported by the GeckoWebBrowser
    • There is no check/flag to see if this is the correct tab that actually contains the user-created control with its GeckoWebBrowser

Analysis
The reason why this is not a simple cakewalk is because of how the structure of the program is. It is not one large object called ‘browser’. The ‘parental’ structure that I have to deal with looks like this:

  • The actual powerhouse under the hood (that is the browser) is the GeckoWebBrowser object.
  • The GeckoWebBrowser object is housed within a user-created control, which is a class that contains the GeckoWebBrowser object and all the controls needed to operate the browser at the basic level (buttons, address box, options menu, progress bar and status display label).
  • This user-created control is docked onto a TabPage object when the tab is first created. This TabPage is actually the object that contains the crucial property known as ‘Text’. This property is what gets updated each time a webpage is finished being downloaded.
  • The TabPages are then added to the TabControl’s TabPage collection. This collection is then represented as clickable tabs on the main form.

With that in mind, you can begin to picture what the issue is. Although the user-created control is docked onto a TabPage, that user-created control does not have a native ability to tell what its ‘parent’ object is. So, when the DocumentComplete event proceeded to update a TabPage’s ‘Text’ property, it does not care or recognise if the user switches TabPages by clicking one of the visual tabs. It just updates the selected tab. This problem is an oversight because I should have seen it coming, since I must put more code in to fix this either way. Now that I see what the issue is, I can now easily implement my three-part solution.

Solution

  1. I added an integer variable inside the user-created control called ‘intPosition’. This variable will store a value that indicates what position its parent TabPage should be at within the TabControl’s TabPage collection (known as index). So now the code that updates the TabPage’s ‘Text’ will know what TabPage to apply the change to. This position variable is initialised as soon as after the user-created control instance and its mounting TabPage is being created, and the value is based off the current number of TabPages within the index.
  2. I also added some code that updates the position variable in all opened instances of the user-created control when there is a change within the index. Changes to index are made when a tab is opened, closed or moved around. So this code is a must for such scenarios. For example; if I had three tabs open and I close the middle one, the third tab will have its position variable updated since it has now become the second tab in the index, and the browser would need to know that otherwise the program would literally DIE in runtime. Okay. Maybe not that extreme. But it would be bad.
  3. The code within the DocumentComplete event is updated so that it references the TabPage it needs to access via the index (cross-referenced with the position variable) instead of accessing whatever is the currently-selected index is.

Code (You’ll have to excuse the amount of comments. They’re just there to explain the screenshots.)

2017-06-18_2103
Code that creates the user-created control instance and TabPage
2017-06-18_1941
Code that updates each instance’s position control variable

Conclusion
I actually have not tested this yet. It is almost the end of today, so I will enjoy a sleep before I make sure the changes work. In theory, this should work no matter what however. But I will let you know tomorrow. My next post on the subject will go more in-depth about the goals and milestones of the project.

Anyway, I hope you enjoyed the read! 😊

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s