browserhtml / browserhtml

Experimental Servo browser built in HTML

This project has been retired: https://groups.google.com/d/msg/mozilla.dev.servo/U5zhsBLXovM/HbRL69zZBAAJ

---

Browser.html

Browser.html is a research project aimed at building an experimental Servo browser in HTML. This project has 2 major pieces:

• Graphene: a runtime for building native apps in HTML. It's currently in development and part of Servo.
• Browser.html: an experimental browser UI for desktop.

This repository is for Browser.html (the front-end). Active development of Graphene happens in the Servo repository. Questions? Check out the FAQ.

Contributing

We welcome contributions from anyone. See CONTRIBUTING.md for help getting started.

Development

There are two major components to the browser.html application.

1. Local server that serves application UI.
2. Client that is a application shell that connects to the server and renders served UI.

Server

If you're working on the Browser.html front-end, you'll need Node.js to install all dependencies and run the development toolchain.

git clone https://github.com/browserhtml/browserhtml.git
cd browserhtml
npm install --no-optional

Once all dependencies are installed, you can run the server component with the following command:

npm run build-server

Any changes to the source code will trigger a build, which is then automatically served. That will allow you to reload a client in order to see your changes. Alternatively you can use live-server to not only rebuild, but also trigger an automatic live code reload for the UI such that application state is preserved:

npm run live-server

Client

In order to run the browser.html application itself, you will need a client component. This would be a Servo binary with the Graphene runtime. You can either download pre-built nightly snapshots or build it yourself and run with the --browserhtml flag. Assuming you have a pre-built snapshot in the default location on a Mac you can run the browser.html application with the following command:

 /Applications/Servo.app/Contents/MacOS/servo -b -w --pref dom.mozbrowser.enabled --pref dom.forcetouch.enabled --pref shell.builtin-key-shortcuts.enabled=false http://localhost:6060

Gecko Client

Browser.html can also be run on top of a Gecko-based version of Graphene. We used to use this variant to test and debug features that were not yet in Servo. You can either download pre-built nightly snapshots or build it yourself. Assuming you have a pre-built snapshot in default location on a Mac you can run the browser.html application with the following command:

/Applications/B2G.app/Contents/MacOS/b2g-bin --start-manifest=http://localhost:6060/manifest.webapp --profile ./.profile

Electron Client

Browser.html can also run as an Electron application. Assuming you have electron installed you can run the browser.html application with the following command (must be run from the project root):

electron .

Browser Client

You can also just load http://localhost:6060/ in your favourite web browser, but be aware that many features will not work because they require APIs not available to web content.

browserhtml's Issues

partial rendered UI + unable to render web pages [Ubuntu 15.04]

partial rendered UI + unable to render web pages [Ubuntu 15.04]
firefox nightly 64-bit/Ubuntu 15.04

http://i.imgur.com/BDLwkDO.png

~/Downloads/browser.html-master$ ~/Downloads/firefoxN/firefox -app $PWD/runtime/application.ini $PWD/apps/browser/manifest.webapp

(process:17654): GLib-CRITICAL **: g_slice_set_config: assertion 'sys_page_size == 0' failed
Register manifest at /home/pixel/Downloads/firefoxN/browser/chrome.manifest
document readyset frame to be an app: 1006
############################### browserElementPanning.js loaded
######################## BrowserElementChildPreload.js loaded
JavaScript error: chrome://global/content/BrowserElementPanning.js, line 91: TypeError:    evt.target.ownerDocument is null

http://i.imgur.com/BDLwkDO.png

Add web progress events to Browser API

Today, the browser API only tells if a frame is loading or not. It makes it impossible to build a progress bar.

"Pin Tab" feature

From @paulrouget on December 16, 2014 2:19

Copied from original issue: paulrouget/firefox.html#70

support draw in titlebar with b2g runtime

See bug 1118134.

ToolbarMenu

At the moment toolbar menu is hard coded into a runtime https://github.com/mozilla/browser.html/blob/master/runtime/shell.xul#L82

This is not ideal, I think we should use HTML5 <menu type="toolbar"> in the app itself to populate OS toolbar menu.

We could use mutation observers in order to track changes to a toolbar to repopulate <menubar id="main-menubar"> in the shell.xul & re-trigger events in the app document.

@ZER0 did something along these lines in a past so we could likely integrate that work here.

Reliable way to determine OS

So far, we're using navigator.appVersion. I don't know if it's the best way to determine the OS. With B2G, it returns 5.0 (), which breaks the UI.

Add support for extended mouse buttons for navigation

From @johndrinkwater on December 12, 2014 14:33

Had a look at adding forward/backward mouse buttons for history navigation, but js doesn’t get button presses.

Copied from original issue: paulrouget/firefox.html#58

Screenshot API

We'll want to be able to take screenshots of mozbrowser iframes for things like visual tabs, shrink/expand animations, etc.

This may already exist, but filing for posterity.

Keybindings are broken (since react)

STR:

• open browser.html
• open some empty tabs
• click on the content (below the urlbar)
• Keybindings don't work anymore

flash player support

When switching to firebox, the browser can no longer use flash player. In addition, if you try to download flash player in the browser, you get the following:

Implement a better gecko runtime

From @paulrouget on December 17, 2014 11:2

We want to provide a runtime that would be able to run one or several HTML apps to implement a desktop browser. For Firefox.html, we use Firefox Desktop with some ugly hacks. See https://github.com/paulrouget/gecko-dev/compare/mozilla:fx-team...htmlrunner.diff

Requirements (updated):

• user-agent style sheets need to be close to native look (not like B2G ua.css, more like Firefox's)
• apps can be hosted online (see with B2G team for their hosted packaged app plan + service workers (see with Vivien for patch-based updates using service-workers where he managed to update apps from github)) (requires Maple branch: https://hg.mozilla.org/projects/maple )
• support several app (browser app, settings app, processes manager app, maybe system app)
• properly integrated with the OS (make HTML app native):
  • native dialogs
  • native context menu
  • native panels
  • more -moz-appearance support in content
  • native notifications
  • use OS fullscreen mode if fullscreen requested
  • native menu
  • draw in titlebar
  • support window dragging from content (-moz-window-dragging)
  • overscroll effect
• devtools connected to apps
• standalone (maybe not Firefox Desktop or B2G. Another project? WebappRT? --enable-application=htmlrunner with its own binary name?)
• no conflict with running Firefox instances
• its own profile directory
• No XUL at all. Top level window is a HTML window
• nightly builds
• auto-update
• doesn't pollute WebRT or Firefox Desktop code

To keep the project easily hackable for now:

• no build process for apps. Auto-installation
• apps can be hosted on the disk
• super-reload (ctrl-shift-R reload all the apps, and repackage them if needed)
• command line to set location of the different apps

Sensible prefs:

• pref("browser.tabs.remote.autostart", true);
• pref("browser.chromeURL", "chrome://htmlrunner/content/shell.xul");
• pref("dom.webcomponents.enabled", true);
• pref("browser.dom.window.dump.enabled", true);
• pref("dom.mozBrowserFramesEnabled", true);
• pref("dom.ipc.processCount", 100000);
• pref("dom.webapps.useCurrentProfile", true);
• pref("security.apps.certified.CSP.default", "default-src *; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline' app://browser.gaiamobile.org");
• pref("network.dns.localDomains", "browser.gaiamobile.org");
• pref("devtools.webide.enableLocalRuntime", true);
• pref("htmlrunner.rootAppID", "browser.gaiamobile.org");
• pref("htmlrunner.rootAppManifest", "app://browser.gaiamobile.org/manifest.webapp");
• pref("dom.sysmsg.enabled", true);
• pref("devtools.chrome.enabled", true);
• pref("devtools.apps.forbidden-permissions", "");
• pref("devtools.debugger.forbid-certified-apps", false);
• pref("dom.datastore.enabled", true);

Copied from original issue: paulrouget/firefox.html#86

Settings in the cloud

We want to save session, history and preference somewhere. These settings need to be syncable across devices.

ContextMenus

Can we already use HTML5 ContextMenu API implement context menus in browser ? If not I'd be willing to hack a support for that in runtime until we get something more proper in platform.

Testing

I think we really need to come up with some test automation solution, I for one really wanted to write some tests for the history API to see if all things work as expected.

So far I'm thinking of picking one of the popular test frameworks for the web, but then I'm not entirely sure how they can be integrated.

Tabs should not always be created at the end of the tabstrip

From @paulrouget on December 11, 2014 9:51

Tabs opened from a tab should added to the right of the parent tab, unless there is already a child tab. In this case it should be added to the right of the last child tab.

Copied from original issue: paulrouget/firefox.html#47

CertErrors should use about:netError

STR:

• Load https://linuxfr.org
• empty page

Can't drag window when dragging empty areas of the tab strip

From @nt1m on December 16, 2014 22:34

I have to go on top of the tab strip to drag the window.
OS : Windows 10

Copied from original issue: paulrouget/firefox.html#83

Add scrollbox to tab bar if tabs don't fit

From @SebastianZ on December 10, 2014 7:19

The tab bar should add a scrollbox if the tabs don't fit into the window.

Sebastian

Copied from original issue: paulrouget/firefox.html#21

Make it possible to attach devtools to the browser app

From @paulrouget on November 25, 2014 2:31

Copied from original issue: paulrouget/firefox.html#2

Firefox.html should be able to be hosted online

From @paulrouget on November 25, 2014 2:32

Copied from original issue: paulrouget/firefox.html#4

Add proper styling to history buttons

From @SebastianZ on December 10, 2014 7:32

The history buttons currently don't look like in the normal Firefox.
Here's how they should be styled:

A few points on this:

• The buttons should be connected with the Awesome Bar.
• The Back button should be big and round.
• The Forth button should hide when you're at the end of the history.

Sebastian

Copied from original issue: paulrouget/firefox.html#22

Build beautiful thumbnails (not just screenshots)

Not just a screenshot. Not just an icon. Something nice. Think 300x200 (x2 for retina).

For example:

Things to experiment with:

• extract dominant color + nice typo
• provide already made thumbnails for top 500 websites (http://www.alexa.com/topsites)
• nice image upscaling of the favicon
• automatic detection of the most visually interesting region of the page

devtools do not open

On osx 10.9, the devtools will not open. Neither shift-command-i or the menu item opens the devtools.

Add Firefox menu

From @SebastianZ on December 10, 2014 7:1

The hamburger button is currently without functionality. It should open the Firefox menu.

Sebastian

Copied from original issue: paulrouget/firefox.html#19

Add page context menu

From @SebastianZ on December 10, 2014 7:2

Right-clicking a page currently doesn't do anything. It should open the context menu.

Sebastian

Copied from original issue: paulrouget/firefox.html#20

unclear install Nightly on linux in README.md

how exactly can you install FF Nightly on "linux"? (linux is a kernel! j/k) but on a serious note, https://nightly.mozilla.org/ FF Nightly links to a tar.bz2 archive. I have Ubuntu installed and Firefox 34 is the default browser... i think this will generate confusion on how to install Nightly. Even if they download/extract the archive, i don't think it's a easy way to make Nightly default.

Keep runtime separate ?

Can we please keep runtime separate maybe link to it via submodule or something if necessary ? The reason I would prefer that is so that as I would like to avoid coupling it with browser.html too much. I would really like it to be on a par with node-webkit which is a porpular way to build desktop apps in node community.

Note that as we npm already takes care of dev dependency on NPM so it will take care of installing runtime so users won't have to deal with at at all.

I'm also more than happy to migrate runtime to mozilla organization, so we will all have a same control of it.

Build for B2G for browser

Is possible create a build of https://github.com/paulrouget/gecko-dev/compare/b2g-for-browser.html for the various platform?

Wrap tab bar and navbar inside a toolbox

From @nt1m on December 16, 2014 22:33

We should wrap the tabbar and the navbar inside a toolbox. That toolbox will be the customizable area of the browser, but that will also simplify things style-wise if we add more toolbars later (bookmarks for example).

Copied from original issue: paulrouget/firefox.html#82

Figure out localisation story in combination with react

false lack of javascript

Since switching to the firebox runtime, certain websites (for example all google websites) believe that browser.html does not support javascript, and show a version of the website intended for use in browsers that do not support javascript or display a warning message, even though the browser does actually support javascript.

web content iframe is blank

I am using the current nightly on Linux x86_64. Sadly I just get a blank rectangle where web content should show up. When I move across the area the cursor actually changes to a pointer when I am over a Link. Seems like some graphics problem.

Built from https://hg.mozilla.org/mozilla-central/rev/b3f84cf78dc2

Exectuing commands that aren't possible from HTML

Once context menus and toolbar menus are ported over to app itself we would need to execute commands that aren't currently possible from HTML (as far as I know). Here are few that come into my mind:

1. Toggle devtools (maybe we could have a special URL and use window.open(devtoolsURL) for that.
2. Quit application (This is little tricky as multiple windows can be opened and they would need to communicate closure with each other).
3. Redo / Undo.
4. Hide app / Hide other apps (OSX).

I'm sure there will be more of these so we do need to find a way to deal with it. General approach could be to dispatch custom "command" event on the window itself that shell.xul could listen to and trigger appropriate actions. In a future we could wrap that up in a nicer HTML APIs when they come along.

Integrate react.

I would really like to integrate react into this which was originally tracked under this pull paulrouget/firefox.html#94

What should we do about it ? Is it doomed ? Should I retarget pull request this repo ?

Can't select URL in URL bar with cursor

Hi there!

When trying to select a URL with the cursor, it moves the window instead. I don't think this should happen. People should be able to select URLs when keeping pressed the mouse button.

Thoughts?

Use scrollgrab & scroll snapping to implement toolbar animation

The body of the app should overflow: toolbar (50px) + iframes (100vh). The body should use scrollgrab and scroll snapping to hide/show the toolbar.

Scroll-position based animations could be used to animate the opacity of the bar.

This requires some platform work. First step is to get scrollgrab to work on desktop. So far, I'm blocked because of https://bugzilla.mozilla.org/show_bug.cgi?id=1124099

awesomebar: Store history and session in indexeddb

We need to be able to store all the history in the DB (datastore/indexeddb), and also have a mechanism to query the db, including suggestions from search engines.

Tabs animation (CSS)

From @paulrouget on December 15, 2014 11:1

Tab creation and destruction should be animated. See https://wiki.mozilla.org/Firefox/Projects/Tab_animation

Copied from original issue: paulrouget/firefox.html#66

Closing last tab should close the window

From @joshua-s on December 10, 2014 14:56

This is how Firefox Desktop works.

Copied from original issue: paulrouget/firefox.html#28

Build about:preferences as a Settings app

From @paulrouget on November 25, 2014 2:31

Prefs should use the settings API. The UI should be displayed as an app inside the browser itself (like about:preferences in firefox)

Copied from original issue: paulrouget/firefox.html#1

servo support

From @pixelr0 on December 11, 2014 13:50

running with a servo back end

Copied from original issue: paulrouget/firefox.html#50

[Tabs] Add new tab button

From @joshua-s on December 9, 2014 17:17

It would be nice to have a "+" button to open new tabs.

Copied from original issue: paulrouget/firefox.html#15

ctrl-click / middle click should open links in a new tab

From @paulrouget on December 11, 2014 9:47

Copied from original issue: paulrouget/firefox.html#46

Implement floating scrollbars for the 3 platforms

Let's implement better scrollbars:

• floating, à la osx/mobile (no reflow)
• stylable
• same accross all the platforms

ReactJS feedback

I backedout React integration.

I played with it today. This new code base feels over engineered for such a simple UI (4 buttons, 2 inputs, tabs), and we still don't know what the UI will look like in the future.

I am not ruling out React, but it's a premature optimization. Let's reconsider using React later.

Enable APZC

Apparently, APZC is required to get the mozbrowserasyncscroll.

[apzc] Support overscroll effect

From @paulrouget on November 25, 2014 2:34

Copied from original issue: paulrouget/firefox.html#7

Nothing is rendered under Arch Linux

I'm using latest version of browser.html with latest Firefox Nightly under latest Arch Linux.

When I load a website nothing is rendered. How can I help you in a better way?

This is the log of the console:

[airon@aironpc browser.html-master]$ firefox-nightly -app $PWD/runtime/application.ini $PWD/apps/browser/manifest.webapp

(process:1029): GLib-CRITICAL **: g_slice_set_config: assertion 'sys_page_size == 0' failed
Register manifest at /opt/firefox-37.0a1/browser/chrome.manifest
document readyset frame to be an app: 1001
############################### browserElementPanning.js loaded
######################## BrowserElementChildPreload.js loaded
WARNING: child tried to open http IPDL channel w/o security info

(firebox:1029): Gtk-CRITICAL **: IA__gtk_clipboard_set_with_data: assertion 'targets != NULL' failed
WARNING: child tried to open http IPDL channel w/o security info
WARNING: child tried to open http IPDL channel w/o security info

(firebox:1029): Gtk-CRITICAL **: IA__gtk_clipboard_set_with_data: assertion 'targets != NULL' failed
JavaScript error: chrome://global/content/BrowserElementPanning.js, line 91: TypeError: evt.target.ownerDocument is null
JavaScript error: chrome://global/content/BrowserElementPanning.js, line 91: TypeError: evt.target.ownerDocument is null
JavaScript error: chrome://global/content/BrowserElementPanning.js, line 91: TypeError: evt.target.ownerDocument is null
JavaScript error: chrome://global/content/BrowserElementPanning.js, line 91: TypeError: evt.target.ownerDocument is null
WARNING: child tried to open http IPDL channel w/o security info

B2G for browser.html should have its own pref file and its own shell.* files

There are many prefs in b2g.js that we do not need. And also some prefs that are not safe enough for B2G Desktop (Simulator) that we want to enable for Browser.html (like ipc.tabs.enabled, APZC, ...).

Also, B2G Desktop comes with a pretty big shell.js file and desktop only scripts. I don't know how much of that is required.

@fabricedesre - what would you recommend?

Themes

From @joshua-s on December 10, 2014 19:24

Themes are an important feature in Firefox. We implemented a sample dark theme in #10, and now should refine our mechanism.

Improvements/needs:

• Switch between themes (depends on #1)
• Install 3rd-party themes
• Decide on an easier theme format
• Support lightweight themes
• Support non-firefox.html themes (is this possible?)

Copied from original issue: paulrouget/firefox.html#33