Bit Of A Hack

Home Archives
logo

Keep up to date with Bit Of A Hack...

Fixing the GMail UI [Permalink]

I use GMail. The UI has changed many times and has tended to get worse as time moves on. I'm seeing more and more UIs that are, to be brutally honest, a steaming pile of crap. Mainly Android apps (and probably iOS apps too, I don't use iOS) have functions hidden by UIs that are not intuitive. As nice as swipe gestures and fancy hidden menus are, I want to know how to use an app without needing an induction. Anyway, back to GMail.

In GMail, there is a prime example of the UI designers wanting to make something look cleaner to the detriment of functionality. I'm talking about the compose window. There is a set of buttons hidden at the bottom of the compose window, you have to hover over an area of blank space for them to appear. The stupid thing is that there is more than enough space for the buttons to be always visible.

This is the problem...

The problem

 

Why have all that space when you can have the buttons there all the time?

 

The problem

 

So how can we make this happen? Chrome extensions! Obviously.

Chrome extensions that add CSS to a site to change its look are dead simple to make. The first thing I did was use the chrome element inspector to find out what changed between buttons visible and buttons hidden. It turned out that there was simply one "hover for more" element that becomes invisible and another "button tray" that becomes visible.

The mechanism is a little odd. The "hover for more" button is in a div element with a 'aDb' class. This element appears to have its 'display' value set to 'hidden' by some script when the mouse moves over the button tray. This is a little odd, but injecting the css for 'display:hidden;' in to the 'aDb' class should make it go away altogether. The other thing is showing the button tray. This swaps the class 'wM' of the tray's div element to a 'wN'. This I presume is also in a javascript thing. This could be done with no JS at all using the CSS selector ':hover' but... y'know... google. So the solution for this one was to inject rules similar to the rules for 'wN' into the class 'wM' all wee need is 'width:186px;' and 'display:block;'

So the CSS to inject is just this:

div.aDb{
  display:none;
}
div.wM{
  width:186px;
  display:block;
}

So I put this in a file called "show_compose_buttons.css" and saved it in what will become a chrome extension project directory.

Easy! Now all we need is a JSON manifest file. Google has loads of documentation on how to do this. This manifest just says that we want that CSS file injected on all GMail web pages. Take a look...

{
  "manifest_version": 2,

  "name": "GMail Tweak",
  "description": "Fixes issues with GMail. Shows the compose buttons all the time.",
  "version": "1.0",

  "content_scripts": [
    {
      "matches": ["https://mail.google.com/*"],
      "css": ["show_compose_buttons.css"]
    }
  ]
}

That's it. all you need for a chrome extension that puts those buttons back where they should be! Balance is restored and the universe is once again safe from google's developers.

If you want more on how to do Chrome extensions, look here at the getting started: https://developer.chrome.com/extensions/getstarted

You probably want to look at how to use things called "Content Scripts". These are what let you inject CSS and JS into any pages you want to adjust.

This will probably stop working the next time google changes GMail. The names of the div classes look like they were automatically [and arbitrarily] generated. But until then, enjoy.

By .

comments powered by Disqus

This website uses cookies. If you don't like this, please stop using this site.