Added ability to set <main> class using route metadata

no issue
- modified `ui` service's `routeDidChange` handler to update it's `mainClass` property based on the new route's metadata
- used in the future for switching screen background colours

To use the feature, modify or add a `buildRouteInfoMetadata` hook in the route which you'd like to change, eg:

```js
export default AuthenticatedRoute.extend({
    ...

    buildRouteInfoMetadata() {
        return {
            bodyClasses: ['my-body-class'],
            mainClasses: ['grey-bg'] // <--------
        };
    }
});

```

The route hierarchy is taken into consideration with classes being added for all currently shown routes. For example if you wanted to add an `editor` class to all editor routes you could use the hook in `routes/editor.js` then if you added an `editor-new` class in `routes/editor/new.js` the resulting HTML output on the "New story" screen would be:

```html
<main class="gh-main editor editor-new">
```

app/services/ui.js

@@ -2,22 +2,28 @@ import Service, {inject as service} from '@ember/service';
 import {get} from '@ember/object';
 import {not, or, reads} from '@ember/object/computed';
 
-function updateBodyClasses(transition) {
+function collectMetadataClasses(transition, prop) {
     let oldClasses = [];
     let newClasses = [];
     let {from, to} = transition;
 
     while (from) {
-        oldClasses = oldClasses.concat(get(from, 'metadata.bodyClasses') || []);
+        oldClasses = oldClasses.concat(get(from, `metadata.${prop}`) || []);
         from = from.parent;
     }
 
     while (to) {
-        newClasses = newClasses.concat(get(to, 'metadata.bodyClasses') || []);
+        newClasses = newClasses.concat(get(to, `metadata.${prop}`) || []);
         to = to.parent;
     }
 
+    return {oldClasses, newClasses};
+}
+
+function updateBodyClasses(transition) {
     let {body} = document;
+    let {oldClasses, newClasses} = collectMetadataClasses(transition, 'bodyClasses');
+
     oldClasses.forEach((oldClass) => {
         body.classList.remove(oldClass);
     });
@@ -34,15 +40,20 @@ export default Service.extend({
     isFullScreen: false,
     showMobileMenu: false,
     showSettingsMenu: false,
+    mainClass: '',
 
     hasSideNav: not('isSideNavHidden'),
     isMobile: reads('mediaQueries.isMobile'),
     isSideNavHidden: or('isFullScreen', 'isMobile'),
 
     init() {
         this._super(...arguments);
+
         this.router.on('routeDidChange', (transition) => {
             updateBodyClasses(transition);
+
+            let {newClasses: mainClasses} = collectMetadataClasses(transition, 'mainClasses');
+            this.set('mainClass', mainClasses.join(' '));
         });
     },
 

app/templates/application.hbs

@@ -10,7 +10,7 @@
             }}
         {{/if}}
 
-        <main class="gh-main" role="main">
+        <main class="gh-main {{this.ui.mainClass}}" role="main">
             {{outlet}}
         </main>