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.

[nelsonni]

Searches for React components that wrap around a webview tag will primarily direct towards the React Native WebView component, however, since Synectic is not based on React Native this is an unfeasible solution at this time.

Additionally, there are some concerns when wrapping a React component around the HTML webview tag: electron/electron#6046: webview tag ignores attributes when rendered via React

[nelsonni]

The solution in PR #110 uses the webview tag provided through Electron, which has an internal implementation of:

Under the hood webview is implemented with Out-of-Process iframes (OOPIFs). The webview tag is essentially a custom element using shadow DOM to wrap an iframe element inside it.

So the behavior of webview is very similar to a cross-domain iframe, as examples:

• When clicking into a webview, the page focus will move from the embedder frame to webview.
• You can not add keyboard, mouse, and scroll event listeners to webview.
• All reactions between the embedder frame and webview are asynchronous.

Therefore, in order to style webview tag (for rounded corners in this case) we must apply CSS rules to the internal iframe element which is wrapped in a shadow DOM root. This requires special consideration, per the StackOverflow post Styling a child of a shadow root in Shadow DOM, up to and including the use of the :host pseudo selector.

An initial unsuccessful attempt at using this solution resulted in being able to inject <style> elements beyond the boundaries of the shadow DOM root, but none of the style rules were applied directly to the <iframe> element:

useEffect(() => {
  const webviewTag = document.querySelector('webview');
  if (webviewTag) {
    const updatedInnerHTML = webviewTag.innerHTML + '<style> :host iframe {border-radius: 10px;} </style>';
    webviewTag.innerHTML = updatedInnerHTML;
  }
}, [browserState.current]);