Browser card

[nelsonni]

The Browser component will provide web browser capabilities within a card, allowing users to view websites while working within Synectic. The initial set of features are:

Navigation

• Browser component should include an address that displays the currently loaded URL.
• Browser component should allow users to load websites through manually entered URLs in adherence to the behavior of the URL API. This should be asynchronous (i.e. non-blocking of other UI interactions).
• Browser component should allow users to reload the currently loaded website.
• Browser component should allow users to click on links in a loaded website and:
  • When a link contains a target tag of _blank, open the link URL in a new Browser card.
  • For all other target tags (_self, _parent, _top, and framename), or when no target value has been set, open the link URL in the same Browser card.

History

• Browser component should allow users to navigate back in the browser session history in adherence to the behavior of the History.back API.
• Browser component should allow users to navigate forward in the browser session history in adherence to the behavior of the History.forward API.
• Browser component should allow users to use the go command in the browser session history in adherence to the behavior of the History.go API.

Bookmarks

• Browser component should allow users to set the currently loaded URL as a bookmark.
• Browser component should visually indicate that the currently loaded URL has been bookmarked.
• Browser component should allow users to remove the currently loaded URL from bookmarks.
• Browser component should display a list of currently bookmarked URLs, and allow URLs to be directly removed from the list.

Scroll Navigation

• Browser component should allow the scroll position within a website to be set externally (i.e. other elements within Synectic should be able to update the scroll position; see Ben Carp's response to the StackOverflow question ReactJS how to scroll to an element).

Error Handling

• Browser should be able to validate URLs entered into the address bar and provide visual indicators until the entered URL has been corrected. The TypeScript base library includes a URL class that adheres to the WhatWG URL specification.
• Browser should offer suggestions for adding/correcting bad URLs that cannot be validated (i.e. suggesting to add a .com to the end of the URL https://github).
• Browser should provide visual indicators for HTTP status codes, especially errors such as 404 Not Found and 400 Bad Request.

[nelsonni]

Possible reference site for pulling in WebView to use within the Browser card: https://blog.jscrambler.com/building-a-web-browser-using-electron/

[nelsonni]

@Marjan-Adeli Anita wanted me to have you attempt a small, reasonably-scoped implementation task within this project. So using the latest version of the IDE v0.7.3 available on the API_architecture branch, please try to complete just steps 1 and 2 listed above within the next week or two. Obviously jumping into the code might be difficult, so please ask questions if you get stuck.

[Marjan-Adeli]

4e47071 Used webview instead of BrowserWindow, since BrowserWindow controls the entire Electron window and does not allow the Synectic canvas to be maintained during switches in the URL of the BrowserWindow.