Skip to content
This repository has been archived by the owner on Jun 4, 2022. It is now read-only.

Chrome Design

Adrian Cochrane edited this page Mar 20, 2017 · 3 revisions

The header-/tool-bar is loosely based on that of Pantheon Files, amongst others. Meanwhile the tabbar and application menu are native Granite controls shared by other applications.

The application menu avoids me placing options not regularly used while browsing the Web in the headerbar thus keeping it simple. However these options may still be used fairly frequently (e.g. zoom in/out, find-in-page), so shortcut keys are provided.

So far this is all fairly typical to elementary applications, and most my following decisions is to avoid visual weight on additional UI.

For this reason the addressbar in the headerbar is reused to depict loading progress.

Address bar

TODO The addressbar could be significantly improved to be less rigid in the input it accepts, and to depict page security, any available feeds, and more.

Find Toolbar

While elementary has a few different search UIs, I've created one which takes minimal space away from applications. Since I mainly need a single search entry I built it as an overlay on the WebView. Top-right is a nice place as it avoids covering up the found text (likely near the left).

The feedback is reported in the Granite OverlayBar as that avoids moving stuff around in the find toolbar. The gear menu in this find toolbar was added because of how little it complicates the UI and how useful it might be for correcting the search intelligence.

This is a model UI which hides when we interact with the WebView to make it clear when it's shortcut keys are active.

Download bar

The download bar, used to show files that have been downloaded or are downloading, is used over a dialog or popover-based UI for it's visual simplicity. As is the way I depict download progress in the button's background.

Beyond that the information displayed by the download buttons is deemed to be useful. The filename, filetype icon, and filesize tells users what is being downloaded. The estimated time gives some idea of when it'll be downloaded. The files are automatically opened as downloading a file is a good indication you want to see it.

These download buttons have a menu whereby users can correct the defaults.

Inspiration

I will admit that outside of elementary, Oddysseus is in large part inspired by early releases of Google Chrome [TODO find a good screenshot]. It's chrome had a lot of similar behaviours, down to commonality in how downloads and find-in-page are handled.

However I dislike how it has since departed from it's OS consistency towards looking more like a "Webapp" (a look which does not offer the same consistency), and the support for addons and "webapps" has not done good things for their used-to-be simple UI.

That said my primary reference is ofcourse other elementary apps, as the goal is for users of that platform to be already familiar with Oddysseus before they've even used it.