Share this post
FaceBook  Twitter  

1. Introduction

We've seen, in the last years at least, a big rise of the Web in everything we do and everywhere we do it. Now, lots of people need only a browser window for work or for fun, making lots of previously-used pieces of software obsolete. With the launch of the Gnome 3 desktop environment, the Web made it's way inside our installed software in a very smart way: parts of the UI are actually writen in Javascript, a Web language by excellence. Or...maybe not that much. Fabrice Bellard wrote a PC emulator in Javascript, and here's another example: a desktop environment having important parts written in this language. So if you're feeling hacky and have some knowledge of Javascript, or even general programming concepts, this article is for you. Of course, you're expected to have access to a Gnome 3 and/or Cinnamon desktop machine.

2. Javascript in Gnome and Cinnamon

We recommend you have the Cinnamon source tree at your disposal (we're gonna focus on Cinnamon, mostly, but that doesn't mean you won't be able to apply your knowledge to Gnome 3. as you'll see) so you can look at it and its' source code before starting. Reading code is just as important as writing it, and it is better to get accustomed to the way things work first. For the sake of this article, we peaked at the code on a NetBSD machine and tested the installed version on Ubuntu 11.10. The version downloaded is 1.1.3, and we recommend care if you want to use the latest git versions, because they're based on a different set of libraries.

 Of course, the part in the source tree that is of interest to us is the js directory. I kinda like it, although there were voices criticizing the use of Javascript, that I can make changes to my desktop without the need to (re-)compile from source: all I need to do is log out and the changes, if correct, will be visible. But I digress - let's go back to the aforementioned js directory. You'll find four directories, named gdm, misc, perf and ui. The naming is pretty obvious, so let's see how you can play with some settings to the gdm interface. One of the first things I thought about when I first learned about Cinnamon/Gnome 3 and Javascript was ... well, that one can easily use this as an opportunity to play pranks on co-workers, significant others or friends. Let's see how to make gdm display some "1337" message, script kiddie-style, so the actual user of the computer will freak out when he or she will return to the computer. Of course, care should be taken when choosing the "victim", as we don't want this to become a bad joke. Go to /usr/share/cinnamon/js/gdm and open loginDialog.js. At line 849, you will see a message that will be shown when gdm expects the password and informs the user that he or she can also swipe their finger, hardware provided, to authenticate. The line of code looks like this:

 this._promptFingerprintMessage = new St.Label({ text: _("(or swipe finger)"), style_class:\
'login-dialog-prompt-fingerprint-message'}); //line broken in two pieces for space considerations

Now, all you have to do is change the finger swiping message inside double quotes with something to your liking, like "you can swipe your finger, but it won't be of any use, d00d!" or something along the lines of. Or, you can stay in the same directory, open powerMenu.js and make it like, if the user wants to restart, gdm will ask him to no end if he/she is sure. Tip: the function is defined at line 137, and you can easily see how to create a pop-up by browsing the web or looking a few lines above.

3. Modifications to your user interface

Now that you got your feet a little wet, let's make some use of this Javascript interface. For example, I wanted to control the calendar and what it shows me. The file is ui/calendar.js and what I actually wanted was, when I clicked on the date/time on the panel, the upper part of the calendar to only show me the date (like January 23), without the year or the weekday. Upon opening the file, you will see a TODO, so if you're feeling up to it, here's one chance to help the community. Anyway, the line you need is 703, where the default format will be e.g. "Monday January 23 2012". One interesting theme for thinking is how you can alter the code so it shows "January 23rd", with exceptions like 1st or 2nd. The code for the DMdY (Day of week, Month, day, Year) is

 dayString = day.toLocaleFormat(C_("calendar heading", "%A %B %d %y"));

Now it became obvious that all I need is %B and %d so I can get to the result I wanted. A logout/login later and the result is just what I wanted.

For the moment, some of the essential keys (like backspace, return, escape) are defined in ui/keyboard.js. "For the moment", because it seems the plan is to move them to libcaribou, if we believe the comment on line 24. Here's a good opportunity for you to change some of those keys, either for serious use or because you want to continue the whole prank idea we came up with earlier. You can also be interested in ui/layout.js if you have some specific need, like more than one monitor or some odd (what's odd, anyway?) work habits. ui/menu.js , for example, lets you add/remove functionality from...yes, the menu, of course, although it looks pretty complete to me. That said, it's best we let you know that this article isn't meant to give you a whole developer's tour of Cinnamon, from a Javascript point of view. It' s just meant to give you an overview and some ideas.

4. Gnome-shell

If you get the sources for gnome-shell and change to the js directory, you'll have a surprise. The layout, as well as the filenames, are exactly the same. So now, let's see some easy and interesting modifications you can perform on your panel, be it Cinnamon or Gnome 3 (gnome-shell). One of the criticisms that Gnome 3 faced when it was launched was the lack of tweaking tools. Who needs tools when you have Javascript, right? We should now go to ui/panel.js and take a look at some of the consts you'll find right at the beginning of the file. One of the most interesting lines is

['keyboard', 'volume', 'bluetooth', 'network', 'battery'];
//again, broken in two for space constraints

On my system, out of the above five elements, only three make sense because I don't have a laptop, nor a Bluetooth dongle, and I use the English default keyboard layout and nothing more. In fact, on Cinnamon, one line later, you can see that the three remaining elements are actually implemented, plus Bluetooth via an if block, so I guess you'll have to import some more if you need it, and a good starting point is the gnome-shell way of doing things. Another important constant appears below, by the name of PANEL_HEIGHT, and I can only guess that the size is measured in pixels. The same settings as above, minus panel height, but for the upper area of gdm, the ones that lets you configure, among others, the sound volume or the keyboard layout, are available also in ui/panel.js. One other cool feature is that you can make your panel "hideable", meaning whenever your mouse isn't over it, it disappears, leaving you with more usable screen space (line 899+). In ui/workspacesView, line 20, you can find the definition of a constant that takes control of the maximum number of workspaces allowed. Take note of the comment below (if you're still using Mutter), because you have a hard limit of 36. Then again, 36 workspaces does seem rather much, ain't it?

5. Conclusion

Javascript is a simple language to use and learn, and what I have shown you below is only the beginning of a short exercise in programming, be it reading code or writing it. I would advise anyone that has some affinity towards programming to take chances like these, with proper backups, of course, so that if you hose your favorite UI you can always restore. But the most important thing in all of this isn't knowledge or a spiffier interface. It's all about having fun.


Who are we? is not affiliated with any local or international company, nor is it a recruitment or employment agency. We specialise in Linux based careers and closely related Information Technology fields by providing careers advice and latest employment opportunities.


You can also get involved in the LinuxCareer project by participating on our FORUM or SUBMITTING A LINUX ARTICLE. We offer a range of privileges to our authors and good company.