Make XFCE look like ChromeOS Part 1

So today I decided to make XFCE look like a Chromebook. Here's what I am aiming for:

Note: the Chromebook has a bespoke desktop comprising a transparent taskbar/dock containing Google product icons and integrates the Google Apps launcher in place of a traditional application/start menu. On the bottom right sits a floating dock with a clock, WiFi, battery and user account widgets. There is basically just the one app - Google Chrome.

1. Get XFCE

I am assuming that most of you reading this know what XFCE is and how to get it. But just for completeness and in case anyone wants to follow exactly what I am doing, download and install Xubuntu 14.04 LTS on real hardware or in a virtual machine.

2. Get Google Chrome

You won't find Google Chrome in the official Ubuntu repositories, but you will find Chromium (the open source version). Personally, I recommend installing the official version of Google Chrome to ensure you get the best experience using all the Google Apps and Chrome Store, plus it has Flash built in and sandboxed.

You can just download it on any Ubuntu variant straight from the Chrome website, but you might like to add the PPA and install via command line as follows (taken from here):

Setup key with:

wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add - 

Setup repository with:

sudo sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'

Install package with:

sudo apt-get update 
sudo apt-get install google-chrome-stable

3. Grab the wallpaper.

A quick Google image search will show a number of common wallpapers you might expect to see on a Chromebook. This site has pretty much all of them, so download the one(s) you want.

Right-click on the XFCE desktop and select Desktop Settings from the menu. You will need to change the folder to wherever you downloaded your image to:

While you're at it, take the desktop icons off using the icons tab (it might be a good idea to leave Removeable Device icons though):

4. Move the panel to the bottom and make it transparent

By default, XFCE on Xubuntu has a panel on the top edge of the screen. We need this at the bottom and we need to make it about 40% transparent so we can see the wallpaper behind it. Right-click on the panel and select the Panel submenu and then Panel Preferences. Untick the box "Lock panel" and then grab the panel on the left edge and drag it to the bottom of the screen.

Whilst you are there, increase the row size to 28. 

Then click on the Appearance tab and set the transparancy Alpha value to 40.

5. Turn the panel into the floating widget dock

The current XFCE panel already has widgets similar to the one floating in the bottom-right on the Chromebooks. A few items need removing and some need re-ordering. Back on the Panel Preferences dialog, click on the Items tab.

Remove the Whisker menu using the red minus sign. Although the Whisker menu is a great start menu, there isn't one on a Chromebook, so off it goes! Don't worry, a right-click on the desktop will bring up an application menu!

Now, Chromebooks use a Windows 7/Mac OSX style dock where the icons are also the Window buttons. You can't recreate this in XFCE as such, so it's worth keeping a way to switch between open windows. First, remove the existing Windows Buttons widget. Then click the green + button and add the Window Menu widget instead. Leave it at the end of the panel, click on the cog icon to configure. Change the button layout to an arrow.

Bring the clock widget to the start of the panel and configure it to show 24 hour time only. Remove the expand function of the separator between the clock and the other widgets. Now everything will shift to the left.

Chromebooks don't have a visible volume icon. If you have keys for the volume, then you can hide the icon by configuring the Indicator plugin.

Go back to the Display tab and reduce the length of the panel to just fit all the items in (about 15). Tick the box that allows the panel to automatically expand - this means it can make room for notification icons. Unlock the panel and shift it to the right-hand edge:

6. Get your Google apps

I am assuming you already have a Google account if you are trying to recreate this look. If not, sign up for one from the Google home page. 

Open Chrome and log into your Google account and make sure the tick is on the Stay Signed in box. The current versions of Chrome have an Apps shortcut on the Bookmarks toolbar. Alternatively you can type chrome://apps into the address bar and you should see a screen like this:

Adding more Google apps, is a simple matter of visiting the Chrome Store, searching for an app eg Google Play Music and installing it. It will then appear on this screen and on the App Launcher discussed below.

The killer app that is going to really make XFCE look like a Chromebook is the Chrome App Launcher. Right-click on the desktop and click on Open Terminal Here... Then type into your terminal:

google-chrome-stable --show-app-list

And this is what you should see. The apps will differ depending upon what you have added from the store:

The next step is to add all the icons for all the apps you want to appear on the taskbar to the desktop.

1. Lets start with the App Launcher itself. This is a tricky beast to get on Linux. It can appear as if by magic into your conventional XFCE applications menu, but failing that, it's easy enough to create, but you will need the icon - save one of the icons below to your home directory somewhere:

 

Okay, right-click on the desktop and select Create Launcher. Then fill in the details using the google-chrome-stable --show-app-list command as above and your icon that you have downloaded:

Now test the launcher actually launches the app list. When you double-click it, you will have to first choose "Mark Executable" as a one-off. Hint: press Esc to close the app list.

2. Create launchers for Gmail, Google Search, Google Drive, Google Docs and YouTube.

This is easier than you think because Google should have placed the launchers (and icons) already in the hidden ~/.local/share/Applications and ~./.local/share/icons/hicolor/128x128/apps/ directories.

Open the XFCE file manager (Thunar) by right-clicking the desktop and choosing Open in New Window. Click on the View menu and select Show hidden files. Then navigate to the .local/share/Applications directory.You should see some cryptic looking icons (at least 5, but maybe more depending upon which apps you have added to Chrome already):

Select all the files that have names like Chrome-abcd-Default.desktop... and copy and paste them onto the desktop. Lo and behold, the default Chrome app launchers will appear:

7. Create the main application dock

Now you have all the icons, you are ready to create the main dock with the applications icons. We are going to create a new XFCE panel for this. Right-click on the panel you already have and select the Panel Preferences menu. Click on the big green + symbol at the top to create a new panel which will appear as a black rectangle somewhere near the top-left corner of the screen.

Drag the new panel to bottom-left corner and then increase the length to occupy about half the width of the screen (length=50) and change the height to 36. Click on close to set the panel for now.

Drag a launcher from the desktop to the panel. Wait until you get a red line and let go of the mouse. A dialog will appear asking if you want to create a launcher, click Create. It's a bit tricky as you have to get each icon very close to the last before it will drop onto the dock:

Continue until you have all the icons on the panel/dock. Arrange them in whatever order you like, or follow the order of the Chromebook screenshot at the start of this how-to.

Finally, add a launcher for Chrome itself. Right-click the new panel and select Panel Preferences. Click on the Items tab. Click on the + symbol, choose Launcher and then Add. An empty launcher will appear. Click on the cog to edit the launcher. Click on the green + symbol again and scroll through the list of installed applications until you find Google Chrome. Then click on close.

Whilst in panel preferences, you can re-order the launchers. Then for a final flourish, take the alpha level right down to 0 on the Appearance tab and on the Display tab lock the panel and close the preferences dialog.

Finally, remove all the desktop launchers by selecting them all and pressing the delete key on the keyboard.

The beauty is, the App Launcher will launch directly above the icon on the dock:

And that is how you make XFCE look like a Chromebook!

Next time, I'll have a few tweaks to get it even closer to the real thing.

Now you can see for free if the Chromebook way of working is for you.

Please feel free to leave comments, suggestions or requests below. Be nice, it's my first post :) Would love to see any screenshots if anyone has a go at this.