webBrowser

Images are not available on the website due to university policy

cd existing_repo
git remote add origin https://gitlab-student.macs.hw.ac.uk/f21sc-2022-23-ci/f21sc-2022-23-ci-staff/f21sc-2022-23-cw1.git
git branch -M main
git push -uf origin main

Integrate with your tools

Set up project integrations

Collaborate with your team

Test and Deploy

Use the built-in continuous integration in GitLab.

Introduction
Requirements checklist
Design Considerations
User Guide
Developer Guide
Testing
Conclusions
References

Introduction

( 303 words)

The whole report is an introduction to the core functionality and design logic of a web browser developed in C#. The report is also available as a development document to help developers and users alike. For the developer myself it is a review of the project and a re-analysis of the requirements, thus refining my core competencies in programming in C#.

The entire web browser was developed using Visual Studio 2019 16.2.1. Windows Form library for C# and .NET Framework Version 4.7.2 was used for configuration. It has been debugged on Windows 10 and Ubuntu 20.4.

In my development and debugging process, it was assumed that every legitimate domain name would adhere to the HTTP and HTTPS protocols for transmission and that the web browser had and only supported the HTTP and HTTPS protocols. Protocols such as ‘FTP’, ‘SSH’, and even ‘Tor Onion’ are not accepted.

Also assumed:

H1: when the user enters an illegitimate URL but conforms to the specified HTTP or HTTPS protocol.

H2: An illegitimate communication protocol and a legitimate URL.

H3: An illegitimate URL and an illegitimate communication protocol at the same time.

H4: A legitimate URL and a legitimate communication protocol at the same time.

H5: When the user adjusts the browser UI, the position of all components will change proportionally and the size of all components will change proportionally.

H6: When the user adjusts the browser UI, the position of all widgets does not change proportionally and the size of all widgets does not change proportionally.

H7: When the user adjusts the browser UI, the position of all components does not change proportionally and the size of all components changes proportionally.

H8: When the user adjusts the browser UI, the position of all widgets will change proportionally and the size of all widgets will not change proportionally.

Requirements checklist

( 339 words)

Requirement	Description	Is it Achieved?
R1	Sending HTTP request messages for user-entered URLs	Yes
R2	Receive HTTP response messages and display the content of the messages in the interface	Yes
R3	Display the HTTP response status code and the page title at the top of the main browser window	Yes
R4	Users should be able to create and edit a home page URL	Yes
R5	Favorites. The user should be able to add the URL of the requested page to the list of favorites	Yes
R6	Users should also be able to associate a name with each favorite URL	Yes
R7	Support is needed for modifying and deleting favorite items	Yes
R8	The ‘favorites’ list should be loaded into the browser when it is launched	Yes
R9	History	Yes
R10	The user should be able to navigate to the previous and next page and jump to a page by clicking on a link in the history list	Yes
R11	Bulk Download	Yes
R12	When initiating the bulk download, the application should retrieve each of the pages listed in the file, and display the results as a list of lines as follows: `<bytes> <URL>`	Yes
R13	No HTML contents should be displayed for Bulk functionality	Yes
R14	Graphical user interface. A simple GUI should be provided to perform the operations discussed above (Windows Forms)	Yes
R15	Identify the appropriate library function from the set of libraries on the .NET core platform to perform the required HTTP-level communication	Yes
R16	Identify HTTP-level client-server communication and must explicitly manage the home page, favorites, and history lists	Yes
R17	The ability to render web pages, but there must be an option to disable this functionality and display only the original HTML that was retrieved	No

Design Considerations

( 799 words)

Metrics for the entire project code

Project: WebBrowser

Configuration: Debug

Scope: Collection

Assembly: D:\WebBrowser\bin\Debug\WebBrowser.exe

Maintainability Index: 79

Circle Complexity: 166

Inheritance depth: 7

Class coupling: 111

Number of lines of code: 1,

Project hierarchy and design

Throughout the browser, I designed 3 Windows Forms. the solutions generated by Visual Studio 2019 are in the same directory as the project. ‘NewBrowser.cs’ holds the core code for the entire browser and is similar to the backend. ‘MainForm’ implements the front end of the browser and interacts with the functionality.

Figure 1 Project Folder Structure Figure 2 Code File Structure

GUI design

The GUI was originally designed in the same way as the typical browsers Chrome, Firefox, etc. The top of the browser is used for user input and instructions.

However, to improve the user experience, I have placed all the buttons and input boxes directly underneath the browser. This design was inspired by the smartphone and keyboard we normally use. I wanted my browser to look like this: the bottom for user input and control, the middle for the feedback area of the browser, larger and more intuitive for the user to see, and the top for the

information of the open tabs including status codes and site titles. The design of everything starts with simplicity.

For the information design of the tab page, I shortened the requirement to just display the status code and title of the site to better and more efficiently display the title tag of the site, and not output the text information corresponding to the status code on the tiny tabs. Regular expressions are used here to get the title and status code and convert the status code to an int32 type so that only the code can be displayed without the text, which can always be adjusted if needed later.

Figure 3 GUI for initialization web browser

Located at the bottom left corner of the browser are Add New Blank Tab and Delete Currently Selected Tab respectively. Immediately next to the delete button is the reload button. To the right of the Reload button is the Back to the previous page button and the Next page button, both of which are for the same tab. This means that if the user does not visit a different site from the same tab, these buttons will not appear and will be unseen by default. The button with the ‘little house; the icon is the Homepage button which, if pressed with the left mouse button, will create a new Homepage tab at the top and the tab with the highest priority to the user. The middle text box is where the user enters the URL link. After entering a legitimate HTTP or HTTPS link the user needs to press the ‘Enter’ button on the keyboard to read the page.

To the right of the input box are some of the browser’s extended functions.’ The button with the ‘star’ icon is the Favorites button which allows the user to bookmark the current website to a local folder by clicking on it. The black star will turn into a green star if the favorite is successful, or the user can click this button again to turn the green star into a black star to cancel the favorite and the favorite will be deleted from the favorites list.’ The ‘History’ button is a list of the user’s browser history, which is a chronological record of all the websites the user has visited and all the information the user has entered. On the right side is the Favorites button, which can be opened by using the left mouse button and contains the names and URLs of all the websites that the user has favorited in chronological order. When the user clicks on delete, the favorite pages will be removed from the favorites list and the star will change from green to black. The last one is the Bulk Download button. When the user

clicks on this button with the left mouse button, a page will appear to access the local resource browser, the user will need to select the .txt file with the URL of the web page.

Class hierarchy and design

├─Program Start-up of the entire web browser

│ ├─MainForm The form used to store all functions

│ │ ├─Target Used to store the resources of the page (URL, title, time)

│ │ ├─BrowerCore Some functions for downloading and loading to a chain table from a browser

│ │ ├─new browser The entire body of the browser including all button logic

│ │ ├─BrowserTabPage Tab implementation for browsers

│ │ └─StreamIO The function of reading and writing files

│ ├─HomeEdit The window of the edit Homepage

│ └─FavouriteEdit The window of the edit Favourite List

User Guide

( 533 words)

This guide is for the Windows10/11 user. The user first opens the browser program, which is installed in the following directory as shown below and runs the ‘setup.exe’ at first to make sure to get the correct packages. Then the user should open the ‘WebBrowser.application’ file.

Figure 4 Application Structure

Users will see the web browser start page which is the same as Figure 3. At the bottom middle of the browser is a URL text box where the user can enter a URL that conforms to the HTTP/HTTPS protocol and needs to press the ‘Enter’ key on the keyboard to get the Html source code of the site in the current tab.

By default, the tab back and forward buttons are not visible and the ‘->’ is also not visible on the last page. When the user has entered more than two URLs in the same tab, the two buttons become visible at the bottom left corner. If the user wants to see the previous page they can click on the ‘<-’ button and we will be redirected to the previous page. If the user wants to see the next page, click on the ‘->’ button. When the user clicks on the ‘+’ and ‘-‘ buttons at the bottom of the browser a new blank tab is added and the currently selected tab is deleted. If the entire web page can be reloaded in the current tab by clicking on the ‘Reload’ button for network reasons.

Figure 5 Homepage Editing Window

The user can get a tab for the new Homepage by clicking on the ‘ ‘ button next to the URL input box. When the user right-clicks on the button they will get a new pop-up window. The user can set the new Homepage by entering a legal HTTPS and HTTPS protocol URL, and when refreshed again the set Homepage will be available.

Figure 6 Homepage Editing Window

When the user presses the ‘star (favorite)’ button on the current page, the star will change from black to green. A black star means that the site is not bookmarked, and a green star means that the site is bookmarked and stored in the favorites list.

Figure 7 History Editing in the history list Figure 8 Favorites Editing in the Favorites list

The URL and Title can be edited by right-clicking on any URL in the History and Favourites lists. The History list can only be deleted, the Favorites list has the ability to modify the site title and URL and delete it.

Figure 9 Favorites Editing Window

When the user right-clicks on the ‘Edit’ button in the favorites list, a pop-up window appears in the middle of the browser with the title and URL of the website that the user is favoriting. When the user clicks ‘Save’ the changed site will automatically change in the favorites list.

Figure 10 Bulk Download Example

On the far left is the ‘Bulk Download’ button, which when pressed will automatically open the local Explorer and run the document of the user’s choice in ‘.txt’ format. Once selected, like Figure 10 will appear and the entire browser will create a new tab and output the status code, bytes, and URL of the website in the entire document.

Developer Guide

(2 86 words)

For future developers and engineers who want to develop. Please start with ‘NewBrowser.cs’. The ‘NewBrowser’ class contains the most critical functions and functions. For the ‘BrowserTabPage’ class, a List to store all the URLs requested. this allows it to move to the previous or next page. Optimization of indexing and pointers can be done to reduce the time complexity to O(logN). However, developers should note that for favorites editing if the URL is deleted while the mouse cursor lands on the Listbox the URL will be displayed incorrectly in the tab’s Title. The error displayed is ‘Wrong URL’, the rationale behind this error is that it recognizes an illegitimate URL link and therefore throws an error (because the URL is empty and does not comply with the HTTPS/HTTP protocol).

Figure 11 Favorites List’s index changed function

Figure 12 New tab page creates function

Data structure

The tabs of the browser, also using a List, will have a different history from tab to tab so we need to generate a chain table again. Each table has two pointers to the pages visited, thus enabling forward and backward functionality. The time complexity is O(N).

A LinkedList is used for the history, as the history should be in the order of access time and does not need to be unique i.e. the same URL can be accessed multiple times so no index is needed. The time complexity is O(N). This can be kept in sync with Listbox.

Favorites, because the URLs in the favorites must be kept unique, use a Dictionary to store the favorites, when the user makes an edit to a URL the time complexity is O(1). For arranging the favorites in a dictionary, the time complexity is O(logN).

Testing

( 143 words)

The Demo Video

F20SC Junhao Record-20221024_232503-Meeting Recording.mp

Homepage: will return the Html of the page normally, and can be adapted to the settings function of the Homepage.

URL fetching: All assumptions for H1, H2, H3, and H4 are met.

History: Everything is fine.

Favorites List: After deleting the specified URL in the Favorites List, the current tab will show a message that the URL is not legal, and when the duplicate of the Favorites List is deleted, it will show an empty value, thus not returning the index properly. problem location: private void ‘FavoritesList_SelectedIndexChanged( object sender, EventArgs e)’ but this error does not affect everyday use.

GUI size and position change: This does not affect buttons and links that are already anchored. The user can resize the application in the web browser at will. Assumptions for H5, H6, H7, and H8 are met.

Conclusions

( 164 words)

C# turned out to work surprisingly well for me. I have studied C, C++, and Java and this is my first exposure to C#. I think the language is very promising to use. I am personally pleased that I implemented the Tab function of the browser this took a week, C# pointers and LINQ played a big role in my project, I also did not expect C# to have the concept of global variables, which is very good in terms of code security, by writing a web browser gave me a good understanding of both product development and C#, from development to packaging is what I This has allowed me to gain a lot of experience in software development and has given me a better understanding of the importance and concepts of industrial programming. In the future, I will continue to maintain my browser and I will develop more applications in this language. All in all, C# has brought me a lot of surprises.