workspace, workspaceThumbnail: Use window content (WIP)

2019-07-16 14:31:30 -03:00
352 changed files with 29133 additions and 74378 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -0,0 +1,6 @@
 {
    "extends": [
        "./lint/eslintrc-gjs.json",
        "./lint/eslintrc-shell.json"
    ]
 }
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@@ -1,3 +0,0 @@
 extends:
 - ./lint/eslintrc-gjs.yml
 - ./lint/eslintrc-shell.yml
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -1,5 +1,6 @@
 stages:
 - review
 - source_check
 - build
 - test
@@ -14,7 +15,7 @@ variables:
        - merge_requests
 check_commit_log:
-    image: registry.gitlab.gnome.org/gnome/mutter/master:v3
+    image: registry.gitlab.gnome.org/gnome/mutter/master:v2
    stage: review
    variables:
        GIT_DEPTH: "100"
@@ -25,36 +26,28 @@ check_commit_log:
 js_check:
    image: registry.gitlab.gnome.org/gnome/gnome-shell/extension-ci:v1
-    stage: review
+    stage: source_check
    script:
        - find js -name '*.js' -exec js60 -c -s '{}' ';' 2>&1 | tee $JS_LOG
        - (! grep -q . $JS_LOG)
    <<: *only_default
    only:
        changes:
            - js/**/*
    artifacts:
        paths:
            - ${JS_LOG}
        when: on_failure
 eslint:
    image: registry.gitlab.gnome.org/gnome/gnome-shell/extension-ci:v1
    stage: review
    script:
        - ./.gitlab-ci/run-eslint.sh
    <<: *only_default
    artifacts:
        paths:
            - reports
        when: always
 build:
-    image: registry.gitlab.gnome.org/gnome/mutter/master:v3
+    image: registry.gitlab.gnome.org/gnome/mutter/master:v2
    stage: build
    before_script:
        - .gitlab-ci/checkout-mutter.sh
        - meson mutter mutter/build --prefix=/usr -Dtests=false
        - ninja -C mutter/build install
    script:
-        - meson . build -Dbuiltype=debugoptimized -Dman=false --werror
+        - meson . build -Dbuiltype=debugoptimized
        - ninja -C build
        - ninja -C build install
    <<: *only_default
@@ -65,15 +58,12 @@ build:
            - build
 test:
-    image: registry.gitlab.gnome.org/gnome/mutter/master:v3
+    image: registry.gitlab.gnome.org/gnome/mutter/master:v2
    stage: test
    variables:
        XDG_RUNTIME_DIR: "$CI_PROJECT_DIR/runtime-dir"
        NO_AT_BRIDGE: "1"
    before_script:
        - ninja -C mutter/build install
    script:
-        - dbus-run-session -- xvfb-run meson test -C build --no-rebuild
+        - xvfb-run meson test -C build --no-rebuild
    <<: *only_default
    artifacts:
        expire_in: 1 day
@@ -82,7 +72,7 @@ test:
        when: on_failure
 test-pot:
-    image: registry.gitlab.gnome.org/gnome/mutter/master:v3
+    image: registry.gitlab.gnome.org/gnome/mutter/master:v2
    stage: test
    before_script:
        - ninja -C mutter/build install
--- a/.gitlab-ci/Dockerfile.extension-ci
+++ b/.gitlab-ci/Dockerfile.extension-ci
@@ -1,7 +1,7 @@
 FROM registry.fedoraproject.org/fedora:latest
 RUN dnf -y update && dnf -y upgrade && \
-    dnf install -y 'dnf-command(copr)' git && \
+    dnf install -y 'dnf-command(copr)' && \
    # For syntax checks with `find . -name '*.js' -exec js60 -c -s '{}' ';'`
    dnf install -y findutils mozjs60-devel && \
--- a/.gitlab-ci/checkout-mutter.sh
+++ b/.gitlab-ci/checkout-mutter.sh
@@ -1,5 +1,6 @@
 #!/usr/bin/bash
 shell_branch=$(git describe --contains --all HEAD)
 mutter_target=
 git clone https://gitlab.gnome.org/GNOME/mutter.git
@@ -25,7 +26,8 @@ if [ "$CI_MERGE_REQUEST_TARGET_BRANCH_NAME" ]; then
 fi
 if [ -z "$mutter_target" ]; then
-  mutter_target=$(git branch -r -l origin/$CI_COMMIT_REF_NAME)
+  mutter_target=$(git branch -r -l origin/$shell_branch)
  mutter_target=${mutter_target:-$(git branch -r -l ${shell_branch#remotes/})}
  mutter_target=${mutter_target:-origin/master}
  echo Using $mutter_target instead
 fi
--- a/.gitlab-ci/run-eslint.sh
+++ b/.gitlab-ci/run-eslint.sh
@@ -1,114 +0,0 @@
 #!/usr/bin/env bash
 OUTPUT_REGULAR=reports/lint-regular-report.txt
 OUTPUT_LEGACY=reports/lint-legacy-report.txt
 OUTPUT_FINAL=reports/lint-common-report.txt
 OUTPUT_MR=reports/lint-mr-report.txt
 LINE_CHANGES=changed-lines.txt
 is_empty() {
  (! grep -q . $1)
 }
 run_eslint() {
  ARGS_LEGACY='--config lint/eslintrc-legacy.yml'
  local extra_args=ARGS_$1
  local output_var=OUTPUT_$1
  local output=${!output_var}
  # ensure output exists even if eslint doesn't report any errors
  mkdir -p $(dirname $output)
  touch $output
  eslint -f unix ${!extra_args} -o $output js
 }
 list_commit_range_additions() {
  # Turn raw context-less git-diff into a list of
  # filename:lineno pairs of new (+) lines
  git diff -U0 "$@" -- js |
  awk '
    BEGIN { file=""; }
    /^+++ b/ { file=substr($0,7); }
    /^@@ / {
        len = split($3,a,",")
        start=a[1]
        count=(len > 1) ? a[2] : 1
        for (line=start; line<start+count; line++)
            printf "%s/%s:%d:\n",ENVIRON["PWD"],file,line;
    }'
 }
 copy_matched_lines() {
  local source=$1
  local matches=$2
  local target=$3
  echo -n > $target
  for l in $(<$matches); do
    grep $l $source >> $target
  done
 }
 create_common() {
  # comm requires sorted input;
  # we also strip the error message to make the following a "common" error:
  # regular:
  #  file.js:42:23 Indentation of 55, expected 42
  # legacy:
  #  file.js:42:23 Indentation of 55, extected 24
  prepare() {
    sed 's: .*::' $1 | sort
  }
  comm -12 <(prepare $OUTPUT_REGULAR) <(prepare $OUTPUT_LEGACY) >$OUTPUT_FINAL.tmp
  # Now add back the stripped error messages
  copy_matched_lines $OUTPUT_REGULAR $OUTPUT_FINAL.tmp $OUTPUT_FINAL
  rm $OUTPUT_FINAL.tmp
 }
 # Disable MR handling for now. We aren't ready to enforce
 # non-legacy style just yet ...
 unset CI_MERGE_REQUEST_TARGET_BRANCH_NAME
 REMOTE=${1:-$CI_MERGE_REQUEST_PROJECT_URL.git}
 BRANCH_NAME=${2:-$CI_MERGE_REQUEST_TARGET_BRANCH_NAME}
 if [ "$BRANCH_NAME" ]; then
  git fetch $REMOTE $BRANCH_NAME
  branch_point=$(git merge-base HEAD FETCH_HEAD)
  commit_range=$branch_point...HEAD
  list_commit_range_additions $commit_range > $LINE_CHANGES
  # Don't bother with running lint when no JS changed
  if is_empty $LINE_CHANGES; then
    exit 0
  fi
 fi
 echo Generating lint report using regular configuration
 run_eslint REGULAR
 echo Generating lint report using legacy configuration
 run_eslint LEGACY
 echo Done.
 create_common
 if ! is_empty $OUTPUT_FINAL; then
  cat $OUTPUT_FINAL
  exit 1
 fi
 # Just show the report and succeed when not testing a MR
 if [ -z "$BRANCH_NAME" ]; then
  exit 0
 fi
 copy_matched_lines $OUTPUT_REGULAR $LINE_CHANGES $OUTPUT_MR
 cat $OUTPUT_MR
 is_empty $OUTPUT_MR
--- a/HACKING.md
+++ b/HACKING.md
@@ -84,6 +84,7 @@ don't use.
    const Main = imports.ui.main;
    const Params = imports.misc.params;
    const Tweener = imports.ui.tweener;
    const Util = imports.misc.util;
 ```
 The alphabetical ordering should be done independently of the location of the
@@ -163,17 +164,11 @@ you to inherit from a type to use it, you can do so:
             return [100, 100];
        }
-        vfunc_paint(paintContext) {
+        vfunc_paint() {
             let framebuffer = paintContext.get_framebuffer();
             let coglContext = framebuffer.get_context();
             let alloc = this.get_allocation_box();
-
+             Cogl.set_source_color4ub(255, 0, 0, 255);
-             let pipeline = new Cogl.Pipeline(coglContext);
+             Cogl.rectangle(alloc.x1, alloc.y1,
-             pipeline.set_color4ub(255, 0, 0, 255);
+                            alloc.x2, alloc.y2);
             framebuffer.draw_rectangle(pipeline,
 		 alloc.x1, alloc.y1,
 		 alloc.x2, alloc.y2);
        }
    });
 ```
@@ -192,27 +187,15 @@ and "double quotes" for strings that the user may see. This allows us to
 quickly find untranslated or mistranslated strings by grepping through the
 sources for double quotes without a gettext call around them.
-## `actor` (deprecated) and `_delegate`
+## `actor` and `_delegate`
 gjs allows us to set so-called "expando properties" on introspected objects,
 allowing us to treat them like any other. Because the Shell was built before
-you could inherit from GTypes natively in JS, in some cases we have a wrapper
+you could inherit from GTypes natively in JS, we usually have a wrapper class
-class that has a property called `actor` (now deprecated). We call this
+that has a property called `actor`. We call this wrapper class the "delegate".
 wrapper class the "delegate".
 We sometimes use expando properties to set a property called `_delegate` on
 the actor itself:
 ```javascript
    var MyActor = GObject.registerClass(
    class MyActor extends Clutter.Actor {
        _init(params) {
            super._init(params);
            this._delegate = this;
        }
    });
 ```
 Or using the deprecated `actor`:
 ```javascript
    var MyClass = class {
        constructor() {
@@ -233,7 +216,6 @@ delegate object from an associated actor. For instance, the drag and drop
 system calls the `handleDragOver` function on the delegate of a "drop target"
 when the user drags an item over it. If you do not set the `_delegate`
 property, your actor will not be able to be dropped onto.
 In case the class is an actor itself, the `_delegate` can be just set to `this`.
 ## Functional style
@@ -295,49 +277,34 @@ If your usage of an object is like a hash table (and thus conceptually the keys
 can have special chars in them), don't use quotes, but use brackets: `{ bar: 42
 }`, `foo['bar']`.
-## Animations
+## Getters, setters, and Tweener
 Most objects that are animated are actors, and most properties used in animations
 are animatable, which means they can use implicit animations:
 Getters and setters should be used when you are dealing with an API that is
 designed around setting properties, like Tweener. If you want to animate an
 arbitrary property, create a getter and setter, and use Tweener to animate the
 property.
 ```javascript
-    moveActor(actor, x, y) {
+    var ANIMATION_TIME = 2000;
-        actor.ease({
+
-            x,
+    var MyClass = class {
-            y,
+        constructor() {
-            duration: 500, // ms
+            this.actor = new St.BoxLayout();
-            mode: Clutter.AnimationMode.EASE_OUT_QUAD
+            this._position = 0;
-        });
+        }
-    }
+
-```
+        get position() {
-
+            return this._position;
-The above is a convenience wrapper around the actual Clutter API, and should generally
+        }
-be preferred over the more verbose:
+
-
+        set position(value) {
-```javascript
+            this._position = value;
-    moveActor(actor, x, y) {
+            this.actor.set_position(value, value);
-        actor.save_easing_state();
+        }
-
+    };
-        actor.set_easing_duration(500);
+
-        actor.set_easing_mode(Clutter.AnimationMode.EASE_OUT_QUAD);
+    let myThing = new MyClass();
-        actor.set({
+    Tweener.addTween(myThing,
-            x,
+                     { position: 100,
-            y
+                       time: ANIMATION_TIME,
-        });
+                       transition: 'easeOutQuad' });
        actor.restore_easing_state();
    }
 ```
 There is a similar convenience API around Clutter.PropertyTransition to animate
 actor (or actor meta) properties that cannot use implicit animations:
 ```javascript
    desaturateActor(actor, desaturate) {
        let factor = desaturate ? 1.0 : 0.0;
        actor.ease_property('@effects.desaturate.factor', factor, {
            duration: 500, // ms
            mode: Clutter.AnimationMode.EASE_OUT_QUAD
        });
    }
 ```
--- a/216
+++ b/216
@@ -1,219 +1,3 @@
 3.35.2
 ======
 * Fix unredirection after cancelled animations [Florian; #1788]
 * Include shadow in window screenshots [Robert; !762]
 * Show indicator when microphone is active [Florian; !729]
 * Use inheritance instead of delegate pattern [Marco; !559]
 * Use cached coordinates for window sorting in overview [Andrew; !763]
 * Wiggle login/unlock password entries on failure [Georges; !769]
 * Update window titles in app menu [Florian; #1830]
 * Fix window animations getting stuck by workspace switches [Jonas D.; !784]
 * Fix not-responding dialog size when using geometry scaling [Jonas D.; !783]
 * Handle buggy MPRIS clients more gracefully [Philip; #1362]
 * Deprecate StBoxLayout's child properties [Florian; !780]
 * Remove StBin's align properties [Florian; !803]
 * Use correct timezones for events [Milan, Florian; !806, #1895]
 * Reduce overhead of tracking stylesheet changes [Carlos; !779]
 * Replace action icons in system menu with regular menu items [Florian; #270]
 * Refine polkit dialogs [Jonas D.; !788]
 * Fix battery icon glitch in "100% but charging" case [Philip; !814]
 * Fix windows getting stuck on screen if closed while animating [Florian; !815]
 * Use font from interface settings [Florian; #688288]
 * Show polkit confirmation dialog for users with no password
  [Joaquim, Jonas D.; !829]
 * Use better OSK layout fallback for unsupported variants [Florian; #1907]
 * Hide stopped spinner in top bar [Joonas; !832]
 * Reuse existing icons when updating the app picker grid [Georges; !841]
 * Show switcher popups immediately on second key press [Florian; #1928]
 * Add position-based animation to page indicators [Alexander; !843]
 * Improve modifier-less keyboard navigation of switcher popups [Florian; #1883]
 * Improve weather integration [Florian; #1927, #1926]
 * Add back sound feedback when scrolling volume indicator [Florian; #53]
 * Fix creating app folders with no pre-existing folders [Jonas D.; #1652]
 * Improve DND page switching in app picker [Florian, Jonas D.; #1693]
 * Fix disable command of gnome-extensions tool [Florian; #1946]
 * Tweak styling of notifications/media constrols [Joonas; !855, !865]
 * Enable clean session shutdown after gnome-shell failure [Benjamin; !858]
 * Also remove scaled keys when texture cache is cleared [Daniel M.; !567]
 * Don't show overflow indicator in switchers that fit screen [Florian; #1834]
 * Move libcroco dependency in-tree [Federico; !861]
 * Move to app folder location when it is created/renamed [Georges; !883]
 * Dismiss switcher popups when a system modal dialogs opens [Florian; #1536]
 * Fix weather forecasts for automatic location when Weather is not sandboxed
  [Florian; #1823]
 * Place launched applications into a systemd scope [Benjamin; !863]
 * Fixed crashes [Jonas D., Carlos; !787, !813]
 * Misc. bug fixes and cleanups [Marco, Georges, Daniel V., Florian, Robert,
  Kalev, Philip, Jonas D., Will, Carlos, Jonas Å., cunidev, Joonas, Federico;
  !747, !765, !421, !759, !749, !730, !770, #1799, !774, !773, !776, !777,
  !782, !794, !778, !792, !790, !190, !796, !795, !797, !798, !800, !804, !808,
  !807, !810, !811, !563, !809, !805, !817, !818, !822, !830, !828, !823, !835,
  !840, !842, !833, !845, !846, !847, !851, #1916, !862, !866, #1979, !827,
  #1976, !884, !873, !885, !799, !887, !891, !816]
 Contributors:
  Marco Trevisan (Treviño), Benjamin Berg, Philip Chimento, Milan Crha,
  Jonas Dreßler, Carlos Garnacho, Joonas Henriksson, Kalev Lember, Robert Mader,
  Alexander Mikhaylenko, Daniel García Moreno, Florian Müllner,
  Georges Basile Stavracas Neto, Federico Mena Quintero, Joaquim Rocha,
  Will Thompson, Daniel van Vugt, Andrew Watson, cunidev, Jonas Ådahl
 Translators:
  Daniel Mustieles [es], Goran Vidović [hr], Fabio Tomat [fur],
  Danial Behzadi [fa], Andika Triwidada [id], Efstathios Iosifidis [el],
  Ricardo Silva Veloso [pt_BR]
 3.35.1
 ======
 * Misc. bug fixes and cleanups [Marco; Matthias; !758, #701212]
 Contributors:
  Marco Trevisan (Treviño)
 3.34.1
 ======
 * Fix "Frequent" view icons disappearing on hover [Jonas D.; #1502]
 * Allow editing app folder names [Georges, Marco; !675, !720]
 * Skip property transitions while hidden [Florian; !708]
 * Make menu animations more consistent [Florian, GB_2; #1595, !717]
 * Improve performance when enabling/disabling all extensions [Jonas D.; !96]
 * Fix extra icons appearing in "Frequent" view animation [Georges; !696]
 * Fix fading out desktop icons [Harshula; #1616]
 * Fix box-shadow glitch with prerendered resources [Daniel; #1186]
 * Fix accidentally skipped animations [Florian; #1572]
 * Fix screenshots and window animations when scaled [Robert; !728]
 * Don't leak NOTIFY_SOCKET environment variable to applications [Benjamin; !741]
 * Fix lock-up on X11 when ibus is already running on startup [Marco; #1712]
 * Fix screen dimming on idle [Marco; #1683]
 * Do not notify systemd before initialization is complete [Iain; !750]
 * Support SAE secrets in network agent [Lubomir; !751]
 * Fix various regressions with dynamic workspaces [Florian; #1497]
 * Fixed crashes [Florian, Marco; #1678, !746]
 * Misc. bug fixes and cleanups [Marco, Jonas D., Florian, Iain, Georges,
  Jonas Å., Martin, Takao, Carlos; !700, !705, !709, !711, !707, #1538, !710,
  !713, !699, !715, !718, !716, !719, !721, #1243, !725, !731, #1614, !683,
  !732, !121, !735, !736, !740, #573, #1641, #1571]
 Contributors:
  Marco Trevisan (Treviño), Benjamin Berg, Jonas Dreßler, Takao Fujiwara, GB_2,
  Carlos Garnacho, Harshula Jayasuriya, Iain Lane, Robert Mader,
  Daniel García Moreno, Florian Müllner, Georges Basile Stavracas Neto,
  Lubomir Rintel, Martin Zurowietz, Jonas Ådahl
 Translators:
  Rafael Fontenelle [pt_BR], Fran Dieguez [gl], Balázs Úr [hu],
  Milo Casagrande [it], Daniel Șerbănescu [ro], Kukuh Syafaat [id],
  Jiri Grönroos [fi], Daniel Mustieles [es], Piotr Drąg [pl],
  Anders Jonsson [sv], Marek Černocký [cs], Jordi Mas [ca],
  Aurimas Černius [lt], Christian Kirbach [de], Emin Tufan Çetin [tr],
  Enrico Nicoletto [pt_BR], Danial Behzadi [fa], Марко Костић [sr],
  Alexandre Franke [fr], Charles Monzat [fr], Kjartan Maraas [nb],
  Ryuta Fujii [ja], Nathan Follens [nl], Dušan Kazik [sk], Fabio Tomat [fur],
  Matej Urbančič [sl], Ask Hjorth Larsen [da], Alan Mortensen [da]
 3.34.0
 ======
 * Handle startup/shutdown of misc X11 services [Carlos; !680]
 * Fix sound volume mute/unmute [Iain; #1557]
 * Correctly terminate pasted text [Carlos; #1570]
 Contributors:
  Carlos Garnacho, Iain Lane
 Translators:
  Tom Tryfonidis [el], Milo Casagrande [it], Ryuta Fujii [ja],
  Efstathios Iosifidis [el], Carmen Bianca BAKKER [eo], Sabri Ünal [tr],
  Dušan Kazik [sk], Balázs Meskó [hu], Claude Paroz [fr]
 3.33.92
 =======
 * Animate pointer a11y pie timer [Jonas D.; !688]
 * Fix restarting shell in systemd user session [Benjamin; !690]
 * Misc. bug fixes and cleanups [Florian, Jonas D., Jonas Å., Will;
  !691, !689, !692, #1552, !698]
 Contributors:
  Jonas Ådahl, Benjamin Berg, Piotr Drąg, Jonas Dreßler, Florian Müllner,
  Will Thompson
 Translators:
  Daniel Șerbănescu [ro], Danial Behzadi [fa], Daniel Mustieles [es],
  Jiri Grönroos [fi], Asier Sarasua Garmendia [eu], Piotr Drąg [pl],
  Rūdolfs Mazurs [lv], Anders Jonsson [sv], Fran Dieguez [gl], Jordi Mas [ca],
  Matej Urbančič [sl], Zander Brown [en_GB], Ryuta Fujii [ja], Tim Sabsch [de],
  Fabio Tomat [fur], Pawan Chitrakar [ne], A S Alam [pa], Changwoo Ryu [ko],
  Aurimas Černius [lt], Daniel Rusek [cs], Marek Černocký [cs],
  Kukuh Syafaat [id], Goran Vidović [hr], Rafael Fontenelle [pt_BR]
 3.33.91
 =======
 * Fix regression when adjusting brightness [Florian; #1500]
 * Fix pointer a11y timeout animation [Jonas D.; #1533]
 * Add new extensions CLI tool [Florian; #1234]
 * Only track top-level windows [Carlos; #556]
 * Misc. bug fixes and cleanups [Jonas D., Jonas Å., Piotr, Florian;
  !678, !682, !686]
 Contributors:
  Jonas Ådahl, Jonas Dreßler, Carlos Garnacho, Florian Müllner
 Translators:
  Asier Sarasua Garmendia [eu], Sveinn í Felli [is], Anders Jonsson [sv],
  Jordi Mas [ca], Kukuh Syafaat [id], Florentina Mușat [ro], Jiri Grönroos [fi],
  Aurimas Černius [lt], Daniel Mustieles [es], Piotr Drąg [pl],
  Danial Behzadi [fa]
 3.33.90
 =======
 * Implement DND app picker folder management [Georges; !643, !645, !664, !671]
 * Make Clocks/Weather integration work with sandboxed apps [Florian; #1158]
 * Support startup via systemd user instance [Benjamin; !507]
 * Replace Tweener with Clutter animations [Florian; !663, !22, !666, !668, !669]
 * Minimize travel distance in overview animation [Sergey; !267]
 * Rescan icon theme when installed apps changed [Georges; !661]
 * Consistently animate new window actions [Jonas; !662, !673]
 * Misc. bug fixes and cleanups [Florian, Daniel, Ray, Bastien, Jonas, Niels,
  Marco, Georges; !635, !636, !637, #1462, !628, !640, !641, !627, !644, !647,
  !385, #1474, !651, #1144, !646, !653, !652, !655, #1482, !656, $654, !665,
  !667, !670, #1357, !672, !657, #1507, !674, !677]
 Contributors:
  Benjamin Berg, Sergey Bugaev, Jonas Dreßler, Niels De Graef, Florian Müllner,
  Georges Basile Stavracas Neto, Bastien Nocera, Ray Strode,
  Marco Trevisan (Treviño), verdre, Daniel van Vugt
 Translators:
  Asier Sarasua Garmendia [eu], Rafael Fontenelle [pt_BR],
  Kristjan SCHMIDT [eo], Jor Teron [mjw], Daniel Mustieles [es],
  Kukuh Syafaat [id], Jordi Mas [ca], Fabio Tomat [fur], Daniel Șerbănescu [ro],
  Anders Jonsson [sv]
 3.33.4
 ======
 * Fix unintentional interference between gestures [Jonas; !598]
 * Fix unintentional loop while polkit dialog is active [Ray; !602]
 * Fix alt-tab icon size on HiDPI [Jonas; !587]
 * Style fixes and improvements [Frederik, Jakub; !610, #1446, #1449]
 * Fix style updates for non-background CSS properties [Florian; #1212]
 * Fix cursor visibility in screen recordings [Illya; #1208]
 * Add option for disabling the hot corner [Florian; #688320]
 * Use more fine-grained levels in battery indicator [Florian; !561, #1442]
 * Fix the calculation of the maximum number of app search results [Jonas; !110]
 * Handle horizontal workspace layout with gestures/animations [Florian; !575]
 * Improve handling of session mode extensions [Florian, Didier; #789852]
 * Misc. bug fixes and cleanups [Jonas, Florian, Sonny, Carlos, Mario, Benjamin,
  Marco, Ting-Wei; !599, !600, !591, !606, !152, !607, !604, !495, !608, !611,
  !614, !612, !615, !618, #369, !620, #774, !621, !616, #1065, !609, !626,
  !491, !631, !632, !633, #1457]
 Contributors:
  Benjamin Berg, Jonas Dreßler, Frederik Feichtmeier, Carlos Garnacho,
  Illya Klymov, Ting-Wei Lan, Florian Müllner, Sonny Piers, Mario Sanchez Prada,
  Didier Roche, Jakub Steiner, Ray Strode, Jor Teron, Marco Trevisan (Treviño)
 Translators:
  Jordi Mas [ca], Jor Teron [mjw]
 3.33.3
 ======
 * Prepare for optional X11 [Carlos; !378]
--- a/data/dbus-interfaces/net.hadess.SwitcherooControl.xml
+++ b/data/dbus-interfaces/net.hadess.SwitcherooControl.xml
@@ -1,46 +1,5 @@
 <!DOCTYPE node PUBLIC "-//freedesktop//DTD D-BUS Object Introspection 1.0//EN"
 "http://www.freedesktop.org/standards/dbus/1.0/introspect.dtd">
 <node>
  <!--
      net.hadess.SwitcherooControl:
      @short_description: D-Bus proxy to access dual-GPU controls.
      After checking the availability of two switchable GPUs in the machine,
      check the value of net.hadess.SwitcherooControl.HasDualGpu to see
      if running applications on the discrete GPU should be offered.
      The object path will be "/net/hadess/SwitcherooControl".
  -->
  <interface name="net.hadess.SwitcherooControl">
    <!--
        HasDualGpu:
        Whether two switchable GPUs are present on the system. This property
        has been obsoleted in favour of the "NumGPUs" property.
    -->
    <property name="HasDualGpu" type="b" access="read"/>
    <!--
        NumGPUs:
        The number of GPUs available on the system. Note that while having no
        GPUs is unlikely, consumers of this API should probably not throw errors
        if that were the case.
    -->
    <property name="NumGPUs" type="u" access="read"/>
    <!--
        GPUs:
        An array of key-pair values representing each GPU. The key named "Name" (s)
        will contain a user-facing name for the GPU, the "Environment" (as) key will
        contain an array of even number of strings, each being an environment
        variable to set to use the GPU, followed by its value, the "Default" (b) key
        will tag the default (usually integrated) GPU.
    -->
    <property name="GPUs" type="aa{sv}" access="read"/>
  </interface>
 </node>
--- a/data/dbus-interfaces/org.gnome.Shell.ClocksIntegration.xml
+++ b/data/dbus-interfaces/org.gnome.Shell.ClocksIntegration.xml
@@ -1,15 +0,0 @@
 <node>
  <!--
      org.gnome.Shell.ClocksIntegration:
      @short_description: Clocks integration interface
      The interface used for exporting location settings to GNOME Shell's
      world clocks integration.
  -->
  <interface name="org.gnome.Shell.ClocksIntegration">
  <property name="Locations" type="av" access="read"/>
  </interface>
 </node>
--- a/data/dbus-interfaces/org.gnome.Shell.Extensions.xml
+++ b/data/dbus-interfaces/org.gnome.Shell.Extensions.xml
@@ -173,30 +173,6 @@
      <arg type="s" direction="in" name="uuid"/>
    </method>
    <!--
        EnableExtension:
        @uuid: The UUID of the extension
        @success: Whether the operation was successful
        Enable an extension.
    -->
    <method name="EnableExtension"> \
      <arg type="s" direction="in" name="uuid"/> \
      <arg type="b" direction="out" name="success"/> \
    </method> \
    <!--
        DisableExtension:
        @uuid: The UUID of the extension
        @success: Whether the operation was successful
        Disable an extension.
    -->
    <method name="DisableExtension"> \
      <arg type="s" direction="in" name="uuid"/> \
      <arg type="b" direction="out" name="success"/> \
    </method> \
    <!--
        LaunchExtensionPrefs:
        @uuid: The UUID of the extension
@@ -213,15 +189,6 @@
    -->
    <method name="CheckForUpdates"/>
    <signal name="ExtensionStateChanged">
      <arg type="s" name="uuid"/>
      <arg type="a{sv}" name="state"/>
    </signal>
    <!--
        ExtensionStatusChanged:
        Deprecated for ExtensionStateChanged
    -->
    <signal name="ExtensionStatusChanged">
      <arg type="s" name="uuid"/>
      <arg type="i" name="state"/>
--- a/data/dbus-interfaces/org.gnome.Shell.WeatherIntegration.xml
+++ b/data/dbus-interfaces/org.gnome.Shell.WeatherIntegration.xml
@@ -1,16 +0,0 @@
 <node>
  <!--
      org.gnome.Shell.WeatherIntegration:
      @short_description: Weather integration interface
      The interface used for exporting location settings to GNOME Shell's
      weather integration.
  -->
  <interface name="org.gnome.Shell.WeatherIntegration">
  <property name="AutomaticLocation" type="b" access="read"/>
  <property name="Locations" type="av" access="read"/>
  </interface>
 </node>
--- a/data/gnome-shell-dbus-interfaces.gresource.xml
+++ b/data/gnome-shell-dbus-interfaces.gresource.xml
@@ -40,7 +40,6 @@
    <file preprocess="xml-stripblanks">org.gnome.SettingsDaemon.Wacom.xml</file>
    <file preprocess="xml-stripblanks">org.gnome.Shell.AudioDeviceSelection.xml</file>
    <file preprocess="xml-stripblanks">org.gnome.Shell.CalendarServer.xml</file>
    <file preprocess="xml-stripblanks">org.gnome.Shell.ClocksIntegration.xml</file>
    <file preprocess="xml-stripblanks">org.gnome.Shell.Extensions.xml</file>
    <file preprocess="xml-stripblanks">org.gnome.Shell.Introspect.xml</file>
    <file preprocess="xml-stripblanks">org.gnome.Shell.HotplugSniffer.xml</file>
@@ -49,7 +48,6 @@
    <file preprocess="xml-stripblanks">org.gnome.Shell.Screencast.xml</file>
    <file preprocess="xml-stripblanks">org.gnome.Shell.Screenshot.xml</file>
    <file preprocess="xml-stripblanks">org.gnome.Shell.Wacom.PadOsd.xml</file>
    <file preprocess="xml-stripblanks">org.gnome.Shell.WeatherIntegration.xml</file>
    <file preprocess="xml-stripblanks">org.gnome.Shell.xml</file>
    <file preprocess="xml-stripblanks">org.Gtk.MountOperationHandler.xml</file>
    <file preprocess="xml-stripblanks">org.gtk.Notifications.xml</file>
--- a/data/gnome-shell-disable-extensions.service
+++ b/data/gnome-shell-disable-extensions.service
@@ -1,15 +0,0 @@
 [Unit]
 Description=Disable GNOME Shell extensions after failure
 # Note that this unit must not conflict with anything, and must
 # be able to run in parallel with the gnome-session-shutdown.target.
 DefaultDependencies=no
 # We want to disable extensions only if gnome-shell has flagged the extensions
 # to be a likely cause of trouble.
 ConditionPathExists=%t/gnome-shell-disable-extensions
 [Service]
 Type=simple
 # Disable extensions
 ExecStart=gsettings set org.gnome.shell disable-user-extensions true
 Restart=no
--- a/data/gnome-shell-wayland.service.in
+++ b/data/gnome-shell-wayland.service.in
@@ -1,27 +0,0 @@
 [Unit]
 Description=GNOME Shell on Wayland
 # On wayland, force a session shutdown
 OnFailure=gnome-shell-disable-extensions.service gnome-session-shutdown.target
 OnFailureJobMode=replace-irreversibly
 CollectMode=inactive-or-failed
 RefuseManualStart=on
 RefuseManualStop=on
 After=gnome-session-manager.target
 Requisite=gnome-session-initialized.target
 PartOf=gnome-session-initialized.target
 Before=gnome-session-initialized.target
 # The units already conflict because they use the same BusName
 #Conflicts=gnome-shell-x11.service
 [Service]
 Type=notify
 ExecStart=@bindir@/gnome-shell
 # Exit code 1 means we are probably *not* dealing with an extension failure
 SuccessExitStatus=1
 # On wayland we cannot restart
 Restart=no
 # Kill any stubborn child processes after this long
 TimeoutStopSec=5
--- a/data/gnome-shell-wayland.target
+++ b/data/gnome-shell-wayland.target
@@ -1,10 +1,5 @@
 [Unit]
-Description=GNOME Shell on Wayland
+Description=GNOME Shell (wayland sync point)
-DefaultDependencies=no
+After=gnome-shell.service
-
+BindsTo=gnome-shell.service
-Requisite=gnome-session-initialized.target
+Conflicts=gnome-shell-x11.target
 PartOf=gnome-session-initialized.target
 Before=gnome-session-initialized.target
 Requires=gnome-shell-wayland.service
 After=gnome-shell-wayland.service
--- a/data/gnome-shell-x11.service.in
+++ b/data/gnome-shell-x11.service.in
@@ -1,33 +0,0 @@
 [Unit]
 Description=GNOME Shell on X11
 # On X11, try to show the GNOME Session Failed screen
 OnFailure=gnome-shell-disable-extensions.service gnome-session-failed.target
 OnFailureJobMode=replace
 CollectMode=inactive-or-failed
 RefuseManualStart=on
 RefuseManualStop=on
 After=gnome-session-manager.target
 Requisite=gnome-session-initialized.target
 PartOf=gnome-session-initialized.target
 Before=gnome-session-initialized.target
 # The units already conflict because they use the same BusName
 #Conflicts=gnome-shell-wayland.service
 # Limit startup frequency more than the default
 StartLimitIntervalSec=15s
 StartLimitBurst=3
 [Service]
 Type=notify
 ExecStart=@bindir@/gnome-shell
 # Exit code 1 means we are probably *not* dealing with an extension failure
 SuccessExitStatus=1
 # On X11 we want to restart on-success (Alt+F2 + r) and on-failure.
 Restart=always
 # Do not wait before restarting the shell
 RestartSec=0ms
 # Kill any stubborn child processes after this long
 TimeoutStopSec=5
--- a/data/gnome-shell-x11.target
+++ b/data/gnome-shell-x11.target
@@ -1,10 +1,5 @@
 [Unit]
-Description=GNOME Shell on X11
+Description=GNOME Shell (x11 sync point)
-DefaultDependencies=no
+After=gnome-shell.service
-
+BindsTo=gnome-shell.service
-Requisite=gnome-session-initialized.target
+Conflicts=gnome-shell-wayland.target
 PartOf=gnome-session-initialized.target
 Before=gnome-session-initialized.target
 Requires=gnome-shell-x11.service
 After=gnome-shell-x11.service
--- a/data/gnome-shell.service.in
+++ b/data/gnome-shell.service.in
@@ -0,0 +1,11 @@
 [Unit]
 Description=GNOME Shell
 Wants=gnome-session.service
 After=graphical-session-pre.target gnome-session-bus.target
 PartOf=graphical-session.target
 [Service]
 Type=dbus
 ExecStart=@bindir@/gnome-shell
 Restart=on-failure
 BusName=org.gnome.Shell
--- a/data/meson.build
+++ b/data/meson.build
@@ -14,8 +14,6 @@ desktopconf = configuration_data()
 # file when built in a non-system prefix
 desktopconf.set('bindir', bindir)
 desktopconf.set('VERSION', meson.project_version())
 desktopconf.set('systemd_hidden', have_systemd ? 'true' : 'false')
 foreach desktop_file : desktop_files
  i18n.merge_file('desktop',
    input: configure_file(
@@ -24,7 +22,7 @@ foreach desktop_file : desktop_files
      configuration: desktopconf
    ),
    output: desktop_file,
-    po_dir: po_dir,
+    po_dir: '../po',
    install: true,
    install_dir: desktopdir,
    type: 'desktop'
@@ -100,23 +98,15 @@ if have_systemd
  unitconf = configuration_data()
  unitconf.set('bindir', bindir)
-  configure_file(
+  unit = configure_file(
-    input: 'gnome-shell-x11.service.in',
+    input: 'gnome-shell.service.in',
-    output: 'gnome-shell-x11.service',
+    output: 'gnome-shell.service',
    configuration: unitconf,
    install_dir: systemduserunitdir
  )
-  configure_file(
+  units = files('gnome-shell-wayland.target',
-    input: 'gnome-shell-wayland.service.in',
+                'gnome-shell-x11.target')
    output: 'gnome-shell-wayland.service',
    configuration: unitconf,
    install_dir: systemduserunitdir
  )
  units = files('gnome-shell-x11.target',
                'gnome-shell-wayland.target',
                'gnome-shell-disable-extensions.service')
  install_data(units, install_dir: systemduserunitdir)
 endif
--- a/data/org.gnome.Shell.desktop.in.in
+++ b/data/org.gnome.Shell.desktop.in.in
@@ -14,4 +14,3 @@ X-GNOME-Autostart-Phase=DisplayServer
 X-GNOME-Provides=panel;windowmanager;
 X-GNOME-Autostart-Notify=true
 X-GNOME-AutoRestart=false
 X-GNOME-HiddenUnderSystemd=@systemd_hidden@
--- a/data/org.gnome.shell.gschema.xml.in
+++ b/data/org.gnome.shell.gschema.xml.in
@@ -21,17 +21,6 @@
        EnableExtension and DisableExtension D-Bus methods on org.gnome.Shell.
      </description>
    </key>
    <key name="disabled-extensions" type="as">
      <default>[]</default>
      <summary>UUIDs of extensions to force disabling</summary>
      <description>
        GNOME Shell extensions have a UUID property; this key lists extensions
        which should be disabled, even if loaded as part of the current mode.
        You can also manipulate this list with the EnableExtension and
        DisableExtension D-Bus methods on org.gnome.Shell.
        This key takes precedence over the “enabled-extensions” setting.
      </description>
    </key>
    <key name="disable-user-extensions" type="b">
      <default>false</default>
      <summary>Disable user extensions</summary>
@@ -50,7 +39,7 @@
      </description>
    </key>
    <key name="favorite-apps" type="as">
-      <default>[ 'epiphany.desktop', 'evolution.desktop', 'rhythmbox.desktop', 'org.gnome.Shotwell.desktop', 'org.gnome.Nautilus.desktop', 'org.gnome.Software.desktop' ]</default>
+      <default>[ 'epiphany.desktop', 'evolution.desktop', 'rhythmbox.desktop', 'shotwell.desktop', 'org.gnome.Nautilus.desktop', 'org.gnome.Software.desktop' ]</default>
      <summary>List of desktop file IDs for favorite applications</summary>
      <description>
        The applications corresponding to these identifiers
@@ -150,6 +139,11 @@
        Keybinding to focus the active notification.
      </description>
    </key>
    <key name="pause-resume-tweens" type="as">
      <default>[]</default>
      <summary>Keybinding that pauses and resumes all running tweens, for debugging purposes</summary>
      <description></description>
    </key>
    <key name="switch-to-application-1" type="as">
      <default>["&lt;Super&gt;1"]</default>
      <summary>Switch to application 1</summary>
@@ -228,36 +222,6 @@
    </key>
  </schema>
  <schema id="org.gnome.shell.world-clocks" path="/org/gnome/shell/world-clocks/"
          gettext-domain="@GETTEXT_PACKAGE@">
    <key name="locations" type="av">
      <summary>Locations</summary>
      <description>
        The locations to show in world clocks
      </description>
      <default>[]</default>
    </key>
  </schema>
  <schema id="org.gnome.shell.weather" path="/org/gnome/shell/weather/"
          gettext-domain="@GETTEXT_PACKAGE@">
    <key name="automatic-location" type="b">
      <summary>Automatic location</summary>
      <description>
        Whether to fetch the current location or not
      </description>
      <default>false</default>
    </key>
    <key name="locations" type="av">
      <summary>Location</summary>
      <description>
        The location for which to show a forecast
      </description>
      <default>[]</default>
    </key>
  </schema>
  <!-- unused, change 00_org.gnome.shell.gschema.override instead -->
  <schema id="org.gnome.shell.overrides" path="/org/gnome/shell/overrides/"
 	  gettext-domain="@GETTEXT_PACKAGE@">
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -36,8 +36,10 @@ $_hover_bg_color: lighten($bg_color,if($variant=='light', 5%, 3%));
 $_active_bg_color: if($variant == 'light', darken($bg_color, 14%), darken($bg_color, 9%));
 $font-size: 11;
 $font-family: Cantarell, Sans-Serif;
 stage {
  font-family: $font-family;
  @include fontsize($font-size);
  color: $fg_color;
 }
@@ -608,13 +610,6 @@ StScrollBar {
    border-bottom-style: solid;
  }
 // Rename popup
 .rename-folder-popup {
  .rename-folder-popup-item {
    spacing: 6px;
    &:ltr, &:rtl { padding: 0, 12px; }
  }
 }
 // Background menu
 .background-menu { -boxpointer-gap: 4px; -arrow-rise: 0px; }
@@ -629,12 +624,16 @@ StScrollBar {
 *************/
 /* Outline for low res icons */
 .lowres-icon {
-    icon-shadow: 0 1px 2px rgba(0,0,0,0.3);
+    icon-shadow: 0 -1px rgba(0,0,0,0.05),
      1px 0 rgba(0,0,0,0.1),
      0 1px rgba(0,0,0,0.3),
      -1px 0 rgba(0,0,0,0.1);
 }
 /* Drapshadow for large icons */
 .icon-dropshadow {
-  icon-shadow: 0 1px 2px rgba(0,0,0,0.4);
+  icon-shadow: 0 2px 12px rgba(0,0,0,0.1),
               0 1px 2px rgba(0,0,0,0.5);
 }
 /* OSD */
@@ -745,9 +744,8 @@ StScrollBar {
    spacing: 8px;
  }
-  .ws-switcher-active-up, .ws-switcher-active-down,
+  .ws-switcher-active-up, .ws-switcher-active-down {
-  .ws-switcher-active-left, .ws-switcher-active-right {
+    height: 50px;
    height: 52px;
    background-color: $selected_bg_color;
    color: $selected_fg_color;
    background-size: 32px;
@@ -947,7 +945,7 @@ StScrollBar {
    .world-clocks-button,
    .weather-button,
    .events-section-title {
-      &:hover, &:focus { background-color: $_hover_bg_color }
+      &:hover, focus { background-color: $_hover_bg_color }
      &:active { background-color: $_active_bg_color }
    }
@@ -977,7 +975,6 @@ StScrollBar {
      spacing-columns: 0.8em;
    }
    .weather-header-box,
    .weather-box {
      spacing: 0.4em;
    }
@@ -1019,7 +1016,7 @@ StScrollBar {
      background-color: transparent;
      width: 32px;
      border-radius: 4px;
-      &:hover, &:focus { background-color: $_hover_bg_color; }
+      &:hover, focus { background-color: $_hover_bg_color; }
      &:active { background-color: transparentize($fg_color, 0.84); }
    }
@@ -1035,7 +1032,7 @@ StScrollBar {
      margin: 2px;
      border-radius: 1.4em;
      font-feature-settings: "tnum";
-      &:hover, &:focus { background-color: $_hover_bg_color; }
+      &:hover, focus { background-color: $_hover_bg_color; }
      &:active,&:selected {
        color: lighten($selected_fg_color,5%);
        background-color: $selected_bg_color;
@@ -1060,9 +1057,9 @@ StScrollBar {
      }
      .calendar-today {
        font-weight: bold;
-        color: lighten($fg_color,5%);
+        //color: lighten($fg_color,10%);
-        background-color: darken($bg_color,5%);
+        //background-color: darken($bg_color,5%);
-        // border: 1px solid lighten($_bubble_borders_color,20%);
+        border: 1px solid $_bubble_borders_color;
      }
      .calendar-day-with-events {
        color: lighten($fg_color,10%);
@@ -1152,21 +1149,14 @@ StScrollBar {
            padding: 10px;
          }
          .message-close-button {
            color: lighten($fg_color, 15%);
            &:hover { color: if($variant=='light', lighten($fg_color, 30%), darken($fg_color, 10%)); }
            &:active { color: if($variant=='light', lighten($fg_color, 40%), darken($fg_color, 20%)); }
          }
          .message-media-control {
            padding: 12px;
            color: lighten($fg_color, 15%);
            &:last-child:ltr { padding-right: 18px; }
            &:last-child:rtl { padding-left: 18px; }
-            &:hover { color: if($variant=='light', lighten($fg_color, 30%), darken($fg_color, 10%)); }
+            &:hover { color: $fg_color; }
-            &:active { color: if($variant=='light', lighten($fg_color, 40%), darken($fg_color, 20%)); }
+            &:insensitive { color: darken($fg_color,40%); }
            &:insensitive { color: if($variant=='light', lighten($fg_color, 50%), darken($fg_color, 40%)); }
          }
          .media-message-cover-icon {
@@ -1184,6 +1174,7 @@ StScrollBar {
  // a little unstructured mess:
  #appMenu {
    spinner-image: url("resource:///org/gnome/shell/theme/process-working.svg");
    spacing: 4px;
    .label-shadow { color: transparent; }
@@ -1196,8 +1187,7 @@ StScrollBar {
  .aggregate-menu {
    min-width: 21em;
-    .popup-menu-icon { padding: 0 4px;
+    .popup-menu-icon { padding: 0 4px; }
                       -st-icon-style: symbolic; }
    .popup-sub-menu .popup-menu-item > :first-child {
      &:ltr { /* 12px spacing + 2*4px padding */
              padding-left: 20px; margin-left: 1.09em; }
@@ -1206,6 +1196,27 @@ StScrollBar {
    }
  }
  .system-menu-action {
    -st-icon-style: symbolic;
    color: $fg_color;
    border-radius: 32px; /* wish we could do 50% */
    padding: 13px;
    border: 1px solid $_bubble_borders_color;
    &:hover, &:focus {
      background-color: $_hover_bg_color;
      color: $fg_color;
      border: none;
      padding: 14px;
    }
    &:active { 
      background-color: $selected_bg_color;
      color: $selected_fg_color;
    }
    & > StIcon { icon-size: 16px; }
  }
 // Activities Ripples
 .ripple-box {
  width: 52px;
@@ -1507,9 +1518,6 @@ StScrollBar {
      border-image: none;
      background-image: none;
    }
    &:drop .overview-icon {
      background-color: transparentize($selected_bg_color,.15);
    }
    &:active .overview-icon,
    &:checked .overview-icon {
      background-color: transparentize(darken($osd_bg_color,10%), 0.5);
@@ -1557,14 +1565,20 @@ StScrollBar {
  }
  .page-indicator {
-    padding: 7px 16px;
+    padding: 15px 20px;
    .page-indicator-icon {
      width: 12px;
      height: 12px;
-      background-color: white;
+      background-color: transparent;
-      border-radius: 6px;
+      border: 2px solid rgba(255, 255, 255, 0.4);
      border-radius: 12px;
    }
    &:hover .page-indicator-icon { border-color: white; }
    &:active .page-indicator-icon { border: none; margin: 2px; background-color: white; }
    &:checked .page-indicator-icon,
    &:checked:active .page-indicator-icon { background-color: white;}
  }
  .no-frequent-applications-label { @extend %status_text; }
@@ -1764,8 +1778,8 @@ StScrollBar {
        padding: 4px 4px;
        .page-indicator-icon {
-            width: 8px;
+            width: 6px;
-            height: 8px;
+            height: 6px
        }
    }
 }
--- a/docs/reference/shell/meson.build
+++ b/docs/reference/shell/meson.build
@@ -28,7 +28,7 @@ foreach iface : ifaces
    output: 'doc-gen-' + iface[1],
    command: [
      'gdbus-codegen',
-      '--interface-prefix=@0@.'.format(iface[0]),
+      '--interface-prefix=@0@.'.format(iface),
      '--generate-docbook', 'doc-gen',
      '--output-directory', '@OUTDIR@',
      '@INPUT@'
--- a/gnome-shell.doap
+++ b/gnome-shell.doap
@@ -31,34 +31,34 @@ its dependencies to build from tarballs.</description>
  <programming-language>JavaScript</programming-language>
  <programming-language>C</programming-language>
-  <author>
+  <maintainer>
    <foaf:Person>
      <foaf:name>William Jon McCann</foaf:name>
      <foaf:mbox rdf:resource="mailto:jmccann@redhat.com" />
      <gnome:userid>mccann</gnome:userid>
    </foaf:Person>
-  </author>
+  </maintainer>
-  <author>
+  <maintainer>
    <foaf:Person>
      <foaf:name>Owen Taylor</foaf:name>
      <foaf:mbox rdf:resource="mailto:otaylor@redhat.com" />
      <gnome:userid>otaylor</gnome:userid>
    </foaf:Person>
-  </author>
+  </maintainer>
-  <author>
+  <maintainer>
    <foaf:Person>
      <foaf:name>Colin Walters</foaf:name>
      <foaf:mbox rdf:resource="mailto:walters@verbum.org" />
      <gnome:userid>walters</gnome:userid>
    </foaf:Person>
-  </author>
+  </maintainer>
-  <author>
+  <maintainer>
    <foaf:Person>
      <foaf:name>Marina Zhurakhinskaya</foaf:name>
      <foaf:mbox rdf:resource="mailto:marinaz@redhat.com" />
      <gnome:userid>marinaz</gnome:userid>
    </foaf:Person>
-  </author>
+  </maintainer>
  <maintainer>
    <foaf:Person>
      <foaf:name>Florian Müllner</foaf:name>
--- a/js/extensionPrefs/main.js
+++ b/js/extensionPrefs/main.js
@@ -1,7 +1,3 @@
 /* exported main */
 imports.gi.versions.Gdk = '3.0';
 imports.gi.versions.Gtk = '3.0';
 const Gettext = imports.gettext;
 const { Gdk, GLib, Gio, GObject, Gtk, Pango } = imports.gi;
 const Format = imports.format;
@@ -12,8 +8,6 @@ const Config = imports.misc.config;
 const ExtensionUtils = imports.misc.extensionUtils;
 const { loadInterfaceXML } = imports.misc.fileUtils;
 const { ExtensionState } = ExtensionUtils;
 const GnomeShellIface = loadInterfaceXML('org.gnome.Shell.Extensions');
 const GnomeShellProxy = Gio.DBusProxy.makeProxyWrapper(GnomeShellIface);
@@ -23,53 +17,74 @@ function stripPrefix(string, prefix) {
    return string;
 }
-var Application = GObject.registerClass(
+var Application = class {
-class Application extends Gtk.Application {
+    constructor() {
    _init() {
        GLib.set_prgname('gnome-shell-extension-prefs');
-        super._init({
+        this.application = new Gtk.Application({
            application_id: 'org.gnome.shell.ExtensionPrefs',
-            flags: Gio.ApplicationFlags.HANDLES_COMMAND_LINE,
+            flags: Gio.ApplicationFlags.HANDLES_COMMAND_LINE
        });
        this.application.connect('activate', this._onActivate.bind(this));
        this.application.connect('command-line', this._onCommandLine.bind(this));
        this.application.connect('startup', this._onStartup.bind(this));
        this._extensionPrefsModules = {};
        this._startupUuid = null;
        this._loaded = false;
        this._skipMainWindow = false;
        this._shellProxy = null;
    }
-    get shellProxy() {
+    _extensionAvailable(uuid) {
-        return this._shellProxy;
+        let extension = ExtensionUtils.extensions[uuid];
    }
-    _showPrefs(uuid) {
+        if (!extension)
        let row = this._extensionSelector.get_children().find(c => {
            return c.uuid === uuid && c.hasPrefs;
        });
        if (!row)
            return false;
        if (!extension.dir.get_child('prefs.js').query_exists(null))
            return false;
        return true;
    }
    _getExtensionPrefsModule(extension) {
        let uuid = extension.metadata.uuid;
        if (this._extensionPrefsModules.hasOwnProperty(uuid))
            return this._extensionPrefsModules[uuid];
        ExtensionUtils.installImporter(extension);
        let prefsModule = extension.imports.prefs;
        prefsModule.init(extension.metadata);
        this._extensionPrefsModules[uuid] = prefsModule;
        return prefsModule;
    }
    _selectExtension(uuid) {
        if (!this._extensionAvailable(uuid))
            return;
        let extension = ExtensionUtils.extensions[uuid];
        let widget;
        try {
-            widget = row.prefsModule.buildPrefsWidget();
+            let prefsModule = this._getExtensionPrefsModule(extension);
            widget = prefsModule.buildPrefsWidget();
        } catch (e) {
-            widget = this._buildErrorUI(row, e);
+            widget = this._buildErrorUI(extension, e);
        }
-        let dialog = new Gtk.Window({
+        let dialog = new Gtk.Window({ modal: !this._skipMainWindow,
-            modal: !this._skipMainWindow,
+                                      type_hint: Gdk.WindowTypeHint.DIALOG });
-            type_hint: Gdk.WindowTypeHint.DIALOG,
+        dialog.set_titlebar(new Gtk.HeaderBar({ show_close_button: true,
-        });
+                                                title: extension.metadata.name,
-        dialog.set_titlebar(new Gtk.HeaderBar({
+                                                visible: true }));
            show_close_button: true,
            title: row.name,
            visible: true,
        }));
        if (this._skipMainWindow) {
-            this.add_window(dialog);
+            this.application.add_window(dialog);
            if (this._window)
                this._window.destroy();
            this._window = dialog;
@@ -81,27 +96,25 @@ class Application extends Gtk.Application {
        dialog.set_default_size(600, 400);
        dialog.add(widget);
        dialog.show();
        return true;
    }
-    _buildErrorUI(row, exc) {
+    _buildErrorUI(extension, exc) {
        let scroll = new Gtk.ScrolledWindow({
            hscrollbar_policy: Gtk.PolicyType.NEVER,
-            propagate_natural_height: true,
+            propagate_natural_height: true
        });
        let box = new Gtk.Box({
            orientation: Gtk.Orientation.VERTICAL,
            spacing: 12,
            margin: 100,
-            margin_bottom: 60,
+            margin_bottom: 60
        });
        scroll.add(box);
        let label = new Gtk.Label({
            label: '<span size="x-large">%s</span>'.format(_("Something’s gone wrong")),
-            use_markup: true,
+            use_markup: true
        });
        label.get_style_context().add_class(Gtk.STYLE_CLASS_DIM_LABEL);
        box.add(label);
@@ -109,13 +122,13 @@ class Application extends Gtk.Application {
        label = new Gtk.Label({
            label: _("We’re very sorry, but there’s been a problem: the settings for this extension can’t be displayed. We recommend that you report the issue to the extension authors."),
            justify: Gtk.Justification.CENTER,
-            wrap: true,
+            wrap: true
        });
        box.add(label);
        let expander = new Expander({
            label: _("Technical Details"),
-            margin_top: 12,
+            margin_top: 12
        });
        box.add(expander);
@@ -126,14 +139,14 @@ class Application extends Gtk.Application {
        let buffer = new Gtk.TextBuffer({ text: errortext });
        let textview = new Gtk.TextView({
-            buffer,
+            buffer: buffer,
            wrap_mode: Gtk.WrapMode.WORD,
            monospace: true,
            editable: false,
            top_margin: 12,
            bottom_margin: 12,
            left_margin: 12,
-            right_margin: 12,
+            right_margin: 12
        });
        let toolbar = new Gtk.Toolbar();
@@ -149,7 +162,7 @@ class Application extends Gtk.Application {
        let copyButton = new Gtk.ToolButton({
            icon_name: 'edit-copy-symbolic',
-            tooltip_text: _("Copy Error"),
+            tooltip_text: _("Copy Error")
        });
        toolbar.add(copyButton);
@@ -157,16 +170,16 @@ class Application extends Gtk.Application {
            let clipboard = Gtk.Clipboard.get_default(w.get_display());
            // markdown for pasting in gitlab issues
            let lines = [
-                `The settings of extension ${row.uuid} had an error:`,
+                `The settings of extension ${extension.uuid} had an error:`,
-                '```', // '`' (xgettext throws up on odd number of backticks)
+                '```',
                `${exc}`,
-                '```', // '`'
+                '```',
                '',
                'Stack trace:',
-                '```', // '`'
+                '```',
                exc.stack.replace(/\n$/, ''), // stack without trailing newline
-                '```', // '`'
+                '```',
-                '',
+                ''
            ];
            clipboard.set_text(lines.join('\n'), -1);
        });
@@ -179,17 +192,17 @@ class Application extends Gtk.Application {
            label: _("Homepage"),
            tooltip_text: _("Visit extension homepage"),
            no_show_all: true,
-            visible: row.url != null,
+            visible: extension.metadata.url != null
        });
        toolbar.add(urlButton);
        urlButton.connect('clicked', w => {
            let context = w.get_display().get_app_launch_context();
-            Gio.AppInfo.launch_default_for_uri(row.url, context);
+            Gio.AppInfo.launch_default_for_uri(extension.metadata.url, context);
        });
        let expandedBox = new Gtk.Box({
-            orientation: Gtk.Orientation.VERTICAL,
+            orientation: Gtk.Orientation.VERTICAL
        });
        expandedBox.add(textview);
        expandedBox.add(toolbar);
@@ -200,8 +213,8 @@ class Application extends Gtk.Application {
        return scroll;
    }
-    _buildUI() {
+    _buildUI(app) {
-        this._window = new Gtk.ApplicationWindow({ application: this,
+        this._window = new Gtk.ApplicationWindow({ application: app,
                                                   window_position: Gtk.WindowPosition.CENTER });
        this._window.set_default_size(800, 500);
@@ -219,7 +232,7 @@ class Application extends Gtk.Application {
                            Gio.SettingsBindFlags.INVERT_BOOLEAN);
        this._mainStack = new Gtk.Stack({
-            transition_type: Gtk.StackTransitionType.CROSSFADE,
+            transition_type: Gtk.StackTransitionType.CROSSFADE
        });
        this._window.add(this._mainStack);
@@ -235,14 +248,18 @@ class Application extends Gtk.Application {
        this._mainStack.add_named(new EmptyPlaceholder(), 'placeholder');
        this._shellProxy = new GnomeShellProxy(Gio.DBus.session, 'org.gnome.Shell', '/org/gnome/Shell');
-        this._shellProxy.connectSignal('ExtensionStateChanged',
+        this._shellProxy.connectSignal('ExtensionStatusChanged', (proxy, senderName, [uuid, state, error]) => {
-            this._onExtensionStateChanged.bind(this));
+            if (ExtensionUtils.extensions[uuid] !== undefined)
                this._scanExtensions();
        });
        this._window.show_all();
    }
    _sortList(row1, row2) {
-        return row1.name.localeCompare(row2.name);
+        let name1 = ExtensionUtils.extensions[row1.uuid].metadata.name;
        let name2 = ExtensionUtils.extensions[row2.uuid].metadata.name;
        return name1.localeCompare(name2);
    }
    _updateHeader(row, before) {
@@ -253,48 +270,19 @@ class Application extends Gtk.Application {
        row.set_header(sep);
    }
    _findExtensionRow(uuid) {
        return this._extensionSelector.get_children().find(c => c.uuid === uuid);
    }
    _onExtensionStateChanged(proxy, senderName, [uuid, newState]) {
        let extension = ExtensionUtils.deserializeExtension(newState);
        let row = this._findExtensionRow(uuid);
        if (row) {
            if (extension.state === ExtensionState.UNINSTALLED)
                row.destroy();
            return; // we only deal with new and deleted extensions here
        }
        this._addExtensionRow(extension);
    }
    _scanExtensions() {
-        this._shellProxy.ListExtensionsRemote(([extensionsMap], e) => {
+        let finder = new ExtensionUtils.ExtensionFinder();
-            if (e) {
+        finder.connect('extension-found', this._extensionFound.bind(this));
-                if (e instanceof Gio.DBusError) {
+        finder.scanExtensions();
-                    log(`Failed to connect to shell proxy: ${e}`);
+        this._extensionsLoaded();
                    this._mainStack.add_named(new NoShellPlaceholder(), 'noshell');
                    this._mainStack.visible_child_name = 'noshell';
                } else {
                    throw e;
                }
                return;
            }
            for (let uuid in extensionsMap) {
                let extension = ExtensionUtils.deserializeExtension(extensionsMap[uuid]);
                this._addExtensionRow(extension);
            }
            this._extensionsLoaded();
        });
    }
-    _addExtensionRow(extension) {
+    _extensionFound(finder, extension) {
-        let row = new ExtensionRow(extension);
+        let row = new ExtensionRow(extension.uuid);
        row.prefsButton.visible = this._extensionAvailable(row.uuid);
        row.prefsButton.connect('clicked', () => {
-            this._showPrefs(row.uuid);
+            this._selectExtension(row.uuid);
        });
        row.show_all();
@@ -307,26 +295,24 @@ class Application extends Gtk.Application {
        else
            this._mainStack.visible_child_name = 'placeholder';
-        if (this._startupUuid)
+        if (this._startupUuid && this._extensionAvailable(this._startupUuid))
-            this._showPrefs(this._startupUuid);
+            this._selectExtension(this._startupUuid);
        this._startupUuid = null;
        this._skipMainWindow = false;
        this._loaded = true;
    }
-    vfunc_activate() {
+    _onActivate() {
        this._window.present();
    }
-    vfunc_startup() {
+    _onStartup(app) {
-        super.vfunc_startup();
+        this._buildUI(app);
        this._buildUI();
        this._scanExtensions();
    }
-    vfunc_command_line(commandLine) {
+    _onCommandLine(app, commandLine) {
-        this.activate();
+        app.activate();
        let args = commandLine.get_arguments();
        if (args.length) {
@@ -337,14 +323,16 @@ class Application extends Gtk.Application {
            // Strip off "extension:///" prefix which fakes a URI, if it exists
            uuid = stripPrefix(uuid, "extension:///");
-            if (!this._loaded)
+            if (this._extensionAvailable(uuid))
                this._selectExtension(uuid);
            else if (!this._loaded)
                this._startupUuid = uuid;
-            else if (!this._showPrefs(uuid))
+            else
                this._skipMainWindow = false;
        }
        return 0;
    }
-});
+};
 var Expander = GObject.registerClass({
    Properties: {
@@ -352,20 +340,20 @@ var Expander = GObject.registerClass({
            'label', 'label', 'label',
            GObject.ParamFlags.READWRITE,
            null
-        ),
+        )
-    },
+    }
 }, class Expander extends Gtk.Box {
    _init(params = {}) {
        this._labelText = null;
        super._init(Object.assign(params, {
            orientation: Gtk.Orientation.VERTICAL,
-            spacing: 0,
+            spacing: 0
        }));
        this._frame = new Gtk.Frame({
            shadow_type: Gtk.ShadowType.IN,
-            hexpand: true,
+            hexpand: true
        });
        let eventBox = new Gtk.EventBox();
@@ -373,12 +361,12 @@ var Expander = GObject.registerClass({
        let hbox = new Gtk.Box({
            spacing: 6,
-            margin: 12,
+            margin: 12
        });
        eventBox.add(hbox);
        this._arrow = new Gtk.Image({
-            icon_name: 'pan-end-symbolic',
+            icon_name: 'pan-end-symbolic'
        });
        hbox.add(this._arrow);
@@ -388,7 +376,7 @@ var Expander = GObject.registerClass({
        this._revealer = new Gtk.Revealer();
        this._childBin = new Gtk.Frame({
-            shadow_type: Gtk.ShadowType.IN,
+            shadow_type: Gtk.ShadowType.IN
        });
        this._revealer.add(this._childBin);
@@ -406,7 +394,7 @@ var Expander = GObject.registerClass({
        this._gesture = new Gtk.GestureMultiPress({
            widget: this._frame,
            button: 0,
-            exclusive: true,
+            exclusive: true
        });
        this._gesture.connect('released', (gesture, nPress) => {
            if (nPress == 1)
@@ -451,7 +439,7 @@ class EmptyPlaceholder extends Gtk.Box {
        super._init({
            orientation: Gtk.Orientation.VERTICAL,
            spacing: 6,
-            margin: 32,
+            margin: 32
        });
        let image = new Gtk.Image({
@@ -459,15 +447,15 @@ class EmptyPlaceholder extends Gtk.Box {
            pixel_size: 96,
            visible: true,
            vexpand: true,
-            valign: Gtk.Align.END,
+            valign: Gtk.Align.END
        });
        image.get_style_context().add_class(Gtk.STYLE_CLASS_DIM_LABEL);
        this.add(image);
        let label = new Gtk.Label({
-            label: `<b><span size="x-large">${_("No Extensions Installed")}</span></b>`,
+            label: `<b><span size="x-large">${_("No Extensions Installed" )}</span></b>`,
            use_markup: true,
-            visible: true,
+            visible: true
        });
        label.get_style_context().add_class(Gtk.STYLE_CLASS_DIM_LABEL);
        this.add(label);
@@ -482,9 +470,9 @@ class EmptyPlaceholder extends Gtk.Box {
            visible: true,
            max_width_chars: 50,
            hexpand: true,
-            vexpand: appInfo == null,
+            vexpand: (appInfo == null),
            halign: Gtk.Align.CENTER,
-            valign: Gtk.Align.START,
+            valign: Gtk.Align.START
        });
        this.add(desc);
@@ -492,14 +480,14 @@ class EmptyPlaceholder extends Gtk.Box {
            let button = new Gtk.Button({
                label: _("Browse in Software"),
                image: new Gtk.Image({
-                    icon_name: "org.gnome.Software-symbolic",
+                    icon_name: "org.gnome.Software-symbolic"
                }),
                always_show_image: true,
                margin_top: 12,
                visible: true,
                halign: Gtk.Align.CENTER,
                valign: Gtk.Align.START,
-                vexpand: true,
+                vexpand: true
            });
            this.add(button);
@@ -511,35 +499,6 @@ class EmptyPlaceholder extends Gtk.Box {
    }
 });
 var NoShellPlaceholder = GObject.registerClass(
 class NoShellPlaceholder extends Gtk.Box {
    _init() {
        super._init({
            orientation: Gtk.Orientation.VERTICAL,
            spacing: 12,
            margin: 100,
            margin_bottom: 60,
        });
        let label = new Gtk.Label({
            label: '<span size="x-large">%s</span>'.format(
                _("Something’s gone wrong")),
            use_markup: true,
        });
        label.get_style_context().add_class(Gtk.STYLE_CLASS_DIM_LABEL);
        this.add(label);
        label = new Gtk.Label({
            label: _("We’re very sorry, but it was not possible to get the list of installed extensions. Make sure you are logged into GNOME and try again."),
            justify: Gtk.Justification.CENTER,
            wrap: true,
        });
        this.add(label);
        this.show_all();
    }
 });
 var DescriptionLabel = GObject.registerClass(
 class DescriptionLabel extends Gtk.Label {
    vfunc_get_preferred_height_for_width(width) {
@@ -552,59 +511,30 @@ class DescriptionLabel extends Gtk.Label {
 var ExtensionRow = GObject.registerClass(
 class ExtensionRow extends Gtk.ListBoxRow {
-    _init(extension) {
+    _init(uuid) {
        super._init();
-        this._app = Gio.Application.get_default();
+        this.uuid = uuid;
        this._extension = extension;
        this._prefsModule = null;
-        this.connect('destroy', this._onDestroy.bind(this));
+        this._settings = new Gio.Settings({ schema_id: 'org.gnome.shell' });
        this._settings.connect('changed::enabled-extensions', () => {
            this._switch.state = this._isEnabled();
        });
        this._settings.connect('changed::disable-extension-version-validation',
            () => {
                this._switch.sensitive = this._canEnable();
            });
        this._settings.connect('changed::disable-user-extensions',
            () => {
                this._switch.sensitive = this._canEnable();
            });
        this._buildUI();
        this._extensionStateChangedId = this._app.shellProxy.connectSignal(
            'ExtensionStateChanged', (p, sender, [uuid, newState]) => {
                if (this.uuid !== uuid)
                    return;
                this._extension = ExtensionUtils.deserializeExtension(newState);
                let state = this._extension.state == ExtensionState.ENABLED;
                this._switch.block_signal_handler(this._notifyActiveId);
                this._switch.state = state;
                this._switch.unblock_signal_handler(this._notifyActiveId);
                this._switch.sensitive = this._canToggle();
            });
    }
    get uuid() {
        return this._extension.uuid;
    }
    get name() {
        return this._extension.metadata.name;
    }
    get hasPrefs() {
        return this._extension.hasPrefs;
    }
    get url() {
        return this._extension.metadata.url;
    }
    _onDestroy() {
        if (!this._app.shellProxy)
            return;
        if (this._extensionStateChangedId)
            this._app.shellProxy.disconnectSignal(this._extensionStateChangedId);
        this._extensionStateChangedId = 0;
    }
    _buildUI() {
        let extension = ExtensionUtils.extensions[this.uuid];
        let hbox = new Gtk.Box({ orientation: Gtk.Orientation.HORIZONTAL,
                                 hexpand: true, margin_end: 24, spacing: 24,
                                 margin: 12 });
@@ -614,20 +544,19 @@ class ExtensionRow extends Gtk.ListBoxRow {
                                 spacing: 6, hexpand: true });
        hbox.add(vbox);
-        let name = GLib.markup_escape_text(this.name, -1);
+        let name = GLib.markup_escape_text(extension.metadata.name, -1);
        let label = new Gtk.Label({ label: '<b>' + name + '</b>',
                                    use_markup: true,
                                    halign: Gtk.Align.START });
        vbox.add(label);
-        let desc = this._extension.metadata.description.split('\n')[0];
+        let desc = extension.metadata.description.split('\n')[0];
        label = new DescriptionLabel({ label: desc, wrap: true, lines: 2,
                                       ellipsize: Pango.EllipsizeMode.END,
                                       xalign: 0, yalign: 0 });
        vbox.add(label);
        let button = new Gtk.Button({ valign: Gtk.Align.CENTER,
                                      visible: this.hasPrefs,
                                      no_show_all: true });
        button.set_image(new Gtk.Image({ icon_name: 'emblem-system-symbolic',
                                         icon_size: Gtk.IconSize.BUTTON,
@@ -637,37 +566,51 @@ class ExtensionRow extends Gtk.ListBoxRow {
        this.prefsButton = button;
-        this._switch = new Gtk.Switch({
+        this._switch = new Gtk.Switch({ valign: Gtk.Align.CENTER,
-            valign: Gtk.Align.CENTER,
+                                        sensitive: this._canEnable(),
-            sensitive: this._canToggle(),
+                                        state: this._isEnabled() });
-            state: this._extension.state === ExtensionState.ENABLED,
+        this._switch.connect('notify::active', () => {
        });
        this._notifyActiveId = this._switch.connect('notify::active', () => {
            if (this._switch.active)
-                this._app.shellProxy.EnableExtensionRemote(this.uuid);
+                this._enable();
            else
-                this._app.shellProxy.DisableExtensionRemote(this.uuid);
+                this._disable();
        });
        this._switch.connect('state-set', () => true);
        hbox.add(this._switch);
    }
-    _canToggle() {
+    _canEnable() {
-        return this._extension.canChange;
+        let extension = ExtensionUtils.extensions[this.uuid];
        let checkVersion = !this._settings.get_boolean('disable-extension-version-validation');
        return !this._settings.get_boolean('disable-user-extensions') &&
               !(checkVersion && ExtensionUtils.isOutOfDate(extension));
    }
-    get prefsModule() {
+    _isEnabled() {
-        // give extension prefs access to their own extension object
+        let extensions = this._settings.get_strv('enabled-extensions');
-        ExtensionUtils.getCurrentExtension = () => this._extension;
+        return extensions.includes(this.uuid);
    }
-        if (!this._prefsModule) {
+    _enable() {
-            ExtensionUtils.installImporter(this._extension);
+        let extensions = this._settings.get_strv('enabled-extensions');
        if (extensions.includes(this.uuid))
            return;
-            this._prefsModule = this._extension.imports.prefs;
+        extensions.push(this.uuid);
-            this._prefsModule.init(this._extension.metadata);
+        this._settings.set_strv('enabled-extensions', extensions);
-        }
+    }
-        return this._prefsModule;
+    _disable() {
        let extensions = this._settings.get_strv('enabled-extensions');
        let pos = extensions.indexOf(this.uuid);
        if (pos == -1)
            return;
        do {
            extensions.splice(pos, 1);
            pos = extensions.indexOf(this.uuid);
        } while (pos != -1);
        this._settings.set_strv('enabled-extensions', extensions);
    }
 });
@@ -683,7 +626,7 @@ function initEnvironment() {
            log(`ERROR: ${s}`);
        },
-        userdatadir: GLib.build_filenamev([GLib.get_user_data_dir(), 'gnome-shell']),
+        userdatadir: GLib.build_filenamev([GLib.get_user_data_dir(), 'gnome-shell'])
    };
    String.prototype.format = Format.format;
@@ -695,5 +638,6 @@ function main(argv) {
    Gettext.bindtextdomain(Config.GETTEXT_PACKAGE, Config.LOCALEDIR);
    Gettext.textdomain(Config.GETTEXT_PACKAGE);
-    new Application().run(argv);
+    let app = new Application();
    app.application.run(argv);
 }
--- a/js/gdm/authPrompt.js
+++ b/js/gdm/authPrompt.js
@@ -1,58 +1,41 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported AuthPrompt */
-const { Clutter, GObject, Pango, Shell, St } = imports.gi;
+const { Clutter, Pango, Shell, St } = imports.gi;
 const Signals = imports.signals;
 const Animation = imports.ui.animation;
 const Batch = imports.gdm.batch;
 const GdmUtil = imports.gdm.util;
 const Util = imports.misc.util;
 const Params = imports.misc.params;
 const ShellEntry = imports.ui.shellEntry;
 const Tweener = imports.ui.tweener;
 const UserWidget = imports.ui.userWidget;
 var DEFAULT_BUTTON_WELL_ICON_SIZE = 16;
-var DEFAULT_BUTTON_WELL_ANIMATION_DELAY = 1000;
+var DEFAULT_BUTTON_WELL_ANIMATION_DELAY = 1.0;
-var DEFAULT_BUTTON_WELL_ANIMATION_TIME = 300;
+var DEFAULT_BUTTON_WELL_ANIMATION_TIME = 0.3;
-var MESSAGE_FADE_OUT_ANIMATION_TIME = 500;
+var MESSAGE_FADE_OUT_ANIMATION_TIME = 0.5;
 const WIGGLE_OFFSET = 6;
 const WIGGLE_DURATION = 65;
 const N_WIGGLES = 3;
 var AuthPromptMode = {
    UNLOCK_ONLY: 0,
-    UNLOCK_OR_LOG_IN: 1,
+    UNLOCK_OR_LOG_IN: 1
 };
 var AuthPromptStatus = {
    NOT_VERIFYING: 0,
    VERIFYING: 1,
    VERIFICATION_FAILED: 2,
-    VERIFICATION_SUCCEEDED: 3,
+    VERIFICATION_SUCCEEDED: 3
 };
 var BeginRequestType = {
    PROVIDE_USERNAME: 0,
-    DONT_PROVIDE_USERNAME: 1,
+    DONT_PROVIDE_USERNAME: 1
 };
-var AuthPrompt = GObject.registerClass({
+var AuthPrompt = class {
-    Signals: {
+    constructor(gdmClient, mode) {
        'cancelled': {},
        'failed': {},
        'next': {},
        'prompted': {},
        'reset': { param_types: [GObject.TYPE_UINT] },
    },
 }, class AuthPrompt extends St.BoxLayout {
    _init(gdmClient, mode) {
        super._init({
            style_class: 'login-dialog-prompt-layout',
            vertical: true,
        });
        this.verificationStatus = AuthPromptStatus.NOT_VERIFYING;
        this._gdmClient = gdmClient;
@@ -64,7 +47,7 @@ var AuthPrompt = GObject.registerClass({
        else if (this._mode == AuthPromptMode.UNLOCK_OR_LOG_IN)
            reauthenticationOnly = false;
-        this._userVerifier = new GdmUtil.ShellUserVerifier(this._gdmClient, { reauthenticationOnly });
+        this._userVerifier = new GdmUtil.ShellUserVerifier(this._gdmClient, { reauthenticationOnly: reauthenticationOnly });
        this._userVerifier.connect('ask-question', this._onAskQuestion.bind(this));
        this._userVerifier.connect('show-message', this._onShowMessage.bind(this));
@@ -78,68 +61,70 @@ var AuthPrompt = GObject.registerClass({
        this.connect('next', () => {
            this.updateSensitivity(false);
            this.startSpinning();
-            if (this._queryingService)
+            if (this._queryingService) {
                this._userVerifier.answerQuery(this._queryingService, this._entry.text);
-            else
+            } else {
                this._preemptiveAnswer = this._entry.text;
            }
        });
-        this.connect('destroy', this._onDestroy.bind(this));
+        this.actor = new St.BoxLayout({ style_class: 'login-dialog-prompt-layout',
-
+                                        vertical: true });
-        this._userWell = new St.Bin({
+        this.actor.connect('destroy', this._onDestroy.bind(this));
-            x_expand: true,
+        this.actor.connect('key-press-event', (actor, event) => {
-            y_expand: true,
+            if (event.get_key_symbol() == Clutter.KEY_Escape)
-        });
+                this.cancel();
-        this.add_child(this._userWell);
+            return Clutter.EVENT_PROPAGATE;
        this._label = new St.Label({
            style_class: 'login-dialog-prompt-label',
            x_expand: false,
            y_expand: true,
        });
-        this.add_child(this._label);
+        this._userWell = new St.Bin({ x_fill: true,
-        this._entry = new St.Entry({
+                                      x_align: St.Align.START });
-            style_class: 'login-dialog-prompt-entry',
+        this.actor.add(this._userWell,
-            can_focus: true,
+                       { x_align: St.Align.START,
-            x_expand: false,
+                         x_fill: true,
-            y_expand: true,
+                         y_fill: true,
-        });
+                         expand: true });
        this._label = new St.Label({ style_class: 'login-dialog-prompt-label' });
        this.actor.add(this._label,
                       { expand: true,
                         x_fill: false,
                         y_fill: true,
                         x_align: St.Align.START });
        this._entry = new St.Entry({ style_class: 'login-dialog-prompt-entry',
                                     can_focus: true });
        ShellEntry.addContextMenu(this._entry, { isPassword: true, actionMode: Shell.ActionMode.NONE });
-        this.add_child(this._entry);
+        this.actor.add(this._entry,
                       { expand: true,
                         x_fill: true,
                         y_fill: false,
                         x_align: St.Align.START });
        this._entry.grab_key_focus();
-        this._message = new St.Label({
+        this._message = new St.Label({ opacity: 0,
-            opacity: 0,
+                                       styleClass: 'login-dialog-message' });
            styleClass: 'login-dialog-message',
            x_expand: false,
            y_expand: true,
            y_align: Clutter.ActorAlign.START,
        });
        this._message.clutter_text.line_wrap = true;
        this._message.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
-        this.add_child(this._message);
+        this.actor.add(this._message, { x_fill: false, x_align: St.Align.START, y_align: St.Align.START });
-        this._buttonBox = new St.BoxLayout({
+        this._buttonBox = new St.BoxLayout({ style_class: 'login-dialog-button-box',
-            style_class: 'login-dialog-button-box',
+                                             vertical: false });
-            vertical: false,
+        this.actor.add(this._buttonBox,
-            y_align: Clutter.ActorAlign.END,
+                       { expand: true,
-        });
+                         x_align: St.Align.MIDDLE,
-        this.add_child(this._buttonBox);
+                         y_align: St.Align.END });
-        this._defaultButtonWell = new St.Widget({
+        this._defaultButtonWell = new St.Widget({ layout_manager: new Clutter.BinLayout() });
-            layout_manager: new Clutter.BinLayout(),
+        this._defaultButtonWellActor = null;
            x_align: Clutter.ActorAlign.END,
            y_align: Clutter.ActorAlign.CENTER,
        });
        this._initButtons();
        this._spinner = new Animation.Spinner(DEFAULT_BUTTON_WELL_ICON_SIZE);
-        this._spinner.opacity = 0;
+        this._spinner.actor.opacity = 0;
-        this._spinner.show();
+        this._spinner.actor.show();
-        this._defaultButtonWell.add_child(this._spinner);
+        this._defaultButtonWell.add_child(this._spinner.actor);
    }
    _onDestroy() {
@@ -147,39 +132,39 @@ var AuthPrompt = GObject.registerClass({
        this._userVerifier = null;
    }
    vfunc_key_press_event(keyPressEvent) {
        if (keyPressEvent.keyval == Clutter.KEY_Escape)
            this.cancel();
        return Clutter.EVENT_PROPAGATE;
    }
    _initButtons() {
-        this.cancelButton = new St.Button({
+        this.cancelButton = new St.Button({ style_class: 'modal-dialog-button button',
-            style_class: 'modal-dialog-button button',
+                                            button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
-            button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
+                                            reactive: true,
-            reactive: true,
+                                            can_focus: true,
-            can_focus: true,
+                                            label: _("Cancel") });
            label: _("Cancel"),
            x_expand: true,
            x_align: Clutter.ActorAlign.START,
            y_align: Clutter.ActorAlign.END,
        });
        this.cancelButton.connect('clicked', () => this.cancel());
-        this._buttonBox.add_child(this.cancelButton);
+        this._buttonBox.add(this.cancelButton,
                            { expand: false,
                              x_fill: false,
                              y_fill: false,
                              x_align: St.Align.START,
                              y_align: St.Align.END });
-        this._buttonBox.add_child(this._defaultButtonWell);
+        this._buttonBox.add(this._defaultButtonWell,
-        this.nextButton = new St.Button({
+                            { expand: true,
-            style_class: 'modal-dialog-button button',
+                              x_fill: false,
-            button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
+                              y_fill: false,
-            reactive: true,
+                              x_align: St.Align.END,
-            can_focus: true,
+                              y_align: St.Align.MIDDLE });
-            label: _("Next"),
+        this.nextButton = new St.Button({ style_class: 'modal-dialog-button button',
-            x_align: Clutter.ActorAlign.END,
+                                          button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
-            y_align: Clutter.ActorAlign.END,
+                                          reactive: true,
-        });
+                                          can_focus: true,
                                          label: _("Next") });
        this.nextButton.connect('clicked', () => this.emit('next'));
        this.nextButton.add_style_pseudo_class('default');
-        this._buttonBox.add_child(this.nextButton);
+        this._buttonBox.add(this.nextButton,
                            { expand: false,
                              x_fill: false,
                              y_fill: false,
                              x_align: St.Align.END,
                              y_align: St.Align.END });
        this._updateNextButtonSensitivity(this._entry.text.length > 0);
@@ -257,12 +242,6 @@ var AuthPrompt = GObject.registerClass({
        this.updateSensitivity(canRetry);
        this.setActorInDefaultButtonWell(null);
        this.verificationStatus = AuthPromptStatus.VERIFICATION_FAILED;
        Util.wiggle(this._entry, {
            offset: WIGGLE_OFFSET,
            duration: WIGGLE_DURATION,
            wiggleCount: N_WIGGLES,
        });
    }
    _onVerificationComplete() {
@@ -288,16 +267,16 @@ var AuthPrompt = GObject.registerClass({
        let oldActor = this._defaultButtonWellActor;
        if (oldActor)
-            oldActor.remove_all_transitions();
+            Tweener.removeTweens(oldActor);
        let wasSpinner;
-        if (oldActor == this._spinner)
+        if (oldActor == this._spinner.actor)
            wasSpinner = true;
        else
            wasSpinner = false;
        let isSpinner;
-        if (actor == this._spinner)
+        if (actor == this._spinner.actor)
            isSpinner = true;
        else
            isSpinner = false;
@@ -311,18 +290,18 @@ var AuthPrompt = GObject.registerClass({
                        this._spinner.stop();
                }
            } else {
-                oldActor.ease({
+                Tweener.addTween(oldActor,
-                    opacity: 0,
+                                 { opacity: 0,
-                    duration: DEFAULT_BUTTON_WELL_ANIMATION_TIME,
+                                   time: DEFAULT_BUTTON_WELL_ANIMATION_TIME,
-                    delay: DEFAULT_BUTTON_WELL_ANIMATION_DELAY,
+                                   delay: DEFAULT_BUTTON_WELL_ANIMATION_DELAY,
-                    mode: Clutter.AnimationMode.LINEAR,
+                                   transition: 'linear',
-                    onComplete: () => {
+                                   onComplete: () => {
-                        if (wasSpinner) {
+                                       if (wasSpinner) {
-                            if (this._spinner)
+                                           if (this._spinner)
-                                this._spinner.stop();
+                                               this._spinner.stop();
-                        }
+                                       }
-                    },
+                                   }
-                });
+                                 });
            }
        }
@@ -330,23 +309,21 @@ var AuthPrompt = GObject.registerClass({
            if (isSpinner)
                this._spinner.play();
-            if (!animate) {
+            if (!animate)
                actor.opacity = 255;
-            } else {
+            else
-                actor.ease({
+                Tweener.addTween(actor,
-                    opacity: 255,
+                                 { opacity: 255,
-                    duration: DEFAULT_BUTTON_WELL_ANIMATION_TIME,
+                                   time: DEFAULT_BUTTON_WELL_ANIMATION_TIME,
-                    delay: DEFAULT_BUTTON_WELL_ANIMATION_DELAY,
+                                   delay: DEFAULT_BUTTON_WELL_ANIMATION_DELAY,
-                    mode: Clutter.AnimationMode.LINEAR,
+                                   transition: 'linear' });
                });
            }
        }
        this._defaultButtonWellActor = actor;
    }
    startSpinning() {
-        this.setActorInDefaultButtonWell(this._spinner, true);
+        this.setActorInDefaultButtonWell(this._spinner.actor, true);
    }
    stopSpinning() {
@@ -388,12 +365,12 @@ var AuthPrompt = GObject.registerClass({
    _fadeOutMessage() {
        if (this._message.opacity == 0)
            return;
-        this._message.remove_all_transitions();
+        Tweener.removeTweens(this._message);
-        this._message.ease({
+        Tweener.addTween(this._message,
-            opacity: 0,
+                         { opacity: 0,
-            duration: MESSAGE_FADE_OUT_ANIMATION_TIME,
+                           time: MESSAGE_FADE_OUT_ANIMATION_TIME,
-            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                           transition: 'easeOutQuad'
-        });
+                         });
    }
    setMessage(message, type) {
@@ -408,7 +385,7 @@ var AuthPrompt = GObject.registerClass({
            this._message.remove_style_class_name('login-dialog-message-hint');
        if (message) {
-            this._message.remove_all_transitions();
+            Tweener.removeTweens(this._message);
            this._message.text = message;
            this._message.opacity = 255;
        } else {
@@ -427,9 +404,9 @@ var AuthPrompt = GObject.registerClass({
        this._entry.clutter_text.editable = sensitive;
    }
-    vfunc_hide() {
+    hide() {
        this.setActorInDefaultButtonWell(null, true);
-        super.vfunc_hide();
+        this.actor.hide();
        this._message.opacity = 0;
        this.setUser(null);
@@ -445,8 +422,7 @@ var AuthPrompt = GObject.registerClass({
        if (user) {
            let userWidget = new UserWidget.UserWidget(user);
-            userWidget.x_align = Clutter.ActorAlign.START;
+            this._userWell.set_child(userWidget.actor);
            this._userWell.set_child(userWidget);
        }
    }
@@ -525,10 +501,11 @@ var AuthPrompt = GObject.registerClass({
    }
    cancel() {
-        if (this.verificationStatus == AuthPromptStatus.VERIFICATION_SUCCEEDED)
+        if (this.verificationStatus == AuthPromptStatus.VERIFICATION_SUCCEEDED) {
            return;
-
+        }
        this.reset();
        this.emit('cancelled');
    }
-});
+};
 Signals.addSignalMethods(AuthPrompt.prototype);
--- a/js/gdm/batch.js
+++ b/js/gdm/batch.js
@@ -20,7 +20,7 @@
 * In order for transformation animations to look good, they need to be
 * incremental and have some order to them (e.g., fade out hidden items,
 * then shrink to close the void left over). Chaining animations in this way can
- * be error-prone and wordy using just ease() callbacks.
+ * be error-prone and wordy using just Tweener callbacks.
 *
 * The classes in this file help with this:
 *
@@ -112,12 +112,13 @@ var Batch = class extends Task {
        for (let i = 0; i < tasks.length; i++) {
            let task;
-            if (tasks[i] instanceof Task)
+            if (tasks[i] instanceof Task) {
                task = tasks[i];
-            else if (typeof tasks[i] == 'function')
+            } else if (typeof tasks[i] == 'function') {
                task = new Task(scope, tasks[i]);
-            else
+            } else {
                throw new Error('Batch tasks must be functions or Task, Hold or Batch objects');
            }
            this.tasks.push(task);
        }
@@ -128,8 +129,9 @@ var Batch = class extends Task {
    }
    runTask() {
-        if (!(this._currentTaskIndex in this.tasks))
+        if (!(this._currentTaskIndex in this.tasks)) {
            return null;
        }
        return this.tasks[this._currentTaskIndex].run();
    }
@@ -177,8 +179,9 @@ var ConcurrentBatch = class extends Batch {
    process() {
        let hold = this.runTask();
-        if (hold)
+        if (hold) {
            this.hold.acquireUntilAfter(hold);
        }
        // Regardless of the state of the just run task,
        // fire off the next one, so all the tasks can run
@@ -199,6 +202,7 @@ var ConsecutiveBatch = class extends Batch {
                hold.disconnect(signalId);
                this.nextTask();
            });
            return;
        } else {
            // This task finished, process the next one
            this.nextTask();
--- a/js/gdm/fingerprint.js
+++ b/js/gdm/fingerprint.js
@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported FprintManager */
 const Gio = imports.gi.Gio;
@@ -20,7 +19,7 @@ function FprintManager() {
                                   g_interface_info: FprintManagerInfo,
                                   g_name: 'net.reactivated.Fprint',
                                   g_object_path: '/net/reactivated/Fprint/Manager',
-                                   g_flags: Gio.DBusProxyFlags.DO_NOT_LOAD_PROPERTIES });
+                                   g_flags: (Gio.DBusProxyFlags.DO_NOT_LOAD_PROPERTIES) });
    try {
        self.init(null);
--- a/js/gdm/loginDialog.js
+++ b/js/gdm/loginDialog.js
@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported LoginDialog */
 /*
 * Copyright 2011 Red Hat, Inc
 *
@@ -19,6 +18,7 @@
 const { AccountsService, Atk, Clutter, Gdm, Gio,
        GLib, GObject, Meta, Pango, Shell, St } = imports.gi;
 const Signals = imports.signals;
 const AuthPrompt = imports.gdm.authPrompt;
 const Batch = imports.gdm.batch;
@@ -30,89 +30,81 @@ const LoginManager = imports.misc.loginManager;
 const Main = imports.ui.main;
 const PopupMenu = imports.ui.popupMenu;
 const Realmd = imports.gdm.realmd;
 const Tweener = imports.ui.tweener;
 const UserWidget = imports.ui.userWidget;
-const _FADE_ANIMATION_TIME = 250;
+const _FADE_ANIMATION_TIME = 0.25;
-const _SCROLL_ANIMATION_TIME = 500;
+const _SCROLL_ANIMATION_TIME = 0.5;
 const _TIMED_LOGIN_IDLE_THRESHOLD = 5.0;
 const _LOGO_ICON_HEIGHT = 48;
 const _MAX_BOTTOM_MENU_ITEMS = 5;
-var UserListItem = GObject.registerClass({
+var UserListItem = class {
-    Signals: { 'activate': {} },
+    constructor(user) {
 }, class UserListItem extends St.Button {
    _init(user) {
        let layout = new St.BoxLayout({
            vertical: true,
            x_align: Clutter.ActorAlign.START,
        });
        super._init({
            style_class: 'login-dialog-user-list-item',
            button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
            can_focus: true,
            x_expand: true,
            child: layout,
            reactive: true,
        });
        this.user = user;
        this._userChangedId = this.user.connect('changed',
                                                this._onUserChanged.bind(this));
-        this.connect('destroy', this._onDestroy.bind(this));
+        let layout = new St.BoxLayout({ vertical: true });
-        this.connect('notify::hover', () => {
+        this.actor = new St.Button({ style_class: 'login-dialog-user-list-item',
-            this._setSelected(this.hover);
+                                     button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
                                     can_focus: true,
                                     child: layout,
                                     reactive: true,
                                     x_align: St.Align.START,
                                     x_fill: true });
        this.actor.connect('destroy', this._onDestroy.bind(this));
        this.actor.connect('key-focus-in', () => {
            this._setSelected(true);
        });
        this.actor.connect('key-focus-out', () => {
            this._setSelected(false);
        });
        this.actor.connect('notify::hover', () => {
            this._setSelected(this.actor.hover);
        });
        this._userWidget = new UserWidget.UserWidget(this.user);
-        layout.add(this._userWidget);
+        layout.add(this._userWidget.actor);
-        this._userWidget.bind_property('label-actor', this, 'label-actor',
+        this._userWidget.actor.bind_property('label-actor', this.actor, 'label-actor',
-                                       GObject.BindingFlags.SYNC_CREATE);
+                                             GObject.BindingFlags.SYNC_CREATE);
        this._timedLoginIndicator = new St.Bin({ style_class: 'login-dialog-timed-login-indicator',
                                                 scale_x: 0,
                                                 visible: false });
        layout.add(this._timedLoginIndicator);
        this.actor.connect('clicked', this._onClicked.bind(this));
        this._onUserChanged();
    }
    vfunc_key_focus_in() {
        super.vfunc_key_focus_in();
        this._setSelected(true);
    }
    vfunc_key_focus_out() {
        super.vfunc_key_focus_out();
        this._setSelected(false);
    }
    _onUserChanged() {
        this._updateLoggedIn();
    }
    _updateLoggedIn() {
        if (this.user.is_logged_in())
-            this.add_style_pseudo_class('logged-in');
+            this.actor.add_style_pseudo_class('logged-in');
        else
-            this.remove_style_pseudo_class('logged-in');
+            this.actor.remove_style_pseudo_class('logged-in');
    }
    _onDestroy() {
        this.user.disconnect(this._userChangedId);
    }
-    vfunc_clicked() {
+    _onClicked() {
        this.emit('activate');
    }
    _setSelected(selected) {
        if (selected) {
-            this.add_style_pseudo_class('selected');
+            this.actor.add_style_pseudo_class('selected');
-            this.grab_key_focus();
+            this.actor.grab_key_focus();
        } else {
-            this.remove_style_pseudo_class('selected');
+            this.actor.remove_style_pseudo_class('selected');
        }
    }
@@ -125,7 +117,7 @@ var UserListItem = GObject.registerClass({
        let startTime = GLib.get_monotonic_time();
-        this._timedLoginTimeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 33,
+        this._timedLoginTimeoutId = GLib.timeout_add (GLib.PRIORITY_DEFAULT, 33,
            () => {
                let currentTime = GLib.get_monotonic_time();
                let elapsedTime = (currentTime - startTime) / GLib.USEC_PER_SEC;
@@ -153,33 +145,23 @@ var UserListItem = GObject.registerClass({
        this._timedLoginIndicator.visible = false;
        this._timedLoginIndicator.scale_x = 0.;
    }
-});
+};
 Signals.addSignalMethods(UserListItem.prototype);
-var UserList = GObject.registerClass({
+var UserList = class {
-    Signals: {
+    constructor() {
-        'activate': { param_types: [UserListItem.$gtype] },
+        this.actor = new St.ScrollView({ style_class: 'login-dialog-user-list-view' });
-        'item-added': { param_types: [UserListItem.$gtype] },
+        this.actor.set_policy(St.PolicyType.NEVER,
-    },
+                              St.PolicyType.AUTOMATIC);
 }, class UserList extends St.ScrollView {
    _init() {
        super._init({
            style_class: 'login-dialog-user-list-view',
            x_expand: true,
            y_expand: true,
        });
        this.set_policy(St.PolicyType.NEVER,
                        St.PolicyType.AUTOMATIC);
        this._box = new St.BoxLayout({ vertical: true,
                                       style_class: 'login-dialog-user-list',
                                       pseudo_class: 'expanded' });
-        this.add_actor(this._box);
+        this.actor.add_actor(this._box);
        this._items = {};
    }
-    vfunc_key_focus_in() {
+        this.actor.connect('key-focus-in', this._moveFocusToItems.bind(this));
        this._moveFocusToItems();
    }
    _moveFocusToItems() {
@@ -188,10 +170,10 @@ var UserList = GObject.registerClass({
        if (!hasItems)
            return;
-        if (global.stage.get_key_focus() != this)
+        if (global.stage.get_key_focus() != this.actor)
            return;
-        let focusSet = this.navigate_focus(null, St.DirectionType.TAB_FORWARD, false);
+        let focusSet = this.actor.navigate_focus(null, St.DirectionType.TAB_FORWARD, false);
        if (!focusSet) {
            Meta.later_add(Meta.LaterType.BEFORE_REDRAW, () => {
                this._moveFocusToItems();
@@ -212,26 +194,27 @@ var UserList = GObject.registerClass({
        for (let userName in this._items) {
            let item = this._items[userName];
-            item.sync_hover();
+            item.actor.sync_hover();
        }
    }
    scrollToItem(item) {
-        let box = item.get_allocation_box();
+        let box = item.actor.get_allocation_box();
-        let adjustment = this.get_vscroll_bar().get_adjustment();
+        let adjustment = this.actor.get_vscroll_bar().get_adjustment();
        let value = (box.y1 + adjustment.step_increment / 2.0) - (adjustment.page_size / 2.0);
-        adjustment.ease(value, {
+        Tweener.removeTweens(adjustment);
-            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+        Tweener.addTween (adjustment,
-            duration: _SCROLL_ANIMATION_TIME,
+                          { value: value,
-        });
+                            time: _SCROLL_ANIMATION_TIME,
                            transition: 'easeOutQuad' });
    }
    jumpToItem(item) {
-        let box = item.get_allocation_box();
+        let box = item.actor.get_allocation_box();
-        let adjustment = this.get_vscroll_bar().get_adjustment();
+        let adjustment = this.actor.get_vscroll_bar().get_adjustment();
        let value = (box.y1 + adjustment.step_increment / 2.0) - (adjustment.page_size / 2.0);
@@ -269,14 +252,14 @@ var UserList = GObject.registerClass({
        this.removeUser(user);
        let item = new UserListItem(user);
-        this._box.add_child(item);
+        this._box.add(item.actor, { x_fill: true });
        this._items[userName] = item;
        item.connect('activate', this._onItemActivated.bind(this));
        // Try to keep the focused item front-and-center
-        item.connect('key-focus-in', () => this.scrollToItem(item));
+        item.actor.connect('key-focus-in', () => this.scrollToItem(item));
        this._moveFocusToItems();
@@ -297,37 +280,33 @@ var UserList = GObject.registerClass({
        if (!item)
            return;
-        item.destroy();
+        item.actor.destroy();
        delete this._items[userName];
    }
    numItems() {
        return Object.keys(this._items).length;
    }
-});
+};
 Signals.addSignalMethods(UserList.prototype);
-var SessionMenuButton = GObject.registerClass({
+var SessionMenuButton = class {
-    Signals: { 'session-activated': { param_types: [GObject.TYPE_STRING] } },
+    constructor() {
 }, class SessionMenuButton extends St.Bin {
    _init() {
        let gearIcon = new St.Icon({ icon_name: 'emblem-system-symbolic' });
-        let button = new St.Button({
+        this._button = new St.Button({ style_class: 'login-dialog-session-list-button',
-            style_class: 'login-dialog-session-list-button',
+                                       reactive: true,
-            reactive: true,
+                                       track_hover: true,
-            track_hover: true,
+                                       can_focus: true,
-            can_focus: true,
+                                       accessible_name: _("Choose Session"),
-            accessible_name: _("Choose Session"),
+                                       accessible_role: Atk.Role.MENU,
-            accessible_role: Atk.Role.MENU,
+                                       child: gearIcon });
            child: gearIcon,
        });
-        super._init({ child: button });
+        this.actor = new St.Bin({ child: this._button });
        this._button = button;
        let side = St.Side.TOP;
        let align = 0;
        if (Gdm.get_session_ids().length > _MAX_BOTTOM_MENU_ITEMS) {
-            if (this.text_direction == Clutter.TextDirection.RTL)
+            if (this.actor.text_direction == Clutter.TextDirection.RTL)
                side = St.Side.RIGHT;
            else
                side = St.Side.LEFT;
@@ -393,7 +372,7 @@ var SessionMenuButton = GObject.registerClass({
        }
        for (let i = 0; i < ids.length; i++) {
-            let [sessionName, sessionDescription_] = Gdm.get_session_name_and_description(ids[i]);
+            let [sessionName, sessionDescription] = Gdm.get_session_name_and_description(ids[i]);
            let id = ids[i];
            let item = new PopupMenu.PopupMenuItem(sessionName);
@@ -406,13 +385,15 @@ var SessionMenuButton = GObject.registerClass({
            });
        }
    }
-});
+};
 Signals.addSignalMethods(SessionMenuButton.prototype);
 var LoginDialog = GObject.registerClass({
    Signals: { 'failed': {} },
 }, class LoginDialog extends St.Widget {
    _init(parentActor) {
-        super._init({ style_class: 'login-dialog', visible: false });
+        super._init({ style_class: 'login-dialog',
                      visible: false });
        this.get_accessible().set_role(Atk.Role.WINDOW);
@@ -446,35 +427,38 @@ var LoginDialog = GObject.registerClass({
        this.add_child(this._userSelectionBox);
        this._userList = new UserList();
-        this._userSelectionBox.add_child(this._userList);
+        this._userSelectionBox.add(this._userList.actor,
                                   { expand: true,
                                     x_fill: true,
                                     y_fill: true });
        this._authPrompt = new AuthPrompt.AuthPrompt(this._gdmClient, AuthPrompt.AuthPromptMode.UNLOCK_OR_LOG_IN);
        this._authPrompt.connect('prompted', this._onPrompted.bind(this));
        this._authPrompt.connect('reset', this._onReset.bind(this));
        this._authPrompt.hide();
-        this.add_child(this._authPrompt);
+        this.add_child(this._authPrompt.actor);
        // translators: this message is shown below the user list on the
        // login screen. It can be activated to reveal an entry for
        // manually entering the username.
-        let notListedLabel = new St.Label({
+        let notListedLabel = new St.Label({ text: _("Not listed?"),
-            text: _("Not listed?"),
+                                            style_class: 'login-dialog-not-listed-label' });
-            style_class: 'login-dialog-not-listed-label',
+        this._notListedButton = new St.Button({ style_class: 'login-dialog-not-listed-button',
-            x_align: Clutter.ActorAlign.START,
+                                                button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
-        });
+                                                can_focus: true,
-        this._notListedButton = new St.Button({
+                                                child: notListedLabel,
-            style_class: 'login-dialog-not-listed-button',
+                                                reactive: true,
-            button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
+                                                x_align: St.Align.START,
-            can_focus: true,
+                                                x_fill: true });
            child: notListedLabel,
            reactive: true,
        });
        this._notListedButton.connect('clicked', this._hideUserListAskForUsernameAndBeginVerification.bind(this));
        this._notListedButton.hide();
-        this._userSelectionBox.add_child(this._notListedButton);
+        this._userSelectionBox.add(this._notListedButton,
                                   { expand: false,
                                     x_align: St.Align.START,
                                     x_fill: true });
        this._bannerView = new St.ScrollView({ style_class: 'login-dialog-banner-view',
                                               opacity: 0,
@@ -509,11 +493,11 @@ var LoginDialog = GObject.registerClass({
        this._sessionMenuButton = new SessionMenuButton();
        this._sessionMenuButton.connect('session-activated',
            (list, sessionId) => {
-                this._greeter.call_select_session_sync(sessionId, null);
+                this._greeter.call_select_session_sync (sessionId, null);
            });
-        this._sessionMenuButton.opacity = 0;
+        this._sessionMenuButton.actor.opacity = 0;
-        this._sessionMenuButton.show();
+        this._sessionMenuButton.actor.show();
-        this._authPrompt.addActorToDefaultButtonWell(this._sessionMenuButton);
+        this._authPrompt.addActorToDefaultButtonWell(this._sessionMenuButton.actor);
        this._disableUserList = undefined;
        this._userListLoaded = false;
@@ -534,7 +518,7 @@ var LoginDialog = GObject.registerClass({
    _getBannerAllocation(dialogBox) {
        let actorBox = new Clutter.ActorBox();
-        let [, , natWidth, natHeight] = this._bannerView.get_preferred_size();
+        let [minWidth, minHeight, natWidth, natHeight] = this._bannerView.get_preferred_size();
        let centerX = dialogBox.x1 + (dialogBox.x2 - dialogBox.x1) / 2;
        actorBox.x1 = Math.floor(centerX - natWidth / 2);
@@ -548,7 +532,7 @@ var LoginDialog = GObject.registerClass({
    _getLogoBinAllocation(dialogBox) {
        let actorBox = new Clutter.ActorBox();
-        let [, , natWidth, natHeight] = this._logoBin.get_preferred_size();
+        let [minWidth, minHeight, natWidth, natHeight] = this._logoBin.get_preferred_size();
        let centerX = dialogBox.x1 + (dialogBox.x2 - dialogBox.x1) / 2;
        actorBox.x1 = Math.floor(centerX - natWidth / 2);
@@ -562,7 +546,7 @@ var LoginDialog = GObject.registerClass({
    _getCenterActorAllocation(dialogBox, actor) {
        let actorBox = new Clutter.ActorBox();
-        let [, , natWidth, natHeight] = actor.get_preferred_size();
+        let [minWidth, minHeight, natWidth, natHeight] = actor.get_preferred_size();
        let centerX = dialogBox.x1 + (dialogBox.x2 - dialogBox.x1) / 2;
        let centerY = dialogBox.y1 + (dialogBox.y2 - dialogBox.y1) / 2;
@@ -596,8 +580,8 @@ var LoginDialog = GObject.registerClass({
        let authPromptAllocation = null;
        let authPromptWidth = 0;
-        if (this._authPrompt.visible) {
+        if (this._authPrompt.actor.visible) {
-            authPromptAllocation = this._getCenterActorAllocation(dialogBox, this._authPrompt);
+            authPromptAllocation = this._getCenterActorAllocation(dialogBox, this._authPrompt.actor);
            authPromptWidth = authPromptAllocation.x2 - authPromptAllocation.x1;
        }
@@ -664,7 +648,7 @@ var LoginDialog = GObject.registerClass({
                    // figure out how tall it would like to be and try to accommodate
                    // but don't let it get too close to the logo
-                    let [, wideBannerHeight] = this._bannerView.get_preferred_height(wideBannerWidth);
+                    let [wideMinHeight, wideBannerHeight] = this._bannerView.get_preferred_height(wideBannerWidth);
                    let maxWideHeight = dialogHeight - 3 * logoHeight;
                    wideBannerHeight = Math.min(maxWideHeight, wideBannerHeight);
@@ -702,11 +686,12 @@ var LoginDialog = GObject.registerClass({
        }
        // Finally hand out the allocations
-        if (bannerAllocation)
+        if (bannerAllocation) {
            this._bannerView.allocate(bannerAllocation, flags);
        }
        if (authPromptAllocation)
-            this._authPrompt.allocate(authPromptAllocation, flags);
+            this._authPrompt.actor.allocate(authPromptAllocation, flags);
        if (userSelectionAllocation)
            this._userSelectionBox.allocate(userSelectionAllocation, flags);
@@ -773,15 +758,14 @@ var LoginDialog = GObject.registerClass({
    _fadeInBannerView() {
        this._bannerView.show();
-        this._bannerView.ease({
+        Tweener.addTween(this._bannerView,
-            opacity: 255,
+                         { opacity: 255,
-            duration: _FADE_ANIMATION_TIME,
+                           time: _FADE_ANIMATION_TIME,
-            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                           transition: 'easeOutQuad' });
        });
    }
    _hideBannerView() {
-        this._bannerView.remove_all_transitions();
+        Tweener.removeTweens(this._bannerView);
        this._bannerView.opacity = 0;
        this._bannerView.hide();
    }
@@ -810,7 +794,7 @@ var LoginDialog = GObject.registerClass({
    _onPrompted() {
        if (this._shouldShowSessionMenuButton()) {
            this._sessionMenuButton.updateSensitivity(true);
-            this._authPrompt.setActorInDefaultButtonWell(this._sessionMenuButton);
+            this._authPrompt.setActorInDefaultButtonWell(this._sessionMenuButton.actor);
        } else {
            this._sessionMenuButton.updateSensitivity(false);
        }
@@ -819,9 +803,9 @@ var LoginDialog = GObject.registerClass({
    _resetGreeterProxy() {
        if (GLib.getenv('GDM_GREETER_TEST') != '1') {
-            if (this._greeter)
+            if (this._greeter) {
                this._greeter.run_dispose();
-
+            }
            this._greeter = this._gdmClient.get_greeter_sync(null);
            this._defaultSessionChangedId = this._greeter.connect('default-session-name-changed',
@@ -870,15 +854,14 @@ var LoginDialog = GObject.registerClass({
    }
    _showPrompt() {
-        if (this._authPrompt.visible)
+        if (this._authPrompt.actor.visible)
            return;
-        this._authPrompt.opacity = 0;
+        this._authPrompt.actor.opacity = 0;
-        this._authPrompt.show();
+        this._authPrompt.actor.show();
-        this._authPrompt.ease({
+        Tweener.addTween(this._authPrompt.actor,
-            opacity: 255,
+                         { opacity: 255,
-            duration: _FADE_ANIMATION_TIME,
+                           time: _FADE_ANIMATION_TIME,
-            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                           transition: 'easeOutQuad' });
        });
        this._fadeInBannerView();
    }
@@ -922,31 +905,26 @@ var LoginDialog = GObject.registerClass({
        this._showPrompt();
    }
    _bindOpacity() {
        this._bindings = Main.layoutManager.uiGroup.get_children()
            .filter(c => c != Main.layoutManager.screenShieldGroup)
            .map(c => this.bind_property('opacity', c, 'opacity', 0));
    }
    _unbindOpacity() {
        this._bindings.forEach(b => b.unbind());
    }
    _loginScreenSessionActivated() {
        if (this.opacity == 255 && this._authPrompt.verificationStatus == AuthPrompt.AuthPromptStatus.NOT_VERIFYING)
            return;
-        this._bindOpacity();
+        Tweener.addTween(this,
-        this.ease({
+                         { opacity: 255,
-            opacity: 255,
+                           time: _FADE_ANIMATION_TIME,
-            duration: _FADE_ANIMATION_TIME,
+                           transition: 'easeOutQuad',
-            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                           onUpdate: () => {
-            onComplete: () => {
+                               let children = Main.layoutManager.uiGroup.get_children();
-                if (this._authPrompt.verificationStatus != AuthPrompt.AuthPromptStatus.NOT_VERIFYING)
+
-                    this._authPrompt.reset();
+                               for (let i = 0; i < children.length; i++) {
-                this._unbindOpacity();
+                                   if (children[i] != Main.layoutManager.screenShieldGroup)
-            },
+                                       children[i].opacity = this.opacity;
-        });
+                               }
                           },
                           onComplete: () => {
                               if (this._authPrompt.verificationStatus != AuthPrompt.AuthPromptStatus.NOT_VERIFYING)
                                   this._authPrompt.reset();
                           } });
    }
    _gotGreeterSessionProxy(proxy) {
@@ -959,16 +937,21 @@ var LoginDialog = GObject.registerClass({
    }
    _startSession(serviceName) {
-        this._bindOpacity();
+        Tweener.addTween(this,
-        this.ease({
+                         { opacity: 0,
-            opacity: 0,
+                           time: _FADE_ANIMATION_TIME,
-            duration: _FADE_ANIMATION_TIME,
+                           transition: 'easeOutQuad',
-            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                           onUpdate: () => {
-            onComplete: () => {
+                               let children = Main.layoutManager.uiGroup.get_children();
-                this._greeter.call_start_session_when_ready_sync(serviceName, true, null);
+
-                this._unbindOpacity();
+                               for (let i = 0; i < children.length; i++) {
-            },
+                                   if (children[i] != Main.layoutManager.screenShieldGroup)
-        });
+                                       children[i].opacity = this.opacity;
                               }
                           },
                           onComplete: () => {
                               this._greeter.call_start_session_when_ready_sync(serviceName, true, null);
                           } });
    }
    _onSessionOpened(client, serviceName) {
@@ -984,7 +967,7 @@ var LoginDialog = GObject.registerClass({
        let hold = new Batch.Hold();
        let signalId = this._userList.connect('item-added',
            () => {
-                item = this._userList.getItemFromUserName(userName);
+                let item = this._userList.getItemFromUserName(userName);
                if (item)
                    hold.release();
@@ -1038,8 +1021,9 @@ var LoginDialog = GObject.registerClass({
                     () => {
                         // If we're just starting out, start on the right item.
-                         if (!this._userManager.is_loaded)
+                         if (!this._userManager.is_loaded) {
                             this._userList.jumpToItem(loginItem);
                         }
                     },
                     () => {
@@ -1060,12 +1044,12 @@ var LoginDialog = GObject.registerClass({
                     () => {
                         // If idle timeout is done, make sure the timed login indicator is shown
                         if (delay > _TIMED_LOGIN_IDLE_THRESHOLD &&
-                             this._authPrompt.visible)
+                             this._authPrompt.actor.visible)
                             this._authPrompt.cancel();
                         if (delay > _TIMED_LOGIN_IDLE_THRESHOLD || firstRun) {
                             this._userList.scrollToItem(loginItem);
-                             loginItem.grab_key_focus();
+                             loginItem.actor.grab_key_focus();
                         }
                     },
@@ -1090,8 +1074,9 @@ var LoginDialog = GObject.registerClass({
        // Restart timed login on user interaction
        global.stage.connect('captured-event', (actor, event) => {
            if (event.type() == Clutter.EventType.KEY_PRESS ||
-                event.type() == Clutter.EventType.BUTTON_PRESS)
+               event.type() == Clutter.EventType.BUTTON_PRESS) {
                this._startTimedLogin(userName, seconds);
            }
            return Clutter.EVENT_PROPAGATE;
        });
@@ -1125,7 +1110,7 @@ var LoginDialog = GObject.registerClass({
        this._sessionMenuButton.close();
        this._setUserListExpanded(true);
        this._notListedButton.show();
-        this._userList.grab_key_focus();
+        this._userList.actor.grab_key_focus();
    }
    _beginVerificationForItem(item) {
@@ -1134,7 +1119,8 @@ var LoginDialog = GObject.registerClass({
        let userName = item.user.get_user_name();
        let hold = new Batch.Hold();
-        this._authPrompt.begin({ userName, hold });
+        this._authPrompt.begin({ userName: userName,
                                 hold: hold });
        return hold;
    }
@@ -1197,8 +1183,9 @@ var LoginDialog = GObject.registerClass({
        let users = this._userManager.list_users();
-        for (let i = 0; i < users.length; i++)
+        for (let i = 0; i < users.length; i++) {
            this._userList.addUser(users[i]);
        }
        this._updateDisableUserList();
@@ -1231,17 +1218,16 @@ var LoginDialog = GObject.registerClass({
                                        _("Login Window"),
                                        'dialog-password-symbolic',
                                        { sortGroup: CtrlAltTab.SortGroup.MIDDLE });
-        this._userList.grab_key_focus();
+        this._userList.actor.grab_key_focus();
        this.show();
        this.opacity = 0;
        Main.pushModal(this, { actionMode: Shell.ActionMode.LOGIN_SCREEN });
-        this.ease({
+        Tweener.addTween(this,
-            opacity: 255,
+                         { opacity: 255,
-            duration: 1000,
+                           time: 1,
-            mode: Clutter.AnimationMode.EASE_IN_QUAD,
+                           transition: 'easeInQuad' });
        });
        return true;
    }
@@ -1255,7 +1241,7 @@ var LoginDialog = GObject.registerClass({
        this._authPrompt.cancel();
    }
-    addCharacter(_unichar) {
+    addCharacter(unichar) {
        // Don't allow type ahead at the login screen
    }
--- a/js/gdm/oVirt.js
+++ b/js/gdm/oVirt.js
@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported getOVirtCredentialsManager */
 const Gio = imports.gi.Gio;
 const Signals = imports.signals;
@@ -23,7 +22,7 @@ function OVirtCredentials() {
                                   g_interface_info: OVirtCredentialsInfo,
                                   g_name: 'org.ovirt.vdsm.Credentials',
                                   g_object_path: '/org/ovirt/vdsm/Credentials',
-                                   g_flags: Gio.DBusProxyFlags.DO_NOT_LOAD_PROPERTIES });
+                                   g_flags: (Gio.DBusProxyFlags.DO_NOT_LOAD_PROPERTIES) });
    self.init(null);
    return self;
 }
--- a/js/gdm/realmd.js
+++ b/js/gdm/realmd.js
@@ -15,13 +15,12 @@ const RealmIface = loadInterfaceXML("org.freedesktop.realmd.Realm");
 const Realm = Gio.DBusProxy.makeProxyWrapper(RealmIface);
 var Manager = class {
-    constructor() {
+    constructor(parentActor) {
        this._aggregateProvider = Provider(Gio.DBus.system,
                                           'org.freedesktop.realmd',
                                           '/org/freedesktop/realmd',
                                           this._reloadRealms.bind(this));
        this._realms = {};
        this._loginFormat = null;
        this._signalId = this._aggregateProvider.connect('g-properties-changed',
            (proxy, properties) => {
@@ -87,7 +86,7 @@ var Manager = class {
    }
    get loginFormat() {
-        if (this._loginFormat)
+        if (this._loginFormat !== undefined)
            return this._loginFormat;
        this._updateLoginFormat();
--- a/js/gdm/util.js
+++ b/js/gdm/util.js
@@ -1,6 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported BANNER_MESSAGE_KEY, BANNER_MESSAGE_TEXT_KEY, LOGO_KEY,
            DISABLE_USER_LIST_KEY, fadeInActor, fadeOutActor, cloneAndFadeOutActor */
 const { Clutter, Gio, GLib } = imports.gi;
 const Signals = imports.signals;
@@ -11,13 +9,14 @@ const OVirt = imports.gdm.oVirt;
 const Main = imports.ui.main;
 const Params = imports.misc.params;
 const SmartcardManager = imports.misc.smartcardManager;
 const Tweener = imports.ui.tweener;
 var PASSWORD_SERVICE_NAME = 'gdm-password';
 var FINGERPRINT_SERVICE_NAME = 'gdm-fingerprint';
 var SMARTCARD_SERVICE_NAME = 'gdm-smartcard';
 var OVIRT_SERVICE_NAME = 'gdm-ovirtcred';
-var FADE_ANIMATION_TIME = 160;
+var FADE_ANIMATION_TIME = 0.16;
-var CLONE_FADE_ANIMATION_TIME = 250;
+var CLONE_FADE_ANIMATION_TIME = 0.25;
 var LOGIN_SCREEN_SCHEMA = 'org.gnome.login-screen';
 var PASSWORD_AUTHENTICATION_KEY = 'enable-password-authentication';
@@ -37,7 +36,7 @@ var MessageType = {
    NONE: 0,
    ERROR: 1,
    INFO: 2,
-    HINT: 3,
+    HINT: 3
 };
 function fadeInActor(actor) {
@@ -46,20 +45,20 @@ function fadeInActor(actor) {
    let hold = new Batch.Hold();
    actor.show();
-    let [, naturalHeight] = actor.get_preferred_height(-1);
+    let [minHeight, naturalHeight] = actor.get_preferred_height(-1);
    actor.opacity = 0;
    actor.set_height(0);
-    actor.ease({
+    Tweener.addTween(actor,
-        opacity: 255,
+                     { opacity: 255,
-        height: naturalHeight,
+                       height: naturalHeight,
-        duration: FADE_ANIMATION_TIME,
+                       time: FADE_ANIMATION_TIME,
-        mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                       transition: 'easeOutQuad',
-        onComplete: () => {
+                       onComplete() {
-            this.set_height(-1);
+                           this.set_height(-1);
-            hold.release();
+                           hold.release();
-        },
+                       },
-    });
+                     });
    return hold;
 }
@@ -72,17 +71,17 @@ function fadeOutActor(actor) {
    }
    let hold = new Batch.Hold();
-    actor.ease({
+    Tweener.addTween(actor,
-        opacity: 0,
+                     { opacity: 0,
-        height: 0,
+                       height: 0,
-        duration: FADE_ANIMATION_TIME,
+                       time: FADE_ANIMATION_TIME,
-        mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                       transition: 'easeOutQuad',
-        onComplete: () => {
+                       onComplete() {
-            this.hide();
+                           this.hide();
-            this.set_height(-1);
+                           this.set_height(-1);
-            hold.release();
+                           hold.release();
-        },
+                       },
-    });
+                     });
    return hold;
 }
@@ -102,15 +101,15 @@ function cloneAndFadeOutActor(actor) {
    clone.set_position(x, y);
    let hold = new Batch.Hold();
-    clone.ease({
+    Tweener.addTween(clone,
-        opacity: 0,
+                     { opacity: 0,
-        duration: CLONE_FADE_ANIMATION_TIME,
+                       time: CLONE_FADE_ANIMATION_TIME,
-        mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                       transition: 'easeOutQuad',
-        onComplete: () => {
+                       onComplete() {
-            clone.destroy();
+                           clone.destroy();
-            hold.release();
+                           hold.release();
-        },
+                       }
-    });
+                     });
    return hold;
 }
@@ -272,7 +271,7 @@ var ShellUserVerifier = class {
        let interval = this._getIntervalForMessage(message);
        this.hasPendingMessages = true;
-        this._messageQueue.push({ text: message, type: messageType, interval });
+        this._messageQueue.push({ text: message, type: messageType, interval: interval });
        this._queueMessageTimeout();
    }
@@ -304,7 +303,7 @@ var ShellUserVerifier = class {
            });
    }
-    _oVirtUserAuthenticated(_token) {
+    _oVirtUserAuthenticated(token) {
        this._preemptingService = OVIRT_SERVICE_NAME;
        this.emit('ovirt-user-authenticated');
    }
@@ -544,7 +543,6 @@ var ShellUserVerifier = class {
                });
            }
        } else {
            // eslint-disable-next-line no-lonely-if
            if (!this.hasPendingMessages) {
                this._cancelAndReset();
            } else {
@@ -572,8 +570,9 @@ var ShellUserVerifier = class {
        // if the password service fails, then cancel everything.
        // But if, e.g., fingerprint fails, still give
        // password authentication a chance to succeed
-        if (this.serviceIsForeground(serviceName))
+        if (this.serviceIsForeground(serviceName)) {
            this._verificationFailed(true);
        }
    }
 };
 Signals.addSignalMethods(ShellUserVerifier.prototype);
--- a/js/misc/extensionUtils.js
+++ b/js/misc/extensionUtils.js
@@ -1,46 +1,31 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported ExtensionState, ExtensionType, getCurrentExtension,
   getSettings, initTranslations, isOutOfDate, installImporter,
   serializeExtension, deserializeExtension */
 // Common utils for the extension system and the extension
 // preferences tool
 const { Gio, GLib } = imports.gi;
 const Gettext = imports.gettext;
-const Lang = imports.lang;
+const Signals = imports.signals;
 const Gio = imports.gi.Gio;
 const Config = imports.misc.config;
 const FileUtils = imports.misc.fileUtils;
 var ExtensionType = {
    SYSTEM: 1,
-    PER_USER: 2,
+    PER_USER: 2
 };
-var ExtensionState = {
+// Maps uuid -> metadata object
-    ENABLED: 1,
+var extensions = {};
    DISABLED: 2,
    ERROR: 3,
    OUT_OF_DATE: 4,
    DOWNLOADING: 5,
    INITIALIZED: 6,
    // Used as an error state for operations on unknown extensions,
    // should never be in a real extensionMeta object.
    UNINSTALLED: 99,
 };
 const SERIALIZED_PROPERTIES = ['type', 'state', 'path', 'error', 'hasPrefs', 'canChange'];
 /**
 * getCurrentExtension:
 *
- * @returns {?object} - The current extension, or null if not called from
+ * Returns the current extension, or null if not called from an extension.
 * an extension.
 */
 function getCurrentExtension() {
-    let stack = new Error().stack.split('\n');
+    let stack = (new Error()).stack.split('\n');
    let extensionStackLine;
    // Search for an occurrence of an extension stack frame
@@ -64,17 +49,13 @@ function getCurrentExtension() {
    if (!match)
        return null;
    // local import, as the module is used from outside the gnome-shell process
    // as well (not this function though)
    let extensionManager = imports.ui.main.extensionManager;
    let path = match[1];
    let file = Gio.File.new_for_path(path);
    // Walk up the directory tree, looking for an extension with
    // the same UUID as a directory name.
    while (file != null) {
-        let extension = extensionManager.lookup(file.get_basename());
+        let extension = extensions[file.get_basename()];
        if (extension !== undefined)
            return extension;
        file = file.get_parent();
@@ -85,7 +66,7 @@ function getCurrentExtension() {
 /**
 * initTranslations:
- * @param {string=} domain - the gettext domain to use
+ * @domain: (optional): the gettext domain to use
 *
 * Initialize Gettext to load translations from extensionsdir/locale.
 * If @domain is not provided, it will be taken from metadata['gettext-domain']
@@ -109,8 +90,7 @@ function initTranslations(domain) {
 /**
 * getSettings:
- * @param {string=} schema - the GSettings schema id
+ * @schema: (optional): the GSettings schema id
 * @returns {Gio.Settings} - a new settings object for @schema
 *
 * Builds and returns a GSettings schema for @schema, using schema files
 * in extensionsdir/schemas. If @schema is omitted, it is taken from
@@ -130,13 +110,12 @@ function getSettings(schema) {
    // SYSTEM extension that has been installed in the same prefix as the shell
    let schemaDir = extension.dir.get_child('schemas');
    let schemaSource;
-    if (schemaDir.query_exists(null)) {
+    if (schemaDir.query_exists(null))
        schemaSource = GioSSS.new_from_directory(schemaDir.get_path(),
                                                 GioSSS.get_default(),
                                                 false);
-    } else {
+    else
        schemaSource = GioSSS.get_default();
    }
    let schemaObj = schemaSource.lookup(schema, true);
    if (!schemaObj)
@@ -147,9 +126,8 @@ function getSettings(schema) {
 /**
 * versionCheck:
- * @param {string[]} required - an array of versions we're compatible with
+ * @required: an array of versions we're compatible with
- * @param {string} current - the version we have
+ * @current: the version we have
 * @returns {bool} - true if @current is compatible with @required
 *
 * Check if a component is compatible for an extension.
 * @required is an array, and at least one version must match.
@@ -169,8 +147,8 @@ function versionCheck(required, current) {
        let requiredArray = required[i].split('.');
        if (requiredArray[0] == major &&
            requiredArray[1] == minor &&
-            ((requiredArray[2] === undefined && parseInt(minor) % 2 == 0) ||
+            (requiredArray[2] == point ||
-             requiredArray[2] == point))
+             (requiredArray[2] == undefined && parseInt(minor) % 2 == 0)))
            return true;
    }
    return false;
@@ -183,50 +161,52 @@ function isOutOfDate(extension) {
    return false;
 }
-function serializeExtension(extension) {
+function createExtensionObject(uuid, dir, type) {
-    let obj = {};
+    let metadataFile = dir.get_child('metadata.json');
-    Lang.copyProperties(extension.metadata, obj);
+    if (!metadataFile.query_exists(null)) {
        throw new Error('Missing metadata.json');
    }
-    SERIALIZED_PROPERTIES.forEach(prop => {
+    let metadataContents, success, tag;
-        obj[prop] = extension[prop];
+    try {
-    });
+        [success, metadataContents, tag] = metadataFile.load_contents(null);
        if (metadataContents instanceof Uint8Array)
            metadataContents = imports.byteArray.toString(metadataContents);
    } catch (e) {
        throw new Error(`Failed to load metadata.json: ${e}`);
    }
    let meta;
    try {
        meta = JSON.parse(metadataContents);
    } catch (e) {
        throw new Error(`Failed to parse metadata.json: ${e}`);
    }
-    let res = {};
+    let requiredProperties = ['uuid', 'name', 'description', 'shell-version'];
-    for (let key in obj) {
+    for (let i = 0; i < requiredProperties.length; i++) {
-        let val = obj[key];
+        let prop = requiredProperties[i];
-        let type;
+        if (!meta[prop]) {
-        switch (typeof val) {
+            throw new Error(`missing "${prop}" property in metadata.json`);
        case 'string':
            type = 's';
            break;
        case 'number':
            type = 'd';
            break;
        case 'boolean':
            type = 'b';
            break;
        default:
            continue;
        }
        res[key] = GLib.Variant.new(type, val);
    }
-    return res;
+    if (uuid != meta.uuid) {
-}
+        throw new Error(`uuid "${meta.uuid}" from metadata.json does not match directory name "${uuid}"`);
 function deserializeExtension(variant) {
    let res = { metadata: {} };
    for (let prop in variant) {
        let val = variant[prop].unpack();
        if (SERIALIZED_PROPERTIES.includes(prop))
            res[prop] = val;
        else
            res.metadata[prop] = val;
    }
-    // add the 2 additional properties to create a valid extension object, as createExtensionObject()
+
-    res.uuid = res.metadata.uuid;
+    let extension = {};
-    res.dir = Gio.File.new_for_path(res.path);
+
-    return res;
+    extension.metadata = meta;
    extension.uuid = meta.uuid;
    extension.type = type;
    extension.dir = dir;
    extension.path = dir.get_path();
    extension.error = '';
    extension.hasPrefs = dir.get_child('prefs.js').query_exists(null);
    extensions[uuid] = extension;
    return extension;
 }
 function installImporter(extension) {
@@ -237,3 +217,36 @@ function installImporter(extension) {
    extension.imports = imports[extension.uuid];
    imports.searchPath = oldSearchPath;
 }
 var ExtensionFinder = class {
    _loadExtension(extensionDir, info, perUserDir) {
        let fileType = info.get_file_type();
        if (fileType != Gio.FileType.DIRECTORY)
            return;
        let uuid = info.get_name();
        let existing = extensions[uuid];
        if (existing) {
            log('Extension %s already installed in %s. %s will not be loaded'.format(uuid, existing.path, extensionDir.get_path()));
            return;
        }
        let extension;
        let type = extensionDir.has_prefix(perUserDir) ? ExtensionType.PER_USER
                                                       : ExtensionType.SYSTEM;
        try {
            extension = createExtensionObject(uuid, extensionDir, type);
        } catch (e) {
            logError(e, 'Could not load extension %s'.format(uuid));
            return;
        }
        this.emit('extension-found', extension);
    }
    scanExtensions() {
        let perUserDir = Gio.File.new_for_path(global.userdatadir);
        FileUtils.collectFromDatadirs('extensions', true, (dir, info) => {
            this._loadExtension(dir, info, perUserDir);
        });
    }
 };
 Signals.addSignalMethods(ExtensionFinder.prototype);
--- a/js/misc/fileUtils.js
+++ b/js/misc/fileUtils.js
@@ -1,6 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported collectFromDatadirs, recursivelyDeleteDir,
            recursivelyMoveDir, loadInterfaceXML */
 const { Gio, GLib } = imports.gi;
 const Config = imports.misc.config;
@@ -29,6 +27,11 @@ function collectFromDatadirs(subdir, includeUserDir, processFile) {
    }
 }
 function deleteGFile(file) {
    // Work around 'delete' being a keyword in JS.
    return file['delete'](null);
 }
 function recursivelyDeleteDir(dir, deleteParent) {
    let children = dir.enumerate_children('standard::name,standard::type',
                                          Gio.FileQueryInfoFlags.NONE, null);
@@ -38,13 +41,13 @@ function recursivelyDeleteDir(dir, deleteParent) {
        let type = info.get_file_type();
        let child = dir.get_child(info.get_name());
        if (type == Gio.FileType.REGULAR)
-            child.delete(null);
+            deleteGFile(child);
        else if (type == Gio.FileType.DIRECTORY)
            recursivelyDeleteDir(child, true);
    }
    if (deleteParent)
-        dir.delete(null);
+        deleteGFile(dir);
 }
 function recursivelyMoveDir(srcDir, destDir) {
@@ -70,18 +73,18 @@ let _ifaceResource = null;
 function loadInterfaceXML(iface) {
    if (!_ifaceResource) {
        // don't use global.datadir so the method is usable from tests/tools
-        let dir = GLib.getenv('GNOME_SHELL_DATADIR') || Config.PKGDATADIR;
+        let dir = GLib.getenv ('GNOME_SHELL_DATADIR') || Config.PKGDATADIR;
-        let path = `${dir}/gnome-shell-dbus-interfaces.gresource`;
+        let path = dir + '/gnome-shell-dbus-interfaces.gresource';
        _ifaceResource = Gio.Resource.load(path);
        _ifaceResource._register();
    }
    let xml = null;
-    let uri = `resource:///org/gnome/shell/dbus-interfaces/${iface}.xml`;
+    let uri = 'resource:///org/gnome/shell/dbus-interfaces/' + iface + '.xml';
    let f = Gio.File.new_for_uri(uri);
    try {
-        let [ok_, bytes] = f.load_contents(null);
+        let [ok, bytes] = f.load_contents(null);
        if (bytes instanceof Uint8Array)
            xml = imports.byteArray.toString(bytes);
        else
--- a/js/misc/gnomeSession.js
+++ b/js/misc/gnomeSession.js
@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported PresenceStatus, Presence, Inhibitor, SessionManager */
 const Gio = imports.gi.Gio;
@@ -11,7 +10,7 @@ var PresenceStatus = {
    AVAILABLE: 0,
    INVISIBLE: 1,
    BUSY: 2,
-    IDLE: 3,
+    IDLE: 3
 };
 var PresenceProxy = Gio.DBusProxy.makeProxyWrapper(PresenceIface);
--- a/js/misc/history.js
+++ b/js/misc/history.js
@@ -28,7 +28,7 @@ var HistoryManager = class {
        this._entry = params.entry;
        if (this._entry) {
-            this._entry.connect('key-press-event',
+            this._entry.connect('key-press-event', 
                                this._onEntryKeyPress.bind(this));
        }
    }
@@ -82,11 +82,11 @@ var HistoryManager = class {
    _onEntryKeyPress(entry, event) {
        let symbol = event.get_key_symbol();
-        if (symbol == Clutter.KEY_Up)
+        if (symbol == Clutter.KEY_Up) {
            return this._setPrevItem(entry.get_text());
-        else if (symbol == Clutter.KEY_Down)
+        } else if (symbol == Clutter.KEY_Down) {
            return this._setNextItem(entry.get_text());
-
+        }
        return Clutter.EVENT_PROPAGATE;
    }
--- a/js/misc/ibusManager.js
+++ b/js/misc/ibusManager.js
@@ -1,7 +1,7 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported getIBusManager */
 const { Gio, GLib, IBus } = imports.gi;
 const Mainloop = imports.mainloop;
 const Signals = imports.signals;
 const IBusCandidatePopup = imports.ui.ibusCandidatePopup;
@@ -18,9 +18,9 @@ function _checkIBusVersion(requiredMajor, requiredMinor, requiredMicro) {
         IBus.MICRO_VERSION >= requiredMicro))
        return;
-    throw "Found IBus version %d.%d.%d but required is %d.%d.%d"
+    throw "Found IBus version %d.%d.%d but required is %d.%d.%d".
-        .format(IBus.MAJOR_VERSION, IBus.MINOR_VERSION, IBus.MINOR_VERSION,
+        format(IBus.MAJOR_VERSION, IBus.MINOR_VERSION, IBus.MINOR_VERSION,
-                requiredMajor, requiredMinor, requiredMicro);
+               requiredMajor, requiredMinor, requiredMicro);
 }
 function getIBusManager() {
@@ -58,30 +58,16 @@ var IBusManager = class {
        this._spawn();
    }
-    _spawn(extraArgs = []) {
+    _spawn() {
        try {
-            let cmdLine = ['ibus-daemon', '--panel', 'disable', ...extraArgs];
+            Gio.Subprocess.new(['ibus-daemon', '--xim', '--panel', 'disable'],
-            Gio.Subprocess.new(cmdLine, Gio.SubprocessFlags.NONE);
+                               Gio.SubprocessFlags.NONE);
        } catch (e) {
            log(`Failed to launch ibus-daemon: ${e.message}`);
        }
    }
    restartDaemon(extraArgs = []) {
        this._spawn(['-r', ...extraArgs]);
    }
    _clear() {
        if (this._cancellable) {
            this._cancellable.cancel();
            this._cancellable = null;
        }
        if (this._preloadEnginesId) {
            GLib.source_remove(this._preloadEnginesId);
            this._preloadEnginesId = 0;
        }
        if (this._panelService)
            this._panelService.destroy();
@@ -93,44 +79,33 @@ var IBusManager = class {
        this._currentEngineName = null;
        this.emit('ready', false);
        this._spawn();
    }
    _onConnected() {
-        this._cancellable = new Gio.Cancellable();
+        this._ibus.list_engines_async(-1, null, this._initEngines.bind(this));
        this._ibus.list_engines_async(-1, this._cancellable,
            this._initEngines.bind(this));
        this._ibus.request_name_async(IBus.SERVICE_PANEL,
-            IBus.BusNameFlag.REPLACE_EXISTING, -1, this._cancellable,
+                                      IBus.BusNameFlag.REPLACE_EXISTING,
-            this._initPanelService.bind(this));
+                                      -1, null,
                                      this._initPanelService.bind(this));
    }
    _initEngines(ibus, result) {
-        try {
+        let enginesList = this._ibus.list_engines_async_finish(result);
-            let enginesList = this._ibus.list_engines_async_finish(result);
+        if (enginesList) {
            for (let i = 0; i < enginesList.length; ++i) {
                let name = enginesList[i].get_name();
                this._engines.set(name, enginesList[i]);
            }
            this._updateReadiness();
-        } catch (e) {
+        } else {
            if (e.matches(Gio.IOErrorEnum, Gio.IOErrorEnum.CANCELLED))
                return;
            logError(e);
            this._clear();
        }
    }
    _initPanelService(ibus, result) {
-        let success = false;
+        let success = this._ibus.request_name_async_finish(result);
        try {
            success = !!this._ibus.request_name_async_finish(result);
        } catch (e) {
            if (e.matches(Gio.IOErrorEnum, Gio.IOErrorEnum.CANCELLED))
                return;
            logError(e);
        }
        if (success) {
            this._panelService = new IBus.PanelService({ connection: this._ibus.get_connection(),
                                                         object_path: IBus.PATH_PANEL });
@@ -142,7 +117,7 @@ var IBusManager = class {
            });
            this._panelService.connect('focus-in', (panel, path) => {
                if (!GLib.str_has_suffix(path, '/InputContext_1'))
-                    this.emit('focus-in');
+                    this.emit ('focus-in');
            });
            this._panelService.connect('focus-out', () => this.emit('focus-out'));
@@ -157,10 +132,10 @@ var IBusManager = class {
            } catch (e) {
            }
            // If an engine is already active we need to get its properties
-            this._ibus.get_global_engine_async(-1, this._cancellable, (_bus, res) => {
+            this._ibus.get_global_engine_async(-1, null, (i, result) => {
                let engine;
                try {
-                    engine = this._ibus.get_global_engine_async_finish(res);
+                    engine = this._ibus.get_global_engine_async_finish(result);
                    if (!engine)
                        return;
                } catch (e) {
@@ -229,18 +204,8 @@ var IBusManager = class {
            return;
        }
-        this._ibus.set_global_engine_async(id,
+        this._ibus.set_global_engine_async(id, this._MAX_INPUT_SOURCE_ACTIVATION_TIME,
-            this._MAX_INPUT_SOURCE_ACTIVATION_TIME,
+                                           null, callback || null);
            this._cancellable, (_bus, res) => {
                try {
                    this._ibus.set_global_engine_async_finish(res);
                } catch (e) {
                    if (!e.matches(Gio.IOErrorEnum, Gio.IOErrorEnum.CANCELLED))
                        logError(e);
                }
                if (callback)
                    callback();
            });
    }
    preloadEngines(ids) {
@@ -248,23 +213,21 @@ var IBusManager = class {
            return;
        if (this._preloadEnginesId != 0) {
-            GLib.source_remove(this._preloadEnginesId);
+            Mainloop.source_remove(this._preloadEnginesId);
            this._preloadEnginesId = 0;
        }
        this._preloadEnginesId =
-            GLib.timeout_add_seconds(
+            Mainloop.timeout_add_seconds(this._PRELOAD_ENGINES_DELAY_TIME,
-                GLib.PRIORITY_DEFAULT,
+                                         () => {
-                this._PRELOAD_ENGINES_DELAY_TIME,
+                                             this._ibus.preload_engines_async(
-                () => {
+                                                 ids,
-                    this._ibus.preload_engines_async(
+                                                 -1,
-                        ids,
+                                                 null,
-                        -1,
+                                                 null);
-                        this._cancellable,
+                                             this._preloadEnginesId = 0;
-                        null);
+                                             return GLib.SOURCE_REMOVE;
-                    this._preloadEnginesId = 0;
+                                         });
                    return GLib.SOURCE_REMOVE;
                });
    }
 };
 Signals.addSignalMethods(IBusManager.prototype);
--- a/js/misc/inputMethod.js
+++ b/js/misc/inputMethod.js
@@ -1,6 +1,5 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported InputMethod */
+const { Clutter, GLib, GObject, IBus } = imports.gi;
 const { Clutter, GLib, Gio, GObject, IBus } = imports.gi;
 const Keyboard = imports.ui.status.keyboard;
@@ -36,7 +35,15 @@ class InputMethod extends Clutter.InputMethod {
    }
    _updateCapabilities() {
-        let caps = IBus.Capabilite.PREEDIT_TEXT | IBus.Capabilite.FOCUS | IBus.Capabilite.SURROUNDING_TEXT;
+        let caps = 0;
        if (this.can_show_preedit)
            caps |= IBus.Capabilite.PREEDIT_TEXT;
        if (this._currentFocus)
            caps |= IBus.Capabilite.FOCUS | IBus.Capabilite.SURROUNDING_TEXT;
        else
            caps |= IBus.Capabilite.PREEDIT_TEXT | IBus.Capabilite.AUXILIARY_TEXT | IBus.Capabilite.LOOKUP_TABLE | IBus.Capabilite.PROPERTY;
        if (this._context)
            this._context.set_capabilities(caps);
@@ -47,39 +54,23 @@ class InputMethod extends Clutter.InputMethod {
    }
    _onConnected() {
-        this._cancellable = new Gio.Cancellable();
+        this._ibus.create_input_context_async ('gnome-shell', -1, null,
-        this._ibus.create_input_context_async('gnome-shell', -1,
+                                               this._setContext.bind(this));
            this._cancellable, this._setContext.bind(this));
    }
    _setContext(bus, res) {
-        try {
+        this._context = this._ibus.create_input_context_async_finish(res);
            this._context = this._ibus.create_input_context_async_finish(res);
        } catch (e) {
            if (!e.matches(Gio.IOErrorEnum, Gio.IOErrorEnum.CANCELLED)) {
                logError(e);
                this._clear();
            }
            return;
        }
        this._context.connect('commit-text', this._onCommitText.bind(this));
        this._context.connect('delete-surrounding-text', this._onDeleteSurroundingText.bind(this));
        this._context.connect('update-preedit-text', this._onUpdatePreeditText.bind(this));
        this._context.connect('show-preedit-text', this._onShowPreeditText.bind(this));
        this._context.connect('hide-preedit-text', this._onHidePreeditText.bind(this));
        this._context.connect('forward-key-event', this._onForwardKeyEvent.bind(this));
        this._context.connect('destroy', this._clear.bind(this));
        this._updateCapabilities();
    }
    _clear() {
        if (this._cancellable) {
            this._cancellable.cancel();
            this._cancellable = null;
        }
        this._context = null;
        this._hints = 0;
        this._purpose = 0;
@@ -93,15 +84,15 @@ class InputMethod extends Clutter.InputMethod {
            this.emit('request-surrounding');
    }
-    _onCommitText(_context, text) {
+    _onCommitText(context, text) {
        this.commit(text.get_text());
    }
-    _onDeleteSurroundingText() {
+    _onDeleteSurroundingText(context) {
        this.delete_surrounding();
    }
-    _onUpdatePreeditText(_context, text, pos, visible) {
+    _onUpdatePreeditText(context, text, pos, visible) {
        if (text == null)
            return;
@@ -117,19 +108,19 @@ class InputMethod extends Clutter.InputMethod {
        this._preeditVisible = visible;
    }
-    _onShowPreeditText() {
+    _onShowPreeditText(context) {
        this._preeditVisible = true;
        this.set_preedit_text(this._preeditStr, this._preeditPos);
    }
-    _onHidePreeditText() {
+    _onHidePreeditText(context) {
        this.set_preedit_text(null, this._preeditPos);
        this._preeditVisible = false;
    }
-    _onForwardKeyEvent(_context, keyval, keycode, state) {
+    _onForwardKeyEvent(context, keyval, keycode, state) {
        let press = (state & IBus.ModifierType.RELEASE_MASK) == 0;
-        state &= ~IBus.ModifierType.RELEASE_MASK;
+        state &= ~(IBus.ModifierType.RELEASE_MASK);
        let curEvent = Clutter.get_current_event();
        let time;
@@ -145,6 +136,7 @@ class InputMethod extends Clutter.InputMethod {
        this._currentFocus = focus;
        if (this._context) {
            this._context.focus_in();
            this._updateCapabilities();
            this._emitRequestSurrounding();
        }
@@ -156,8 +148,10 @@ class InputMethod extends Clutter.InputMethod {
    vfunc_focus_out() {
        this._currentFocus = null;
-        if (this._context)
+        if (this._context) {
            this._context.focus_out();
            this._updateCapabilities();
        }
        if (this._preeditStr) {
            // Unset any preedit text
@@ -260,22 +254,17 @@ class InputMethod extends Clutter.InputMethod {
        if (event.type() == Clutter.EventType.KEY_RELEASE)
            state |= IBus.ModifierType.RELEASE_MASK;
-        this._context.process_key_event_async(
+        this._context.process_key_event_async(event.get_key_symbol(),
-            event.get_key_symbol(),
+                                              event.get_key_code() - 8, // Convert XKB keycodes to evcodes
-            event.get_key_code() - 8, // Convert XKB keycodes to evcodes
+                                              state, -1, null,
-            state, -1, this._cancellable,
+                                              (context, res) => {
-            (context, res) => {
+                                                  try {
-                if (context != this._context)
+                                                      let retval = context.process_key_event_async_finish(res);
-                    return;
+                                                      this.notify_key_event(event, retval);
-
+                                                  } catch (e) {
-                try {
+                                                      log(`Error processing key on IM: ${e.message}`);
-                    let retval = context.process_key_event_async_finish(res);
+                                                  }
-                    this.notify_key_event(event, retval);
+                                              });
                } catch (e) {
                    if (!e.matches(Gio.IOErrorEnum, Gio.IOErrorEnum.CANCELLED))
                        log(`Error processing key on IM: ${e.message}`);
                }
            });
        return true;
    }
 });
--- a/js/misc/introspect.js
+++ b/js/misc/introspect.js
@@ -1,4 +1,3 @@
 /* exported IntrospectService */
 const { Gio, GLib, Meta, Shell } = imports.gi;
 const INTROSPECT_SCHEMA = 'org.gnome.shell';
@@ -40,15 +39,6 @@ var IntrospectService = class {
                        });
        this._syncRunningApplications();
        this._whitelistMap = new Map();
        APP_WHITELIST.forEach(appName => {
            Gio.DBus.watch_name(Gio.BusType.SESSION,
                appName,
                Gio.BusNameWatcherFlags.NONE,
                (conn, name, owner) => this._whitelistMap.set(name, owner),
                (conn, name) => this._whitelistMap.delete(name));
        });
    }
    _isStandaloneApp(app) {
@@ -60,7 +50,7 @@ var IntrospectService = class {
    }
    _isSenderWhitelisted(sender) {
-        return [...this._whitelistMap.values()].includes(sender);
+        return APP_WHITELIST.includes(sender);
    }
    _getSandboxedAppId(app) {
@@ -79,7 +69,7 @@ var IntrospectService = class {
        for (let app of apps) {
            let appInfo = {};
-            let isAppActive = focusedApp == app;
+            let isAppActive = (focusedApp == app);
            if (!this._isStandaloneApp(app))
                continue;
@@ -113,10 +103,10 @@ var IntrospectService = class {
            return false;
        let type = window.get_window_type();
-        return type == Meta.WindowType.NORMAL ||
+        return (type == Meta.WindowType.NORMAL ||
                type == Meta.WindowType.DIALOG ||
                type == Meta.WindowType.MODAL_DIALOG ||
-                type == Meta.WindowType.UTILITY;
+                type == Meta.WindowType.UTILITY);
    }
    GetRunningApplicationsAsync(params, invocation) {
@@ -136,8 +126,7 @@ var IntrospectService = class {
        let apps = this._appSystem.get_running();
        let windowsList = {};
-        if (!this._isIntrospectEnabled() &&
+        if (!this._isIntrospectEnabled()) {
            !this._isSenderWhitelisted(invocation.get_sender())) {
            invocation.return_error_literal(Gio.DBusError,
                                            Gio.DBusError.ACCESS_DENIED,
                                            'App introspection not allowed');
@@ -161,9 +150,9 @@ var IntrospectService = class {
                    'app-id': GLib.Variant.new('s', app.get_id()),
                    'client-type': GLib.Variant.new('u', window.get_client_type()),
                    'is-hidden': GLib.Variant.new('b', window.is_hidden()),
-                    'has-focus': GLib.Variant.new('b', window == focusWindow),
+                    'has-focus': GLib.Variant.new('b', (window == focusWindow)),
                    'width': GLib.Variant.new('u', frameRect.width),
-                    'height': GLib.Variant.new('u', frameRect.height),
+                    'height': GLib.Variant.new('u', frameRect.height)
                };
                // These properties may not be available for all windows:
@@ -173,10 +162,9 @@ var IntrospectService = class {
                if (wmClass != null)
                    windowsList[windowId]['wm-class'] = GLib.Variant.new('s', wmClass);
-                if (sandboxedAppId != null) {
+                if (sandboxedAppId != null)
                    windowsList[windowId]['sandboxed-app-id'] =
                        GLib.Variant.new('s', sandboxedAppId);
                }
            }
        }
        invocation.return_value(new GLib.Variant('(a{ta{sv}})', [windowsList]));
--- a/js/misc/jsParse.js
+++ b/js/misc/jsParse.js
@@ -1,5 +1,4 @@
 /* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */
 /* exported getCompletions, getCommonPrefix, getDeclaredConstants */
 // Returns a list of potential completions for text. Completions either
 // follow a dot (e.g. foo.ba -> bar) or they are picked from globalCompletionList (e.g. fo -> foo)
@@ -9,10 +8,11 @@
 // This function is likely the one you want to call from external modules
 function getCompletions(text, commandHeader, globalCompletionList) {
    let methods = [];
-    let expr_, base;
+    let expr, base;
    let attrHead = '';
-    if (globalCompletionList == null)
+    if (globalCompletionList == null) {
        globalCompletionList = [];
    }
    let offset = getExpressionOffset(text, text.length - 1);
    if (offset >= 0) {
@@ -21,7 +21,7 @@ function getCompletions(text, commandHeader, globalCompletionList) {
        // Look for expressions like "Main.panel.foo" and match Main.panel and foo
        let matches = text.match(/(.*)\.(.*)/);
        if (matches) {
-            [expr_, base, attrHead] = matches;
+            [expr, base, attrHead] = matches;
            methods = getPropertyNamesFromExpression(base, commandHeader).filter(
                attr => attr.slice(0, attrHead.length) == attrHead
@@ -32,7 +32,7 @@ function getCompletions(text, commandHeader, globalCompletionList) {
        // not proceeded by a dot and match them against global constants
        matches = text.match(/^(\w*)$/);
        if (text == '' || matches) {
-            [expr_, attrHead] = matches;
+            [expr, attrHead] = matches;
            methods = globalCompletionList.filter(
                attr => attr.slice(0, attrHead.length) == attrHead
            );
@@ -58,8 +58,9 @@ function isStopChar(c) {
 function findMatchingQuote(expr, offset) {
    let quoteChar = expr.charAt(offset);
    for (let i = offset - 1; i >= 0; --i) {
-        if (expr.charAt(i) == quoteChar && expr.charAt(i - 1) != '\\')
+        if (expr.charAt(i) == quoteChar && expr.charAt(i - 1) != '\\') {
            return i;
        }
    }
    return -1;
 }
@@ -67,8 +68,9 @@ function findMatchingQuote(expr, offset) {
 // Given the ending position of a regex, find where it starts
 function findMatchingSlash(expr, offset) {
    for (let i = offset - 1; i >= 0; --i) {
-        if (expr.charAt(i) == '/' && expr.charAt(i - 1) != '\\')
+        if (expr.charAt(i) == '/' && expr.charAt(i - 1) != '\\') {
            return i;
        }
    }
    return -1;
 }
@@ -79,30 +81,31 @@ function findMatchingSlash(expr, offset) {
 // findMatchingBrace("[(])", 3) returns 1.
 function findMatchingBrace(expr, offset) {
    let closeBrace = expr.charAt(offset);
-    let openBrace = { ')': '(', ']': '[' }[closeBrace];
+    let openBrace = ({ ')': '(', ']': '[' })[closeBrace];
-    return findTheBrace(expr, offset - 1, openBrace, closeBrace);
+    function findTheBrace(expr, offset) {
-}
+        if (offset < 0) {
            return -1;
        }
-function findTheBrace(expr, offset, ...braces) {
+        if (expr.charAt(offset) == openBrace) {
-    let [openBrace, closeBrace] = braces;
+            return offset;
        }
        if (expr.charAt(offset).match(/['"]/)) {
            return findTheBrace(expr, findMatchingQuote(expr, offset) - 1);
        }
        if (expr.charAt(offset) == '/') {
            return findTheBrace(expr, findMatchingSlash(expr, offset) - 1);
        }
        if (expr.charAt(offset) == closeBrace) {
            return findTheBrace(expr, findTheBrace(expr, offset - 1) - 1);
        }
-    if (offset < 0)
+        return findTheBrace(expr, offset - 1);
        return -1;
-    if (expr.charAt(offset) == openBrace)
+    }
        return offset;
-    if (expr.charAt(offset).match(/['"]/))
+    return findTheBrace(expr, offset - 1);
        return findTheBrace(expr, findMatchingQuote(expr, offset) - 1, ...braces);
    if (expr.charAt(offset) == '/')
        return findTheBrace(expr, findMatchingSlash(expr, offset) - 1, ...braces);
    if (expr.charAt(offset) == closeBrace)
        return findTheBrace(expr, findTheBrace(expr, offset - 1, ...braces) - 1, ...braces);
    return findTheBrace(expr, offset - 1, ...braces);
 }
 // Walk expr backwards from offset looking for the beginning of an
@@ -114,11 +117,13 @@ function getExpressionOffset(expr, offset) {
    while (offset >= 0) {
        let currChar = expr.charAt(offset);
-        if (isStopChar(currChar))
+        if (isStopChar(currChar)) {
            return offset + 1;
        }
-        if (currChar.match(/[)\]]/))
+        if (currChar.match(/[)\]]/)) {
            offset = findMatchingBrace(expr, offset);
        }
        --offset;
    }
@@ -135,10 +140,10 @@ function isValidPropertyName(w) {
 // To get all properties (enumerable and not), we need to walk
 // the prototype chain ourselves
 function getAllProps(obj) {
-    if (obj === null || obj === undefined)
+    if (obj === null || obj === undefined) {
        return [];
-
+    }
-    return Object.getOwnPropertyNames(obj).concat(getAllProps(Object.getPrototypeOf(obj)));
+    return Object.getOwnPropertyNames(obj).concat( getAllProps(Object.getPrototypeOf(obj)) );
 }
 // Given a string _expr_, returns all methods
@@ -162,11 +167,11 @@ function getPropertyNamesFromExpression(expr, commandHeader = '') {
    if (typeof obj === 'object') {
        let allProps = getAllProps(obj);
        // Get only things we are allowed to complete following a '.'
-        allProps = allProps.filter(isValidPropertyName);
+        allProps = allProps.filter( isValidPropertyName );
        // Make sure propsUnique contains one key for every
        // property so we end up with a unique list of properties
-        allProps.map(p => (propsUnique[p] = null));
+        allProps.map(p => propsUnique[p] = null);
    }
    return Object.keys(propsUnique).sort();
 }
@@ -183,26 +188,24 @@ function getCommonPrefix(words) {
    return word;
 }
 // Remove any blocks that are quoted or are in a regex
 function removeLiterals(str) {
    if (str.length == 0)
        return '';
    let currChar = str.charAt(str.length - 1);
    if (currChar == '"' || currChar == '\'') {
        return removeLiterals(
            str.slice(0, findMatchingQuote(str, str.length - 1)));
    } else if (currChar == '/') {
        return removeLiterals(
            str.slice(0, findMatchingSlash(str, str.length - 1)));
    }
    return removeLiterals(str.slice(0, str.length - 1)) + currChar;
 }
 // Returns true if there is reason to think that eval(str)
 // will modify the global scope
 function isUnsafeExpression(str) {
    // Remove any blocks that are quoted or are in a regex
    function removeLiterals(str) {
        if (str.length == 0) {
            return '';
        }
        let currChar = str.charAt(str.length - 1);
        if (currChar == '"' || currChar == '\'') {
            return removeLiterals(str.slice(0, findMatchingQuote(str, str.length - 1)));
        } else if (currChar == '/') {
            return removeLiterals(str.slice(0, findMatchingSlash(str, str.length - 1)));
        }
        return removeLiterals(str.slice(0, str.length - 1)) + currChar;
    }
    // Check for any sort of assignment
    // The strategy used is dumb: remove any quotes
@@ -210,10 +213,10 @@ function isUnsafeExpression(str) {
    // If there is, it might be an unsafe assignment.
    let prunedStr = removeLiterals(str);
-    prunedStr = prunedStr.replace(/[=!]==/g, '');    // replace === and !== with nothing
+    prunedStr = prunedStr.replace(/[=!]==/g, '');    //replace === and !== with nothing
-    prunedStr = prunedStr.replace(/[=<>!]=/g, '');    // replace ==, <=, >=, != with nothing
+    prunedStr = prunedStr.replace(/[=<>!]=/g, '');    //replace ==, <=, >=, != with nothing
-    if (prunedStr.match(/[=]/)) {
+    if (prunedStr.match(/=/)) {
        return true;
    } else if (prunedStr.match(/;/)) {
        // If we contain a semicolon not inside of a quote/regex, assume we're unsafe as well
@@ -227,10 +230,10 @@ function isUnsafeExpression(str) {
 function getDeclaredConstants(str) {
    let ret = [];
    str.split(';').forEach(s => {
-        let base_, keyword;
+        let base, keyword;
        let match = s.match(/const\s+(\w+)\s*=/);
        if (match) {
-            [base_, keyword] = match;
+            [base, keyword] = match;
            ret.push(keyword);
        }
    });
--- a/js/misc/keyboardManager.js
+++ b/js/misc/keyboardManager.js
@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported getKeyboardManager, holdKeyboard, releaseKeyboard */
 const { GLib, GnomeDesktop, Meta } = imports.gi;
--- a/js/misc/loginManager.js
+++ b/js/misc/loginManager.js
@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported canLock, getLoginManager, registerSessionWithGDM */
 const { GLib, Gio } = imports.gi;
 const Signals = imports.signals;
@@ -74,9 +73,8 @@ function registerSessionWithGDM() {
 let _loginManager = null;
 /**
- * getLoginManager:
+ * LoginManager:
 * An abstraction over systemd/logind and ConsoleKit.
 * @returns {object} - the LoginManager singleton
 *
 */
 function getLoginManager() {
@@ -104,7 +102,7 @@ var LoginManagerSystemd = class {
    getCurrentSessionProxy(callback) {
        if (this._currentSession) {
-            callback(this._currentSession);
+            callback (this._currentSession);
            return;
        }
@@ -118,7 +116,7 @@ var LoginManagerSystemd = class {
            } else {
                log('Failed to find "Display" session; are we the greeter?');
-                for ([session, objectPath] of this._userProxy.Sessions) {
+                for (let [session, objectPath] of this._userProxy.Sessions) {
                    let sessionProxy = new SystemdLoginSession(Gio.DBus.system,
                                                               'org.freedesktop.login1',
                                                               objectPath);
@@ -184,9 +182,9 @@ var LoginManagerSystemd = class {
            (proxy, result) => {
                let fd = -1;
                try {
-                    let [outVariant_, fdList] = proxy.call_with_unix_fd_list_finish(result);
+                    let [outVariant, fdList] = proxy.call_with_unix_fd_list_finish(result);
                    fd = fdList.steal_fds()[0];
-                    callback(new Gio.UnixInputStream({ fd }));
+                    callback(new Gio.UnixInputStream({ fd: fd }));
                } catch (e) {
                    logError(e, "Error getting systemd inhibitor");
                    callback(null);
@@ -201,7 +199,7 @@ var LoginManagerSystemd = class {
 Signals.addSignalMethods(LoginManagerSystemd.prototype);
 var LoginManagerDummy = class {
-    getCurrentSessionProxy(_callback) {
+    getCurrentSessionProxy(callback) {
        // we could return a DummySession object that fakes whatever callers
        // expect (at the time of writing: connect() and connectSignal()
        // methods), but just never calling the callback should be safer
--- a/js/misc/modemManager.js
+++ b/js/misc/modemManager.js
@@ -1,7 +1,7 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported ModemBase, ModemGsm, ModemCdma, BroadbandModem  */
-const { Gio, GObject, NM, NMA } = imports.gi;
+const { Gio, NMA } = imports.gi;
 const Signals = imports.signals;
 const { loadInterfaceXML } = imports.misc.fileUtils;
@@ -84,9 +84,9 @@ function _findProviderForSid(sid) {
 }
-// ----------------------------------------------------- //
+//------------------------------------------------------------------------------
-// Support for the old ModemManager interface (MM < 0.7) //
+// Support for the old ModemManager interface (MM < 0.7)
-// ----------------------------------------------------- //
+//------------------------------------------------------------------------------
 // The following are not the complete interfaces, just the methods we need
@@ -98,46 +98,21 @@ const ModemGsmNetworkProxy = Gio.DBusProxy.makeProxyWrapper(ModemGsmNetworkInter
 const ModemCdmaInterface = loadInterfaceXML('org.freedesktop.ModemManager.Modem.Cdma');
 const ModemCdmaProxy = Gio.DBusProxy.makeProxyWrapper(ModemCdmaInterface);
-var ModemBase = GObject.registerClass({
+var ModemGsm = class {
-    GTypeFlags: GObject.TypeFlags.ABSTRACT,
+    constructor(path) {
    Properties: {
        'operator-name': GObject.ParamSpec.string(
            'operator-name', 'operator-name', 'operator-name',
            GObject.ParamFlags.READABLE,
            null),
        'signal-quality': GObject.ParamSpec.int(
            'signal-quality', 'signal-quality', 'signal-quality',
            GObject.ParamFlags.READABLE,
            0, 100, 0),
    },
 }, class ModemBase extends GObject.Object {
    _setOperatorName(operatorName) {
        if (this.operator_name == operatorName)
            return;
        this.operator_name = operatorName;
        this.notify('operator-name');
    }
    _setSignalQuality(signalQuality) {
        if (this.signal_quality == signalQuality)
            return;
        this.signal_quality = signalQuality;
        this.notify('signal-quality');
    }
 });
 var ModemGsm = GObject.registerClass(
 class ModemGsm extends ModemBase {
    _init(path) {
        super._init();
        this._proxy = new ModemGsmNetworkProxy(Gio.DBus.system, 'org.freedesktop.ModemManager', path);
        this.signal_quality = 0;
        this.operator_name = null;
        // Code is duplicated because the function have different signatures
        this._proxy.connectSignal('SignalQuality', (proxy, sender, [quality]) => {
-            this._setSignalQuality(quality);
+            this.signal_quality = quality;
            this.emit('notify::signal-quality');
        });
-        this._proxy.connectSignal('RegistrationInfo', (proxy, sender, [_status, code, name]) => {
+        this._proxy.connectSignal('RegistrationInfo', (proxy, sender, [status, code, name]) => {
-            this._setOperatorName(_findProviderForMccMnc(name, code));
+            this.operator_name = _findProviderForMccMnc(name, code);
            this.emit('notify::operator-name');
        });
        this._proxy.GetRegistrationInfoRemote(([result], err) => {
            if (err) {
@@ -145,29 +120,33 @@ class ModemGsm extends ModemBase {
                return;
            }
-            let [status_, code, name] = result;
+            let [status, code, name] = result;
-            this._setOperatorName(_findProviderForMccMnc(name, code));
+            this.operator_name = _findProviderForMccMnc(name, code);
            this.emit('notify::operator-name');
        });
        this._proxy.GetSignalQualityRemote((result, err) => {
            if (err) {
                // it will return an error if the device is not connected
-                this._setSignalQuality(0);
+                this.signal_quality = 0;
            } else {
                let [quality] = result;
-                this._setSignalQuality(quality);
+                this.signal_quality = quality;
            }
            this.emit('notify::signal-quality');
        });
    }
-});
+};
 Signals.addSignalMethods(ModemGsm.prototype);
-var ModemCdma = GObject.registerClass(
+var ModemCdma = class {
-class ModemCdma extends ModemBase {
+    constructor(path) {
    _init(path) {
        super._init();
        this._proxy = new ModemCdmaProxy(Gio.DBus.system, 'org.freedesktop.ModemManager', path);
        this.signal_quality = 0;
        this.operator_name = null;
        this._proxy.connectSignal('SignalQuality', (proxy, sender, params) => {
-            this._setSignalQuality(params[0]);
+            this.signal_quality = params[0];
            this.emit('notify::signal-quality');
            // receiving this signal means the device got activated
            // and we can finally call GetServingSystem
@@ -177,11 +156,12 @@ class ModemCdma extends ModemBase {
        this._proxy.GetSignalQualityRemote((result, err) => {
            if (err) {
                // it will return an error if the device is not connected
-                this._setSignalQuality(0);
+                this.signal_quality = 0;
            } else {
                let [quality] = result;
-                this._setSignalQuality(quality);
+                this.signal_quality = quality;
            }
            this.emit('notify::signal-quality');
        });
    }
@@ -189,19 +169,22 @@ class ModemCdma extends ModemBase {
        this._proxy.GetServingSystemRemote(([result], err) => {
            if (err) {
                // it will return an error if the device is not connected
-                this._setOperatorName(null);
+                this.operator_name = null;
            } else {
-                let [bandClass_, band_, sid] = result;
+                let [bandClass, band, sid] = result;
-                this._setOperatorName(_findProviderForSid(sid));
+
                this.operator_name = _findProviderForSid(sid);
            }
            this.emit('notify::operator-name');
        });
    }
-});
+};
 Signals.addSignalMethods(ModemCdma.prototype);
-// ------------------------------------------------------- //
+//------------------------------------------------------------------------------
-// Support for the new ModemManager1 interface (MM >= 0.7) //
+// Support for the new ModemManager1 interface (MM >= 0.7)
-// ------------------------------------------------------- //
+//------------------------------------------------------------------------------
 const BroadbandModemInterface = loadInterfaceXML('org.freedesktop.ModemManager1.Modem');
 const BroadbandModemProxy = Gio.DBusProxy.makeProxyWrapper(BroadbandModemInterface);
@@ -212,20 +195,12 @@ const BroadbandModem3gppProxy = Gio.DBusProxy.makeProxyWrapper(BroadbandModem3gp
 const BroadbandModemCdmaInterface = loadInterfaceXML('org.freedesktop.ModemManager1.Modem.ModemCdma');
 const BroadbandModemCdmaProxy = Gio.DBusProxy.makeProxyWrapper(BroadbandModemCdmaInterface);
-var BroadbandModem = GObject.registerClass({
+var BroadbandModem = class {
-    Properties: {
+    constructor(path, capabilities) {
-        'capabilities': GObject.ParamSpec.flags(
+        this._proxy = new BroadbandModemProxy(Gio.DBus.system, 'org.freedesktop.ModemManager1', path);
            'capabilities', 'capabilities', 'capabilities',
            GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT_ONLY,
            NM.DeviceModemCapabilities.$gtype,
            NM.DeviceModemCapabilities.NONE),
    },
 }, class BroadbandModem extends ModemBase {
    _init(path, capabilities) {
        super._init({ capabilities });
        this._proxy = new BroadbandModemProxy(Gio.DBus.system, 'org.freedesktop.ModemManager', path);
        this._proxy_3gpp = new BroadbandModem3gppProxy(Gio.DBus.system, 'org.freedesktop.ModemManager1', path);
        this._proxy_cdma = new BroadbandModemCdmaProxy(Gio.DBus.system, 'org.freedesktop.ModemManager1', path);
        this._capabilities = capabilities;
        this._proxy.connect('g-properties-changed', (proxy, properties) => {
            if ('SignalQuality' in properties.deep_unpack())
@@ -249,8 +224,9 @@ var BroadbandModem = GObject.registerClass({
    }
    _reloadSignalQuality() {
-        let [quality, recent_] = this.SignalQuality;
+        let [quality, recent] = this._proxy.SignalQuality;
-        this._setSignalQuality(quality);
+        this.signal_quality = quality;
        this.emit('notify::signal-quality');
    }
    _reloadOperatorName() {
@@ -264,7 +240,8 @@ var BroadbandModem = GObject.registerClass({
            newName += this.operator_name_cdma;
        }
-        this._setOperatorName(newName);
+        this.operator_name = newName;
        this.emit('notify::operator-name');
    }
    _reload3gppOperatorName() {
@@ -279,4 +256,5 @@ var BroadbandModem = GObject.registerClass({
        this.operator_name_cdma = _findProviderForSid(sid);
        this._reloadOperatorName();
    }
-});
+};
 Signals.addSignalMethods(BroadbandModem.prototype);
--- a/js/misc/objectManager.js
+++ b/js/misc/objectManager.js
@@ -192,8 +192,9 @@ var ObjectManager = class {
    _onNameAppeared() {
        this._managerProxy.GetManagedObjectsRemote((result, error) => {
            if (!result) {
-                if (error)
+                if (error) {
                    logError(error, `could not get remote objects for service ${this._serviceName} path ${this._managerPath}`);
                }
                this._tryToCompleteLoad();
                return;
--- a/js/misc/params.js
+++ b/js/misc/params.js
@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported parse */
 // parse:
 // @params: caller-provided parameter object, or %null
@@ -17,10 +16,9 @@
 // @params and @defaults
 function parse(params = {}, defaults, allowExtras) {
    if (!allowExtras) {
-        for (let prop in params) {
+        for (let prop in params)
            if (!(prop in defaults))
                throw new Error(`Unrecognized parameter "${prop}"`);
        }
    }
    let defaultsCopy = Object.assign({}, defaults);
--- a/js/misc/permissionStore.js
+++ b/js/misc/permissionStore.js
@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported PermissionStore */
 const Gio = imports.gi.Gio;
--- a/js/misc/smartcardManager.js
+++ b/js/misc/smartcardManager.js
@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported getSmartcardManager */
 const Gio = imports.gi.Gio;
 const Signals = imports.signals;
@@ -72,10 +71,11 @@ var SmartcardManager = class {
            if ('IsInserted' in properties.deep_unpack()) {
                this._updateToken(token);
-                if (token.IsInserted)
+                if (token.IsInserted) {
                    this.emit('smartcard-inserted', token);
-                else
+                } else {
                    this.emit('smartcard-removed', token);
                }
            }
        });
--- a/js/misc/systemActions.js
+++ b/js/misc/systemActions.js
@@ -1,4 +1,3 @@
 /* exported getDefault */
 const { AccountsService, Clutter, Gdm, Gio, GLib, GObject, Meta } = imports.gi;
 const GnomeSession = imports.misc.gnomeSession;
@@ -74,8 +73,8 @@ const SystemActions = GObject.registerClass({
                                                          'orientation-lock-icon',
                                                          'orientation-lock-icon',
                                                          GObject.ParamFlags.READWRITE,
-                                                          null),
+                                                          null)
-    },
+    }
 }, class SystemActions extends GObject.Object {
    _init() {
        super._init();
@@ -90,7 +89,7 @@ const SystemActions = GObject.registerClass({
            iconName: 'system-shutdown-symbolic',
            // Translators: A list of keywords that match the power-off action, separated by semicolons
            keywords: _("power off;shutdown;reboot;restart").split(/[; ]/),
-            available: false,
+            available: false
        });
        this._actions.set(LOCK_SCREEN_ACTION_ID, {
            // Translators: The name of the lock screen action in search
@@ -98,7 +97,7 @@ const SystemActions = GObject.registerClass({
            iconName: 'system-lock-screen-symbolic',
            // Translators: A list of keywords that match the lock screen action, separated by semicolons
            keywords: _("lock screen").split(/[; ]/),
-            available: false,
+            available: false
        });
        this._actions.set(LOGOUT_ACTION_ID, {
            // Translators: The name of the logout action in search
@@ -106,7 +105,7 @@ const SystemActions = GObject.registerClass({
            iconName: 'application-exit-symbolic',
            // Translators: A list of keywords that match the logout action, separated by semicolons
            keywords: _("logout;log out;sign off").split(/[; ]/),
-            available: false,
+            available: false
        });
        this._actions.set(SUSPEND_ACTION_ID, {
            // Translators: The name of the suspend action in search
@@ -114,7 +113,7 @@ const SystemActions = GObject.registerClass({
            iconName: 'media-playback-pause-symbolic',
            // Translators: A list of keywords that match the suspend action, separated by semicolons
            keywords: _("suspend;sleep").split(/[; ]/),
-            available: false,
+            available: false
        });
        this._actions.set(SWITCH_USER_ACTION_ID, {
            // Translators: The name of the switch user action in search
@@ -122,7 +121,7 @@ const SystemActions = GObject.registerClass({
            iconName: 'system-switch-user-symbolic',
            // Translators: A list of keywords that match the switch user action, separated by semicolons
            keywords: _("switch user").split(/[; ]/),
-            available: false,
+            available: false
        });
        this._actions.set(LOCK_ORIENTATION_ACTION_ID, {
            // Translators: The name of the lock orientation action in search
@@ -130,7 +129,7 @@ const SystemActions = GObject.registerClass({
            iconName: '',
            // Translators: A list of keywords that match the lock orientation action, separated by semicolons
            keywords: _("lock orientation;screen;rotation").split(/[; ]/),
-            available: false,
+            available: false
        });
        this._loginScreenSettings = new Gio.Settings({ schema_id: LOGIN_SCREEN_SCHEMA });
@@ -174,21 +173,13 @@ const SystemActions = GObject.registerClass({
                                          });
        Main.layoutManager.connect('monitors-changed',
                                   () => this._updateOrientationLock());
-        this._sensorProxy = new SensorProxy(Gio.DBus.system,
+        Gio.DBus.system.watch_name(SENSOR_BUS_NAME,
-            SENSOR_BUS_NAME,
+                                   Gio.BusNameWatcherFlags.NONE,
-            SENSOR_OBJECT_PATH,
+                                   () => this._sensorProxyAppeared(),
-            (proxy, error)  => {
+                                   () => {
-                if (error)
+                                       this._sensorProxy = null;
-                    log(error.message);
+                                       this._updateOrientationLock();
-            },
+                                   });
            null,
            Gio.DBusProxyFlags.DO_NOT_AUTO_START);
        this._sensorProxy.connect('g-properties-changed', () => {
            this._updateOrientationLock();
        });
        this._sensorProxy.connect('notify::g-name-owner', () => {
            this._updateOrientationLock();
        });
        this._updateOrientationLock();
        this._updateOrientationLockIcon();
@@ -196,47 +187,52 @@ const SystemActions = GObject.registerClass({
        this._sessionUpdated();
    }
    // eslint-disable-next-line camelcase
    get can_power_off() {
        return this._actions.get(POWER_OFF_ACTION_ID).available;
    }
    // eslint-disable-next-line camelcase
    get can_suspend() {
        return this._actions.get(SUSPEND_ACTION_ID).available;
    }
    // eslint-disable-next-line camelcase
    get can_lock_screen() {
        return this._actions.get(LOCK_SCREEN_ACTION_ID).available;
    }
    // eslint-disable-next-line camelcase
    get can_switch_user() {
        return this._actions.get(SWITCH_USER_ACTION_ID).available;
    }
    // eslint-disable-next-line camelcase
    get can_logout() {
        return this._actions.get(LOGOUT_ACTION_ID).available;
    }
    // eslint-disable-next-line camelcase
    get can_lock_orientation() {
        return this._actions.get(LOCK_ORIENTATION_ACTION_ID).available;
    }
    // eslint-disable-next-line camelcase
    get orientation_lock_icon() {
        return this._actions.get(LOCK_ORIENTATION_ACTION_ID).iconName;
    }
    _sensorProxyAppeared() {
        this._sensorProxy = new SensorProxy(Gio.DBus.system, SENSOR_BUS_NAME, SENSOR_OBJECT_PATH,
            (proxy, error)  => {
                if (error) {
                    log(error.message);
                    return;
                }
                this._sensorProxy.connect('g-properties-changed',
                                          () => this._updateOrientationLock());
                this._updateOrientationLock();
            });
    }
    _updateOrientationLock() {
        let available = false;
-        if (this._sensorProxy.g_name_owner) {
+        if (this._sensorProxy)
            available = this._sensorProxy.HasAccelerometer &&
                        this._monitorManager.get_is_builtin_display_on();
        }
        this._actions.get(LOCK_ORIENTATION_ACTION_ID).available = available;
@@ -245,9 +241,8 @@ const SystemActions = GObject.registerClass({
    _updateOrientationLockIcon() {
        let locked = this._orientationSettings.get_boolean('orientation-lock');
-        let iconName = locked
+        let iconName = locked ? 'rotation-locked-symbolic'
-            ? 'rotation-locked-symbolic'
+                              : 'rotation-allowed-symbolic';
            : 'rotation-allowed-symbolic';
        this._actions.get(LOCK_ORIENTATION_ACTION_ID).iconName = iconName;
        this.notify('orientation-lock-icon');
@@ -270,14 +265,13 @@ const SystemActions = GObject.registerClass({
    getMatchingActions(terms) {
        // terms is a list of strings
-        terms = terms.map(term => term.toLowerCase());
+        terms = terms.map((term) => term.toLowerCase());
        let results = [];
-        for (let [key, { available, keywords }] of this._actions) {
+        for (let [key, { available, keywords }] of this._actions)
            if (available && terms.every(t => keywords.some(k => k.startsWith(t))))
                results.push(key);
        }
        return results;
    }
--- a/js/misc/util.js
+++ b/js/misc/util.js
@@ -1,20 +1,20 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported findUrls, spawn, spawnCommandLine, spawnApp, trySpawnCommandLine,
            formatTime, formatTimeSpan, createTimeLabel, insertSorted,
            makeCloseButton, ensureActorVisibleInScrollView, wiggle */
-const { Clutter, Gio, GLib, GObject, Shell, St, GnomeDesktop } = imports.gi;
+const { Clutter, Gio, GLib, GObject, Shell, St } = imports.gi;
 const Gettext = imports.gettext;
 const Mainloop = imports.mainloop;
 const Signals = imports.signals;
 const Main = imports.ui.main;
 const Tweener = imports.ui.tweener;
 const Params = imports.misc.params;
-var SCROLL_TIME = 100;
+var SCROLL_TIME = 0.1;
 // http://daringfireball.net/2010/07/improved_regex_for_matching_urls
 const _balancedParens = '\\([^\\s()<>]+\\)';
 const _leadingJunk = '[\\s`(\\[{\'\\"<\u00AB\u201C\u2018]';
-const _notTrailingJunk = '[^\\s`!()\\[\\]{};:\'\\".,<>?\u00AB\u00BB\u200E\u200F\u201C\u201D\u2018\u2019\u202A\u202C]';
+const _notTrailingJunk = '[^\\s`!()\\[\\]{};:\'\\".,<>?\u00AB\u00BB\u201C\u201D\u2018\u2019]';
 const _urlRegexp = new RegExp(
    `(^|${_leadingJunk})` +
@@ -75,7 +75,7 @@ function spawn(argv) {
 // occur when trying to parse or start the program.
 function spawnCommandLine(commandLine) {
    try {
-        let [success_, argv] = GLib.shell_parse_argv(commandLine);
+        let [success, argv] = GLib.shell_parse_argv(commandLine);
        trySpawn(argv);
    } catch (err) {
        _handleSpawnError(commandLine, err);
@@ -104,11 +104,11 @@ function spawnApp(argv) {
 // Runs @argv in the background. If launching @argv fails,
 // this will throw an error.
 function trySpawn(argv) {
-    var success_, pid;
+    var success, pid;
    try {
-        [success_, pid] = GLib.spawn_async(null, argv, null,
+        [success, pid] = GLib.spawn_async(null, argv, null,
-                                           GLib.SpawnFlags.SEARCH_PATH | GLib.SpawnFlags.DO_NOT_REAP_CHILD,
+                                          GLib.SpawnFlags.SEARCH_PATH | GLib.SpawnFlags.DO_NOT_REAP_CHILD,
-                                           null);
+                                          null);
    } catch (err) {
        /* Rewrite the error in case of ENOENT */
        if (err.matches(GLib.SpawnError, GLib.SpawnError.NOENT)) {
@@ -121,15 +121,12 @@ function trySpawn(argv) {
            // We are only interested in the part in the parentheses. (And
            // we can't pattern match the text, since it gets localized.)
            let message = err.message.replace(/.*\((.+)\)/, '$1');
-            throw new err.constructor({ code: err.code, message });
+            throw new (err.constructor)({ code: err.code,
                                          message: message });
        } else {
            throw err;
        }
    }
    // Async call, we don't need the reply though
    GnomeDesktop.start_systemd_scope(argv[0], pid, null, null, null, () => {});
    // Dummy child watch; we don't want to double-fork internally
    // because then we lose the parent-child relationship, which
    // can break polkit.  See https://bugzilla.redhat.com//show_bug.cgi?id=819275
@@ -142,10 +139,10 @@ function trySpawn(argv) {
 // Runs @commandLine in the background. If launching @commandLine
 // fails, this will throw an error.
 function trySpawnCommandLine(commandLine) {
-    let success_, argv;
+    let success, argv;
    try {
-        [success_, argv] = GLib.shell_parse_argv(commandLine);
+        [success, argv] = GLib.shell_parse_argv(commandLine);
    } catch (err) {
        // Replace "Error invoking GLib.shell_parse_argv: " with
        // something nicer
@@ -175,28 +172,23 @@ function formatTimeSpan(date) {
    if (minutesAgo < 5)
        return _("Just now");
-    if (hoursAgo < 1) {
+    if (hoursAgo < 1)
        return Gettext.ngettext("%d minute ago",
                                "%d minutes ago", minutesAgo).format(minutesAgo);
-    }
+    if (daysAgo < 1)
    if (daysAgo < 1) {
        return Gettext.ngettext("%d hour ago",
                                "%d hours ago", hoursAgo).format(hoursAgo);
    }
    if (daysAgo < 2)
        return _("Yesterday");
-    if (daysAgo < 15) {
+    if (daysAgo < 15)
        return Gettext.ngettext("%d day ago",
                                "%d days ago", daysAgo).format(daysAgo);
-    }
+    if (weeksAgo < 8)
    if (weeksAgo < 8) {
        return Gettext.ngettext("%d week ago",
                                "%d weeks ago", weeksAgo).format(weeksAgo);
-    }
+    if (yearsAgo < 1)
    if (yearsAgo < 1) {
        return Gettext.ngettext("%d month ago",
                                "%d months ago", monthsAgo).format(monthsAgo);
    }
    return Gettext.ngettext("%d year ago",
                            "%d years ago", yearsAgo).format(yearsAgo);
 }
@@ -221,10 +213,7 @@ function formatTime(time, params) {
        _desktopSettings = new Gio.Settings({ schema_id: 'org.gnome.desktop.interface' });
    let clockFormat = _desktopSettings.get_string('clock-format');
-    params = Params.parse(params, {
+    params = Params.parse(params, { timeOnly: false });
        timeOnly: false,
        ampm: true,
    });
    if (clockFormat == '24h') {
        // Show only the time if date is on today
@@ -257,7 +246,7 @@ function formatTime(time, params) {
            format = N_("%B %-d %Y, %H\u2236%M");
    } else {
        // Show only the time if date is on today
-        if (daysAgo < 1 || params.timeOnly) // eslint-disable-line no-lonely-if
+        if (daysAgo < 1 || params.timeOnly)
            /* Translators: Time in 12h format */
            format = N_("%l\u2236%M %p");
        // Show the word "Yesterday" and time if date is on yesterday
@@ -286,11 +275,6 @@ function formatTime(time, params) {
            format = N_("%B %-d %Y, %l\u2236%M %p");
    }
    // Time in short 12h format, without the equivalent of "AM" or "PM"; used
    // when it is clear from the context
    if (!params.ampm)
        format = format.replace(/\s*%p/g, '');
    let formattedTime = date.format(Shell.util_translate_time_string(format));
    // prepend LTR-mark to colon/ratio to force a text direction on times
    return formattedTime.replace(/([:\u2236])/g, '\u200e$1');
@@ -329,8 +313,7 @@ function lowerBound(array, val, cmp) {
    if (array.length == 0)
        return 0;
-    min = 0;
+    min = 0; max = array.length;
    max = array.length;
    while (min < (max - 1)) {
        mid = Math.floor((min + max) / 2);
        v = cmp(array[mid], val);
@@ -341,7 +324,7 @@ function lowerBound(array, val, cmp) {
            max = mid;
    }
-    return min == max || cmp(array[min], val) < 0 ? max : min;
+    return (min == max || cmp(array[min], val) < 0) ? max : min;
 }
 // insertSorted:
@@ -362,13 +345,19 @@ function insertSorted(array, val, cmp) {
 var CloseButton = GObject.registerClass(
 class CloseButton extends St.Button {
    _init(boxpointer) {
-        super._init({
+        super._init({ style_class: 'notification-close' });
-            style_class: 'notification-close',
+
-            x_expand: true,
+        // This is a bit tricky. St.Bin has its own x-align/y-align properties
-            y_expand: true,
+        // that compete with Clutter's properties. This should be fixed for
-            x_align: Clutter.ActorAlign.END,
+        // Clutter 2.0. Since St.Bin doesn't define its own setters, the
-            y_align: Clutter.ActorAlign.START,
+        // setters are a workaround to get Clutter's version.
-        });
+        this.set_x_align(Clutter.ActorAlign.END);
        this.set_y_align(Clutter.ActorAlign.START);
        // XXX Clutter 2.0 workaround: ClutterBinLayout needs expand
        // to respect the alignments.
        this.set_x_expand(true);
        this.set_y_expand(true);
        this._boxPointer = boxpointer;
        if (boxpointer)
@@ -406,7 +395,7 @@ function makeCloseButton(boxpointer) {
 function ensureActorVisibleInScrollView(scrollView, actor) {
    let adjustment = scrollView.vscroll.adjustment;
-    let [value, lower_, upper, stepIncrement_, pageIncrement_, pageSize] = adjustment.get_values();
+    let [value, lower, upper, stepIncrement, pageIncrement, pageSize] = adjustment.get_values();
    let offset = 0;
    let vfade = scrollView.get_effect("fade");
@@ -421,7 +410,7 @@ function ensureActorVisibleInScrollView(scrollView, actor) {
        if (!parent)
            throw new Error("actor not in scroll view");
-        box = parent.get_allocation_box();
+        let box = parent.get_allocation_box();
        y1 += box.y1;
        y2 += box.y1;
        parent = parent.get_parent();
@@ -434,42 +423,97 @@ function ensureActorVisibleInScrollView(scrollView, actor) {
    else
        return;
-    adjustment.ease(value, {
+    Tweener.addTween(adjustment,
-        mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                     { value: value,
-        duration: SCROLL_TIME,
+                       time: SCROLL_TIME,
-    });
+                       transition: 'easeOutQuad' });
 }
-function wiggle(actor, params) {
+var AppSettingsMonitor = class {
-    params = Params.parse(params, {
+    constructor(appId, schemaId) {
-        offset: 0,
+        this._appId = appId;
-        duration: 0,
+        this._schemaId = schemaId;
        wiggleCount: 0,
    });
    actor.translation_x = 0;
-    // Accelerate before wiggling
+        this._app = null;
-    actor.ease({
+        this._settings = null;
-        translation_x: -params.offset,
+        this._handlers = [];
-        duration: params.duration,
+
-        mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+        this._schemaSource = Gio.SettingsSchemaSource.get_default();
-        onComplete: () => {
+
-            // Wiggle
+        this._appSystem = Shell.AppSystem.get_default();
-            actor.ease({
+        this._appSystem.connect('installed-changed',
-                translation_x: params.offset,
+                                this._onInstalledChanged.bind(this));
-                duration: params.duration,
+        this._onInstalledChanged();
-                mode: Clutter.AnimationMode.LINEAR,
+    }
-                repeatCount: params.wiggleCount,
+
-                autoReverse: true,
+    get available() {
-                onComplete: () => {
+        return this._app != null && this._settings != null;
-                    // Decelerate and return to the original position
+    }
-                    actor.ease({
+
-                        translation_x: 0,
+    activateApp() {
-                        duration: params.duration,
+        if (this._app)
-                        mode: Clutter.AnimationMode.EASE_IN_QUAD,
+            this._app.activate();
-                    });
+    }
-                },
+
    watchSetting(key, callback) {
        let handler = { id: 0, key: key, callback: callback };
        this._handlers.push(handler);
        this._connectHandler(handler);
    }
    _connectHandler(handler) {
        if (!this._settings || handler.id > 0)
            return;
        handler.id = this._settings.connect(`changed::${handler.key}`,
                                            handler.callback);
        handler.callback(this._settings, handler.key);
    }
    _disconnectHandler(handler) {
        if (this._settings && handler.id > 0)
            this._settings.disconnect(handler.id);
        handler.id = 0;
    }
    _onInstalledChanged() {
        let hadApp = (this._app != null);
        this._app = this._appSystem.lookup_app(this._appId);
        let haveApp = (this._app != null);
        if (hadApp == haveApp)
            return;
        if (haveApp)
            this._checkSettings();
        else
            this._setSettings(null);
    }
    _setSettings(settings) {
        this._handlers.forEach((handler) => this._disconnectHandler(handler));
        let hadSettings = (this._settings != null);
        this._settings = settings;
        let haveSettings = (this._settings != null);
        this._handlers.forEach((handler) => this._connectHandler(handler));
        if (hadSettings != haveSettings)
            this.emit('available-changed');
    }
    _checkSettings() {
        let schema = this._schemaSource.lookup(this._schemaId, true);
        if (schema) {
            this._setSettings(new Gio.Settings({ settings_schema: schema }));
        } else if (this._app) {
            Mainloop.timeout_add_seconds(1, () => {
                this._checkSettings();
                return GLib.SOURCE_REMOVE;
            });
-        },
+        }
-    });
+    }
-}
+};
 Signals.addSignalMethods(AppSettingsMonitor.prototype);
--- a/js/misc/weather.js
+++ b/js/misc/weather.js
@@ -1,19 +1,10 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-const { Geoclue, Gio, GLib, GWeather, Shell } = imports.gi;
+const { Geoclue, Gio, GLib, GWeather } = imports.gi;
 const Signals = imports.signals;
 const PermissionStore = imports.misc.permissionStore;
-
+const Util = imports.misc.util;
 const { loadInterfaceXML } = imports.misc.fileUtils;
 const WeatherIntegrationIface = loadInterfaceXML('org.gnome.Shell.WeatherIntegration');
 const WEATHER_BUS_NAME = 'org.gnome.Weather';
 const WEATHER_OBJECT_PATH = '/org/gnome/Weather';
 const WEATHER_INTEGRATION_IFACE = 'org.gnome.Shell.WeatherIntegration';
 const WEATHER_APP_ID = 'org.gnome.Weather.desktop';
 // Minimum time between updates to show loading indication
 var UPDATE_THRESHOLD = 10 * GLib.TIME_SPAN_MINUTE;
@@ -32,7 +23,6 @@ var WeatherClient = class {
        this._gclueStarting = false;
        this._gclueLocationChangedId = 0;
        this._needsAuth = true;
        this._weatherAuthorized = false;
        this._permStore = new PermissionStore.PermissionStore((proxy, error) => {
            if (error) {
@@ -48,11 +38,11 @@ var WeatherClient = class {
                return;
            }
-            this._permStore.LookupRemote('gnome', 'geolocation', (res, err) => {
+            this._permStore.LookupRemote('gnome', 'geolocation', (res, error) => {
-                if (err)
+                if (error)
-                    log(`Error looking up permission: ${err.message}`);
+                    log(`Error looking up permission: ${error.message}`);
-                let [perms, data] = err ? [{}, null] : res;
+                let [perms, data] = error ? [{}, null] : res;
                let  params = ['gnome', 'geolocation', false, data, perms];
                this._onPermStoreChanged(this._permStore, '', params);
            });
@@ -76,38 +66,17 @@ var WeatherClient = class {
            this.emit('changed');
        });
-        this._weatherApp = null;
+        this._weatherAppMon = new Util.AppSettingsMonitor('org.gnome.Weather.desktop',
-        this._weatherProxy = null;
+                                                          'org.gnome.Weather');
-
+        this._weatherAppMon.connect('available-changed', () => this.emit('changed'));
-        let nodeInfo = Gio.DBusNodeInfo.new_for_xml(WeatherIntegrationIface);
+        this._weatherAppMon.watchSetting('automatic-location',
-        Gio.DBusProxy.new(
+                                         this._onAutomaticLocationChanged.bind(this));
-            Gio.DBus.session,
+        this._weatherAppMon.watchSetting('locations',
-            Gio.DBusProxyFlags.DO_NOT_AUTO_START | Gio.DBusProxyFlags.GET_INVALIDATED_PROPERTIES,
+                                         this._onLocationsChanged.bind(this));
            nodeInfo.lookup_interface(WEATHER_INTEGRATION_IFACE),
            WEATHER_BUS_NAME,
            WEATHER_OBJECT_PATH,
            WEATHER_INTEGRATION_IFACE,
            null,
            this._onWeatherProxyReady.bind(this));
        this._settings = new Gio.Settings({
            schema_id: 'org.gnome.shell.weather',
        });
        this._settings.connect('changed::automatic-location',
            this._onAutomaticLocationChanged.bind(this));
        this._onAutomaticLocationChanged();
        this._settings.connect('changed::locations',
            this._onLocationsChanged.bind(this));
        this._onLocationsChanged();
        this._appSystem = Shell.AppSystem.get_default();
        this._appSystem.connect('installed-changed',
            this._onInstalledChanged.bind(this));
        this._onInstalledChanged();
    }
    get available() {
-        return this._weatherApp != null;
+        return this._weatherAppMon.available;
    }
    get loading() {
@@ -123,8 +92,7 @@ var WeatherClient = class {
    }
    activateApp() {
-        if (this._weatherApp)
+        this._weatherAppMon.activateApp();
            this._weatherApp.activate();
    }
    update() {
@@ -143,46 +111,7 @@ var WeatherClient = class {
    get _useAutoLocation() {
        return this._autoLocationRequested &&
               this._locationSettings.get_boolean('enabled') &&
-               (!this._needsAuth || this._weatherAuthorized);
+               this._weatherAuthorized;
    }
    _onWeatherProxyReady(o, res) {
        try {
            this._weatherProxy = Gio.DBusProxy.new_finish(res);
        } catch (e) {
            log(`Failed to create GNOME Weather proxy: ${e}`);
            return;
        }
        this._weatherProxy.connect('g-properties-changed',
            this._onWeatherPropertiesChanged.bind(this));
        this._onWeatherPropertiesChanged();
    }
    _onWeatherPropertiesChanged() {
        if (this._weatherProxy.g_name_owner == null)
            return;
        this._settings.set_boolean('automatic-location',
            this._weatherProxy.AutomaticLocation);
        this._settings.set_value('locations',
            new GLib.Variant('av', this._weatherProxy.Locations));
    }
    _onInstalledChanged() {
        let hadApp = this._weatherApp != null;
        this._weatherApp = this._appSystem.lookup_app(WEATHER_APP_ID);
        let haveApp = this._weatherApp != null;
        if (hadApp !== haveApp)
            this.emit('changed');
        let neededAuth = this._needsAuth;
        this._needsAuth = this._weatherApp === null ||
                          this._weatherApp.app_info.has_key('X-Flatpak');
        if (neededAuth !== this._needsAuth)
            this._updateAutoLocation();
    }
    _loadInfo() {
@@ -213,7 +142,7 @@ var WeatherClient = class {
        this._weatherInfo.abort();
        this._weatherInfo.set_location(location);
-        this._locationValid = location != null;
+        this._locationValid = (location != null);
        this._weatherInfo.set_enabled_providers(location ? this._providers : 0);
@@ -269,8 +198,8 @@ var WeatherClient = class {
        this._setLocation(location);
    }
-    _onAutomaticLocationChanged() {
+    _onAutomaticLocationChanged(settings, key) {
-        let useAutoLocation = this._settings.get_boolean('automatic-location');
+        let useAutoLocation = settings.get_boolean(key);
        if (this._autoLocationRequested == useAutoLocation)
            return;
@@ -288,9 +217,8 @@ var WeatherClient = class {
            this._setLocation(this._mostRecentLocation);
    }
-    _onLocationsChanged() {
+    _onLocationsChanged(settings, key) {
-        let locations = this._settings.get_value('locations').deep_unpack();
+        let serialized = settings.get_value(key).deep_unpack().shift();
        let serialized = locations.shift();
        let mostRecentLocation = null;
        if (serialized)
@@ -306,7 +234,7 @@ var WeatherClient = class {
    }
    _onPermStoreChanged(proxy, sender, params) {
-        let [table, id, deleted_, data_, perms] = params;
+        let [table, id, deleted, data, perms] = params;
        if (table != 'gnome' || id != 'geolocation')
            return;
--- a/js/perf/core.js
+++ b/js/perf/core.js
@@ -1,9 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported run, script_overviewShowStart, script_overviewShowDone,
            script_applicationsShowStart, script_applicationsShowDone,
            script_afterShowHide, malloc_usedSize, glx_swapComplete,
            clutter_stagePaintDone */
 /* eslint camelcase: ["error", { properties: "never", allow: ["^script_", "^malloc", "^glx", "^clutter"] }] */
 const System = imports.system;
@@ -57,7 +52,7 @@ var METRICS = {
      units: "us" },
    applicationsShowTimeSubsequent:
    { description: "Time to switch to applications view, second time",
-      units: "us" },
+      units: "us" }
 };
 let WINDOW_CONFIGS = [
@@ -67,7 +62,7 @@ let WINDOW_CONFIGS = [
    { width: 640, height: 480, alpha: false, maximized: true,  count: 5,  metric: 'overviewFps5Maximized' },
    { width: 640, height: 480, alpha: false, maximized: true,  count: 10, metric: 'overviewFps10Maximized' },
    { width: 640, height: 480, alpha: true,  maximized: false, count: 5,  metric: 'overviewFps5Alpha' },
-    { width: 640, height: 480, alpha: true,  maximized: false, count: 10, metric: 'overviewFps10Alpha' },
+    { width: 640, height: 480, alpha: true,  maximized: false, count: 10, metric: 'overviewFps10Alpha' }
 ];
 function *run() {
@@ -94,12 +89,11 @@ function *run() {
            let config = WINDOW_CONFIGS[i / 2];
            yield Scripting.destroyTestWindows();
-            for (let k = 0; k < config.count; k++) {
+            for (let k = 0; k < config.count; k++)
                yield Scripting.createTestWindow({ width: config.width,
                                                   height: config.height,
                                                   alpha: config.alpha,
                                                   maximized: config.maximized });
            }
            yield Scripting.waitTestWindows();
            yield Scripting.sleep(1000);
@@ -127,12 +121,10 @@ function *run() {
    for (let i = 0; i < 2; i++) {
        Scripting.scriptEvent('applicationsShowStart');
-        // eslint-disable-next-line require-atomic-updates
+        Main.overview._dash.showAppsButton.checked = true;
        Main.overview.dash.showAppsButton.checked = true;
        yield Scripting.waitLeisure();
        Scripting.scriptEvent('applicationsShowDone');
-        // eslint-disable-next-line require-atomic-updates
+        Main.overview._dash.showAppsButton.checked = false;
        Main.overview.dash.showAppsButton.checked = false;
        yield Scripting.waitLeisure();
    }
 }
@@ -155,7 +147,7 @@ function script_overviewShowStart(time) {
    overviewFrames = 0;
 }
-function script_overviewShowDone(_time) {
+function script_overviewShowDone(time) {
    // We've set up the state at the end of the zoom out, but we
    // need to wait for one more frame to paint before we count
    // ourselves as done.
@@ -174,11 +166,12 @@ function script_applicationsShowDone(time) {
        METRICS.applicationsShowTimeSubsequent.value = time - applicationsShowStart;
 }
-function script_afterShowHide(_time) {
+function script_afterShowHide(time) {
-    if (overviewShowCount == 1)
+    if (overviewShowCount == 1) {
        METRICS.usedAfterOverview.value = mallocUsedSize;
-    else
+    } else {
        METRICS.leakedAfterOverview.value = mallocUsedSize - METRICS.usedAfterOverview.value;
    }
 }
 function malloc_usedSize(time, bytes) {
--- a/js/perf/hwtest.js
+++ b/js/perf/hwtest.js
@@ -1,12 +1,3 @@
 /* exported run, script_desktopShown, script_overviewShowStart,
            script_overviewShowDone, script_applicationsShowStart,
            script_applicationsShowDone, script_mainViewDrawStart,
            script_mainViewDrawDone, script_overviewDrawStart,
            script_overviewDrawDone, script_redrawTestStart,
            script_redrawTestDone, script_collectTimings,
            script_geditLaunch, script_geditFirstFrame,
            clutter_stagePaintStart, clutter_paintCompletedTimestamp */
 /* eslint camelcase: ["error", { properties: "never", allow: ["^script_", "^clutter"] }] */
 const { Clutter, Gio, Shell } = imports.gi;
 const Main = imports.ui.main;
 const Scripting = imports.ui.scripting;
@@ -47,7 +38,7 @@ function waitAndDraw(milliseconds) {
    let timeline = new Clutter.Timeline({ duration: milliseconds });
    timeline.start();
-    timeline.connect('new-frame', (_timeline, _frame) => {
+    timeline.connect('new-frame', (timeline, frame) => {
        global.stage.queue_redraw();
    });
@@ -57,7 +48,7 @@ function waitAndDraw(milliseconds) {
            cb();
    });
-    return callback => (cb = callback);
+    return callback => cb = callback;
 }
 function waitSignal(object, signal) {
@@ -69,7 +60,7 @@ function waitSignal(object, signal) {
            cb();
    });
-    return callback => (cb = callback);
+    return callback => cb = callback;
 }
 function extractBootTimestamp() {
@@ -82,8 +73,8 @@ function extractBootTimestamp() {
    let result = null;
    let datastream = Gio.DataInputStream.new(sp.get_stdout_pipe());
-    while (true) { // eslint-disable-line no-constant-condition
+    while (true) {
-        let [line, length_] = datastream.read_line_utf8(null);
+        let [line, length] = datastream.read_line_utf8(null);
        if (line === null)
            break;
@@ -114,7 +105,7 @@ function *run() {
    Scripting.scriptEvent('desktopShown');
    let interfaceSettings = new Gio.Settings({
-        schema_id: 'org.gnome.desktop.interface',
+        schema_id: 'org.gnome.desktop.interface'
    });
    interfaceSettings.set_boolean('enable-animations', false);
@@ -126,8 +117,7 @@ function *run() {
    yield Scripting.sleep(1000);
    Scripting.scriptEvent('applicationsShowStart');
-    // eslint-disable-next-line require-atomic-updates
+    Main.overview._dash.showAppsButton.checked = true;
    Main.overview.dash.showAppsButton.checked = true;
    yield Scripting.waitLeisure();
    Scripting.scriptEvent('applicationsShowDone');
@@ -137,9 +127,9 @@ function *run() {
    Main.overview.hide();
    yield Scripting.waitLeisure();
-    // --------------------- //
+    ////////////////////////////////////////
-    // Tests of redraw speed //
+    // Tests of redraw speed
-    // --------------------- //
+    ////////////////////////////////////////
    global.frame_timestamps = true;
    global.frame_finish_timestamp = true;
@@ -186,6 +176,8 @@ function *run() {
    yield Scripting.sleep(1000);
    ////////////////////////////////////////
    let appSys = Shell.AppSystem.get_default();
    let app = appSys.lookup_app('org.gnome.gedit.desktop');
@@ -242,31 +234,31 @@ function script_applicationsShowDone(time) {
    METRICS.applicationsShowTime.value = time - applicationsShowStart;
 }
-function script_mainViewDrawStart(_time) {
+function script_mainViewDrawStart(time) {
    redrawTiming = 'mainView';
 }
-function script_mainViewDrawDone(_time) {
+function script_mainViewDrawDone(time) {
    redrawTiming = null;
 }
-function script_overviewDrawStart(_time) {
+function script_overviewDrawStart(time) {
    redrawTiming = 'overview';
 }
-function script_overviewDrawDone(_time) {
+function script_overviewDrawDone(time) {
    redrawTiming = null;
 }
-function script_redrawTestStart(_time) {
+function script_redrawTestStart(time) {
    redrawTiming = 'application';
 }
-function script_redrawTestDone(_time) {
+function script_redrawTestDone(time) {
    redrawTiming = null;
 }
-function script_collectTimings(_time) {
+function script_collectTimings(time) {
    for (let timing in redrawTimes) {
        let times = redrawTimes[timing];
        times.sort((a, b) => a - b);
--- a/js/portalHelper/main.js
+++ b/js/portalHelper/main.js
@@ -1,4 +1,3 @@
 /* exported main */
 const Format = imports.format;
 const Gettext = imports.gettext;
 const { Gio, GLib, GObject, Gtk, Pango, Soup, WebKit2: WebKit } = imports.gi;
@@ -11,17 +10,17 @@ const { loadInterfaceXML } = imports.misc.fileUtils;
 const PortalHelperResult = {
    CANCELLED: 0,
    COMPLETED: 1,
-    RECHECK: 2,
+    RECHECK: 2
 };
 const PortalHelperSecurityLevel = {
    NOT_YET_DETERMINED: 0,
    SECURE: 1,
-    INSECURE: 2,
+    INSECURE: 2
 };
 const CONNECTIVITY_CHECK_HOST = 'nmcheck.gnome.org';
-const CONNECTIVITY_CHECK_URI = `http://${CONNECTIVITY_CHECK_HOST}`;
+const CONNECTIVITY_CHECK_URI = 'http://' + CONNECTIVITY_CHECK_HOST;
 const CONNECTIVITY_RECHECK_RATELIMIT_TIMEOUT = 30 * GLib.USEC_PER_SEC;
 const HelperDBusInterface = loadInterfaceXML('org.gnome.Shell.PortalHelper');
@@ -92,7 +91,7 @@ class PortalHeaderBar extends Gtk.HeaderBar {
 var PortalWindow = GObject.registerClass(
 class PortalWindow extends Gtk.ApplicationWindow {
    _init(application, url, timestamp, doneCallback) {
-        super._init({ application });
+        super._init({ application: application });
        this.connect('delete-event', this.destroyWindow.bind(this));
        this._headerBar = new PortalHeaderBar();
@@ -152,7 +151,7 @@ class PortalWindow extends Gtk.ApplicationWindow {
        this._webView.load_uri(this._originalUrl);
    }
-    vfunc_delete_event(_event) {
+    vfunc_delete_event(event) {
        if (this._recheckAtExit)
            this._doneCallback(PortalHelperResult.RECHECK);
        else
@@ -178,7 +177,7 @@ class PortalWindow extends Gtk.ApplicationWindow {
        this._headerBar.setSecurityIcon(PortalHelperSecurityLevel.INSECURE);
    }
-    _onLoadFailedWithTlsErrors(view, failingURI, certificate, _errors) {
+    _onLoadFailedWithTlsErrors(view, failingURI, certificate, errors) {
        this._headerBar.setSecurityIcon(PortalHelperSecurityLevel.INSECURE);
        let uri = new Soup.URI(failingURI);
        this._webContext.allow_tls_certificate_for_host(certificate, uri.get_host());
@@ -287,7 +286,7 @@ class WebPortalHelper extends Gtk.Application {
    }
    Authenticate(connection, url, timestamp) {
-        this._queue.push({ connection, url, timestamp });
+        this._queue.push({ connection: connection, url: url, timestamp: timestamp });
        this._processQueue();
    }
--- a/js/ui/accessDialog.js
+++ b/js/ui/accessDialog.js
@@ -1,4 +1,3 @@
 /* exported AccessDialogDBus */
 const { Clutter, Gio, GLib, GObject, Shell } = imports.gi;
 const CheckBox = imports.ui.checkBox;
@@ -13,7 +12,7 @@ const AccessIface = loadInterfaceXML('org.freedesktop.impl.portal.Access');
 var DialogResponse = {
    OK: 0,
    CANCEL: 1,
-    CLOSED: 2,
+    CLOSED: 2
 };
 var AccessDialog = GObject.registerClass(
@@ -35,7 +34,7 @@ class AccessDialog extends ModalDialog.ModalDialog {
    _buildLayout(title, subtitle, body, options) {
        // No support for non-modal system dialogs, so ignore the option
-        // let modal = options['modal'] || true;
+        //let modal = options['modal'] || true;
        let denyLabel = options['deny_label'] || _("Deny Access");
        let grantLabel = options['grant_label'] || _("Grant Access");
        let iconName = options['icon'] || null;
@@ -56,8 +55,8 @@ class AccessDialog extends ModalDialog.ModalDialog {
            let check = new CheckBox.CheckBox();
            check.getLabelActor().text = name;
-            check.checked = selected == "true";
+            check.actor.checked = selected == "true";
-            content.insertBeforeBody(check);
+            content.insertBeforeBody(check.actor);
            this._choices.set(id, check);
        }
@@ -80,7 +79,7 @@ class AccessDialog extends ModalDialog.ModalDialog {
        this._requestExported = this._request.export(connection, this._handle);
    }
-    CloseAsync(invocation, _params) {
+    CloseAsync(invocation, params) {
        if (this._invocation.get_sender() != invocation.get_sender()) {
            invocation.return_error_literal(Gio.DBusError,
                                            Gio.DBusError.ACCESS_DENIED,
@@ -99,7 +98,7 @@ class AccessDialog extends ModalDialog.ModalDialog {
        let results = {};
        if (response == DialogResponse.OK) {
            for (let [id, check] of this._choices) {
-                let checked = check.checked ? 'true' : 'false';
+                let checked = check.actor.checked ? 'true' : 'false';
                results[id] = new GLib.Variant('s', checked);
            }
        }
@@ -133,7 +132,7 @@ var AccessDialogDBus = class {
            return;
        }
-        let [handle, appId, parentWindow_, title, subtitle, body, options] = params;
+        let [handle, appId, parentWindow, title, subtitle, body, options] = params;
        // We probably want to use parentWindow and global.display.focus_window
        // for this check in the future
        if (appId && `${appId}.desktop` != this._windowTracker.focus_app.id) {
@@ -147,7 +146,7 @@ var AccessDialogDBus = class {
                                      subtitle, body, options);
        dialog.open();
-        dialog.connect('closed', () => (this._accessDialog = null));
+        dialog.connect('closed', () => this._accessDialog = null);
        this._accessDialog = dialog;
    }
--- a/js/ui/altTab.js
+++ b/js/ui/altTab.js
@@ -1,17 +1,17 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported AppSwitcherPopup, GroupCyclerPopup, WindowSwitcherPopup,
            WindowCyclerPopup */
 const { Atk, Clutter, Gio, GLib, GObject, Meta, Shell, St } = imports.gi;
 const Mainloop = imports.mainloop;
 const Main = imports.ui.main;
 const SwitcherPopup = imports.ui.switcherPopup;
 const Tweener = imports.ui.tweener;
 var APP_ICON_HOVER_TIMEOUT = 200; // milliseconds
 var THUMBNAIL_DEFAULT_SIZE = 256;
 var THUMBNAIL_POPUP_TIME = 500; // milliseconds
-var THUMBNAIL_FADE_TIME = 100; // milliseconds
+var THUMBNAIL_FADE_TIME = 0.1; // seconds
 var WINDOW_PREVIEW_SIZE = 128;
 var APP_ICON_SIZE = 96;
@@ -62,7 +62,7 @@ class AppSwitcherPopup extends SwitcherPopup.SwitcherPopup {
        this.thumbnailsVisible = false;
-        let apps = Shell.AppSystem.get_default().get_running();
+        let apps = Shell.AppSystem.get_default().get_running ();
        if (apps.length == 0)
            return;
@@ -87,9 +87,9 @@ class AppSwitcherPopup extends SwitcherPopup.SwitcherPopup {
            let hPadding = leftPadding + rightPadding;
            let icon = this._items[this._selectedIndex];
-            let [posX] = icon.get_transformed_position();
+            let [posX, posY] = icon.get_transformed_position();
            let thumbnailCenter = posX + icon.width / 2;
-            let [, childNaturalWidth] = this._thumbnails.get_preferred_width(-1);
+            let [childMinWidth, childNaturalWidth] = this._thumbnails.get_preferred_width(-1);
            childBox.x1 = Math.max(primary.x + leftPadding, Math.floor(thumbnailCenter - childNaturalWidth / 2));
            if (childBox.x1 + childNaturalWidth > primary.x + primary.width - hPadding) {
                let offset = childBox.x1 + childNaturalWidth - primary.width + hPadding;
@@ -103,7 +103,7 @@ class AppSwitcherPopup extends SwitcherPopup.SwitcherPopup {
                childBox.x2 = primary.x + primary.width - rightPadding;
            childBox.y1 = this._switcherList.allocation.y2 + spacing;
            this._thumbnails.addClones(primary.y + primary.height - bottomPadding - childBox.y1);
-            let [, childNaturalHeight] = this._thumbnails.get_preferred_height(-1);
+            let [childMinHeight, childNaturalHeight] = this._thumbnails.get_preferred_height(-1);
            childBox.y2 = childBox.y1 + childNaturalHeight;
            this._thumbnails.allocate(childBox, flags);
        }
@@ -111,12 +111,14 @@ class AppSwitcherPopup extends SwitcherPopup.SwitcherPopup {
    _initialSelection(backward, binding) {
        if (binding == 'switch-group') {
-            if (backward)
+            if (backward) {
                this._select(0, this._items[0].cachedWindows.length - 1);
-            else if (this._items[0].cachedWindows.length > 1)
+            } else {
-                this._select(0, 1);
+                if (this._items[0].cachedWindows.length > 1)
-            else
+                    this._select(0, 1);
-                this._select(0, 0);
+                else
                    this._select(0, 0);
            }
        } else if (binding == 'switch-group-backward') {
            this._select(0, this._items[0].cachedWindows.length - 1);
        } else if (binding == 'switch-applications-backward') {
@@ -178,27 +180,28 @@ class AppSwitcherPopup extends SwitcherPopup.SwitcherPopup {
            this._select(this._next());
        } else if (action == Meta.KeyBindingAction.SWITCH_APPLICATIONS_BACKWARD) {
            this._select(this._previous());
-        } else if (keysym === Clutter.KEY_q) {
+        } else if (keysym == Clutter.q) {
            this._quitApplication(this._selectedIndex);
        } else if (this._thumbnailsFocused) {
-            if (keysym === Clutter.KEY_Left)
+            if (keysym == Clutter.Left)
                this._select(this._selectedIndex, this._previousWindow());
-            else if (keysym === Clutter.KEY_Right)
+            else if (keysym == Clutter.Right)
                this._select(this._selectedIndex, this._nextWindow());
-            else if (keysym === Clutter.KEY_Up)
+            else if (keysym == Clutter.Up)
                this._select(this._selectedIndex, null, true);
-            else if (keysym === Clutter.KEY_w || keysym === Clutter.KEY_F4)
+            else if (keysym == Clutter.w || keysym == Clutter.F4)
                this._closeAppWindow(this._selectedIndex, this._currentWindow);
            else
                return Clutter.EVENT_PROPAGATE;
        } else if (keysym == Clutter.KEY_Left) {
            this._select(this._previous());
        } else if (keysym == Clutter.KEY_Right) {
            this._select(this._next());
        } else if (keysym == Clutter.KEY_Down) {
            this._select(this._selectedIndex, 0);
        } else {
-            return Clutter.EVENT_PROPAGATE;
+            if (keysym == Clutter.Left)
                this._select(this._previous());
            else if (keysym == Clutter.Right)
                this._select(this._next());
            else if (keysym == Clutter.Down)
                this._select(this._selectedIndex, 0);
            else
                return Clutter.EVENT_PROPAGATE;
        }
        return Clutter.EVENT_STOP;
@@ -288,14 +291,14 @@ class AppSwitcherPopup extends SwitcherPopup.SwitcherPopup {
        if (this._thumbnails)
            this._destroyThumbnails();
        if (this._thumbnailTimeoutId != 0)
-            GLib.source_remove(this._thumbnailTimeoutId);
+            Mainloop.source_remove(this._thumbnailTimeoutId);
    }
    /**
     * _select:
-     * @param {number} app: index of the app to select
+     * @app: index of the app to select
-     * @param {number=} window: index of which of @app's windows to select
+     * @window: (optional) index of which of @app's windows to select
-     * @param {bool} forceAppFocus: optional flag, see below
+     * @forceAppFocus: optional flag, see below
     *
     * Selects the indicated @app, and optional @window, and sets
     * this._thumbnailsFocused appropriately to indicate whether the
@@ -323,7 +326,7 @@ class AppSwitcherPopup extends SwitcherPopup.SwitcherPopup {
        }
        if (this._thumbnailTimeoutId != 0) {
-            GLib.source_remove(this._thumbnailTimeoutId);
+            Mainloop.source_remove(this._thumbnailTimeoutId);
            this._thumbnailTimeoutId = 0;
        }
@@ -340,8 +343,7 @@ class AppSwitcherPopup extends SwitcherPopup.SwitcherPopup {
            this._thumbnails.highlight(window, forceAppFocus);
        } else if (this._items[this._selectedIndex].cachedWindows.length > 1 &&
                   !forceAppFocus) {
-            this._thumbnailTimeoutId = GLib.timeout_add(
+            this._thumbnailTimeoutId = Mainloop.timeout_add (
                GLib.PRIORITY_DEFAULT,
                THUMBNAIL_POPUP_TIME,
                this._timeoutPopupThumbnails.bind(this));
            GLib.Source.set_name_by_id(this._thumbnailTimeoutId, '[gnome-shell] this._timeoutPopupThumbnails');
@@ -358,22 +360,22 @@ class AppSwitcherPopup extends SwitcherPopup.SwitcherPopup {
    _destroyThumbnails() {
        let thumbnailsActor = this._thumbnails;
-        this._thumbnails.ease({
+        Tweener.addTween(thumbnailsActor,
-            opacity: 0,
+                         { opacity: 0,
-            duration: THUMBNAIL_FADE_TIME,
+                           time: THUMBNAIL_FADE_TIME,
-            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                           transition: 'easeOutQuad',
-            onComplete: () => {
+                           onComplete: () => {
-                thumbnailsActor.destroy();
+                               thumbnailsActor.destroy();
-                this.thumbnailsVisible = false;
+                               this.thumbnailsVisible = false;
-            },
+                           }
-        });
+                         });
        this._thumbnails = null;
        if (this._switcherList._items[this._selectedIndex])
-            this._switcherList._items[this._selectedIndex].remove_accessible_state(Atk.StateType.EXPANDED);
+            this._switcherList._items[this._selectedIndex].remove_accessible_state (Atk.StateType.EXPANDED);
    }
    _createThumbnails() {
-        this._thumbnails = new ThumbnailList(this._items[this._selectedIndex].cachedWindows);
+        this._thumbnails = new ThumbnailList (this._items[this._selectedIndex].cachedWindows);
        this._thumbnails.connect('item-activated', this._windowActivated.bind(this));
        this._thumbnails.connect('item-entered', this._windowEntered.bind(this));
        this._thumbnails.connect('item-removed', this._windowRemoved.bind(this));
@@ -389,39 +391,38 @@ class AppSwitcherPopup extends SwitcherPopup.SwitcherPopup {
        this._thumbnails.get_allocation_box();
        this._thumbnails.opacity = 0;
-        this._thumbnails.ease({
+        Tweener.addTween(this._thumbnails,
-            opacity: 255,
+                         { opacity: 255,
-            duration: THUMBNAIL_FADE_TIME,
+                           time: THUMBNAIL_FADE_TIME,
-            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                           transition: 'easeOutQuad',
-            onComplete: () => {
+                           onComplete: () => this.thumbnailsVisible = true
-                this.thumbnailsVisible = true;
+                         });
            },
        });
-        this._switcherList._items[this._selectedIndex].add_accessible_state(Atk.StateType.EXPANDED);
+        this._switcherList._items[this._selectedIndex].add_accessible_state (Atk.StateType.EXPANDED);
    }
 });
-var CyclerHighlight = GObject.registerClass(
+class CyclerHighlight {
-class CyclerHighlight extends St.Widget {
+    constructor() {
    _init() {
        super._init({ layout_manager: new Clutter.BinLayout() });
        this._window = null;
        this.actor = new St.Widget({ layout_manager: new Clutter.BinLayout() });
        this._clone = new Clutter.Clone();
-        this.add_actor(this._clone);
+        this.actor.add_actor(this._clone);
        this._highlight = new St.Widget({ style_class: 'cycler-highlight' });
-        this.add_actor(this._highlight);
+        this.actor.add_actor(this._highlight);
        let coordinate = Clutter.BindCoordinate.ALL;
-        let constraint = new Clutter.BindConstraint({ coordinate });
+        let constraint = new Clutter.BindConstraint({ coordinate: coordinate });
        this._clone.bind_property('source', constraint, 'source', 0);
-        this.add_constraint(constraint);
+        this.actor.add_constraint(constraint);
-        this.connect('notify::allocation', this._onAllocationChanged.bind(this));
+        this.actor.connect('notify::allocation',
-        this.connect('destroy', this._onDestroy.bind(this));
+                           this._onAllocationChanged.bind(this));
        this.actor.connect('destroy', this._onDestroy.bind(this));
    }
    set window(w) {
@@ -433,8 +434,8 @@ class CyclerHighlight extends St.Widget {
        if (this._clone.source)
            this._clone.source.sync_visibility();
-        let windowActor = this._window
+        let windowActor = this._window ? this._window.get_compositor_private()
-            ? this._window.get_compositor_private() : null;
+                                       : null;
        if (windowActor)
            windowActor.hide();
@@ -447,7 +448,7 @@ class CyclerHighlight extends St.Widget {
            this._highlight.set_size(0, 0);
            this._highlight.hide();
        } else {
-            let [x, y] = this.allocation.get_origin();
+            let [x, y] = this.actor.allocation.get_origin();
            let rect = this._window.get_frame_rect();
            this._highlight.set_size(rect.width, rect.height);
            this._highlight.set_position(rect.x - x, rect.y - y);
@@ -458,7 +459,7 @@ class CyclerHighlight extends St.Widget {
    _onDestroy() {
        this.window = null;
    }
-});
+}
 // We don't show an actual popup, so just provide what SwitcherPopup
 // expects instead of inheriting from SwitcherList
@@ -468,13 +469,13 @@ var CyclerList = GObject.registerClass({
               'item-removed': { param_types: [GObject.TYPE_INT] },
               'item-highlighted': { param_types: [GObject.TYPE_INT] } },
 }, class CyclerList extends St.Widget {
-    highlight(index, _justOutline) {
+    highlight(index, justOutline) {
        this.emit('item-highlighted', index);
    }
 });
 var CyclerPopup = GObject.registerClass({
-    GTypeFlags: GObject.TypeFlags.ABSTRACT,
+    GTypeFlags: GObject.TypeFlags.ABSTRACT
 }, class CyclerPopup extends SwitcherPopup.SwitcherPopup {
    _init() {
        super._init();
@@ -485,7 +486,7 @@ var CyclerPopup = GObject.registerClass({
            return;
        this._highlight = new CyclerHighlight();
-        global.window_group.add_actor(this._highlight);
+        global.window_group.add_actor(this._highlight.actor);
        this._switcherList = new CyclerList();
        this._switcherList.connect('item-highlighted', (list, index) => {
@@ -493,9 +494,9 @@ var CyclerPopup = GObject.registerClass({
        });
    }
-    _highlightItem(index, _justOutline) {
+    _highlightItem(index, justOutline) {
        this._highlight.window = this._items[index];
-        global.window_group.set_child_above_sibling(this._highlight, null);
+        global.window_group.set_child_above_sibling(this._highlight.actor, null);
    }
    _finish() {
@@ -525,7 +526,7 @@ var CyclerPopup = GObject.registerClass({
    }
    _onDestroy() {
-        this._highlight.destroy();
+        this._highlight.actor.destroy();
        super._onDestroy();
    }
@@ -588,18 +589,20 @@ class WindowSwitcherPopup extends SwitcherPopup.SwitcherPopup {
    }
    _keyPressHandler(keysym, action) {
-        if (action == Meta.KeyBindingAction.SWITCH_WINDOWS)
+        if (action == Meta.KeyBindingAction.SWITCH_WINDOWS) {
            this._select(this._next());
-        else if (action == Meta.KeyBindingAction.SWITCH_WINDOWS_BACKWARD)
+        } else if (action == Meta.KeyBindingAction.SWITCH_WINDOWS_BACKWARD) {
            this._select(this._previous());
-        else if (keysym == Clutter.KEY_Left)
+        } else {
-            this._select(this._previous());
+            if (keysym == Clutter.Left)
-        else if (keysym == Clutter.KEY_Right)
+                this._select(this._previous());
-            this._select(this._next());
+            else if (keysym == Clutter.Right)
-        else if (keysym == Clutter.KEY_w || keysym == Clutter.KEY_F4)
+                this._select(this._next());
-            this._closeWindow(this._selectedIndex);
+            else if (keysym == Clutter.w || keysym == Clutter.F4)
-        else
+                this._closeWindow(this._selectedIndex);
-            return Clutter.EVENT_PROPAGATE;
+            else
                return Clutter.EVENT_PROPAGATE;
        }
        return Clutter.EVENT_STOP;
    }
@@ -650,17 +653,13 @@ class AppIcon extends St.BoxLayout {
        this.app = app;
        this.icon = null;
-        this._iconBin = new St.Bin();
+        this._iconBin = new St.Bin({ x_fill: true, y_fill: true });
-        this.add_child(this._iconBin);
+        this.add(this._iconBin, { x_fill: false, y_fill: false } );
-        this.label = new St.Label({
+        this.label = new St.Label({ text: this.app.get_name() });
-            text: this.app.get_name(),
+        this.add(this.label, { x_fill: false });
            x_align: Clutter.ActorAlign.CENTER,
        });
        this.add_child(this.label);
    }
    // eslint-disable-next-line camelcase
    set_size(size) {
        this.icon = this.app.create_icon_texture(size);
        this._iconBin.child = this.icon;
@@ -693,7 +692,7 @@ class AppSwitcher extends SwitcherPopup.SwitcherList {
            // Cache the window list now; we don't handle dynamic changes here,
            // and we don't want to be continually retrieving it
            appIcon.cachedWindows = allWindows.filter(
-                w => windowTracker.get_window_app(w) == appIcon.app
+                w => windowTracker.get_window_app (w) == appIcon.app
            );
            if (appIcon.cachedWindows.length > 0)
                this._addIcon(appIcon);
@@ -708,7 +707,7 @@ class AppSwitcher extends SwitcherPopup.SwitcherList {
    _onDestroy() {
        if (this._mouseTimeOutId != 0)
-            GLib.source_remove(this._mouseTimeOutId);
+            Mainloop.source_remove(this._mouseTimeOutId);
        this.icons.forEach(icon => {
            icon.app.disconnect(icon._stateChangedId);
@@ -717,9 +716,9 @@ class AppSwitcher extends SwitcherPopup.SwitcherList {
    _setIconSize() {
        let j = 0;
-        while (this._items.length > 1 && this._items[j].style_class != 'item-box')
+        while (this._items.length > 1 && this._items[j].style_class != 'item-box') {
            j++;
-
+        }
        let themeNode = this._items[j].get_theme_node();
        this._list.ensure_style();
@@ -787,16 +786,14 @@ class AppSwitcher extends SwitcherPopup.SwitcherList {
    // activation when the thumbnail list is open
    _onItemEnter(index) {
        if (this._mouseTimeOutId != 0)
-            GLib.source_remove(this._mouseTimeOutId);
+            Mainloop.source_remove(this._mouseTimeOutId);
        if (this._altTabPopup.thumbnailsVisible) {
-            this._mouseTimeOutId = GLib.timeout_add(
+            this._mouseTimeOutId = Mainloop.timeout_add(APP_ICON_HOVER_TIMEOUT,
-                GLib.PRIORITY_DEFAULT,
+                                                        () => {
-                APP_ICON_HOVER_TIMEOUT,
+                                                            this._enterItem(index);
-                () => {
+                                                            this._mouseTimeOutId = 0;
-                    this._enterItem(index);
+                                                            return GLib.SOURCE_REMOVE;
-                    this._mouseTimeOutId = 0;
+                                                        });
                    return GLib.SOURCE_REMOVE;
                });
            GLib.Source.set_name_by_id(this._mouseTimeOutId, '[gnome-shell] this._enterItem');
        } else {
            this._itemEntered(index);
@@ -804,7 +801,7 @@ class AppSwitcher extends SwitcherPopup.SwitcherList {
    }
    _enterItem(index) {
-        let [x, y] = global.get_pointer();
+        let [x, y, mask] = global.get_pointer();
        let pickedActor = global.stage.get_actor_at_pos(Clutter.PickMode.ALL, x, y);
        if (this._items[index].contains(pickedActor))
            this._itemEntered(index);
@@ -853,7 +850,7 @@ class AppSwitcher extends SwitcherPopup.SwitcherList {
        if (appIcon.cachedWindows.length == 1)
            arrow.hide();
        else
-            item.add_accessible_state(Atk.StateType.EXPANDABLE);
+            item.add_accessible_state (Atk.StateType.EXPANDABLE);
    }
    _removeIcon(app) {
@@ -873,9 +870,9 @@ class ThumbnailList extends SwitcherPopup.SwitcherList {
    _init(windows) {
        super._init(false);
-        this._labels = [];
+        this._labels = new Array();
-        this._thumbnailBins = [];
+        this._thumbnailBins = new Array();
-        this._clones = [];
+        this._clones = new Array();
        this._windows = windows;
        for (let i = 0; i < windows.length; i++) {
@@ -889,13 +886,12 @@ class ThumbnailList extends SwitcherPopup.SwitcherList {
            let title = windows[i].get_title();
            if (title) {
-                let name = new St.Label({
+                let name = new St.Label({ text: title });
-                    text: title,
+                // St.Label doesn't support text-align so use a Bin
-                    // St.Label doesn't support text-align
+                let bin = new St.Bin({ x_align: St.Align.MIDDLE });
-                    x_align: Clutter.ActorAlign.CENTER,
+                this._labels.push(bin);
-                });
+                bin.add_actor(name);
-                this._labels.push(name);
+                box.add_actor(bin);
                box.add_actor(name);
                this.addItem(box, name);
            } else {
@@ -912,7 +908,7 @@ class ThumbnailList extends SwitcherPopup.SwitcherList {
            return;
        let totalPadding = this._items[0].get_theme_node().get_horizontal_padding() + this._items[0].get_theme_node().get_vertical_padding();
        totalPadding += this.get_theme_node().get_horizontal_padding() + this.get_theme_node().get_vertical_padding();
-        let [, labelNaturalHeight] = this._labels[0].get_preferred_height(-1);
+        let [labelMinHeight, labelNaturalHeight] = this._labels[0].get_preferred_height(-1);
        let spacing = this._items[0].child.get_theme_node().get_length('spacing');
        let scaleFactor = St.ThemeContext.get_for_stage(global.stage).scale_factor;
        let thumbnailSize = THUMBNAIL_DEFAULT_SIZE * scaleFactor;
@@ -937,7 +933,7 @@ class ThumbnailList extends SwitcherPopup.SwitcherList {
        }
        // Make sure we only do this once
-        this._thumbnailBins = [];
+        this._thumbnailBins = new Array();
    }
    _removeThumbnail(source, clone) {
@@ -974,7 +970,7 @@ class WindowIcon extends St.BoxLayout {
        this._icon = new St.Widget({ layout_manager: new Clutter.BinLayout() });
-        this.add_child(this._icon);
+        this.add(this._icon, { x_fill: false, y_fill: false } );
        this.label = new St.Label({ text: window.get_title() });
        let tracker = Shell.WindowTracker.get_default();
@@ -997,10 +993,9 @@ class WindowIcon extends St.BoxLayout {
            size = WINDOW_PREVIEW_SIZE;
            this._icon.add_actor(_createWindowClone(mutterWindow, size * scaleFactor));
-            if (this.app) {
+            if (this.app)
                this._icon.add_actor(this._createAppIcon(this.app,
                                                         APP_ICON_SIZE_SMALL));
            }
            break;
        case AppIconMode.APP_ICON_ONLY:
@@ -1012,9 +1007,9 @@ class WindowIcon extends St.BoxLayout {
    }
    _createAppIcon(app, size) {
-        let appIcon = app
+        let appIcon = app ? app.create_icon_texture(size)
-            ? app.create_icon_texture(size)
+                          : new St.Icon({ icon_name: 'icon-missing',
-            : new St.Icon({ icon_name: 'icon-missing', icon_size: size });
+                                          icon_size: size });
        appIcon.x_expand = appIcon.y_expand = true;
        appIcon.x_align = appIcon.y_align = Clutter.ActorAlign.END;
@@ -1041,7 +1036,7 @@ class WindowList extends SwitcherPopup.SwitcherList {
            this.addItem(icon, icon.label);
            this.icons.push(icon);
-            icon._unmanagedSignalId = icon.window.connect('unmanaged', window => {
+            icon._unmanagedSignalId = icon.window.connect('unmanaged', (window) => {
                this._removeWindow(window);
            });
        }
--- a/js/ui/animation.js
+++ b/js/ui/animation.js
@@ -1,20 +1,21 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported Animation, AnimatedIcon, Spinner */
-const { Clutter, GLib, GObject, Gio, St } = imports.gi;
+const { GLib, Gio, St } = imports.gi;
 const Mainloop = imports.mainloop;
-const Params = imports.misc.params;
+const Tweener = imports.ui.tweener;
 var ANIMATED_ICON_UPDATE_TIMEOUT = 16;
-var SPINNER_ANIMATION_TIME = 300;
+var SPINNER_ANIMATION_TIME = 0.3;
-var SPINNER_ANIMATION_DELAY = 1000;
+var SPINNER_ANIMATION_DELAY = 1.0;
-var Animation = GObject.registerClass(
+var Animation = class {
-class Animation extends St.Bin {
+    constructor(file, width, height, speed) {
-    _init(file, width, height, speed) {
+        this.actor = new St.Bin();
-        super._init({ width, height });
+        this.actor.set_size(width, height);
-        this.connect('destroy', this._onDestroy.bind(this));
+        this.actor.connect('destroy', this._onDestroy.bind(this));
-        this.connect('resource-scale-changed',
+        this.actor.connect('notify::size', this._syncAnimationSize.bind(this));
        this.actor.connect('resource-scale-changed',
            this._loadFile.bind(this, file, width, height));
        let themeContext = St.ThemeContext.get_for_stage(global.stage);
@@ -45,7 +46,7 @@ class Animation extends St.Bin {
    stop() {
        if (this._timeoutId > 0) {
-            GLib.source_remove(this._timeoutId);
+            Mainloop.source_remove(this._timeoutId);
            this._timeoutId = 0;
        }
@@ -53,34 +54,20 @@ class Animation extends St.Bin {
    }
    _loadFile(file, width, height) {
-        let [validResourceScale, resourceScale] = this.get_resource_scale();
+        let [validResourceScale, resourceScale] = this.actor.get_resource_scale();
        let wasPlaying = this._isPlaying;
        if (this._isPlaying)
            this.stop();
        this._isLoaded = false;
-        this.destroy_all_children();
+        this.actor.destroy_all_children();
-        if (!validResourceScale) {
+        if (!validResourceScale)
            if (wasPlaying)
                this.play();
            return;
        }
        let textureCache = St.TextureCache.get_default();
        let scaleFactor = St.ThemeContext.get_for_stage(global.stage).scale_factor;
        this._animations = textureCache.load_sliced_image(file, width, height,
                                                          scaleFactor, resourceScale,
                                                          this._animationsLoaded.bind(this));
-        this._animations.set({
+        this.actor.set_child(this._animations);
            x_align: Clutter.ActorAlign.CENTER,
            y_align: Clutter.ActorAlign.CENTER,
        });
        this.set_child(this._animations);
        if (wasPlaying)
            this.play();
    }
    _showFrame(frame) {
@@ -88,7 +75,7 @@ class Animation extends St.Bin {
        if (oldFrameActor)
            oldFrameActor.hide();
-        this._frame = frame % this._animations.get_n_children();
+        this._frame = (frame % this._animations.get_n_children());
        let newFrameActor = this._animations.get_child_at_index(this._frame);
        if (newFrameActor)
@@ -104,7 +91,7 @@ class Animation extends St.Bin {
        if (!this._isLoaded)
            return;
-        let [width, height] = this.get_size();
+        let [width, height] = this.actor.get_size();
        for (let i = 0; i < this._animations.get_n_children(); ++i)
            this._animations.get_child_at_index(i).set_size(width, height);
@@ -127,29 +114,21 @@ class Animation extends St.Bin {
            themeContext.disconnect(this._scaleChangedId);
        this._scaleChangedId = 0;
    }
-});
+};
-var AnimatedIcon = GObject.registerClass(
+var AnimatedIcon = class extends Animation {
-class AnimatedIcon extends Animation {
+    constructor(file, size) {
-    _init(file, size) {
+        super(file, size, size, ANIMATED_ICON_UPDATE_TIMEOUT);
        super._init(file, size, size, ANIMATED_ICON_UPDATE_TIMEOUT);
    }
-});
+};
-var Spinner = GObject.registerClass(
+var Spinner = class extends AnimatedIcon {
-class Spinner extends AnimatedIcon {
+    constructor(size, animate = false) {
    _init(size, params) {
        params = Params.parse(params, {
            animate: false,
            hideOnStop: false,
        });
        let file = Gio.File.new_for_uri('resource:///org/gnome/shell/theme/process-working.svg');
-        super._init(file, size);
+        super(file, size);
-        this.opacity = 0;
+        this.actor.opacity = 0;
-        this._animate = params.animate;
+        this._animate = animate;
        this._hideOnStop = params.hideOnStop;
        this.visible = !this._hideOnStop;
    }
    _onDestroy() {
@@ -158,43 +137,37 @@ class Spinner extends AnimatedIcon {
    }
    play() {
-        this.remove_all_transitions();
+        Tweener.removeTweens(this.actor);
        this.show();
        if (this._animate) {
            super.play();
-            this.ease({
+            Tweener.addTween(this.actor, {
                opacity: 255,
                delay: SPINNER_ANIMATION_DELAY,
-                duration: SPINNER_ANIMATION_TIME,
+                time: SPINNER_ANIMATION_TIME,
-                mode: Clutter.AnimationMode.LINEAR,
+                transition: 'linear'
            });
        } else {
-            this.opacity = 255;
+            this.actor.opacity = 255;
            super.play();
        }
    }
    stop() {
-        this.remove_all_transitions();
+        Tweener.removeTweens(this.actor);
        if (this._animate) {
-            this.ease({
+            Tweener.addTween(this.actor, {
                opacity: 0,
-                duration: SPINNER_ANIMATION_TIME,
+                time: SPINNER_ANIMATION_TIME,
-                mode: Clutter.AnimationMode.LINEAR,
+                transition: 'linear',
                onComplete: () => {
                    super.stop();
-                    if (this._hideOnStop)
+                }
                        this.hide();
                },
            });
        } else {
-            this.opacity = 0;
+            this.actor.opacity = 0;
            super.stop();
            if (this._hideOnStop)
                this.hide();
        }
    }
-});
+};
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
--- a/js/ui/appFavorites.js
+++ b/js/ui/appFavorites.js
@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported getAppFavorites */
 const Shell = imports.gi.Shell;
 const Signals = imports.signals;
@@ -55,7 +54,6 @@ const RENAMED_DESKTOP_IDS = {
    'org.gnome.taquin.desktop': 'org.gnome.Taquin.desktop',
    'org.gnome.Weather.Application.desktop': 'org.gnome.Weather.desktop',
    'polari.desktop': 'org.gnome.Polari.desktop',
    'shotwell.desktop': 'org.gnome.Shotwell.desktop',
    'tali.desktop': 'org.gnome.Tali.desktop',
    'totem.desktop': 'org.gnome.Totem.desktop',
    'evince.desktop': 'org.gnome.Evince.desktop',
@@ -148,11 +146,12 @@ class AppFavorites {
        let app = Shell.AppSystem.get_default().lookup_app(appId);
-        let msg = _("%s has been added to your favorites.").format(app.get_name());
+        Main.overview.setMessage(_("%s has been added to your favorites.").format(app.get_name()),
-        Main.overview.setMessage(msg, {
+                                 { forFeedback: true,
-            forFeedback: true,
+                                   undoCallback: () => {
-            undoCallback: () => this._removeFavorite(appId),
+                                       this._removeFavorite(appId);
-        });
+                                   }
                                 });
    }
    addFavorite(appId) {
@@ -181,11 +180,12 @@ class AppFavorites {
        if (!this._removeFavorite(appId))
            return;
-        let msg = _("%s has been removed from your favorites.").format(app.get_name());
+        Main.overview.setMessage(_("%s has been removed from your favorites.").format(app.get_name()),
-        Main.overview.setMessage(msg, {
+                                 { forFeedback: true,
-            forFeedback: true,
+                                   undoCallback: () => {
-            undoCallback: () => this._addFavorite(appId, pos),
+                                       this._addFavorite(appId, pos);
-        });
+                                   }
                                 });
    }
 }
 Signals.addSignalMethods(AppFavorites.prototype);
--- a/js/ui/audioDeviceSelection.js
+++ b/js/ui/audioDeviceSelection.js
@@ -1,4 +1,3 @@
 /* exported AudioDeviceSelectionDBus */
 const { Clutter, Gio, GLib, GObject, Meta, Shell, St } = imports.gi;
 const Main = imports.ui.main;
@@ -9,13 +8,13 @@ const { loadInterfaceXML } = imports.misc.fileUtils;
 var AudioDevice = {
    HEADPHONES: 1 << 0,
    HEADSET:    1 << 1,
-    MICROPHONE: 1 << 2,
+    MICROPHONE: 1 << 2
 };
 const AudioDeviceSelectionIface = loadInterfaceXML('org.gnome.Shell.AudioDeviceSelection');
 var AudioDeviceSelectionDialog = GObject.registerClass({
-    Signals: { 'device-selected': { param_types: [GObject.TYPE_UINT] } },
+    Signals: { 'device-selected': { param_types: [GObject.TYPE_UINT] } }
 }, class AudioDeviceSelectionDialog extends ModalDialog.ModalDialog {
    _init(devices) {
        super._init({ styleClass: 'audio-device-selection-dialog' });
@@ -35,7 +34,7 @@ var AudioDeviceSelectionDialog = GObject.registerClass({
            throw new Error('Too few devices for a selection');
    }
-    _buildLayout() {
+    _buildLayout(devices) {
        let title = new St.Label({ style_class: 'audio-selection-title',
                                   text: _("Select Audio Device"),
                                   x_align: Clutter.ActorAlign.CENTER });
@@ -43,19 +42,15 @@ var AudioDeviceSelectionDialog = GObject.registerClass({
        this.contentLayout.style_class = 'audio-selection-content';
        this.contentLayout.add(title);
-        this._selectionBox = new St.BoxLayout({
+        this._selectionBox = new St.BoxLayout({ style_class: 'audio-selection-box' });
-            style_class: 'audio-selection-box',
+        this.contentLayout.add(this._selectionBox, { expand: true });
            x_expand: true,
        });
        this.contentLayout.add_child(this._selectionBox);
-        if (Main.sessionMode.allowSettings) {
+        if (Main.sessionMode.allowSettings)
            this.addButton({ action: this._openSettings.bind(this),
                             label: _("Sound Settings") });
        }
        this.addButton({ action: this.close.bind(this),
                         label: _("Cancel"),
-                         key: Clutter.KEY_Escape });
+                         key: Clutter.Escape });
    }
    _getDeviceLabel(device) {
@@ -90,7 +85,6 @@ var AudioDeviceSelectionDialog = GObject.registerClass({
        box.connect('notify::height', () => {
            Meta.later_add(Meta.LaterType.BEFORE_REDRAW, () => {
                box.width = box.height;
                return GLib.SOURCE_REMOVE;
            });
        });
@@ -165,7 +159,7 @@ var AudioDeviceSelectionDBus = class AudioDeviceSelectionDBus {
        let [deviceNames] = params;
        let devices = 0;
-        deviceNames.forEach(n => (devices |= AudioDevice[n.toUpperCase()]));
+        deviceNames.forEach(n => devices |= AudioDevice[n.toUpperCase()]);
        let dialog;
        try {
--- a/js/ui/background.js
+++ b/js/ui/background.js
@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported SystemBackground */
 // READ THIS FIRST
 // Background handling is a maze of objects, both objects in this file, and
@@ -94,12 +93,13 @@
 //     MetaBackgroundImage         MetaBackgroundImage
 //     MetaBackgroundImage         MetaBackgroundImage
-const { Clutter, GDesktopEnums, Gio, GLib, GObject, GnomeDesktop, Meta } = imports.gi;
+const { Clutter, GDesktopEnums, Gio, GLib, GnomeDesktop, Meta } = imports.gi;
 const Signals = imports.signals;
 const LoginManager = imports.misc.loginManager;
 const Main = imports.ui.main;
 const Params = imports.misc.params;
 const Tweener = imports.ui.tweener;
 var DEFAULT_BACKGROUND_COLOR = Clutter.Color.from_pixel(0x2e3436ff);
@@ -110,7 +110,7 @@ const COLOR_SHADING_TYPE_KEY = 'color-shading-type';
 const BACKGROUND_STYLE_KEY = 'picture-options';
 const PICTURE_URI_KEY = 'picture-uri';
-var FADE_ANIMATION_TIME = 1000;
+var FADE_ANIMATION_TIME = 1.0;
 // These parameters affect how often we redraw.
 // The first is how different (percent crossfaded) the slide show
@@ -145,7 +145,7 @@ var BackgroundCache = class BackgroundCache {
        let monitor = file.monitor(Gio.FileMonitorFlags.NONE, null);
        monitor.connect('changed',
-                        (obj, theFile, otherFile, eventType) => {
+                        (obj, file, otherFile, eventType) => {
                            // Ignore CHANGED and CREATED events, since in both cases
                            // we'll get a CHANGES_DONE_HINT event when done.
                            if (eventType != Gio.FileMonitorEvent.CHANGED &&
@@ -221,17 +221,16 @@ function getBackgroundCache() {
    return _backgroundCache;
 }
-var Background = GObject.registerClass({
+var Background = class Background {
-    Signals: { 'loaded': {}, 'bg-changed': {} },
+    constructor(params) {
 }, class Background extends Meta.Background {
    _init(params) {
        params = Params.parse(params, { monitorIndex: 0,
                                        layoutManager: Main.layoutManager,
                                        settings: null,
                                        file: null,
                                        style: null });
-        super._init({ meta_display: global.display });
+        this.background = new Meta.Background({ meta_display: global.display });
        this.background._delegate = this;
        this._settings = params.settings;
        this._file = params.file;
@@ -264,14 +263,16 @@ var Background = GObject.registerClass({
    }
    destroy() {
        this.background = null;
        this._cancellable.cancel();
        this._removeAnimationTimeout();
        let i;
        let keys = Object.keys(this._fileWatches);
-        for (i = 0; i < keys.length; i++)
+        for (i = 0; i < keys.length; i++) {
            this._cache.disconnect(this._fileWatches[keys[i]]);
-
+        }
        this._fileWatches = null;
        if (this._timezoneChangedId != 0)
@@ -300,11 +301,9 @@ var Background = GObject.registerClass({
        this._changedIdleId = GLib.idle_add(GLib.PRIORITY_DEFAULT, () => {
            this._changedIdleId = 0;
-            this.emit('bg-changed');
+            this.emit('changed');
            return GLib.SOURCE_REMOVE;
        });
        GLib.Source.set_name_by_id(this._changedIdleId,
            '[gnome-shell] Background._emitChangedSignal');
    }
    updateResolution() {
@@ -330,23 +329,23 @@ var Background = GObject.registerClass({
            this.emit('loaded');
            return GLib.SOURCE_REMOVE;
        });
-        GLib.Source.set_name_by_id(id, '[gnome-shell] Background._setLoaded Idle');
+        GLib.Source.set_name_by_id(id, '[gnome-shell] this.emit');
    }
    _loadPattern() {
-        let colorString, res_, color, secondColor;
+        let colorString, res, color, secondColor;
        colorString = this._settings.get_string(PRIMARY_COLOR_KEY);
-        [res_, color] = Clutter.Color.from_string(colorString);
+        [res, color] = Clutter.Color.from_string(colorString);
        colorString = this._settings.get_string(SECONDARY_COLOR_KEY);
-        [res_, secondColor] = Clutter.Color.from_string(colorString);
+        [res, secondColor] = Clutter.Color.from_string(colorString);
        let shadingType = this._settings.get_enum(COLOR_SHADING_TYPE_KEY);
        if (shadingType == GDesktopEnums.BackgroundShading.SOLID)
-            this.set_color(color);
+            this.background.set_color(color);
        else
-            this.set_gradient(shadingType, color, secondColor);
+            this.background.set_gradient(shadingType, color, secondColor);
    }
    _watchFile(file) {
@@ -382,13 +381,13 @@ var Background = GObject.registerClass({
        let finish = () => {
            this._setLoaded();
            if (files.length > 1) {
-                this.set_blend(files[0], files[1],
+                this.background.set_blend(files[0], files[1],
-                               this._animation.transitionProgress,
+                                          this._animation.transitionProgress,
-                               this._style);
+                                          this._style);
            } else if (files.length > 0) {
-                this.set_file(files[0], this._style);
+                this.background.set_file(files[0], this._style);
            } else {
-                this.set_file(null, this._style);
+                this.background.set_file(null, this._style);
            }
            this._queueUpdateAnimation();
        };
@@ -403,7 +402,6 @@ var Background = GObject.registerClass({
                if (numPendingImages == 0)
                    finish();
            } else {
                // eslint-disable-next-line no-loop-func
                let id = image.connect('loaded', () => {
                    image.disconnect(id);
                    numPendingImages--;
@@ -444,25 +442,24 @@ var Background = GObject.registerClass({
    }
    _loadAnimation(file) {
-        this._cache.getAnimation({
+        this._cache.getAnimation({ file: file,
-            file,
+                                   settingsSchema: this._settings.schema_id,
-            settingsSchema: this._settings.schema_id,
+                                   onLoaded: animation => {
-            onLoaded: animation => {
+                                       this._animation = animation;
                this._animation = animation;
-                if (!this._animation || this._cancellable.is_cancelled()) {
+                                       if (!this._animation || this._cancellable.is_cancelled()) {
-                    this._setLoaded();
+                                           this._setLoaded();
-                    return;
+                                           return;
-                }
+                                       }
-                this._updateAnimation();
+                                       this._updateAnimation();
-                this._watchFile(file);
+                                       this._watchFile(file);
-            },
+                                   }
-        });
+                                 });
    }
    _loadImage(file) {
-        this.set_file(file, this._style);
+        this.background.set_file(file, this._style);
        this._watchFile(file);
        let cache = Meta.BackgroundImageCache.get_default();
@@ -496,14 +493,13 @@ var Background = GObject.registerClass({
        this._loadFile(this._file);
    }
-});
+};
 Signals.addSignalMethods(Background.prototype);
 let _systemBackground;
-var SystemBackground = GObject.registerClass({
+var SystemBackground = class SystemBackground {
-    Signals: { 'loaded': {} },
+    constructor() {
 }, class SystemBackground extends Meta.BackgroundActor {
    _init() {
        let file = Gio.File.new_for_uri('resource:///org/gnome/shell/theme/noise-texture.png');
        if (_systemBackground == null) {
@@ -512,11 +508,9 @@ var SystemBackground = GObject.registerClass({
            _systemBackground.set_file(file, GDesktopEnums.BackgroundStyle.WALLPAPER);
        }
-        super._init({
+        this.actor = new Meta.BackgroundActor({ meta_display: global.display,
-            meta_display: global.display,
+                                                monitor: 0,
-            monitor: 0,
+                                                background: _systemBackground });
            background: _systemBackground,
        });
        let cache = Meta.BackgroundImageCache.get_default();
        let image = cache.load(file);
@@ -535,7 +529,8 @@ var SystemBackground = GObject.registerClass({
            });
        }
    }
-});
+};
 Signals.addSignalMethods(SystemBackground.prototype);
 var BackgroundSource = class BackgroundSource {
    constructor(layoutManager, settingsSchema) {
@@ -571,7 +566,7 @@ var BackgroundSource = class BackgroundSource {
        // We don't watch changes to settings here,
        // instead we rely on Background to watch those
-        // and emit 'bg-changed' at the right time
+        // and emit 'changed' at the right time
        if (this._overrideImage != null) {
            file = Gio.File.new_for_path(this._overrideImage);
@@ -593,14 +588,14 @@ var BackgroundSource = class BackgroundSource {
        if (!(monitorIndex in this._backgrounds)) {
            let background = new Background({
-                monitorIndex,
+                monitorIndex: monitorIndex,
                layoutManager: this._layoutManager,
                settings: this._settings,
-                file,
+                file: file,
-                style,
+                style: style
            });
-            background._changedId = background.connect('bg-changed', () => {
+            background._changedId = background.connect('changed', () => {
                background.disconnect(background._changedId);
                background.destroy();
                delete this._backgrounds[monitorIndex];
@@ -626,11 +621,11 @@ var BackgroundSource = class BackgroundSource {
    }
 };
-var Animation = GObject.registerClass(
+var Animation = class Animation {
-class Animation extends GnomeDesktop.BGSlideShow {
+    constructor(params) {
-    _init(params) {
+        params = Params.parse(params, { file: null });
        super._init(params);
        this.file = params.file;
        this.keyFrameFiles = [];
        this.transitionProgress = 0.0;
        this.transitionDuration = 0.0;
@@ -638,7 +633,9 @@ class Animation extends GnomeDesktop.BGSlideShow {
    }
    load(callback) {
-        this.load_async(null, () => {
+        this._show = new GnomeDesktop.BGSlideShow({ filename: this.file.get_path() });
        this._show.load_async(null, (object, result) => {
            this.loaded = true;
            if (callback)
                callback();
@@ -648,11 +645,13 @@ class Animation extends GnomeDesktop.BGSlideShow {
    update(monitor) {
        this.keyFrameFiles = [];
-        if (this.get_num_slides() < 1)
+        if (!this._show)
            return;
-        let [progress, duration, isFixed_, filename1, filename2] =
+        if (this._show.get_num_slides() < 1)
-            this.get_current_slide(monitor.width, monitor.height);
+            return;
        let [progress, duration, isFixed, filename1, filename2] = this._show.get_current_slide(monitor.width, monitor.height);
        this.transitionDuration = duration;
        this.transitionProgress = progress;
@@ -663,7 +662,8 @@ class Animation extends GnomeDesktop.BGSlideShow {
        if (filename2)
            this.keyFrameFiles.push(Gio.File.new_for_path(filename2));
    }
-});
+};
 Signals.addSignalMethods(Animation.prototype);
 var BackgroundManager = class BackgroundManager {
    constructor(params) {
@@ -710,12 +710,14 @@ var BackgroundManager = class BackgroundManager {
        this._newBackgroundActor = null;
        this.emit('changed');
-        oldBackgroundActor.ease({
+        Tweener.addTween(oldBackgroundActor,
-            opacity: 0,
+                         { opacity: 0,
-            duration: FADE_ANIMATION_TIME,
+                           time: FADE_ANIMATION_TIME,
-            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                           transition: 'easeOutQuad',
-            onComplete: () => oldBackgroundActor.destroy(),
+                           onComplete() {
-        });
+                               oldBackgroundActor.destroy();
                           }
                         });
    }
    _updateBackgroundActor() {
@@ -732,7 +734,7 @@ var BackgroundManager = class BackgroundManager {
        this._newBackgroundActor = newBackgroundActor;
-        let background = newBackgroundActor.background;
+        let background = newBackgroundActor.background._delegate;
        if (background.isLoaded) {
            this._swapBackgroundActor();
@@ -749,24 +751,23 @@ var BackgroundManager = class BackgroundManager {
    _createBackgroundActor() {
        let background = this._backgroundSource.getBackground(this._monitorIndex);
-        let backgroundActor = new Meta.BackgroundActor({
+        let backgroundActor = new Meta.BackgroundActor({ meta_display: global.display,
-            meta_display: global.display,
+                                                         monitor: this._monitorIndex,
-            monitor: this._monitorIndex,
+                                                         background: background.background,
-            background,
+                                                         vignette: this._vignette,
-            vignette: this._vignette,
+                                                         vignette_sharpness: 0.5,
-            vignette_sharpness: 0.5,
+                                                         brightness: 0.5,
-            brightness: 0.5,
+                                                       });
        });
        this._container.add_child(backgroundActor);
        if (this._controlPosition) {
            let monitor = this._layoutManager.monitors[this._monitorIndex];
            backgroundActor.set_position(monitor.x, monitor.y);
-            this._container.set_child_below_sibling(backgroundActor, null);
+            backgroundActor.lower_bottom();
        }
-        let changeSignalId = background.connect('bg-changed', () => {
+        let changeSignalId = background.connect('changed', () => {
            background.disconnect(changeSignalId);
            changeSignalId = null;
            this._updateBackgroundActor();
--- a/js/ui/backgroundMenu.js
+++ b/js/ui/backgroundMenu.js
@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported addBackgroundMenu */
 const { Clutter, St } = imports.gi;
@@ -31,16 +30,15 @@ function addBackgroundMenu(actor, layoutManager) {
    function openMenu(x, y) {
        Main.layoutManager.setDummyCursorGeometry(x, y, 0, 0);
-        actor._backgroundMenu.open(BoxPointer.PopupAnimation.FULL);
+        actor._backgroundMenu.open(BoxPointer.PopupAnimation.NONE);
    }
    let clickAction = new Clutter.ClickAction();
-    clickAction.connect('long-press', (action, theActor, state) => {
+    clickAction.connect('long-press', (action, actor, state) => {
-        if (state == Clutter.LongPressState.QUERY) {
+        if (state == Clutter.LongPressState.QUERY)
-            return (action.get_button() == 0 ||
+            return ((action.get_button() == 0 ||
                     action.get_button() == 1) &&
-                    !actor._backgroundMenu.isOpen;
+                    !actor._backgroundMenu.isOpen);
        }
        if (state == Clutter.LongPressState.ACTIVATE) {
            let [x, y] = action.get_coords();
            openMenu(x, y);
--- a/js/ui/barLevel.js
+++ b/js/ui/barLevel.js
@@ -1,107 +1,71 @@
 /* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */
 /* exported BarLevel */
-const { Atk, Clutter, GObject, St } = imports.gi;
+const { Atk, Clutter, St } = imports.gi;
 const Signals = imports.signals;
-var BarLevel = GObject.registerClass({
+var BarLevel = class {
-    Properties: {
+    constructor(value, params = {}) {
-        'value': GObject.ParamSpec.double(
+        if (isNaN(value))
-            'value', 'value', 'value',
+            // Avoid spreading NaNs around
-            GObject.ParamFlags.READWRITE,
+            throw TypeError('The bar level value must be a number');
            0, 2, 0),
        'maximum-value': GObject.ParamSpec.double(
            'maximum-value', 'maximum-value', 'maximum-value',
            GObject.ParamFlags.READWRITE,
            1, 2, 1),
        'overdrive-start': GObject.ParamSpec.double(
            'overdrive-start', 'overdrive-start', 'overdrive-start',
            GObject.ParamFlags.READWRITE,
            1, 2, 1),
    },
 }, class BarLevel extends St.DrawingArea {
    _init(params) {
        this._maxValue = 1;
-        this._value = 0;
+        this._value = Math.max(Math.min(value, this._maxValue), 0);
        this._overdriveStart = 1;
        this._barLevelWidth = 0;
-        let defaultParams = {
+        this.actor = new St.DrawingArea({ styleClass: params['styleClass'] || 'barlevel',
-            style_class: 'barlevel',
+                                          can_focus: params['canFocus'] || false,
-            accessible_role: Atk.Role.LEVEL_BAR,
+                                          reactive: params['reactive'] || false,
-        };
+                                          accessible_role: params['accessibleRole'] || Atk.Role.LEVEL_BAR });
-        super._init(Object.assign(defaultParams, params));
+        this.actor.connect('repaint', this._barLevelRepaint.bind(this));
-        this.connect('allocation-changed', (actor, box) => {
+        this.actor.connect('allocation-changed', (actor, box) => {
            this._barLevelWidth = box.get_width();
        });
-        this._customAccessible = St.GenericAccessible.new_for_actor(this);
+        this._customAccessible = St.GenericAccessible.new_for_actor(this.actor);
-        this.set_accessible(this._customAccessible);
+        this.actor.set_accessible(this._customAccessible);
        this._customAccessible.connect('get-current-value', this._getCurrentValue.bind(this));
        this._customAccessible.connect('get-minimum-value', this._getMinimumValue.bind(this));
        this._customAccessible.connect('get-maximum-value', this._getMaximumValue.bind(this));
        this._customAccessible.connect('set-current-value', this._setCurrentValue.bind(this));
-        this.connect('notify::value', this._valueChanged.bind(this));
+        this.connect('value-changed', this._valueChanged.bind(this));
    }
-    get value() {
+    setValue(value) {
-        return this._value;
+        if (isNaN(value))
            throw TypeError('The bar level value must be a number');
        this._value = Math.max(Math.min(value, this._maxValue), 0);
        this.actor.queue_repaint();
    }
-    set value(value) {
+    setMaximumValue(value) {
-        value = Math.max(Math.min(value, this._maxValue), 0);
+        if (isNaN(value))
            throw TypeError('The bar level max value must be a number');
-        if (this._value == value)
+        this._maxValue = Math.max(value, 1);
            return;
        this._value = value;
        this.notify('value');
        this.queue_repaint();
    }
    // eslint-disable-next-line camelcase
    get maximum_value() {
        return this._maxValue;
    }
    // eslint-disable-next-line camelcase
    set maximum_value(value) {
        value = Math.max(value, 1);
        if (this._maxValue == value)
            return;
        this._maxValue = value;
        this._overdriveStart = Math.min(this._overdriveStart, this._maxValue);
-        this.notify('maximum-value');
+        this.actor.queue_repaint();
        this.queue_repaint();
    }
-    // eslint-disable-next-line camelcase
+    setOverdriveStart(value) {
-    get overdrive_start() {
+        if (isNaN(value))
-        return this._overdriveStart;
+            throw TypeError('The overdrive limit value must be a number');
-    }
+        if (value > this._maxValue)
    // eslint-disable-next-line camelcase
    set overdrive_start(value) {
        if (this._overdriveStart == value)
            return;
        if (value > this._maxValue) {
            throw new Error(`Tried to set overdrive value to ${value}, ` +
                `which is a number greater than the maximum allowed value ${this._maxValue}`);
        }
        this._overdriveStart = value;
-        this.notify('overdrive-start');
+        this._value = Math.max(Math.min(value, this._maxValue), 0);
-        this.queue_repaint();
+        this.actor.queue_repaint();
    }
-    vfunc_repaint() {
+    _barLevelRepaint(area) {
-        let cr = this.get_context();
+        let cr = area.get_context();
-        let themeNode = this.get_theme_node();
+        let themeNode = area.get_theme_node();
-        let [width, height] = this.get_surface_size();
+        let [width, height] = area.get_surface_size();
        let barLevelHeight = themeNode.get_length('-barlevel-height');
        let barLevelBorderRadius = Math.min(width, barLevelHeight) / 2;
@@ -208,27 +172,32 @@ var BarLevel = GObject.registerClass({
        cr.$dispose();
    }
-    _getCurrentValue() {
+    _getCurrentValue(actor) {
        return this._value;
    }
-    _getOverdriveStart() {
+    _getOverdriveStart(actor) {
        return this._overdriveStart;
    }
-    _getMinimumValue() {
+    _getMinimumValue(actor) {
        return 0;
    }
-    _getMaximumValue() {
+    _getMaximumValue(actor) {
        return this._maxValue;
    }
-    _setCurrentValue(_actor, value) {
+    _setCurrentValue(actor, value) {
        this._value = value;
    }
-    _valueChanged() {
+    _valueChanged(barLevel, value, property) {
        this._customAccessible.notify("accessible-value");
    }
-});
+
    get value() {
        return this._value;
    }
 };
 Signals.addSignalMethods(BarLevel.prototype);
--- a/js/ui/boxpointer.js
+++ b/js/ui/boxpointer.js
@@ -1,9 +1,9 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported BoxPointer */
 const { Clutter, GObject, Shell, St } = imports.gi;
 const Main = imports.ui.main;
 const Tweener = imports.ui.tweener;
 var PopupAnimation = {
    NONE:  0,
@@ -12,7 +12,7 @@ var PopupAnimation = {
    FULL:  ~0,
 };
-var POPUP_ANIMATION_TIME = 150;
+var POPUP_ANIMATION_TIME = 0.15;
 /**
 * BoxPointer:
@@ -44,20 +44,14 @@ var BoxPointer = GObject.registerClass({
        this._border = new St.DrawingArea();
        this._border.connect('repaint', this._drawBorder.bind(this));
        this.add_actor(this._border);
-        this.set_child_above_sibling(this.bin, this._border);
+        this.bin.raise(this._border);
        this._sourceAlignment = 0.5;
-        this._muteInput = true;
+        this._capturedEventId = 0;
        this._muteInput();
        this.connect('destroy', this._onDestroy.bind(this));
    }
    vfunc_captured_event() {
        if (this._muteInput)
            return Clutter.EVENT_STOP;
        return Clutter.EVENT_PROPAGATE;
    }
    _onDestroy() {
        if (this._sourceActorDestroyId) {
            this._sourceActor.disconnect(this._sourceActorDestroyId);
@@ -69,10 +63,23 @@ var BoxPointer = GObject.registerClass({
        return this._arrowSide;
    }
    _muteInput() {
        if (this._capturedEventId == 0)
            this._capturedEventId = this.connect('captured-event',
                                                 () => Clutter.EVENT_STOP);
    }
    _unmuteInput() {
        if (this._capturedEventId != 0) {
            this.disconnect(this._capturedEventId);
            this._capturedEventId = 0;
        }
    }
    open(animate, onComplete) {
        let themeNode = this.get_theme_node();
        let rise = themeNode.get_length('-arrow-rise');
-        let animationTime = animate & PopupAnimation.FULL ? POPUP_ANIMATION_TIME : 0;
+        let animationTime = (animate & PopupAnimation.FULL) ? POPUP_ANIMATION_TIME : 0;
        if (animate & PopupAnimation.FADE)
            this.opacity = 0;
@@ -98,18 +105,16 @@ var BoxPointer = GObject.registerClass({
            }
        }
-        this.ease({
+        Tweener.addTween(this, { opacity: 255,
-            opacity: 255,
+                                 translation_x: 0,
-            translation_x: 0,
+                                 translation_y: 0,
-            translation_y: 0,
+                                 transition: 'linear',
-            duration: animationTime,
+                                 onComplete: () => {
-            mode: Clutter.AnimationMode.LINEAR,
+                                     this._unmuteInput();
-            onComplete: () => {
+                                     if (onComplete)
-                this._muteInput = false;
+                                         onComplete();
-                if (onComplete)
+                                 },
-                    onComplete();
+                                 time: animationTime });
            },
        });
    }
    close(animate, onComplete) {
@@ -120,8 +125,8 @@ var BoxPointer = GObject.registerClass({
        let translationY = 0;
        let themeNode = this.get_theme_node();
        let rise = themeNode.get_length('-arrow-rise');
-        let fade = animate & PopupAnimation.FADE;
+        let fade = (animate & PopupAnimation.FADE);
-        let animationTime = animate & PopupAnimation.FULL ? POPUP_ANIMATION_TIME : 0;
+        let animationTime = (animate & PopupAnimation.FULL) ? POPUP_ANIMATION_TIME : 0;
        if (animate & PopupAnimation.SLIDE) {
            switch (this._arrowSide) {
@@ -140,24 +145,23 @@ var BoxPointer = GObject.registerClass({
            }
        }
-        this._muteInput = true;
+        this._muteInput();
-        this.remove_all_transitions();
+        Tweener.removeTweens(this);
-        this.ease({
+        Tweener.addTween(this, { opacity: fade ? 0 : 255,
-            opacity: fade ? 0 : 255,
+                                 translation_x: translationX,
-            translation_x: translationX,
+                                 translation_y: translationY,
-            translation_y: translationY,
+                                 transition: 'linear',
-            duration: animationTime,
+                                 time: animationTime,
-            mode: Clutter.AnimationMode.LINEAR,
+                                 onComplete: () => {
-            onComplete: () => {
+                                     this.hide();
-                this.hide();
+                                     this.opacity = 0;
-                this.opacity = 0;
+                                     this.translation_x = 0;
-                this.translation_x = 0;
+                                     this.translation_y = 0;
-                this.translation_y = 0;
+                                     if (onComplete)
-                if (onComplete)
+                                         onComplete();
-                    onComplete();
+                                 }
-            },
+                               });
        });
    }
    _adjustAllocationForArrow(isWidth, minSize, natSize) {
@@ -165,8 +169,8 @@ var BoxPointer = GObject.registerClass({
        let borderWidth = themeNode.get_length('-arrow-border-width');
        minSize += borderWidth * 2;
        natSize += borderWidth * 2;
-        if ((!isWidth && (this._arrowSide == St.Side.TOP || this._arrowSide == St.Side.BOTTOM)) ||
+        if ((!isWidth && (this._arrowSide == St.Side.TOP || this._arrowSide == St.Side.BOTTOM))
-            (isWidth && (this._arrowSide == St.Side.LEFT || this._arrowSide == St.Side.RIGHT))) {
+            || (isWidth && (this._arrowSide == St.Side.LEFT || this._arrowSide == St.Side.RIGHT))) {
            let rise = themeNode.get_length('-arrow-rise');
            minSize += rise;
            natSize += rise;
@@ -247,10 +251,11 @@ var BoxPointer = GObject.registerClass({
            let [absX, absY] = this.get_transformed_position();
            if (this._arrowSide == St.Side.TOP ||
-                this._arrowSide == St.Side.BOTTOM)
+                this._arrowSide == St.Side.BOTTOM) {
                this._arrowOrigin = sourceX - absX + sourceWidth / 2;
-            else
+            } else {
                this._arrowOrigin = sourceY - absY + sourceHeight / 2;
            }
        }
        let borderWidth = themeNode.get_length('-arrow-border-width');
@@ -265,19 +270,20 @@ var BoxPointer = GObject.registerClass({
        let [width, height] = area.get_surface_size();
        let [boxWidth, boxHeight] = [width, height];
-        if (this._arrowSide == St.Side.TOP || this._arrowSide == St.Side.BOTTOM)
+        if (this._arrowSide == St.Side.TOP || this._arrowSide == St.Side.BOTTOM) {
            boxHeight -= rise;
-        else
+        } else {
            boxWidth -= rise;
-
+        }
        let cr = area.get_context();
        // Translate so that box goes from 0,0 to boxWidth,boxHeight,
        // with the arrow poking out of that
-        if (this._arrowSide == St.Side.TOP)
+        if (this._arrowSide == St.Side.TOP) {
            cr.translate(0, rise);
-        else if (this._arrowSide == St.Side.LEFT)
+        } else if (this._arrowSide == St.Side.LEFT) {
            cr.translate(rise, 0);
        }
        let [x1, y1] = [halfBorder, halfBorder];
        let [x2, y2] = [boxWidth - halfBorder, boxHeight - halfBorder];
@@ -463,7 +469,7 @@ var BoxPointer = GObject.registerClass({
        let sourceAllocation = this._sourceAllocation;
        let sourceCenterX = sourceAllocation.x1 + sourceContentBox.x1 + (sourceContentBox.x2 - sourceContentBox.x1) * this._sourceAlignment;
        let sourceCenterY = sourceAllocation.y1 + sourceContentBox.y1 + (sourceContentBox.y2 - sourceContentBox.y1) * this._sourceAlignment;
-        let [, , natWidth, natHeight] = this.get_preferred_size();
+        let [minWidth, minHeight, natWidth, natHeight] = this.get_preferred_size();
        // We also want to keep it onscreen, and separated from the
        // edge by the same distance as the main part of the box is
@@ -473,7 +479,7 @@ var BoxPointer = GObject.registerClass({
        let borderWidth = themeNode.get_length('-arrow-border-width');
        let arrowBase = themeNode.get_length('-arrow-base');
        let borderRadius = themeNode.get_length('-arrow-border-radius');
-        let margin = 4 * borderRadius + borderWidth + arrowBase;
+        let margin = (4 * borderRadius + borderWidth + arrowBase);
        let gap = themeNode.get_length('-boxpointer-gap');
        let padding = themeNode.get_length('-arrow-rise');
@@ -524,11 +530,11 @@ var BoxPointer = GObject.registerClass({
            arrowOrigin = sourceCenterX - resX;
            if (arrowOrigin <= (x1 + (borderRadius + halfBase))) {
                if (arrowOrigin > x1)
-                    resX += arrowOrigin - x1;
+                    resX += (arrowOrigin - x1);
                arrowOrigin = x1;
            } else if (arrowOrigin >= (x2 - (borderRadius + halfBase))) {
                if (arrowOrigin < x2)
-                    resX -= x2 - arrowOrigin;
+                    resX -= (x2 - arrowOrigin);
                arrowOrigin = x2;
            }
            break;
@@ -543,11 +549,11 @@ var BoxPointer = GObject.registerClass({
            arrowOrigin = sourceCenterY - resY;
            if (arrowOrigin <= (y1 + (borderRadius + halfBase))) {
                if (arrowOrigin > y1)
-                    resY += arrowOrigin - y1;
+                    resY += (arrowOrigin - y1);
                arrowOrigin = y1;
            } else if (arrowOrigin >= (y2 - (borderRadius + halfBase))) {
                if (arrowOrigin < y2)
-                    resX -= y2 - arrowOrigin;
+                    resX -= (y2 - arrowOrigin);
                arrowOrigin = y2;
            }
            break;
@@ -588,7 +594,7 @@ var BoxPointer = GObject.registerClass({
    _calculateArrowSide(arrowSide) {
        let sourceAllocation = this._sourceAllocation;
-        let [, , boxWidth, boxHeight] = this.get_preferred_size();
+        let [minWidth, minHeight, boxWidth, boxHeight] = this.get_preferred_size();
        let workarea = this._workArea;
        switch (arrowSide) {
--- a/js/ui/calendar.js
+++ b/js/ui/calendar.js
@@ -1,7 +1,7 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported Calendar, CalendarMessageList, DBusEventSource */
-const { Clutter, Gio, GLib, GObject, Shell, St } = imports.gi;
+const { Clutter, Gio, GLib, Shell, St } = imports.gi;
 const Signals = imports.signals;
 const Main = imports.ui.main;
 const MessageList = imports.ui.messageList;
@@ -20,7 +20,7 @@ var MESSAGE_ICON_SIZE = -1; // pick up from CSS
 var NC_ = (context, str) => `${context}\u0004${str}`;
 function sameYear(dateA, dateB) {
-    return dateA.getYear() == dateB.getYear();
+    return (dateA.getYear() == dateB.getYear());
 }
 function sameMonth(dateA, dateB) {
@@ -78,7 +78,7 @@ function _getCalendarDayAbbreviation(dayNumber) {
        /* Translators: Calendar grid abbreviation for Friday */
        NC_("grid friday", "F"),
        /* Translators: Calendar grid abbreviation for Saturday */
-        NC_("grid saturday", "S"),
+        NC_("grid saturday", "S")
    ];
    return Shell.util_translate_time_string(abbreviations[dayNumber]);
 }
@@ -98,66 +98,30 @@ var CalendarEvent = class CalendarEvent {
 // Interface for appointments/events - e.g. the contents of a calendar
 //
-var EventSourceBase = GObject.registerClass({
+// First, an implementation with no events
-    GTypeFlags: GObject.TypeFlags.ABSTRACT,
+var EmptyEventSource = class EmptyEventSource {
-    Properties: {
+    constructor() {
-        'has-calendars': GObject.ParamSpec.boolean(
+        this.isLoading = false;
-            'has-calendars', 'has-calendars', 'has-calendars',
+        this.isDummy = true;
-            GObject.ParamFlags.READABLE,
+        this.hasCalendars = false;
            false),
        'is-loading': GObject.ParamSpec.boolean(
            'is-loading', 'is-loading', 'is-loading',
            GObject.ParamFlags.READABLE,
            false),
    },
    Signals: { 'changed': {} },
 }, class EventSourceBase extends GObject.Object {
    get isLoading() {
        throw new GObject.NotImplementedError(`isLoading in ${this.constructor.name}`);
    }
    get hasCalendars() {
        throw new GObject.NotImplementedError(`hasCalendars in ${this.constructor.name}`);
    }
    destroy() {
    }
-    requestRange(_begin, _end) {
+    requestRange(begin, end) {
        throw new GObject.NotImplementedError(`requestRange in ${this.constructor.name}`);
    }
-    getEvents(_begin, _end) {
+    getEvents(begin, end) {
        throw new GObject.NotImplementedError(`getEvents in ${this.constructor.name}`);
    }
    hasEvents(_day) {
        throw new GObject.NotImplementedError(`hasEvents in ${this.constructor.name}`);
    }
 });
 var EmptyEventSource = GObject.registerClass(
 class EmptyEventSource extends EventSourceBase {
    get isLoading() {
        return false;
    }
    get hasCalendars() {
        return false;
    }
    requestRange(_begin, _end) {
    }
    getEvents(_begin, _end) {
        let result = [];
        return result;
    }
-    hasEvents(_day) {
+    hasEvents(day) {
        return false;
    }
-});
+};
 Signals.addSignalMethods(EmptyEventSource.prototype);
 const CalendarServerIface = loadInterfaceXML('org.gnome.Shell.CalendarServer');
@@ -189,12 +153,11 @@ function _dateIntervalsOverlap(a0, a1, b0, b1) {
 }
 // an implementation that reads data from a session bus service
-var DBusEventSource = GObject.registerClass(
+var DBusEventSource = class DBusEventSource {
-class DBusEventSource extends EventSourceBase {
+    constructor() {
    _init() {
        super._init();
        this._resetCache();
-        this._isLoading = false;
+        this.isLoading = false;
        this.isDummy = false;
        this._initialized = false;
        this._dbusProxy = new CalendarServer();
@@ -229,12 +192,12 @@ class DBusEventSource extends EventSourceBase {
            });
            this._dbusProxy.connect('g-properties-changed', () => {
-                this.notify('has-calendars');
+                this.emit('notify::has-calendars');
            });
            this._initialized = loaded;
            if (loaded) {
-                this.notify('has-calendars');
+                this.emit('notify::has-calendars');
                this._onNameAppeared();
            }
        });
@@ -251,23 +214,19 @@ class DBusEventSource extends EventSourceBase {
            return false;
    }
    get isLoading() {
        return this._isLoading;
    }
    _resetCache() {
        this._events = [];
        this._lastRequestBegin = null;
        this._lastRequestEnd = null;
    }
-    _onNameAppeared() {
+    _onNameAppeared(owner) {
        this._initialized = true;
        this._resetCache();
        this._loadEvents(true);
    }
-    _onNameVanished() {
+    _onNameVanished(oldOwner) {
        this._resetCache();
        this.emit('changed');
    }
@@ -276,7 +235,7 @@ class DBusEventSource extends EventSourceBase {
        this._loadEvents(false);
    }
-    _onEventsReceived(results, _error) {
+    _onEventsReceived(results, error) {
        let newEvents = [];
        let appointments = results[0] || [];
        for (let n = 0; n < appointments.length; n++) {
@@ -292,7 +251,7 @@ class DBusEventSource extends EventSourceBase {
        newEvents.sort((ev1, ev2) => ev1.date.getTime() - ev2.date.getTime());
        this._events = newEvents;
-        this._isLoading = false;
+        this.isLoading = false;
        this.emit('changed');
    }
@@ -312,7 +271,7 @@ class DBusEventSource extends EventSourceBase {
    requestRange(begin, end) {
        if (!(_datesEqual(begin, this._lastRequestBegin) && _datesEqual(end, this._lastRequestEnd))) {
-            this._isLoading = true;
+            this.isLoading = true;
            this._lastRequestBegin = begin;
            this._lastRequestEnd = end;
            this._curRequestBegin = begin;
@@ -326,8 +285,9 @@ class DBusEventSource extends EventSourceBase {
        for (let n = 0; n < this._events.length; n++) {
            let event = this._events[n];
-            if (_dateIntervalsOverlap(event.date, event.end, begin, end))
+            if (_dateIntervalsOverlap (event.date, event.end, begin, end)) {
                result.push(event);
            }
        }
        result.sort((event1, event2) => {
            // sort events by end time on ending day
@@ -349,12 +309,11 @@ class DBusEventSource extends EventSourceBase {
        return true;
    }
-});
+};
 Signals.addSignalMethods(DBusEventSource.prototype);
-var Calendar = GObject.registerClass({
+var Calendar = class Calendar {
-    Signals: { 'selected-date-changed': { param_types: [GLib.DateTime.$gtype] } },
+    constructor() {
 }, class Calendar extends St.Widget {
    _init() {
        this._weekStart = Shell.util_get_week_start();
        this._settings = new Gio.Settings({ schema_id: 'org.gnome.desktop.calendar' });
@@ -384,19 +343,19 @@ var Calendar = GObject.registerClass({
        this._shouldDateGrabFocus = false;
-        super._init({
+        this.actor = new St.Widget({ style_class: 'calendar',
-            style_class: 'calendar',
+                                     layout_manager: new Clutter.TableLayout(),
-            layout_manager: new Clutter.GridLayout(),
+                                     reactive: true });
            reactive: true,
        });
-        this._buildHeader();
+        this.actor.connect('scroll-event',
                           this._onScroll.bind(this));
        this._buildHeader ();
    }
    // @eventSource: is an object implementing the EventSource API, e.g. the
    // requestRange(), getEvents(), hasEvents() methods and the ::changed signal.
    setEventSource(eventSource) {
        if (!(eventSource instanceof EventSourceBase))
            throw new Error('Event source is not valid type');
        this._eventSource = eventSource;
        this._eventSource.connect('changed', () => {
            this._rebuildCalendar();
@@ -413,10 +372,7 @@ var Calendar = GObject.registerClass({
        this._selectedDate = date;
        this._update();
-
+        this.emit('selected-date-changed', new Date(this._selectedDate));
        let datetime = GLib.DateTime.new_from_unix_local(
            this._selectedDate.getTime() / 1000);
        this.emit('selected-date-changed', datetime);
    }
    updateTimeZone() {
@@ -427,13 +383,14 @@ var Calendar = GObject.registerClass({
    }
    _buildHeader() {
-        let layout = this.layout_manager;
+        let layout = this.actor.layout_manager;
        let offsetCols = this._useWeekdate ? 1 : 0;
-        this.destroy_all_children();
+        this.actor.destroy_all_children();
        // Top line of the calendar '<| September 2009 |>'
        this._topBox = new St.BoxLayout();
-        layout.attach(this._topBox, 0, 0, offsetCols + 7, 1);
+        layout.pack(this._topBox, 0, 0);
        layout.set_span(this._topBox, offsetCols + 7, 1);
        this._backButton = new St.Button({ style_class: 'calendar-change-month-back pager-button',
                                           accessible_name: _("Previous month"),
@@ -442,13 +399,9 @@ var Calendar = GObject.registerClass({
        this._topBox.add(this._backButton);
        this._backButton.connect('clicked', this._onPrevMonthButtonClicked.bind(this));
-        this._monthLabel = new St.Label({
+        this._monthLabel = new St.Label({ style_class: 'calendar-month-label',
-            style_class: 'calendar-month-label',
+                                          can_focus: true });
-            can_focus: true,
+        this._topBox.add(this._monthLabel, { expand: true, x_fill: false, x_align: St.Align.MIDDLE });
            x_align: Clutter.ActorAlign.CENTER,
            x_expand: true,
        });
        this._topBox.add_child(this._monthLabel);
        this._forwardButton = new St.Button({ style_class: 'calendar-change-month-forward pager-button',
                                              accessible_name: _("Next month"),
@@ -474,20 +427,20 @@ var Calendar = GObject.registerClass({
                                       can_focus: true });
            label.accessible_name = iter.toLocaleFormat('%A');
            let col;
-            if (this.get_text_direction() == Clutter.TextDirection.RTL)
+            if (this.actor.get_text_direction() == Clutter.TextDirection.RTL)
                col = 6 - (7 + iter.getDay() - this._weekStart) % 7;
            else
                col = offsetCols + (7 + iter.getDay() - this._weekStart) % 7;
-            layout.attach(label, col, 1, 1, 1);
+            layout.pack(label, col, 1);
            iter.setTime(iter.getTime() + MSECS_IN_DAY);
        }
        // All the children after this are days, and get removed when we update the calendar
-        this._firstDayIndex = this.get_n_children();
+        this._firstDayIndex = this.actor.get_n_children();
    }
-    vfunc_scroll_event(scrollEvent) {
+    _onScroll(actor, event) {
-        switch (scrollEvent.direction) {
+        switch (event.get_scroll_direction()) {
        case Clutter.ScrollDirection.UP:
        case Clutter.ScrollDirection.LEFT:
            this._onPrevMonthButtonClicked();
@@ -557,7 +510,7 @@ var Calendar = GObject.registerClass({
        let now = new Date();
        // Remove everything but the topBox and the weekday labels
-        let children = this.get_children();
+        let children = this.actor.get_children();
        for (let i = this._firstDayIndex; i < children.length; i++)
            children[i].destroy();
@@ -594,7 +547,7 @@ var Calendar = GObject.registerClass({
        beginDate.setTime(beginDate.getTime() - (weekPadding + daysToWeekStart) * MSECS_IN_DAY);
-        let layout = this.layout_manager;
+        let layout = this.actor.layout_manager;
        let iter = new Date(beginDate);
        let row = 2;
        // nRows here means 6 weeks + one header + one navbar
@@ -605,7 +558,7 @@ var Calendar = GObject.registerClass({
                                         can_focus: true });
            let rtl = button.get_text_direction() == Clutter.TextDirection.RTL;
-            if (this._eventSource instanceof EmptyEventSource)
+            if (this._eventSource.isDummy)
                button.reactive = false;
            button._date = new Date(iter);
@@ -627,9 +580,8 @@ var Calendar = GObject.registerClass({
            if (row == 2)
                styleClass = `calendar-day-top ${styleClass}`;
-            let leftMost = rtl
+            let leftMost = rtl ? iter.getDay() == (this._weekStart + 6) % 7
-                ? iter.getDay() == (this._weekStart + 6) % 7
+                               : iter.getDay() == this._weekStart;
                : iter.getDay() == this._weekStart;
            if (leftMost)
                styleClass = `calendar-day-left ${styleClass}`;
@@ -649,7 +601,7 @@ var Calendar = GObject.registerClass({
                col = 6 - (7 + iter.getDay() - this._weekStart) % 7;
            else
                col = offsetCols + (7 + iter.getDay() - this._weekStart) % 7;
-            layout.attach(button, col, row, 1, 1);
+            layout.pack(button, col, row);
            this._buttons.push(button);
@@ -659,7 +611,7 @@ var Calendar = GObject.registerClass({
                                           can_focus: true });
                let weekFormat = Shell.util_translate_time_string(N_("Week %V"));
                label.accessible_name = iter.toLocaleFormat(weekFormat);
-                layout.attach(label, rtl ? 7 : 0, row, 1, 1);
+                layout.pack(label, rtl ? 7 : 0, row);
            }
            iter.setTime(iter.getTime() + MSECS_IN_DAY);
@@ -694,12 +646,12 @@ var Calendar = GObject.registerClass({
            }
        });
    }
-});
+};
 Signals.addSignalMethods(Calendar.prototype);
-var EventMessage = GObject.registerClass(
+var EventMessage = class EventMessage extends MessageList.Message {
-class EventMessage extends MessageList.Message {
+    constructor(event, date) {
-    _init(event, date) {
+        super('', event.summary);
        super._init('', event.summary);
        this._event = event;
        this._date = date;
@@ -708,19 +660,18 @@ class EventMessage extends MessageList.Message {
        this._icon = new St.Icon({ icon_name: 'x-office-calendar-symbolic' });
        this.setIcon(this._icon);
    }
-    vfunc_style_changed() {
+        this.actor.connect('style-changed', () => {
-        let iconVisible = this.get_parent().has_style_pseudo_class('first-child');
+            let iconVisible = this.actor.get_parent().has_style_pseudo_class('first-child');
-        this._icon.opacity = iconVisible ? 255 : 0;
+            this._icon.opacity = (iconVisible ? 255 : 0);
-        super.vfunc_style_changed();
+        });
    }
    _formatEventTime() {
        let periodBegin = _getBeginningOfDay(this._date);
        let periodEnd = _getEndOfDay(this._date);
-        let allDay = this._event.allDay || (this._event.date <= periodBegin &&
+        let allDay = (this._event.allDay || (this._event.date <= periodBegin &&
-                                             this._event.end >= periodEnd);
+                                             this._event.end >= periodEnd));
        let title;
        if (allDay) {
            /* Translators: Shown in calendar event list for all day events
@@ -728,33 +679,32 @@ class EventMessage extends MessageList.Message {
             */
            title = C_("event list time", "All Day");
        } else {
-            let date = this._event.date >= periodBegin
+            let date = this._event.date >= periodBegin ? this._event.date
-                ? this._event.date
+                                                       : this._event.end;
                : this._event.end;
            title = Util.formatTime(date, { timeOnly: true });
        }
        let rtl = Clutter.get_default_text_direction() == Clutter.TextDirection.RTL;
        if (this._event.date < periodBegin && !this._event.allDay) {
            if (rtl)
-                title = `${title}${ELLIPSIS_CHAR}`;
+                title = title + ELLIPSIS_CHAR;
            else
-                title = `${ELLIPSIS_CHAR}${title}`;
+                title = ELLIPSIS_CHAR + title;
        }
        if (this._event.end > periodEnd && !this._event.allDay) {
            if (rtl)
-                title = `${ELLIPSIS_CHAR}${title}`;
+                title = ELLIPSIS_CHAR + title;
            else
-                title = `${title}${ELLIPSIS_CHAR}`;
+                title = title + ELLIPSIS_CHAR;
        }
        return title;
    }
-});
+};
-var NotificationMessage = GObject.registerClass(
+var NotificationMessage =
 class NotificationMessage extends MessageList.Message {
-    _init(notification) {
+    constructor(notification) {
-        super._init(notification.title, notification.bannerBodyText);
+        super(notification.title, notification.bannerBodyText);
        this.setUseBodyMarkup(notification.bannerBodyMarkup);
        this.notification = notification;
@@ -777,22 +727,21 @@ class NotificationMessage extends MessageList.Message {
    }
    _getIcon() {
-        if (this.notification.gicon) {
+        if (this.notification.gicon)
            return new St.Icon({ gicon: this.notification.gicon,
                                 icon_size: MESSAGE_ICON_SIZE });
-        } else {
+        else
            return this.notification.source.createIcon(MESSAGE_ICON_SIZE);
        }
    }
-    _onUpdated(n, _clear) {
+    _onUpdated(n, clear) {
        this.setIcon(this._getIcon());
        this.setTitle(n.title);
        this.setBody(n.bannerBodyText);
        this.setUseBodyMarkup(n.bannerBodyMarkup);
    }
-    vfunc_clicked() {
+    _onClicked() {
        this.notification.activate();
    }
@@ -814,12 +763,11 @@ class NotificationMessage extends MessageList.Message {
    canClose() {
        return true;
    }
-});
+};
-var EventsSection = GObject.registerClass(
+var EventsSection = class EventsSection extends MessageList.MessageListSection {
-class EventsSection extends MessageList.MessageListSection {
+    constructor() {
-    _init() {
+        super();
        super._init();
        this._desktopSettings = new Gio.Settings({ schema_id: 'org.gnome.desktop.interface' });
        this._desktopSettings.connect('changed', this._reloadEvents.bind(this));
@@ -829,9 +777,9 @@ class EventsSection extends MessageList.MessageListSection {
        this._title = new St.Button({ style_class: 'events-section-title',
                                      label: '',
                                      x_align: St.Align.START,
                                      can_focus: true });
-        this._title.child.x_align = Clutter.ActorAlign.START;
+        this.actor.insert_child_below(this._title, null);
        this.insert_child_below(this._title, null);
        this._title.connect('clicked', this._onTitleClicked.bind(this));
        this._title.connect('key-focus-in', this._onKeyFocusIn.bind(this));
@@ -842,9 +790,6 @@ class EventsSection extends MessageList.MessageListSection {
    }
    setEventSource(eventSource) {
        if (!(eventSource instanceof EventSourceBase))
            throw new Error('Event source is not valid type');
        this._eventSource = eventSource;
        this._eventSource.connect('changed', this._reloadEvents.bind(this));
    }
@@ -861,15 +806,14 @@ class EventsSection extends MessageList.MessageListSection {
        let dayFormat;
        let now = new Date();
-        if (sameYear(this._date, now)) {
+        if (sameYear(this._date, now))
            /* Translators: Shown on calendar heading when selected day occurs on current year */
            dayFormat = Shell.util_translate_time_string(NC_("calendar heading",
                                                             "%A, %B %-d"));
-        } else {
+        else
            /* Translators: Shown on calendar heading when selected day occurs on different year */
            dayFormat = Shell.util_translate_time_string(NC_("calendar heading",
                                                             "%A, %B %-d, %Y"));
        }
        this._title.label = this._date.toLocaleFormat(dayFormat);
    }
@@ -910,7 +854,7 @@ class EventsSection extends MessageList.MessageListSection {
    _appInstalledChanged() {
        this._calendarApp = undefined;
-        this._title.reactive = this._getCalendarApp() != null;
+        this._title.reactive = (this._getCalendarApp() != null);
    }
    _getCalendarApp() {
@@ -954,29 +898,12 @@ class EventsSection extends MessageList.MessageListSection {
        super._sync();
    }
-});
+};
-var TimeLabel = GObject.registerClass(
+var NotificationSection =
 class NotificationTimeLabel extends St.Label {
    _init(datetime) {
        super._init({
            style_class: 'event-time',
            x_align: Clutter.ActorAlign.START,
            y_align: Clutter.ActorAlign.END,
        });
        this._datetime = datetime;
    }
    vfunc_map() {
        this.text = Util.formatTimeSpan(this._datetime);
        super.vfunc_map();
    }
 });
 var NotificationSection = GObject.registerClass(
 class NotificationSection extends MessageList.MessageListSection {
-    _init() {
+    constructor() {
-        super._init();
+        super();
        this._sources = new Map();
        this._nUrgent = 0;
@@ -985,6 +912,8 @@ class NotificationSection extends MessageList.MessageListSection {
        Main.messageTray.getSources().forEach(source => {
            this._sourceAdded(Main.messageTray, source);
        });
        this.actor.connect('notify::mapped', this._onMapped.bind(this));
    }
    get allowed() {
@@ -992,13 +921,24 @@ class NotificationSection extends MessageList.MessageListSection {
               !Main.sessionMode.isGreeter;
    }
    _createTimeLabel(datetime) {
        let label = new St.Label({ style_class: 'event-time',
                                   x_align: Clutter.ActorAlign.START,
                                   y_align: Clutter.ActorAlign.END });
        label.connect('notify::mapped', () => {
            if (label.mapped)
                label.text = Util.formatTimeSpan(datetime);
        });
        return label;
    }
    _sourceAdded(tray, source) {
        let obj = {
            destroyId: 0,
            notificationAddedId: 0,
        };
-        obj.destroyId = source.connect('destroy', () => {
+        obj.destroyId = source.connect('destroy', source => {
            this._onSourceDestroy(source, obj);
        });
        obj.notificationAddedId = source.connect('notification-added',
@@ -1009,13 +949,13 @@ class NotificationSection extends MessageList.MessageListSection {
    _onNotificationAdded(source, notification) {
        let message = new NotificationMessage(notification);
-        message.setSecondaryActor(new TimeLabel(notification.datetime));
+        message.setSecondaryActor(this._createTimeLabel(notification.datetime));
        let isUrgent = notification.urgency == MessageTray.Urgency.CRITICAL;
        let updatedId = notification.connect('updated', () => {
-            message.setSecondaryActor(new TimeLabel(notification.datetime));
+            message.setSecondaryActor(this._createTimeLabel(notification.datetime));
-            this.moveMessage(message, isUrgent ? 0 : this._nUrgent, this.mapped);
+            this.moveMessage(message, isUrgent ? 0 : this._nUrgent, this.actor.mapped);
        });
        let destroyId = notification.connect('destroy', () => {
            notification.disconnect(destroyId);
@@ -1035,7 +975,7 @@ class NotificationSection extends MessageList.MessageListSection {
        }
        let index = isUrgent ? 0 : this._nUrgent;
-        this.addMessageAtIndex(message, index, this.mapped);
+        this.addMessageAtIndex(message, index, this.actor.mapped);
    }
    _onSourceDestroy(source, obj) {
@@ -1045,23 +985,25 @@ class NotificationSection extends MessageList.MessageListSection {
        this._sources.delete(source);
    }
-    vfunc_map() {
+    _onMapped() {
-        this._messages.forEach(message => {
+        if (!this.actor.mapped)
            return;
        for (let message of this._messages.keys())
            if (message.notification.urgency != MessageTray.Urgency.CRITICAL)
                message.notification.acknowledged = true;
        });
        super.vfunc_map();
    }
    _shouldShow() {
        return !this.empty && isToday(this._date);
    }
-});
+};
 var Placeholder = class Placeholder {
    constructor() {
        this.actor = new St.BoxLayout({ style_class: 'message-list-placeholder',
                                        vertical: true });
 var Placeholder = GObject.registerClass(
 class Placeholder extends St.BoxLayout {
    _init() {
        super._init({ style_class: 'message-list-placeholder', vertical: true });
        this._date = new Date();
        let todayFile = Gio.File.new_for_uri('resource:///org/gnome/shell/theme/no-notifications.svg');
@@ -1070,10 +1012,10 @@ class Placeholder extends St.BoxLayout {
        this._otherIcon = new Gio.FileIcon({ file: otherFile });
        this._icon = new St.Icon();
-        this.add_actor(this._icon);
+        this.actor.add_actor(this._icon);
        this._label = new St.Label();
-        this.add_actor(this._label);
+        this.actor.add_actor(this._label);
        this._sync();
    }
@@ -1100,56 +1042,44 @@ class Placeholder extends St.BoxLayout {
            this._label.text = _("No Events");
        }
    }
-});
+};
-var CalendarMessageList = GObject.registerClass(
+var CalendarMessageList = class CalendarMessageList {
-class CalendarMessageList extends St.Widget {
+    constructor() {
-    _init() {
+        this.actor = new St.Widget({ style_class: 'message-list',
-        super._init({
+                                     layout_manager: new Clutter.BinLayout(),
-            style_class: 'message-list',
+                                     x_expand: true, y_expand: true });
            layout_manager: new Clutter.BinLayout(),
            x_expand: true,
            y_expand: true,
        });
        this._placeholder = new Placeholder();
-        this.add_actor(this._placeholder);
+        this.actor.add_actor(this._placeholder.actor);
        let box = new St.BoxLayout({ vertical: true,
                                     x_expand: true, y_expand: true });
-        this.add_actor(box);
+        this.actor.add_actor(box);
-        this._scrollView = new St.ScrollView({
+        this._scrollView = new St.ScrollView({ style_class: 'vfade',
-            style_class: 'vfade',
+                                               overlay_scrollbars: true,
-            overlay_scrollbars: true,
+                                               x_expand: true, y_expand: true,
-            x_expand: true, y_expand: true,
+                                               x_fill: true, y_fill: true });
        });
        this._scrollView.set_policy(St.PolicyType.NEVER, St.PolicyType.AUTOMATIC);
        box.add_actor(this._scrollView);
-        this._clearButton = new St.Button({
+        this._clearButton = new St.Button({ style_class: 'message-list-clear-button button',
-            style_class: 'message-list-clear-button button',
+                                            label: _("Clear"),
-            label: _('Clear'),
+                                            can_focus: true });
-            can_focus: true,
+        this._clearButton.set_x_align(Clutter.ActorAlign.END);
            x_align: Clutter.ActorAlign.END,
        });
        this._clearButton.connect('clicked', () => {
-            this._sectionList.get_children().forEach(s => s.clear());
+            let sections = [...this._sections.keys()];
            sections.forEach((s) => s.clear());
        });
        box.add_actor(this._clearButton);
        this._placeholder.bind_property('visible',
            this._clearButton, 'visible',
            GObject.BindingFlags.INVERT_BOOLEAN);
        this._sectionList = new St.BoxLayout({ style_class: 'message-list-sections',
                                               vertical: true,
                                               x_expand: true,
                                               y_expand: true,
                                               y_align: Clutter.ActorAlign.START });
        this._sectionList.connect('actor-added', this._sync.bind(this));
        this._sectionList.connect('actor-removed', this._sync.bind(this));
        this._scrollView.add_actor(this._sectionList);
        this._sections = new Map();
        this._mediaSection = new Mpris.MediaSection();
        this._addSection(this._mediaSection);
@@ -1164,35 +1094,59 @@ class CalendarMessageList extends St.Widget {
    }
    _addSection(section) {
-        let connectionsIds = [];
+        let obj = {
            destroyId: 0,
            visibleId: 0,
            emptyChangedId: 0,
            canClearChangedId: 0,
            keyFocusId: 0
        };
        obj.destroyId = section.actor.connect('destroy', () => {
            this._removeSection(section);
        });
        obj.visibleId = section.actor.connect('notify::visible',
                                              this._sync.bind(this));
        obj.emptyChangedId = section.connect('empty-changed',
                                             this._sync.bind(this));
        obj.canClearChangedId = section.connect('can-clear-changed',
                                                this._sync.bind(this));
        obj.keyFocusId = section.connect('key-focus-in',
                                         this._onKeyFocusIn.bind(this));
-        for (let prop of ['visible', 'empty', 'can-clear']) {
+        this._sections.set(section, obj);
-            connectionsIds.push(
+        this._sectionList.add_actor(section.actor);
-                section.connect(`notify::${prop}`, this._sync.bind(this)));
+        this._sync();
-        }
+    }
        connectionsIds.push(section.connect('message-focused', (_s, messageActor) => {
            Util.ensureActorVisibleInScrollView(this._scrollView, messageActor);
        }));
-        connectionsIds.push(section.connect('destroy', () => {
+    _removeSection(section) {
-            connectionsIds.forEach(id => section.disconnect(id));
+        let obj = this._sections.get(section);
-            this._sectionList.remove_actor(section);
+        section.actor.disconnect(obj.destroyId);
-        }));
+        section.actor.disconnect(obj.visibleId);
        section.disconnect(obj.emptyChangedId);
        section.disconnect(obj.canClearChangedId);
        section.disconnect(obj.keyFocusId);
-        this._sectionList.add_actor(section);
+        this._sections.delete(section);
        this._sectionList.remove_actor(section.actor);
        this._sync();
    }
    _onKeyFocusIn(section, actor) {
        Util.ensureActorVisibleInScrollView(this._scrollView, actor);
    }
    _sync() {
-        let sections = this._sectionList.get_children();
+        let sections = [...this._sections.keys()];
        let visible = sections.some(s => s.allowed);
-        this.visible = visible;
+        this.actor.visible = visible;
        if (!visible)
            return;
-        let empty = sections.every(s => s.empty || !s.visible);
+        let empty = sections.every(s => s.empty || !s.actor.visible);
-        this._placeholder.visible = empty;
+        this._placeholder.actor.visible = empty;
        this._clearButton.visible = !empty;
-        let canClear = sections.some(s => s.canClear && s.visible);
+        let canClear = sections.some(s => s.canClear && s.actor.visible);
        this._clearButton.reactive = canClear;
    }
@@ -1201,7 +1155,8 @@ class CalendarMessageList extends St.Widget {
    }
    setDate(date) {
-        this._sectionList.get_children().forEach(s => s.setDate(date));
+        for (let section of this._sections.keys())
            section.setDate(date);
        this._placeholder.setDate(date);
    }
-});
+};
--- a/js/ui/checkBox.js
+++ b/js/ui/checkBox.js
@@ -1,22 +1,18 @@
-/* exported CheckBox */
+const { Clutter, Pango, St } = imports.gi;
 const { Clutter, GObject, Pango, St } = imports.gi;
-var CheckBox = GObject.registerClass(
+var CheckBox = class CheckBox {
-class CheckBox extends St.Button {
+    constructor(label) {
-    _init(label) {
+        let container = new St.BoxLayout();
-        let container = new St.BoxLayout({
+        this.actor = new St.Button({ style_class: 'check-box',
-            x_expand: true,
+                                     child: container,
-            y_expand: true,
+                                     button_mask: St.ButtonMask.ONE,
-        });
+                                     toggle_mode: true,
-        super._init({
+                                     can_focus: true,
-            style_class: 'check-box',
+                                     x_fill: true,
-            child: container,
+                                     y_fill: true });
            button_mask: St.ButtonMask.ONE,
            toggle_mode: true,
            can_focus: true,
        });
-        this._box = new St.Bin({ y_align: Clutter.ActorAlign.START });
+        this._box = new St.Bin();
        this._box.set_y_align(Clutter.ActorAlign.START);
        container.add_actor(this._box);
        this._label = new St.Label();
@@ -35,4 +31,4 @@ class CheckBox extends St.Button {
    getLabelActor() {
        return this._label;
    }
-});
+};
--- a/js/ui/closeDialog.js
+++ b/js/ui/closeDialog.js
@@ -1,19 +1,19 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported CloseDialog */
-const { Clutter, Gio, GLib, GObject, Meta, Shell, St } = imports.gi;
+const { Clutter, Gio, GLib, GObject, Meta, Shell } = imports.gi;
 const Dialog = imports.ui.dialog;
 const Main = imports.ui.main;
 const Tweener = imports.ui.tweener;
 var FROZEN_WINDOW_BRIGHTNESS = -0.3;
-var DIALOG_TRANSITION_TIME = 150;
+var DIALOG_TRANSITION_TIME = 0.15;
 var ALIVE_TIMEOUT = 5000;
 var CloseDialog = GObject.registerClass({
    Implements: [Meta.CloseDialog],
    Properties: {
-        'window': GObject.ParamSpec.override('window', Meta.CloseDialog),
+        'window': GObject.ParamSpec.override('window', Meta.CloseDialog)
    },
 }, class CloseDialog extends GObject.Object {
    _init(window) {
@@ -46,18 +46,6 @@ var CloseDialog = GObject.registerClass({
        return new Dialog.MessageDialogContent({ icon, title, subtitle });
    }
    _updateScale() {
        // Since this is a child of MetaWindowActor (which, for Wayland clients,
        // applies the geometry scale factor to its children itself, see
        // meta_window_actor_set_geometry_scale()), make sure we don't apply
        // the factor twice in the end.
        if (this._window.get_client_type() !== Meta.WindowClientType.WAYLAND)
            return;
        let { scaleFactor } = St.ThemeContext.get_for_stage(global.stage);
        this._dialog.set_scale(1 / scaleFactor, 1 / scaleFactor);
    }
    _initDialog() {
        if (this._dialog)
            return;
@@ -73,14 +61,9 @@ var CloseDialog = GObject.registerClass({
                                 default: true });
        this._dialog.addButton({ label: _('Wait'),
                                 action: this._onWait.bind(this),
-                                 key: Clutter.KEY_Escape });
+                                 key: Clutter.Escape });
        global.focus_manager.add_group(this._dialog);
        let themeContext = St.ThemeContext.get_for_stage(global.stage);
        themeContext.connect('notify::scale-factor', this._updateScale.bind(this));
        this._updateScale();
    }
    _addWindowEffect() {
@@ -124,12 +107,11 @@ var CloseDialog = GObject.registerClass({
        if (this._tracked === shouldTrack)
            return;
-        if (shouldTrack) {
+        if (shouldTrack)
            Main.layoutManager.trackChrome(this._dialog,
                                           { affectsInputRegion: true });
-        } else {
+        else
            Main.layoutManager.untrackChrome(this._dialog);
        }
        // The buttons are broken when they aren't added to the input region,
        // so disable them properly in that case
@@ -163,15 +145,15 @@ var CloseDialog = GObject.registerClass({
        this._addWindowEffect();
        this._initDialog();
-        this._dialog._dialog.scale_y = 0;
+        this._dialog.scale_y = 0;
-        this._dialog._dialog.set_pivot_point(0.5, 0.5);
+        this._dialog.set_pivot_point(0.5, 0.5);
-        this._dialog._dialog.ease({
+        Tweener.addTween(this._dialog,
-            scale_y: 1,
+                         { scale_y: 1,
-            mode: Clutter.AnimationMode.LINEAR,
+                           transition: 'linear',
-            duration: DIALOG_TRANSITION_TIME,
+                           time: DIALOG_TRANSITION_TIME,
-            onComplete: this._onFocusChanged.bind(this),
+                           onComplete: this._onFocusChanged.bind(this)
-        });
+                         });
    }
    vfunc_hide() {
@@ -193,12 +175,14 @@ var CloseDialog = GObject.registerClass({
        this._dialog = null;
        this._removeWindowEffect();
-        dialog._dialog.ease({
+        Tweener.addTween(dialog,
-            scale_y: 0,
+                         { scale_y: 0,
-            mode: Clutter.AnimationMode.LINEAR,
+                           transition: 'linear',
-            duration: DIALOG_TRANSITION_TIME,
+                           time: DIALOG_TRANSITION_TIME,
-            onComplete: () => dialog.destroy(),
+                           onComplete: () => {
-        });
+                               dialog.destroy();
                           }
                         });
    }
    vfunc_focus() {
--- a/js/ui/components/init.js
+++ b/js/ui/components/init.js
@@ -1,4 +1,3 @@
 /* exported ComponentManager */
 const Main = imports.ui.main;
 var ComponentManager = class {
--- a/js/ui/components/automountManager.js
+++ b/js/ui/components/automountManager.js
@@ -1,7 +1,7 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported Component */
 const { Gio, GLib } = imports.gi;
 const Mainloop = imports.mainloop;
 const Params = imports.misc.params;
 const GnomeSession = imports.misc.gnomeSession;
@@ -38,7 +38,7 @@ var AutomountManager = class {
        this._driveDisconnectedId = this._volumeMonitor.connect('drive-disconnected', this._onDriveDisconnected.bind(this));
        this._driveEjectButtonId = this._volumeMonitor.connect('drive-eject-button', this._onDriveEjectButton.bind(this));
-        this._mountAllId = GLib.idle_add(GLib.PRIORITY_DEFAULT, this._startupMountAll.bind(this));
+        this._mountAllId = Mainloop.idle_add(this._startupMountAll.bind(this));
        GLib.Source.set_name_by_id(this._mountAllId, '[gnome-shell] this._startupMountAll');
    }
@@ -50,16 +50,17 @@ var AutomountManager = class {
        this._volumeMonitor.disconnect(this._driveEjectButtonId);
        if (this._mountAllId > 0) {
-            GLib.source_remove(this._mountAllId);
+            Mainloop.source_remove(this._mountAllId);
            this._mountAllId = 0;
        }
    }
-    _InhibitorsChanged(_object, _senderName, [_inhibitor]) {
+    _InhibitorsChanged(object, senderName, [inhibtor]) {
        this._session.IsInhibitedRemote(GNOME_SESSION_AUTOMOUNT_INHIBIT,
            (result, error) => {
-                if (!error)
+                if (!error) {
                    this._inhibited = result[0];
                }
            });
    }
@@ -109,7 +110,7 @@ var AutomountManager = class {
        // mount operation object
        if (drive.can_stop()) {
            drive.stop(Gio.MountUnmountFlags.FORCE, null, null,
-                (o, res) => {
+                (drive, res) => {
                    try {
                        drive.stop_finish(res);
                    } catch (e) {
@@ -118,7 +119,7 @@ var AutomountManager = class {
                });
        } else if (drive.can_eject()) {
            drive.eject_with_operation(Gio.MountUnmountFlags.FORCE, null, null,
-                (o, res) => {
+                (drive, res) => {
                    try {
                        drive.eject_with_operation_finish(res);
                    } catch (e) {
@@ -155,7 +156,7 @@ var AutomountManager = class {
            !volume.should_automount() ||
            !volume.can_mount()) {
            // allow the autorun to run anyway; this can happen if the
-            // mount gets added programmatically later, even if
+            // mount gets added programmatically later, even if 
            // should_automount() or can_mount() are false, like for
            // blank optical media.
            this._allowAutorun(volume);
@@ -218,19 +219,19 @@ var AutomountManager = class {
    _onVolumeRemoved(monitor, volume) {
        if (volume._allowAutorunExpireId && volume._allowAutorunExpireId > 0) {
-            GLib.source_remove(volume._allowAutorunExpireId);
+            Mainloop.source_remove(volume._allowAutorunExpireId);
            delete volume._allowAutorunExpireId;
        }
-        this._volumeQueue =
+        this._volumeQueue = 
-            this._volumeQueue.filter(element => element != volume);
+            this._volumeQueue.filter(element => (element != volume));
    }
    _reaskPassword(volume) {
        let prevOperation = this._activeOperations.get(volume);
        let existingDialog = prevOperation ? prevOperation.borrowDialog() : null;
-        let operation =
+        let operation = 
            new ShellMountOperation.ShellMountOperation(volume,
-                                                        { existingDialog });
+                                                        { existingDialog: existingDialog });
        this._mountVolume(volume, operation);
    }
@@ -247,7 +248,7 @@ var AutomountManager = class {
    }
    _allowAutorunExpire(volume) {
-        let id = GLib.timeout_add_seconds(GLib.PRIORITY_DEFAULT, AUTORUN_EXPIRE_TIMEOUT_SECS, () => {
+        let id = Mainloop.timeout_add_seconds(AUTORUN_EXPIRE_TIMEOUT_SECS, () => {
            volume.allowAutorun = false;
            delete volume._allowAutorunExpireId;
            return GLib.SOURCE_REMOVE;
--- a/js/ui/components/autorunManager.js
+++ b/js/ui/components/autorunManager.js
@@ -1,7 +1,6 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported Component */
-const { Clutter, Gio, GObject, St } = imports.gi;
+const { Gio, St } = imports.gi;
 const GnomeSession = imports.misc.gnomeSession;
 const Main = imports.ui.main;
@@ -20,7 +19,7 @@ var AutorunSetting = {
    RUN: 0,
    IGNORE: 1,
    FILES: 2,
-    ASK: 3,
+    ASK: 3
 };
 // misc utils
@@ -41,7 +40,7 @@ function isMountRootHidden(root) {
    let path = root.get_path();
    // skip any mounts in hidden directory hierarchies
-    return path.includes('/.');
+    return (path.includes('/.'));
 }
 function isMountNonLocal(mount) {
@@ -52,7 +51,7 @@ function isMountNonLocal(mount) {
    if (volume == null)
        return true;
-    return volume.get_identifier("class") == "network";
+    return (volume.get_identifier("class") == "network");
 }
 function startAppForMount(app, mount) {
@@ -63,7 +62,7 @@ function startAppForMount(app, mount) {
    files.push(root);
    try {
-        retval = app.launch(files,
+        retval = app.launch(files, 
                            global.create_app_launch_context(0, -1));
    } catch (e) {
        log(`Unable to launch the application ${app.get_name()}: ${e}`);
@@ -72,6 +71,8 @@ function startAppForMount(app, mount) {
    return retval;
 }
 /******************************************/
 const HotplugSnifferIface = loadInterfaceXML('org.gnome.Shell.HotplugSniffer');
 const HotplugSnifferProxy = Gio.DBusProxy.makeProxyWrapper(HotplugSnifferIface);
 function HotplugSniffer() {
@@ -115,17 +116,16 @@ var ContentTypeDiscoverer = class {
            let hotplugSniffer = new HotplugSniffer();
            hotplugSniffer.SniffURIRemote(root.get_uri(),
-                result => {
+                 ([contentTypes]) => {
-                    [contentTypes] = result;
+                     this._emitCallback(mount, contentTypes);
-                    this._emitCallback(mount, contentTypes);
+                 });
                });
        }
    }
    _emitCallback(mount, contentTypes = []) {
        // we're not interested in win32 software content types here
        contentTypes = contentTypes.filter(
-            type => type != 'x-content/win32-software'
+            type => (type != 'x-content/win32-software')
        );
        let apps = [];
@@ -167,7 +167,7 @@ var AutorunManager = class {
        if (!this._session.SessionIsActive)
            return;
-        let discoverer = new ContentTypeDiscoverer((m, apps, contentTypes) => {
+        let discoverer = new ContentTypeDiscoverer((mount, apps, contentTypes) => {
            this._dispatcher.addMount(mount, apps, contentTypes);
        });
        discoverer.guessContentTypes(mount);
@@ -202,7 +202,7 @@ var AutorunDispatcher = class {
    }
    _getSourceForMount(mount) {
-        let filtered = this._sources.filter(source => source.mount == mount);
+        let filtered = this._sources.filter(source => (source.mount == mount));
        // we always make sure not to add two sources for the same
        // mount in addMount(), so it's safe to assume filtered.length
@@ -214,11 +214,11 @@ var AutorunDispatcher = class {
    }
    _addSource(mount, apps) {
-        // if we already have a source showing for this
+        // if we already have a source showing for this 
        // mount, return
        if (this._getSourceForMount(mount))
            return;
-
+     
        // add a new source
        this._sources.push(new AutorunSource(this._manager, mount, apps));
    }
@@ -246,10 +246,11 @@ var AutorunDispatcher = class {
        let success = false;
        let app = null;
-        if (setting == AutorunSetting.RUN)
+        if (setting == AutorunSetting.RUN) {
            app = Gio.app_info_get_default_for_type(contentTypes[0], false);
-        else if (setting == AutorunSetting.FILES)
+        } else if (setting == AutorunSetting.FILES) {
            app = Gio.app_info_get_default_for_type('inode/directory', false);
        }
        if (app)
            success = startAppForMount(app, mount);
@@ -262,7 +263,7 @@ var AutorunDispatcher = class {
    removeMount(mount) {
        let source = this._getSourceForMount(mount);
-
+        
        // if we aren't tracking this mount, don't do anything
        if (!source)
            return;
@@ -272,10 +273,9 @@ var AutorunDispatcher = class {
    }
 };
-var AutorunSource = GObject.registerClass(
+var AutorunSource = class extends MessageTray.Source {
-class AutorunSource extends MessageTray.Source {
+    constructor(manager, mount, apps) {
-    _init(manager, mount, apps) {
+        super(mount.get_name());
        super._init(mount.get_name());
        this._manager = manager;
        this.mount = mount;
@@ -285,7 +285,7 @@ class AutorunSource extends MessageTray.Source {
        // add ourselves as a source, and popup the notification
        Main.messageTray.add(this);
-        this.showNotification(this._notification);
+        this.notify(this._notification);
    }
    getIcon() {
@@ -295,12 +295,11 @@ class AutorunSource extends MessageTray.Source {
    _createPolicy() {
        return new MessageTray.NotificationApplicationPolicy('org.gnome.Nautilus');
    }
-});
+};
-var AutorunNotification = GObject.registerClass(
+var AutorunNotification = class extends MessageTray.Notification {
-class AutorunNotification extends MessageTray.Notification {
+    constructor(manager, source) {
-    _init(manager, source) {
+        super(source, source.title);
        super._init(source, source.title);
        this._manager = manager;
        this._mount = source.mount;
@@ -320,23 +319,20 @@ class AutorunNotification extends MessageTray.Notification {
    }
    _buttonForApp(app) {
-        let box = new St.BoxLayout({
+        let box = new St.BoxLayout();
            x_expand: true,
            x_align: Clutter.ActorAlign.START,
        });
        let icon = new St.Icon({ gicon: app.get_icon(),
                                 style_class: 'hotplug-notification-item-icon' });
        box.add(icon);
-        let label = new St.Bin({
+        let label = new St.Bin({ y_align: St.Align.MIDDLE,
-            child: new St.Label({
+                                 child: new St.Label
-                text: _("Open with %s").format(app.get_name()),
+                                 ({ text: _("Open with %s").format(app.get_name()) })
-                y_align: Clutter.ActorAlign.CENTER,
+                               });
            }),
        });
        box.add(label);
        let button = new St.Button({ child: box,
                                     x_fill: true,
                                     x_align: St.Align.START,
                                     x_expand: true,
                                     button_mask: St.ButtonMask.ONE,
                                     style_class: 'hotplug-notification-item button' });
@@ -355,6 +351,6 @@ class AutorunNotification extends MessageTray.Notification {
        let app = Gio.app_info_get_default_for_type('inode/directory', false);
        startAppForMount(app, this._mount);
    }
-});
+};
 var Component = AutorunManager;
--- a/js/ui/components/keyring.js
+++ b/js/ui/components/keyring.js
@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported Component */
 const { Clutter, Gcr, Gio, GObject, Pango, Shell, St } = imports.gi;
@@ -33,7 +32,7 @@ class KeyringDialog extends ModalDialog.ModalDialog {
        this._cancelButton = this.addButton({ label: '',
                                              action: this._onCancelButton.bind(this),
-                                              key: Clutter.KEY_Escape });
+                                              key: Clutter.Escape });
        this._continueButton = this.addButton({ label: '',
                                                action: this._onContinueButton.bind(this),
                                                default: true });
@@ -54,12 +53,8 @@ class KeyringDialog extends ModalDialog.ModalDialog {
    _buildControlTable() {
        let layout = new Clutter.GridLayout({ orientation: Clutter.Orientation.VERTICAL });
-        let table = new St.Widget({
+        let table = new St.Widget({ style_class: 'keyring-dialog-control-table',
-            style_class: 'keyring-dialog-control-table',
+                                    layout_manager: layout });
            layout_manager: layout,
            x_expand: true,
            y_expand: true,
        });
        layout.hookup_style(table);
        let rtl = table.get_text_direction() == Clutter.TextDirection.RTL;
        let row = 0;
@@ -78,18 +73,16 @@ class KeyringDialog extends ModalDialog.ModalDialog {
            ShellEntry.addContextMenu(this._passwordEntry, { isPassword: true });
            this._passwordEntry.clutter_text.connect('activate', this._onPasswordActivate.bind(this));
-            this._workSpinner = new Animation.Spinner(WORK_SPINNER_ICON_SIZE, {
+            this._workSpinner = new Animation.Spinner(WORK_SPINNER_ICON_SIZE, true);
                animate: true,
            });
            if (rtl) {
-                layout.attach(this._workSpinner, 0, row, 1, 1);
+                layout.attach(this._workSpinner.actor, 0, row, 1, 1);
                layout.attach(this._passwordEntry, 1, row, 1, 1);
                layout.attach(label, 2, row, 1, 1);
            } else {
                layout.attach(label, 0, row, 1, 1);
                layout.attach(this._passwordEntry, 1, row, 1, 1);
-                layout.attach(this._workSpinner, 2, row, 1, 1);
+                layout.attach(this._workSpinner.actor, 2, row, 1, 1);
            }
            row++;
        } else {
@@ -98,9 +91,9 @@ class KeyringDialog extends ModalDialog.ModalDialog {
        }
        if (this.prompt.confirm_visible) {
-            var label = new St.Label({ style_class: 'prompt-dialog-password-label',
+            var label = new St.Label(({ style_class: 'prompt-dialog-password-label',
-                                       x_align: Clutter.ActorAlign.START,
+                                        x_align: Clutter.ActorAlign.START,
-                                       y_align: Clutter.ActorAlign.CENTER });
+                                        y_align: Clutter.ActorAlign.CENTER }));
            label.set_text(_("Type again:"));
            this._confirmEntry = new St.Entry({ style_class: 'prompt-dialog-password-entry',
                                                text: '',
@@ -127,8 +120,8 @@ class KeyringDialog extends ModalDialog.ModalDialog {
        if (this.prompt.choice_visible) {
            let choice = new CheckBox.CheckBox();
            this.prompt.bind_property('choice-label', choice.getLabelActor(), 'text', GObject.BindingFlags.SYNC_CREATE);
-            this.prompt.bind_property('choice-chosen', choice, 'checked', GObject.BindingFlags.SYNC_CREATE | GObject.BindingFlags.BIDIRECTIONAL);
+            this.prompt.bind_property('choice-chosen', choice.actor, 'checked', GObject.BindingFlags.SYNC_CREATE | GObject.BindingFlags.BIDIRECTIONAL);
-            layout.attach(choice, rtl ? 0 : 1, row, 1, 1);
+            layout.attach(choice.actor, rtl ? 0 : 1, row, 1, 1);
            row++;
        }
@@ -146,7 +139,7 @@ class KeyringDialog extends ModalDialog.ModalDialog {
        }
        this._controlTable = table;
-        this._content.messageBox.add_child(table);
+        this._content.messageBox.add(table, { x_fill: true, y_fill: true });
    }
    _updateSensitivity(sensitive) {
@@ -183,21 +176,21 @@ class KeyringDialog extends ModalDialog.ModalDialog {
        return false;
    }
-    _onShowPassword() {
+    _onShowPassword(prompt) {
        this._buildControlTable();
        this._ensureOpen();
        this._updateSensitivity(true);
        this._passwordEntry.grab_key_focus();
    }
-    _onShowConfirm() {
+    _onShowConfirm(prompt) {
        this._buildControlTable();
        this._ensureOpen();
        this._updateSensitivity(true);
        this._continueButton.grab_key_focus();
    }
-    _onHidePrompt() {
+    _onHidePrompt(prompt) {
        this.close();
    }
@@ -234,14 +227,12 @@ var KeyringDummyDialog = class {
    }
 };
-var KeyringPrompter = GObject.registerClass(
+var KeyringPrompter = class {
-class KeyringPrompter extends Gcr.SystemPrompter {
+    constructor() {
-    _init() {
+        this._prompter = new Gcr.SystemPrompter();
-        super._init();
+        this._prompter.connect('new-prompt', () => {
-        this.connect('new-prompt', () => {
+            let dialog = this._enabled ? new KeyringDialog()
-            let dialog = this._enabled
+                                       : new KeyringDummyDialog();
                ? new KeyringDialog()
                : new KeyringDummyDialog();
            this._currentPrompt = dialog.prompt;
            return this._currentPrompt;
        });
@@ -253,7 +244,7 @@ class KeyringPrompter extends Gcr.SystemPrompter {
    enable() {
        if (!this._registered) {
-            this.register(Gio.DBus.session);
+            this._prompter.register(Gio.DBus.session);
            this._dbusId = Gio.DBus.session.own_name('org.gnome.keyring.SystemPrompter',
                                                     Gio.BusNameOwnerFlags.ALLOW_REPLACEMENT, null, null);
            this._registered = true;
@@ -264,10 +255,10 @@ class KeyringPrompter extends Gcr.SystemPrompter {
    disable() {
        this._enabled = false;
-        if (this.prompting)
+        if (this._prompter.prompting)
            this._currentPrompt.cancel();
        this._currentPrompt = null;
    }
-});
+};
 var Component = KeyringPrompter;
--- a/js/ui/components/networkAgent.js
+++ b/js/ui/components/networkAgent.js
@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported Component */
 const { Clutter, Gio, GLib, GObject, NM, Pango, Shell, St } = imports.gi;
 const Signals = imports.signals;
@@ -56,7 +55,7 @@ class NetworkSecretDialog extends ModalDialog.ModalDialog {
            secret.entry = new St.Entry({ style_class: 'prompt-dialog-password-entry',
                                          text: secret.value, can_focus: reactive,
-                                          reactive,
+                                          reactive: reactive,
                                          x_expand: true });
            ShellEntry.addContextMenu(secret.entry,
                                      { isPassword: secret.password });
@@ -106,20 +105,22 @@ class NetworkSecretDialog extends ModalDialog.ModalDialog {
            descriptionLabel.clutter_text.line_wrap = true;
            descriptionLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
-            contentBox.messageBox.add_child(descriptionLabel);
+            contentBox.messageBox.add(descriptionLabel,
                                      { y_fill: true,
                                        y_align: St.Align.START,
                                        expand: true });
        }
-        this._okButton = {
+        this._okButton = { label: _("Connect"),
-            label: _("Connect"),
+                           action: this._onOk.bind(this),
-            action: this._onOk.bind(this),
+                           default: true
-            default: true,
+                         };
        };
-        this.setButtons([{
+        this.setButtons([{ label: _("Cancel"),
-            label: _("Cancel"),
+                           action: this.cancel.bind(this),
-            action: this.cancel.bind(this),
+                           key: Clutter.KEY_Escape,
-            key: Clutter.KEY_Escape,
+                         },
-        }, this._okButton]);
+                         this._okButton]);
        this._updateOkButton();
    }
@@ -161,15 +162,15 @@ class NetworkSecretDialog extends ModalDialog.ModalDialog {
        if (value.length == 64) {
            // must be composed of hexadecimal digits only
            for (let i = 0; i < 64; i++) {
-                if (!((value[i] >= 'a' && value[i] <= 'f') ||
+                if (!((value[i] >= 'a' && value[i] <= 'f')
-                      (value[i] >= 'A' && value[i] <= 'F') ||
+                      || (value[i] >= 'A' && value[i] <= 'F')
-                      (value[i] >= '0' && value[i] <= '9')))
+                      || (value[i] >= '0' && value[i] <= '9')))
                    return false;
            }
            return true;
        }
-        return value.length >= 8 && value.length <= 63;
+        return (value.length >= 8 && value.length <= 63);
    }
    _validateStaticWep(secret) {
@@ -177,15 +178,15 @@ class NetworkSecretDialog extends ModalDialog.ModalDialog {
        if (secret.wep_key_type == NM.WepKeyType.KEY) {
            if (value.length == 10 || value.length == 26) {
                for (let i = 0; i < value.length; i++) {
-                    if (!((value[i] >= 'a' && value[i] <= 'f') ||
+                    if (!((value[i] >= 'a' && value[i] <= 'f')
-                          (value[i] >= 'A' && value[i] <= 'F') ||
+                          || (value[i] >= 'A' && value[i] <= 'F')
-                          (value[i] >= '0' && value[i] <= '9')))
+                          || (value[i] >= '0' && value[i] <= '9')))
                        return false;
                }
            } else if (value.length == 5 || value.length == 13) {
                for (let i = 0; i < value.length; i++) {
-                    if (!((value[i] >= 'a' && value[i] <= 'z') ||
+                    if (!((value[i] >= 'a' && value[i] <= 'z')
-                          (value[i] >= 'A' && value[i] <= 'Z')))
+                          || (value[i] >= 'A' && value[i] <= 'Z')))
                        return false;
                }
            } else {
@@ -198,7 +199,7 @@ class NetworkSecretDialog extends ModalDialog.ModalDialog {
        return true;
    }
-    _getWirelessSecrets(secrets, _wirelessSetting) {
+    _getWirelessSecrets(secrets, wirelessSetting) {
        let wirelessSecuritySetting = this._connection.get_setting_wireless_security();
        if (this._settingName == '802-1x') {
@@ -210,7 +211,6 @@ class NetworkSecretDialog extends ModalDialog.ModalDialog {
        // First the easy ones
        case 'wpa-none':
        case 'wpa-psk':
        case 'sae':
            secrets.push({ label: _("Password: "), key: 'psk',
                           value: wirelessSecuritySetting.psk || '',
                           validate: this._validateWpaPsk, password: true });
@@ -222,12 +222,11 @@ class NetworkSecretDialog extends ModalDialog.ModalDialog {
                           validate: this._validateStaticWep, password: true });
            break;
        case 'ieee8021x':
-            if (wirelessSecuritySetting.auth_alg == 'leap') { // Cisco LEAP
+            if (wirelessSecuritySetting.auth_alg == 'leap') // Cisco LEAP
                secrets.push({ label: _("Password: "), key: 'leap-password',
                               value: wirelessSecuritySetting.leap_password || '', password: true });
-            } else { // Dynamic (IEEE 802.1x) WEP
+            else // Dynamic (IEEE 802.1x) WEP
                this._get8021xSecrets(secrets);
            }
            break;
        case 'wpa-eap':
            this._get8021xSecrets(secrets);
@@ -242,18 +241,15 @@ class NetworkSecretDialog extends ModalDialog.ModalDialog {
        /* If hints were given we know exactly what we need to ask */
        if (this._settingName == "802-1x" && this._hints.length) {
-            if (this._hints.includes('identity')) {
+            if (this._hints.includes('identity'))
                secrets.push({ label: _("Username: "), key: 'identity',
                               value: ieee8021xSetting.identity || '', password: false });
-            }
+            if (this._hints.includes('password'))
            if (this._hints.includes('password')) {
                secrets.push({ label: _("Password: "), key: 'password',
                               value: ieee8021xSetting.password || '', password: true });
-            }
+            if (this._hints.includes('private-key-password'))
            if (this._hints.includes('private-key-password')) {
                secrets.push({ label: _("Private key password: "), key: 'private-key-password',
                               value: ieee8021xSetting.private_key_password || '', password: true });
            }
            return;
        }
@@ -389,7 +385,7 @@ var VPNRequestHandler = class {
        this._newStylePlugin = authHelper.externalUIMode;
        try {
-            let [success_, pid, stdin, stdout, stderr] =
+            let [success, pid, stdin, stdout, stderr] =
                GLib.spawn_async_with_pipes(null, /* pwd */
                                            argv,
                                            null, /* envp */
@@ -448,7 +444,7 @@ var VPNRequestHandler = class {
        this._destroyed = true;
    }
-    _vpnChildFinished(pid, status, _requestObj) {
+    _vpnChildFinished(pid, status, requestObj) {
        this._childWatch = 0;
        if (this._newStylePlugin) {
            // For new style plugin, all work is done in the async reading functions
@@ -490,7 +486,7 @@ var VPNRequestHandler = class {
    _readStdoutOldStyle() {
        this._dataStdout.read_line_async(GLib.PRIORITY_DEFAULT, null, (stream, result) => {
-            let [line, len_] = this._dataStdout.read_line_finish_utf8(result);
+            let [line, len] = this._dataStdout.read_line_finish_utf8(result);
            if (line == null) {
                // end of file
@@ -545,7 +541,7 @@ var VPNRequestHandler = class {
                                message: keyfile.get_string(VPN_UI_GROUP, 'Description'),
                                secrets: [] };
-            let [groups, len_] = keyfile.get_groups();
+            let [groups, len] = keyfile.get_groups();
            for (let i = 0; i < groups.length; i++) {
                if (groups[i] == VPN_UI_GROUP)
                    continue;
@@ -554,12 +550,11 @@ var VPNRequestHandler = class {
                let shouldAsk = keyfile.get_boolean(groups[i], 'ShouldAsk');
                if (shouldAsk) {
-                    contentOverride.secrets.push({
+                    contentOverride.secrets.push({ label: keyfile.get_string(groups[i], 'Label'),
-                        label: keyfile.get_string(groups[i], 'Label'),
+                                                   key: groups[i],
-                        key: groups[i],
+                                                   value: value,
-                        value,
+                                                   password: keyfile.get_boolean(groups[i], 'IsSecret')
-                        password: keyfile.get_boolean(groups[i], 'IsSecret'),
+                                                 });
                    });
                } else {
                    if (!value.length) // Ignore empty secrets
                        continue;
@@ -613,11 +608,10 @@ Signals.addSignalMethods(VPNRequestHandler.prototype);
 var NetworkAgent = class {
    constructor() {
-        this._native = new Shell.NetworkAgent({
+        this._native = new Shell.NetworkAgent({ identifier: 'org.gnome.Shell.NetworkAgent',
-            identifier: 'org.gnome.Shell.NetworkAgent',
+                                                capabilities: NM.SecretAgentCapabilities.VPN_HINTS,
-            capabilities: NM.SecretAgentCapabilities.VPN_HINTS,
+                                                auto_register: false
-            auto_register: false,
+                                              });
        });
        this._dialogs = { };
        this._vpnRequests = { };
@@ -626,7 +620,7 @@ var NetworkAgent = class {
        this._pluginDir = Gio.file_new_for_path(Config.VPNDIR);
        try {
            let monitor = this._pluginDir.monitor(Gio.FileMonitorFlags.NONE, null);
-            monitor.connect('changed', () => (this._vpnCacheBuilt = false));
+            monitor.connect('changed', () => this._vpnCacheBuilt = false);
        } catch (e) {
            log(`Failed to create monitor for VPN plugin dir: ${e.message}`);
        }
@@ -735,7 +729,7 @@ var NetworkAgent = class {
        });
        Main.messageTray.add(source);
-        source.showNotification(notification);
+        source.notify(notification);
    }
    _newRequest(agent, requestId, connection, settingName, hints, flags) {
--- a/js/ui/components/polkitAgent.js
+++ b/js/ui/components/polkitAgent.js
@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported Component */
 const { AccountsService, Clutter, Gio, GLib,
        GObject, Pango, PolkitAgent, Polkit, Shell, St } = imports.gi;
@@ -11,19 +10,12 @@ const ModalDialog = imports.ui.modalDialog;
 const ShellEntry = imports.ui.shellEntry;
 const UserWidget = imports.ui.userWidget;
 const DialogMode = {
    AUTH: 0,
    CONFIRM: 1,
 };
 var DIALOG_ICON_SIZE = 48;
 var WORK_SPINNER_ICON_SIZE = 16;
 const DELAYED_RESET_TIMEOUT = 200;
 var AuthenticationDialog = GObject.registerClass({
-    Signals: { 'done': { param_types: [GObject.TYPE_BOOLEAN] } },
+    Signals: { 'done': { param_types: [GObject.TYPE_BOOLEAN] } }
 }, class AuthenticationDialog extends ModalDialog.ModalDialog {
    _init(actionId, body, cookie, userNames) {
        super._init({ styleClass: 'prompt-dialog' });
@@ -31,6 +23,7 @@ var AuthenticationDialog = GObject.registerClass({
        this.actionId = actionId;
        this.message = body;
        this.userNames = userNames;
        this._wasDismissed = false;
        this._sessionUpdatedId = Main.sessionMode.connect('updated', () => {
            this.visible = !Main.sessionMode.isLocked;
@@ -57,63 +50,70 @@ var AuthenticationDialog = GObject.registerClass({
            userName = userNames[0];
        this._user = AccountsService.UserManager.get_default().get_user(userName);
        let userRealName = this._user.get_real_name();
        this._userLoadedId = this._user.connect('notify::is_loaded',
                                                this._onUserChanged.bind(this));
        this._userChangedId = this._user.connect('changed',
                                                 this._onUserChanged.bind(this));
-        let userBox = new St.BoxLayout({
+        // Special case 'root'
-            style_class: 'polkit-dialog-user-layout',
+        let userIsRoot = false;
-            vertical: false,
+        if (userName == 'root') {
-        });
+            userIsRoot = true;
-        content.messageBox.add(userBox);
+            userRealName = _("Administrator");
        }
-        this._userAvatar = new UserWidget.Avatar(this._user, {
+        if (userIsRoot) {
-            iconSize: DIALOG_ICON_SIZE,
+            let userLabel = new St.Label(({ style_class: 'polkit-dialog-user-root-label',
-            styleClass: 'polkit-dialog-user-icon',
+                                            text: userRealName }));
-        });
+            content.messageBox.add(userLabel, { x_fill: false,
-        userBox.add_child(this._userAvatar);
+                                                x_align: St.Align.START });
        } else {
            let userBox = new St.BoxLayout({ style_class: 'polkit-dialog-user-layout',
                                             vertical: false });
            content.messageBox.add(userBox);
            this._userAvatar = new UserWidget.Avatar(this._user,
                                                     { iconSize: DIALOG_ICON_SIZE,
                                                       styleClass: 'polkit-dialog-user-icon' });
            this._userAvatar.actor.hide();
            userBox.add(this._userAvatar.actor,
                        { x_fill: true,
                          y_fill: false,
                          x_align: St.Align.END,
                          y_align: St.Align.START });
            let userLabel = new St.Label(({ style_class: 'polkit-dialog-user-label',
                                            text: userRealName }));
            userBox.add(userLabel,
                        { x_fill: true,
                          y_fill: false,
                          x_align: St.Align.END,
                          y_align: St.Align.MIDDLE });
        }
-        this._userLabel = new St.Label({
+        this._onUserChanged();
            style_class: userName === 'root'
                ? 'polkit-dialog-user-root-label'
                : 'polkit-dialog-user-label',
            x_expand: true,
            y_align: Clutter.ActorAlign.CENTER,
        });
        if (userName === 'root')
            this._userLabel.text = _('Administrator');
        userBox.add_child(this._userLabel);
        this._passwordBox = new St.BoxLayout({ vertical: false, style_class: 'prompt-dialog-password-box' });
        content.messageBox.add(this._passwordBox);
-        this._passwordLabel = new St.Label({
+        this._passwordLabel = new St.Label(({ style_class: 'prompt-dialog-password-label' }));
-            style_class: 'prompt-dialog-password-label',
+        this._passwordBox.add(this._passwordLabel, { y_fill: false, y_align: St.Align.MIDDLE });
-            y_align: Clutter.ActorAlign.CENTER,
+        this._passwordEntry = new St.Entry({ style_class: 'prompt-dialog-password-entry',
-        });
+                                             text: "",
-        this._passwordBox.add_child(this._passwordLabel);
+                                             can_focus: true });
        this._passwordEntry = new St.Entry({
            style_class: 'prompt-dialog-password-entry',
            text: "",
            can_focus: true,
            x_expand: true,
        });
        ShellEntry.addContextMenu(this._passwordEntry, { isPassword: true });
        this._passwordEntry.clutter_text.connect('activate', this._onEntryActivate.bind(this));
-        this._passwordEntry.bind_property('reactive',
+        this._passwordBox.add(this._passwordEntry,
-            this._passwordEntry.clutter_text, 'editable',
+                              { expand: true });
            GObject.BindingFlags.SYNC_CREATE);
        this._passwordBox.add_child(this._passwordEntry);
-        this._workSpinner = new Animation.Spinner(WORK_SPINNER_ICON_SIZE, {
+        this._workSpinner = new Animation.Spinner(WORK_SPINNER_ICON_SIZE, true);
-            animate: true,
+        this._passwordBox.add(this._workSpinner.actor);
        });
        this._passwordBox.add(this._workSpinner);
        this.setInitialKeyFocus(this._passwordEntry);
        this._passwordBox.hide();
        this._errorMessageLabel = new St.Label({ style_class: 'prompt-dialog-error-label' });
        this._errorMessageLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
        this._errorMessageLabel.clutter_text.line_wrap = true;
-        content.messageBox.add_child(this._errorMessageLabel);
+        content.messageBox.add(this._errorMessageLabel, { x_fill: false, x_align: St.Align.START });
        this._errorMessageLabel.hide();
        this._infoMessageLabel = new St.Label({ style_class: 'prompt-dialog-info-label' });
@@ -136,30 +136,15 @@ var AuthenticationDialog = GObject.registerClass({
        this._cancelButton = this.addButton({ label: _("Cancel"),
                                              action: this.cancel.bind(this),
-                                              key: Clutter.KEY_Escape });
+                                              key: Clutter.Escape });
        this._okButton = this.addButton({ label: _("Authenticate"),
                                          action: this._onAuthenticateButtonPressed.bind(this),
-                                          reactive: false });
+                                          default: true });
        this._okButton.bind_property('reactive',
            this._okButton, 'can-focus',
            GObject.BindingFlags.SYNC_CREATE);
        this._passwordEntry.clutter_text.connect('text-changed', text => {
            this._okButton.reactive = text.get_text().length > 0;
        });
        this._doneEmitted = false;
        this._mode = -1;
        this._identityToAuth = Polkit.UnixUser.new_for_name(userName);
        this._cookie = cookie;
        this._userLoadedId = this._user.connect('notify::is-loaded',
            this._onUserChanged.bind(this));
        this._userChangedId = this._user.connect('changed',
            this._onUserChanged.bind(this));
        this._onUserChanged();
    }
    _setWorking(working) {
@@ -169,9 +154,8 @@ var AuthenticationDialog = GObject.registerClass({
            this._workSpinner.stop();
    }
-    _initiateSession() {
+    performAuthentication() {
-        this._destroySession(DELAYED_RESET_TIMEOUT);
+        this._destroySession();
        this._session = new PolkitAgent.Session({ identity: this._identityToAuth,
                                                  cookie: this._cookie });
        this._sessionCompletedId = this._session.connect('completed', this._onSessionCompleted.bind(this));
@@ -210,15 +194,18 @@ var AuthenticationDialog = GObject.registerClass({
        }
    }
    _updateSensitivity(sensitive) {
        this._passwordEntry.reactive = sensitive;
        this._passwordEntry.clutter_text.editable = sensitive;
        this._okButton.can_focus = sensitive;
        this._okButton.reactive = sensitive;
        this._setWorking(!sensitive);
    }
    _onEntryActivate() {
        let response = this._passwordEntry.get_text();
-        if (response.length === 0)
+        this._updateSensitivity(false);
            return;
        this._passwordEntry.reactive = false;
        this._okButton.reactive = false;
        this._setWorking(true);
        this._session.response(response);
        // When the user responds, dismiss already shown info and
        // error texts (if any)
@@ -228,10 +215,7 @@ var AuthenticationDialog = GObject.registerClass({
    }
    _onAuthenticateButtonPressed() {
-        if (this._mode === DialogMode.CONFIRM)
+        this._onEntryActivate();
            this._initiateSession();
        else
            this._onEntryActivate();
    }
    _onSessionCompleted(session, gainedAuthorization) {
@@ -250,7 +234,7 @@ var AuthenticationDialog = GObject.registerClass({
             * error providing authentication-method specific information),
             * show "Sorry, that didn't work. Please try again."
             */
-            if (!this._errorMessageLabel.visible) {
+            if (!this._errorMessageLabel.visible && !this._wasDismissed) {
                /* Translators: "that didn't work" refers to the fact that the
                 * requested authentication was not gained; this can happen
                 * because of an authentication error (like invalid password),
@@ -262,16 +246,11 @@ var AuthenticationDialog = GObject.registerClass({
            }
            /* Try and authenticate again */
-            this._initiateSession();
+            this.performAuthentication();
        }
    }
    _onSessionRequest(session, request, echoOn) {
        if (this._sessionRequestTimeoutId) {
            GLib.source_remove(this._sessionRequestTimeoutId);
            this._sessionRequestTimeoutId = 0;
        }
        // Cheap localization trick
        if (request == 'Password:' || request == 'Password: ')
            this._passwordLabel.set_text(_("Password:"));
@@ -285,12 +264,9 @@ var AuthenticationDialog = GObject.registerClass({
        this._passwordBox.show();
        this._passwordEntry.set_text('');
        this._passwordEntry.reactive  = true;
        this._okButton.reactive = false;
        this._setWorking(false);
        this._ensureOpen();
        this._passwordEntry.grab_key_focus();
        this._updateSensitivity(true);
        this._ensureOpen();
    }
    _onSessionShowError(session, text) {
@@ -311,78 +287,29 @@ var AuthenticationDialog = GObject.registerClass({
        this._ensureOpen();
    }
-    _destroySession(delay = 0) {
+    _destroySession() {
        if (this._session) {
            if (!this._completed)
                this._session.cancel();
            this._completed = false;
            this._session.disconnect(this._sessionCompletedId);
            this._session.disconnect(this._sessionRequestId);
            this._session.disconnect(this._sessionShowErrorId);
            this._session.disconnect(this._sessionShowInfoId);
            if (!this._completed)
                this._session.cancel();
            this._completed = false;
            this._session = null;
        }
        if (this._sessionRequestTimeoutId) {
            GLib.source_remove(this._sessionRequestTimeoutId);
            this._sessionRequestTimeoutId = 0;
        }
        let resetDialog = () => {
            if (this.state != ModalDialog.State.OPENED)
                return;
            this._passwordBox.hide();
            this._cancelButton.grab_key_focus();
            this._okButton.reactive = false;
        };
        if (delay) {
            this._sessionRequestTimeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, delay, resetDialog);
            GLib.Source.set_name_by_id(this._sessionRequestTimeoutId, '[gnome-shell] this._sessionRequestTimeoutId');
        } else {
            resetDialog();
        }
    }
    _onUserChanged() {
-        if (!this._user.is_loaded)
+        if (this._user.is_loaded && this._userAvatar) {
-            return;
+            this._userAvatar.update();
-
+            this._userAvatar.actor.show();
        let userName = this._user.get_user_name();
        let realName = this._user.get_real_name();
        if (userName !== 'root')
            this._userLabel.set_text(realName);
        this._userAvatar.update();
        if (this._user.get_password_mode() === AccountsService.UserPasswordMode.NONE) {
            if (this._mode === DialogMode.CONFIRM)
                return;
            this._mode = DialogMode.CONFIRM;
            this._destroySession();
            this._okButton.reactive = true;
            /* We normally open the dialog when we get a "request" signal, but
             * since in this case initiating a session would perform the
             * authentication, only open the dialog and initiate the session
             * when the user confirmed. */
            this._ensureOpen();
        } else {
            if (this._mode === DialogMode.AUTH)
                return;
            this._mode = DialogMode.AUTH;
            this._initiateSession();
        }
    }
    cancel() {
        this._wasDismissed = true;
        this.close(global.get_current_time());
        this._emitDone(true);
    }
@@ -390,10 +317,7 @@ var AuthenticationDialog = GObject.registerClass({
    _onDialogClosed() {
        if (this._sessionUpdatedId)
            Main.sessionMode.disconnect(this._sessionUpdatedId);
-
+        this._sessionUpdatedId = 0;
        if (this._sessionRequestTimeoutId)
            GLib.source_remove(this._sessionRequestTimeoutId);
        this._sessionRequestTimeoutId = 0;
        if (this._user) {
            this._user.disconnect(this._userLoadedId);
@@ -405,20 +329,19 @@ var AuthenticationDialog = GObject.registerClass({
    }
 });
-var AuthenticationAgent = GObject.registerClass(
+var AuthenticationAgent = class {
-class AuthenticationAgent extends Shell.PolkitAuthenticationAgent {
+    constructor() {
    _init() {
        super._init();
        this._currentDialog = null;
-        this.connect('initiate', this._onInitiate.bind(this));
+        this._handle = null;
-        this.connect('cancel', this._onCancel.bind(this));
+        this._native = new Shell.PolkitAuthenticationAgent();
        this._native.connect('initiate', this._onInitiate.bind(this));
        this._native.connect('cancel', this._onCancel.bind(this));
        this._sessionUpdatedId = 0;
    }
    enable() {
        try {
-            this.register();
+            this._native.register();
        } catch (e) {
            log('Failed to register AuthenticationAgent');
        }
@@ -426,7 +349,7 @@ class AuthenticationAgent extends Shell.PolkitAuthenticationAgent {
    disable() {
        try {
-            this.unregister();
+            this._native.unregister();
        } catch (e) {
            log('Failed to unregister AuthenticationAgent');
        }
@@ -445,14 +368,26 @@ class AuthenticationAgent extends Shell.PolkitAuthenticationAgent {
        }
        this._currentDialog = new AuthenticationDialog(actionId, message, cookie, userNames);
        // We actually don't want to open the dialog until we know for
        // sure that we're going to interact with the user. For
        // example, if the password for the identity to auth is blank
        // (which it will be on a live CD) then there will be no
        // conversation at all... of course, we don't *know* that
        // until we actually try it.
        //
        // See https://bugzilla.gnome.org/show_bug.cgi?id=643062 for more
        // discussion.
        this._currentDialog.connect('done', this._onDialogDone.bind(this));
        this._currentDialog.performAuthentication();
    }
-    _onCancel(_nativeAgent) {
+    _onCancel(nativeAgent) {
        this._completeRequest(false);
    }
-    _onDialogDone(_dialog, dismissed) {
+    _onDialogDone(dialog, dismissed) {
        this._completeRequest(dismissed);
    }
@@ -464,8 +399,8 @@ class AuthenticationAgent extends Shell.PolkitAuthenticationAgent {
            Main.sessionMode.disconnect(this._sessionUpdatedId);
        this._sessionUpdatedId = 0;
-        this.complete(dismissed);
+        this._native.complete(dismissed);
    }
-});
+};
 var Component = AuthenticationAgent;
--- a/js/ui/components/telepathyClient.js
+++ b/js/ui/components/telepathyClient.js
@@ -1,8 +1,8 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported Component */
 const { Clutter, Gio, GLib, GObject, St } = imports.gi;
 const Lang = imports.lang;
 const Mainloop = imports.mainloop;
 var Tpl = null;
 var Tp = null;
@@ -19,7 +19,7 @@ const MessageTray = imports.ui.messageTray;
 const Params = imports.misc.params;
 const Util = imports.misc.util;
-const HAVE_TP = Tp != null && Tpl != null;
+const HAVE_TP = (Tp != null && Tpl != null);
 // See Notification.appendMessage
 var SCROLLBACK_IMMEDIATE_TIME = 3 * 60; // 3 minutes
@@ -37,11 +37,11 @@ var CHAT_EXPAND_LINES = 12;
 var NotificationDirection = {
    SENT: 'chat-sent',
-    RECEIVED: 'chat-received',
+    RECEIVED: 'chat-received'
 };
 function makeMessageFromTpMessage(tpMessage, direction) {
-    let [text, flags_] = tpMessage.to_text();
+    let [text, flags] = tpMessage.to_text();
    let timestamp = tpMessage.get_sent_timestamp();
    if (timestamp == 0)
@@ -49,10 +49,10 @@ function makeMessageFromTpMessage(tpMessage, direction) {
    return {
        messageType: tpMessage.get_message_type(),
-        text,
+        text: text,
        sender: tpMessage.sender.alias,
-        timestamp,
+        timestamp: timestamp,
-        direction,
+        direction: direction
    };
 }
@@ -66,7 +66,7 @@ function makeMessageFromTplEvent(event) {
        text: event.get_message(),
        sender: event.get_sender().get_alias(),
        timestamp: event.get_timestamp(),
-        direction,
+        direction: direction
    };
 }
@@ -148,17 +148,17 @@ class TelepathyClient extends Tp.BaseClient {
    }
    vfunc_observe_channels(...args) {
-        let [account, conn, channels, dispatchOp_, requests_, context] = args;
+        let [account, conn, channels, dispatchOp, requests, context] = args;
        let len = channels.length;
        for (let i = 0; i < len; i++) {
            let channel = channels[i];
-            let [targetHandle_, targetHandleType] = channel.get_handle();
+            let [targetHandle, targetHandleType] = channel.get_handle();
            if (channel.get_invalidated())
                continue;
            /* Only observe contact text channels */
-            if (!(channel instanceof Tp.TextChannel) ||
+            if ((!(channel instanceof Tp.TextChannel)) ||
               targetHandleType != Tp.HandleType.CONTACT)
                continue;
@@ -181,7 +181,7 @@ class TelepathyClient extends Tp.BaseClient {
    }
    vfunc_handle_channels(...args) {
-        let [account, conn, channels, requests_, userActionTime_, context] = args;
+        let [account, conn, channels, requests, userActionTime, context] = args;
        this._handlingChannels(account, conn, channels, true);
        context.accept();
    }
@@ -215,7 +215,7 @@ class TelepathyClient extends Tp.BaseClient {
                // We are already handling the channel, display the source
                let source = this._chatSources[channel.get_object_path()];
                if (source)
-                    source.showNotification();
+                    source.notify();
            }
        }
    }
@@ -231,16 +231,15 @@ class TelepathyClient extends Tp.BaseClient {
            return;
        }
-        if (chanType == Tp.IFACE_CHANNEL_TYPE_TEXT) {
+        if (chanType == Tp.IFACE_CHANNEL_TYPE_TEXT)
            this._approveTextChannel(account, conn, channel, dispatchOp, context);
-        } else {
+        else
            context.fail(new Tp.Error({ code: Tp.Error.INVALID_ARGUMENT,
                                        message: 'Unsupported channel type' }));
        }
    }
    _approveTextChannel(account, conn, channel, dispatchOp, context) {
-        let [targetHandle_, targetHandleType] = channel.get_handle();
+        let [targetHandle, targetHandleType] = channel.get_handle();
        if (targetHandleType != Tp.HandleType.CONTACT) {
            context.fail(new Tp.Error({ code: Tp.Error.INVALID_ARGUMENT,
@@ -249,7 +248,7 @@ class TelepathyClient extends Tp.BaseClient {
        }
        // Approve private text channels right away as we are going to handle it
-        dispatchOp.claim_with_async(this, (o, result) => {
+        dispatchOp.claim_with_async(this, (dispatchOp, result) => {
            try {
                dispatchOp.claim_with_finish(result);
                this._handlingChannels(account, conn, [channel], false);
@@ -261,16 +260,15 @@ class TelepathyClient extends Tp.BaseClient {
        context.accept();
    }
-    _delegatedChannelsCb(_client, _channels) {
+    _delegatedChannelsCb(client, channels) {
        // Nothing to do as we don't make a distinction between observed and
        // handled channels.
    }
 }) : null;
-var ChatSource = HAVE_TP ? GObject.registerClass(
+var ChatSource = class extends MessageTray.Source {
-class ChatSource extends MessageTray.Source {
+    constructor(account, conn, channel, contact, client) {
-    _init(account, conn, channel, contact, client) {
+        super(contact.get_alias());
        super._init(contact.get_alias());
        this._account = account;
        this._contact = contact;
@@ -328,7 +326,7 @@ class ChatSource extends MessageTray.Source {
        // We ack messages when the user expands the new notification
        let id = this._banner.connect('expanded', this._ackMessages.bind(this));
-        this._banner.connect('destroy', () => {
+        this._banner.actor.connect('destroy', () => {
            this._banner.disconnect(id);
            this._banner = null;
        });
@@ -350,10 +348,11 @@ class ChatSource extends MessageTray.Source {
    getIcon() {
        let file = this._contact.get_avatar_file();
-        if (file)
+        if (file) {
-            return new Gio.FileIcon({ file });
+            return new Gio.FileIcon({ file: file });
-        else
+        } else {
            return new Gio.ThemedIcon({ name: 'avatar-default' });
        }
    }
    getSecondaryIcon() {
@@ -387,11 +386,10 @@ class ChatSource extends MessageTray.Source {
    _updateAvatarIcon() {
        this.iconUpdated();
-        if (this._notifiction) {
+        if (this._notifiction)
            this._notification.update(this._notification.title,
                                      this._notification.bannerBodyText,
                                      { gicon: this.getIcon() });
        }
    }
    open() {
@@ -429,7 +427,7 @@ class ChatSource extends MessageTray.Source {
    }
    _displayPendingMessages(logManager, result) {
-        let [success_, events] = logManager.get_filtered_events_finish(result);
+        let [success, events] = logManager.get_filtered_events_finish(result);
        let logMessages = events.map(makeMessageFromTplEvent);
        this._ensureNotification();
@@ -478,7 +476,7 @@ class ChatSource extends MessageTray.Source {
            this._notification.appendMessage(pendingMessages[i], true);
        if (pendingMessages.length > 0)
-            this.showNotification();
+            this.notify();
    }
    destroy(reason) {
@@ -547,15 +545,15 @@ class ChatSource extends MessageTray.Source {
        // Wait a bit before notifying for the received message, a handler
        // could ack it in the meantime.
        if (this._notifyTimeoutId != 0)
-            GLib.source_remove(this._notifyTimeoutId);
+            Mainloop.source_remove(this._notifyTimeoutId);
-        this._notifyTimeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 500,
+        this._notifyTimeoutId = Mainloop.timeout_add(500,
            this._notifyTimeout.bind(this));
        GLib.Source.set_name_by_id(this._notifyTimeoutId, '[gnome-shell] this._notifyTimeout');
    }
    _notifyTimeout() {
        if (this._pendingMessages.length != 0)
-            this.showNotification();
+            this.notify();
        this._notifyTimeoutId = 0;
@@ -564,14 +562,14 @@ class ChatSource extends MessageTray.Source {
    // This is called for both messages we send from
    // our client and other clients as well.
-    _messageSent(channel, message, _flags, _token) {
+    _messageSent(channel, message, flags, token) {
        this._ensureNotification();
        message = makeMessageFromTpMessage(message, NotificationDirection.SENT);
        this._notification.appendMessage(message);
    }
-    showNotification() {
+    notify() {
-        super.showNotification(this._notification);
+        super.notify(this._notification);
    }
    respond(text) {
@@ -585,7 +583,7 @@ class ChatSource extends MessageTray.Source {
        let msg = Tp.ClientMessage.new_text(type, text);
        this._channel.send_message_async(msg, 0, (src, result) => {
-            this._channel.send_message_finish(result);
+            this._channel.send_message_finish(result); 
        });
    }
@@ -602,12 +600,11 @@ class ChatSource extends MessageTray.Source {
        }
    }
-    _presenceChanged(_contact, _presence, _status, _message) {
+    _presenceChanged(contact, presence, status, message) {
-        if (this._notification) {
+        if (this._notification)
            this._notification.update(this._notification.title,
                                      this._notification.bannerBodyText,
                                      { secondaryGIcon: this.getSecondaryIcon() });
        }
    }
    _pendingRemoved(channel, message) {
@@ -628,18 +625,12 @@ class ChatSource extends MessageTray.Source {
        // 'pending-message-removed' for each one.
        this._channel.ack_all_pending_messages_async(null);
    }
-}) : null;
+};
-var ChatNotification = HAVE_TP ? GObject.registerClass({
+var ChatNotification = class extends MessageTray.Notification {
-    Signals: {
+    constructor(source) {
-        'message-removed': { param_types: [Tp.Message.$gtype] },
+        super(source, source.title, null,
-        'message-added': { param_types: [Tp.Message.$gtype] },
+              { secondaryGIcon: source.getSecondaryIcon() });
        'timestamp-changed': { param_types: [Tp.Message.$gtype] },
    },
 }, class ChatNotification extends MessageTray.Notification {
    _init(source) {
        super._init(source, source.title, null,
            { secondaryGIcon: source.getSecondaryIcon() });
        this.setUrgency(MessageTray.Urgency.HIGH);
        this.setResident(true);
@@ -649,23 +640,23 @@ var ChatNotification = HAVE_TP ? GObject.registerClass({
    destroy(reason) {
        if (this._timestampTimeoutId)
-            GLib.source_remove(this._timestampTimeoutId);
+            Mainloop.source_remove(this._timestampTimeoutId);
        this._timestampTimeoutId = 0;
        super.destroy(reason);
    }
    /**
     * appendMessage:
-     * @param {Object} message: An object with the properties
+     * @message: An object with the properties:
-     *   {string} message.text: the body of the message,
+     *   text: the body of the message,
-     *   {Tp.ChannelTextMessageType} message.messageType: the type
+     *   messageType: a #Tp.ChannelTextMessageType,
-     *   {string} message.sender: the name of the sender,
+     *   sender: the name of the sender,
-     *   {number} message.timestamp: the time the message was sent
+     *   timestamp: the time the message was sent
-     *   {NotificationDirection} message.direction: a #NotificationDirection
+     *   direction: a #NotificationDirection
-     *
+     * 
-     * @param {bool} noTimestamp: Whether to add a timestamp. If %true,
+     * @noTimestamp: Whether to add a timestamp. If %true, no timestamp
-     *   no timestamp will be added, regardless of the difference since
+     *   will be added, regardless of the difference since the
-     *   the last timestamp
+     *   last timestamp
     */
    appendMessage(message, noTimestamp) {
        let messageBody = GLib.markup_escape_text(message.text, -1);
@@ -677,20 +668,19 @@ var ChatNotification = HAVE_TP ? GObject.registerClass({
            styles.push('chat-action');
        }
-        if (message.direction == NotificationDirection.RECEIVED) {
+        if (message.direction == NotificationDirection.RECEIVED)
            this.update(this.source.title, messageBody,
-                        { datetime: GLib.DateTime.new_from_unix_local(message.timestamp),
+                        { datetime: GLib.DateTime.new_from_unix_local (message.timestamp),
                          bannerMarkup: true });
        }
-        let group = message.direction == NotificationDirection.RECEIVED
+        let group = (message.direction == NotificationDirection.RECEIVED ?
-            ? 'received' : 'sent';
+                     'received' : 'sent');
        this._append({ body: messageBody,
-                       group,
+                       group: group,
-                       styles,
+                       styles: styles,
                       timestamp: message.timestamp,
-                       noTimestamp });
+                       noTimestamp: noTimestamp });
    }
    _filterMessages() {
@@ -698,7 +688,7 @@ var ChatNotification = HAVE_TP ? GObject.registerClass({
            return;
        let lastMessageTime = this.messages[0].timestamp;
-        let currentTime = Date.now() / 1000;
+        let currentTime = (Date.now() / 1000);
        // Keep the scrollback from growing too long. If the most
        // recent message (before the one we just added) is within
@@ -706,8 +696,8 @@ var ChatNotification = HAVE_TP ? GObject.registerClass({
        // SCROLLBACK_RECENT_LENGTH previous messages. Otherwise
        // we'll keep SCROLLBACK_IDLE_LENGTH messages.
-        let maxLength = lastMessageTime < currentTime - SCROLLBACK_RECENT_TIME
+        let maxLength = (lastMessageTime < currentTime - SCROLLBACK_RECENT_TIME) ?
-            ? SCROLLBACK_IDLE_LENGTH : SCROLLBACK_RECENT_LENGTH;
+            SCROLLBACK_IDLE_LENGTH : SCROLLBACK_RECENT_LENGTH;
        let filteredHistory = this.messages.filter(item => item.realMessage);
        if (filteredHistory.length > maxLength) {
@@ -720,16 +710,16 @@ var ChatNotification = HAVE_TP ? GObject.registerClass({
    /**
     * _append:
-     * @param {Object} props: An object with the properties:
+     * @props: An object with the properties:
-     *  {string} props.body: The text of the message.
+     *  body: The text of the message.
-     *  {string} props.group: The group of the message, one of:
+     *  group: The group of the message, one of:
     *         'received', 'sent', 'meta'.
-     *  {string[]} props.styles: Style class names for the message to have.
+     *  styles: Style class names for the message to have.
-     *  {number} props.timestamp: The timestamp of the message.
+     *  timestamp: The timestamp of the message.
-     *  {bool} props.noTimestamp: suppress timestamp signal?
+     *  noTimestamp: suppress timestamp signal?
     */
    _append(props) {
-        let currentTime = Date.now() / 1000;
+        let currentTime = (Date.now() / 1000);
        props = Params.parse(props, { body: null,
                                      group: null,
                                      styles: [],
@@ -738,7 +728,7 @@ var ChatNotification = HAVE_TP ? GObject.registerClass({
        // Reset the old message timeout
        if (this._timestampTimeoutId)
-            GLib.source_remove(this._timestampTimeoutId);
+            Mainloop.source_remove(this._timestampTimeoutId);
        this._timestampTimeoutId = 0;
        let message = { realMessage: props.group != 'meta',
@@ -756,8 +746,7 @@ var ChatNotification = HAVE_TP ? GObject.registerClass({
            } else {
                // Schedule a new timestamp in SCROLLBACK_IMMEDIATE_TIME
                // from the timestamp of the message.
-                this._timestampTimeoutId = GLib.timeout_add_seconds(
+                this._timestampTimeoutId = Mainloop.timeout_add_seconds(
                    GLib.PRIORITY_DEFAULT,
                    SCROLLBACK_IMMEDIATE_TIME - (currentTime - timestamp),
                    this.appendTimestamp.bind(this));
                GLib.Source.set_name_by_id(this._timestampTimeoutId, '[gnome-shell] this.appendTimestamp');
@@ -792,7 +781,7 @@ var ChatNotification = HAVE_TP ? GObject.registerClass({
        this._filterMessages();
    }
-}) : null;
+};
 var ChatLineBox = GObject.registerClass(
 class ChatLineBox extends St.BoxLayout {
@@ -802,10 +791,9 @@ class ChatLineBox extends St.BoxLayout {
    }
 });
-var ChatNotificationBanner = GObject.registerClass(
+var ChatNotificationBanner = class extends MessageTray.NotificationBanner {
-class ChatNotificationBanner extends MessageTray.NotificationBanner {
+    constructor(notification) {
-    _init(notification) {
+        super(notification);
        super._init(notification);
        this._responseEntry = new St.Entry({ style_class: 'chat-response',
                                             x_expand: true,
@@ -890,7 +878,8 @@ class ChatNotificationBanner extends MessageTray.NotificationBanner {
    }
    _addMessage(message) {
-        let body = new MessageList.URLHighlighter(message.body, true, true);
+        let highlighter = new MessageList.URLHighlighter(message.body, true, true);
        let body = highlighter.actor;
        let styles = message.styles;
        for (let i = 0; i < styles.length; i++)
@@ -962,15 +951,14 @@ class ChatNotificationBanner extends MessageTray.NotificationBanner {
        // Remove composing timeout.
        if (this._composingTimeoutId > 0) {
-            GLib.source_remove(this._composingTimeoutId);
+            Mainloop.source_remove(this._composingTimeoutId);
            this._composingTimeoutId = 0;
        }
        if (text != '') {
            this.notification.source.setChatState(Tp.ChannelChatState.COMPOSING);
-            this._composingTimeoutId = GLib.timeout_add_seconds(
+            this._composingTimeoutId = Mainloop.timeout_add_seconds(
                GLib.PRIORITY_DEFAULT,
                COMPOSING_STOP_TIMEOUT,
                this._composingStopTimeout.bind(this));
            GLib.Source.set_name_by_id(this._composingTimeoutId, '[gnome-shell] this._composingStopTimeout');
@@ -978,6 +966,6 @@ class ChatNotificationBanner extends MessageTray.NotificationBanner {
            this.notification.source.setChatState(Tp.ChannelChatState.ACTIVE);
        }
    }
-});
+};
 var Component = TelepathyComponent;
--- a/js/ui/ctrlAltTab.js
+++ b/js/ui/ctrlAltTab.js
@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported CtrlAltTabManager */
 const { Clutter, GObject, Meta, Shell, St } = imports.gi;
@@ -12,7 +11,7 @@ var POPUP_APPICON_SIZE = 96;
 var SortGroup = {
    TOP:    0,
    MIDDLE: 1,
-    BOTTOM: 2,
+    BOTTOM: 2
 };
 var CtrlAltTabManager = class CtrlAltTabManager {
@@ -64,8 +63,9 @@ var CtrlAltTabManager = class CtrlAltTabManager {
        if (a.sortGroup != b.sortGroup)
            return a.sortGroup - b.sortGroup;
-        let [ax] = a.proxy.get_transformed_position();
+        let ax, bx, y;
-        let [bx] = b.proxy.get_transformed_position();
+        [ax, y] = a.proxy.get_transformed_position();
        [bx, y] = b.proxy.get_transformed_position();
        return ax - bx;
    }
@@ -86,26 +86,25 @@ var CtrlAltTabManager = class CtrlAltTabManager {
            for (let i = 0; i < windows.length; i++) {
                let icon = null;
                let iconName = null;
-                if (windows[i].get_window_type() == Meta.WindowType.DESKTOP) {
+                if (windows[i].get_window_type () == Meta.WindowType.DESKTOP) {
                    iconName = 'video-display-symbolic';
                } else {
                    let app = windowTracker.get_window_app(windows[i]);
-                    if (app) {
+                    if (app)
                        icon = app.create_icon_texture(POPUP_APPICON_SIZE);
-                    } else {
+                    else
                        icon = textureCache.bind_cairo_surface_property(windows[i],
                                                                        'icon',
                                                                        POPUP_APPICON_SIZE);
                    }
                }
                items.push({ name: windows[i].title,
                             proxy: windows[i].get_compositor_private(),
-                             focusCallback: timestamp => {
+                             focusCallback: function(timestamp) {
-                                 Main.activateWindow(windows[i], timestamp);
+                                 Main.activateWindow(this, timestamp);
-                             },
+                             }.bind(windows[i]),
                             iconActor: icon,
-                             iconName,
+                             iconName: iconName,
                             sortGroup: SortGroup.MIDDLE });
            }
        }
@@ -144,9 +143,9 @@ class CtrlAltTabPopup extends SwitcherPopup.SwitcherPopup {
            this._select(this._next());
        else if (action == Meta.KeyBindingAction.SWITCH_PANELS_BACKWARD)
            this._select(this._previous());
-        else if (keysym == Clutter.KEY_Left)
+        else if (keysym == Clutter.Left)
            this._select(this._previous());
-        else if (keysym == Clutter.KEY_Right)
+        else if (keysym == Clutter.Right)
            this._select(this._next());
        else
            return Clutter.EVENT_PROPAGATE;
@@ -178,13 +177,10 @@ class CtrlAltTabSwitcher extends SwitcherPopup.SwitcherList {
            icon = new St.Icon({ icon_name: item.iconName,
                                 icon_size: POPUP_APPICON_SIZE });
        }
-        box.add_child(icon);
+        box.add(icon, { x_fill: false, y_fill: false } );
-        let text = new St.Label({
+        let text = new St.Label({ text: item.name });
-            text: item.name,
+        box.add(text, { x_fill: false });
            x_align: Clutter.ActorAlign.CENTER,
        });
        box.add_child(text);
        this.addItem(box, text);
    }
--- a/js/ui/dash.js
+++ b/js/ui/dash.js
@@ -1,62 +1,36 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported Dash */
-const { Clutter, GLib, GObject,
+const { Clutter, GLib, GObject, Meta, Shell, St } = imports.gi;
-        Graphene, Meta, Shell, St } = imports.gi;
+const Mainloop = imports.mainloop;
 const Signals = imports.signals;
 const AppDisplay = imports.ui.appDisplay;
 const AppFavorites = imports.ui.appFavorites;
 const DND = imports.ui.dnd;
 const IconGrid = imports.ui.iconGrid;
 const Main = imports.ui.main;
 const Tweener = imports.ui.tweener;
-var DASH_ANIMATION_TIME = 200;
+var DASH_ANIMATION_TIME = 0.2;
-var DASH_ITEM_LABEL_SHOW_TIME = 150;
+var DASH_ITEM_LABEL_SHOW_TIME = 0.15;
-var DASH_ITEM_LABEL_HIDE_TIME = 100;
+var DASH_ITEM_LABEL_HIDE_TIME = 0.1;
 var DASH_ITEM_HOVER_TIMEOUT = 300;
 function getAppFromSource(source) {
-    if (source instanceof AppDisplay.AppIcon)
+    if (source instanceof AppDisplay.AppIcon) {
        return source.app;
-    else
+    } else {
        return null;
    }
 }
 var DashIcon = GObject.registerClass(
 class DashIcon extends AppDisplay.AppIcon {
    _init(app) {
        super._init(app, {
            setSizeManually: true,
            showLabel: false,
        });
    }
    // Disable all DnD methods
    _onDragBegin() {
    }
    _onDragEnd() {
    }
    handleDragOver() {
        return DND.DragMotionResult.CONTINUE;
    }
    acceptDrop() {
        return false;
    }
 });
 // A container like StBin, but taking the child's scale into account
 // when requesting a size
 var DashItemContainer = GObject.registerClass(
 class DashItemContainer extends St.Widget {
    _init() {
        super._init({ style_class: 'dash-item-container',
-                      pivot_point: new Graphene.Point({ x: .5, y: .5 }),
+                      pivot_point: new Clutter.Point({ x: .5, y: .5 }),
                      scale_x: 0,
                      scale_y: 0,
                      opacity: 0,
                      x_expand: true,
                      x_align: Clutter.ActorAlign.CENTER });
@@ -67,11 +41,10 @@ class DashItemContainer extends St.Widget {
        this.label_actor = this.label;
        this.child = null;
        this._childScale = 0;
        this._childOpacity = 0;
        this.animatingOut = false;
        this.connect('notify::scale-x', () => this.queue_relayout());
        this.connect('notify::scale-y', () => this.queue_relayout());
        this.connect('destroy', () => {
            if (this.child != null)
                this.child.destroy();
@@ -122,11 +95,11 @@ class DashItemContainer extends St.Widget {
            x = stageX + this.get_width() + xOffset;
        this.label.set_position(x, y);
-        this.label.ease({
+        Tweener.addTween(this.label,
-            opacity: 255,
+                         { opacity: 255,
-            duration: DASH_ITEM_LABEL_SHOW_TIME,
+                           time: DASH_ITEM_LABEL_SHOW_TIME,
-            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                           transition: 'easeOutQuad',
-        });
+                         });
    }
    setLabelText(text) {
@@ -135,12 +108,14 @@ class DashItemContainer extends St.Widget {
    }
    hideLabel() {
-        this.label.ease({
+        Tweener.addTween(this.label,
-            opacity: 0,
+                         { opacity: 0,
-            duration: DASH_ITEM_LABEL_HIDE_TIME,
+                           time: DASH_ITEM_LABEL_HIDE_TIME,
-            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                           transition: 'easeOutQuad',
-            onComplete: () => this.label.hide(),
+                           onComplete: () => {
-        });
+                               this.label.hide();
                           }
                         });
    }
    setChild(actor) {
@@ -151,6 +126,9 @@ class DashItemContainer extends St.Widget {
        this.child = actor;
        this.add_actor(this.child);
        this.set_scale(this._childScale, this._childScale);
        this.set_opacity(this._childOpacity);
    }
    show(animate) {
@@ -158,13 +136,12 @@ class DashItemContainer extends St.Widget {
            return;
        let time = animate ? DASH_ANIMATION_TIME : 0;
-        this.ease({
+        Tweener.addTween(this,
-            scale_x: 1,
+                         { childScale: 1.0,
-            scale_y: 1,
+                           childOpacity: 255,
-            opacity: 255,
+                           time: time,
-            duration: time,
+                           transition: 'easeOutQuad'
-            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                         });
        });
    }
    animateOutAndDestroy() {
@@ -176,14 +153,37 @@ class DashItemContainer extends St.Widget {
        }
        this.animatingOut = true;
-        this.ease({
+        Tweener.addTween(this,
-            scale_x: 0,
+                         { childScale: 0.0,
-            scale_y: 0,
+                           childOpacity: 0,
-            opacity: 0,
+                           time: DASH_ANIMATION_TIME,
-            duration: DASH_ANIMATION_TIME,
+                           transition: 'easeOutQuad',
-            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                           onComplete: () => {
-            onComplete: () => this.destroy(),
+                               this.destroy();
-        });
+                           }
                         });
    }
    set childScale(scale) {
        this._childScale = scale;
        this.set_scale(scale, scale);
        this.queue_relayout();
    }
    get childScale() {
        return this._childScale;
    }
    set childOpacity(opacity) {
        this._childOpacity = opacity;
        this.set_opacity(opacity);
        this.queue_redraw();
    }
    get childOpacity() {
        return this._childOpacity;
    }
 });
@@ -241,14 +241,14 @@ class ShowAppsIcon extends DashItemContainer {
            this.setLabelText(_("Show Applications"));
    }
-    handleDragOver(source, _actor, _x, _y, _time) {
+    handleDragOver(source, actor, x, y, time) {
        if (!this._canRemoveApp(getAppFromSource(source)))
            return DND.DragMotionResult.NO_DROP;
        return DND.DragMotionResult.MOVE_DROP;
    }
-    acceptDrop(source, _actor, _x, _y, _time) {
+    acceptDrop(source, actor, x, y, time) {
        let app = getAppFromSource(source);
        if (!this._canRemoveApp(app))
            return false;
@@ -284,12 +284,9 @@ var DashActor = GObject.registerClass(
 class DashActor extends St.Widget {
    _init() {
        let layout = new Clutter.BoxLayout({ orientation: Clutter.Orientation.VERTICAL });
-        super._init({
+        super._init({ name: 'dash',
-            name: 'dash',
+                      layout_manager: layout,
-            layout_manager: layout,
+                      clip_to_allocation: true });
            clip_to_allocation: true,
            y_align: Clutter.ActorAlign.CENTER,
        });
    }
    vfunc_allocate(box, flags) {
@@ -299,7 +296,7 @@ class DashActor extends St.Widget {
        this.set_allocation(box, flags);
        let [appIcons, showAppsButton] = this.get_children();
-        let [, showAppsNatHeight] = showAppsButton.get_preferred_height(availWidth);
+        let [showAppsMinHeight, showAppsNatHeight] = showAppsButton.get_preferred_height(availWidth);
        let childBox = new Clutter.ActorBox();
        childBox.x1 = contentBox.x1;
@@ -333,10 +330,8 @@ class DashActor extends St.Widget {
 const baseIconSizes = [16, 22, 24, 32, 48, 64];
-var Dash = GObject.registerClass({
+var Dash = class Dash {
-    Signals: { 'icon-size-changed': {} },
+    constructor() {
 }, class Dash extends St.Bin {
    _init() {
        this._maxHeight = -1;
        this.iconSize = 64;
        this._shownInitially = false;
@@ -356,7 +351,8 @@ var Dash = GObject.registerClass({
        this._container.set_offscreen_redirect(Clutter.OffscreenRedirect.ALWAYS);
        this._showAppsIcon = new ShowAppsIcon();
-        this._showAppsIcon.show(false);
+        this._showAppsIcon.childScale = 1;
        this._showAppsIcon.childOpacity = 255;
        this._showAppsIcon.icon.setIconSize(this.iconSize);
        this._hookUpLabel(this._showAppsIcon);
@@ -364,11 +360,11 @@ var Dash = GObject.registerClass({
        this._container.add_actor(this._showAppsIcon);
-        super._init({ child: this._container });
+        this.actor = new St.Bin({ child: this._container });
-        this.connect('notify::height', () => {
+        this.actor.connect('notify::height', () => {
-            if (this._maxHeight != this.height)
+            if (this._maxHeight != this.actor.height)
                this._queueRedisplay();
-            this._maxHeight = this.height;
+            this._maxHeight = this.actor.height;
        });
        this._workId = Main.initializeDeferredWork(this._box, this._redisplay.bind(this));
@@ -391,13 +387,13 @@ var Dash = GObject.registerClass({
        // Translators: this is the name of the dock/favorites area on
        // the left of the overview
-        Main.ctrlAltTabManager.addGroup(this, _("Dash"), 'user-bookmarks-symbolic');
+        Main.ctrlAltTabManager.addGroup(this.actor, _("Dash"), 'user-bookmarks-symbolic');
    }
    _onDragBegin() {
        this._dragCancelled = false;
        this._dragMonitor = {
-            dragMotion: this._onDragMotion.bind(this),
+            dragMotion: this._onDragMotion.bind(this)
        };
        DND.addDragMonitor(this._dragMonitor);
@@ -478,19 +474,31 @@ var Dash = GObject.registerClass({
    }
    _createAppItem(app) {
-        let appIcon = new DashIcon(app);
+        let appIcon = new AppDisplay.AppIcon(app,
                                             { setSizeManually: true,
                                               showLabel: false });
        if (appIcon._draggable) {
            appIcon._draggable.connect('drag-begin',
                                       () => {
                                           appIcon.actor.opacity = 50;
                                       });
            appIcon._draggable.connect('drag-end',
                                       () => {
                                           appIcon.actor.opacity = 255;
                                       });
        }
        appIcon.connect('menu-state-changed',
-                        (o, opened) => {
+                        (appIcon, opened) => {
                            this._itemMenuStateChanged(item, opened);
                        });
        let item = new DashItemContainer();
-        item.setChild(appIcon);
+        item.setChild(appIcon.actor);
        // Override default AppIcon label_actor, now the
        // accessible_name is set at DashItemContainer.setLabelText
-        appIcon.label_actor = null;
+        appIcon.actor.label_actor = null;
        item.setLabelText(app.get_name());
        appIcon.icon.setIconSize(this.iconSize);
@@ -504,7 +512,7 @@ var Dash = GObject.registerClass({
        // that the notify::hover handler does everything we need to.
        if (opened) {
            if (this._showLabelTimeoutId > 0) {
-                GLib.source_remove(this._showLabelTimeoutId);
+                Mainloop.source_remove(this._showLabelTimeoutId);
                this._showLabelTimeoutId = 0;
            }
@@ -518,7 +526,7 @@ var Dash = GObject.registerClass({
        if (shouldShow) {
            if (this._showLabelTimeoutId == 0) {
                let timeout = this._labelShowing ? 0 : DASH_ITEM_HOVER_TIMEOUT;
-                this._showLabelTimeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, timeout,
+                this._showLabelTimeoutId = Mainloop.timeout_add(timeout,
                    () => {
                        this._labelShowing = true;
                        item.showLabel();
@@ -527,17 +535,17 @@ var Dash = GObject.registerClass({
                    });
                GLib.Source.set_name_by_id(this._showLabelTimeoutId, '[gnome-shell] item.showLabel');
                if (this._resetHoverTimeoutId > 0) {
-                    GLib.source_remove(this._resetHoverTimeoutId);
+                    Mainloop.source_remove(this._resetHoverTimeoutId);
                    this._resetHoverTimeoutId = 0;
                }
            }
        } else {
            if (this._showLabelTimeoutId > 0)
-                GLib.source_remove(this._showLabelTimeoutId);
+                Mainloop.source_remove(this._showLabelTimeoutId);
            this._showLabelTimeoutId = 0;
            item.hideLabel();
            if (this._labelShowing) {
-                this._resetHoverTimeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, DASH_ITEM_HOVER_TIMEOUT,
+                this._resetHoverTimeoutId = Mainloop.timeout_add(DASH_ITEM_HOVER_TIMEOUT,
                    () => {
                        this._labelShowing = false;
                        this._resetHoverTimeoutId = 0;
@@ -625,12 +633,12 @@ var Dash = GObject.registerClass({
            icon.icon.set_size(icon.icon.width * scale,
                               icon.icon.height * scale);
-            icon.icon.ease({
+            Tweener.addTween(icon.icon,
-                width: targetWidth,
+                             { width: targetWidth,
-                height: targetHeight,
+                               height: targetHeight,
-                duration: DASH_ANIMATION_TIME,
+                               time: DASH_ANIMATION_TIME,
-                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                               transition: 'easeOutQuad',
-            });
+                             });
        }
    }
@@ -708,8 +716,8 @@ var Dash = GObject.registerClass({
            }
            // App moved
-            let nextApp = newApps.length > newIndex + 1
+            let nextApp = newApps.length > newIndex + 1 ? newApps[newIndex + 1]
-                ? newApps[newIndex + 1] : null;
+                                                        : null;
            let insertHere = nextApp && nextApp == oldApp;
            let alreadyRemoved = removedActors.reduce((result, actor) => {
                let removedApp = actor.child._delegate.app;
@@ -728,10 +736,9 @@ var Dash = GObject.registerClass({
            }
        }
-        for (let i = 0; i < addedItems.length; i++) {
+        for (let i = 0; i < addedItems.length; i++)
            this._box.insert_child_at_index(addedItems[i].item,
                                            addedItems[i].pos);
        }
        for (let i = 0; i < removedActors.length; i++) {
            let item = removedActors[i];
@@ -755,8 +762,9 @@ var Dash = GObject.registerClass({
        if (!this._shownInitially)
            this._shownInitially = true;
-        for (let i = 0; i < addedItems.length; i++)
+        for (let i = 0; i < addedItems.length; i++) {
            addedItems[i].item.show(animate);
        }
        // Workaround for https://bugzilla.gnome.org/show_bug.cgi?id=692744
        // Without it, StBoxLayout may use a stale size cache
@@ -782,7 +790,7 @@ var Dash = GObject.registerClass({
        }
    }
-    handleDragOver(source, actor, x, y, _time) {
+    handleDragOver(source, actor, x, y, time) {
        let app = getAppFromSource(source);
        // Don't allow favoriting of transient apps
@@ -836,8 +844,8 @@ var Dash = GObject.registerClass({
            }
            this._dragPlaceholder = new DragPlaceholderItem();
-            this._dragPlaceholder.child.set_width(this.iconSize);
+            this._dragPlaceholder.child.set_width (this.iconSize);
-            this._dragPlaceholder.child.set_height(this.iconSize / 2);
+            this._dragPlaceholder.child.set_height (this.iconSize / 2);
            this._box.insert_child_at_index(this._dragPlaceholder,
                                            this._dragPlaceholderPos);
            this._dragPlaceholder.show(fadeIn);
@@ -851,7 +859,7 @@ var Dash = GObject.registerClass({
        if (!this._dragPlaceholder)
            return DND.DragMotionResult.NO_DROP;
-        let srcIsFavorite = favPos != -1;
+        let srcIsFavorite = (favPos != -1);
        if (srcIsFavorite)
            return DND.DragMotionResult.MOVE_DROP;
@@ -860,12 +868,13 @@ var Dash = GObject.registerClass({
    }
    // Draggable target interface
-    acceptDrop(source, _actor, _x, _y, _time) {
+    acceptDrop(source, actor, x, y, time) {
        let app = getAppFromSource(source);
        // Don't allow favoriting of transient apps
-        if (app == null || app.is_window_backed())
+        if (app == null || app.is_window_backed()) {
            return false;
        }
        if (!global.settings.is_writable('favorite-apps'))
            return false;
@@ -874,7 +883,7 @@ var Dash = GObject.registerClass({
        let favorites = AppFavorites.getAppFavorites().getFavoriteMap();
-        let srcIsFavorite = id in favorites;
+        let srcIsFavorite = (id in favorites);
        let favPos = 0;
        let children = this._box.get_children();
@@ -906,4 +915,5 @@ var Dash = GObject.registerClass({
        return true;
    }
-});
+};
 Signals.addSignalMethods(Dash.prototype);
--- a/js/ui/dateMenu.js
+++ b/js/ui/dateMenu.js
@@ -1,8 +1,7 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported DateMenuButton */
-const { Clutter, Gio, GLib, GnomeDesktop,
+const { Clutter, GLib, GnomeDesktop,
-        GObject, GWeather, Pango, Shell, St } = imports.gi;
+        GObject, GWeather, Shell, St } = imports.gi;
 const Util = imports.misc.util;
 const Main = imports.ui.main;
@@ -11,13 +10,8 @@ const Calendar = imports.ui.calendar;
 const Weather = imports.misc.weather;
 const System = imports.system;
 const { loadInterfaceXML } = imports.misc.fileUtils;
 const MAX_FORECASTS = 5;
 const ClocksIntegrationIface = loadInterfaceXML('org.gnome.Shell.ClocksIntegration');
 const ClocksProxy = Gio.DBusProxy.makeProxyWrapper(ClocksIntegrationIface);
 function _isToday(date) {
    let now = new Date();
    return now.getYear() == date.getYear() &&
@@ -25,25 +19,22 @@ function _isToday(date) {
           now.getDate() == date.getDate();
 }
-function _gDateTimeToDate(datetime) {
+var TodayButton = class TodayButton {
-    return new Date(datetime.to_unix() * 1000 + datetime.get_microsecond() / 1000);
+    constructor(calendar) {
 }
 var TodayButton = GObject.registerClass(
 class TodayButton extends St.Button {
    _init(calendar) {
        // Having the ability to go to the current date if the user is already
        // on the current date can be confusing. So don't make the button reactive
        // until the selected date changes.
-        super._init({
+        this.actor = new St.Button({ style_class: 'datemenu-today-button',
-            style_class: 'datemenu-today-button',
+                                     x_expand: true, x_align: St.Align.START,
-            x_expand: true,
+                                     can_focus: true,
-            can_focus: true,
+                                     reactive: false
-            reactive: false,
+                                   });
        this.actor.connect('clicked', () => {
            this._calendar.setDate(new Date(), false);
        });
        let hbox = new St.BoxLayout({ vertical: true });
-        this.add_actor(hbox);
+        this.actor.add_actor(hbox);
        this._dayLabel = new St.Label({ style_class: 'day-label',
                                        x_align: Clutter.ActorAlign.START });
@@ -53,17 +44,13 @@ class TodayButton extends St.Button {
        hbox.add_actor(this._dateLabel);
        this._calendar = calendar;
-        this._calendar.connect('selected-date-changed', (_calendar, datetime) => {
+        this._calendar.connect('selected-date-changed', (calendar, date) => {
            // Make the button reactive only if the selected date is not the
            // current date.
-            this.reactive = !_isToday(_gDateTimeToDate(datetime));
+            this.actor.reactive = !_isToday(date);
        });
    }
    vfunc_clicked() {
        this._calendar.setDate(new Date(), false);
    }
    setDate(date) {
        this._dayLabel.set_text(date.toLocaleFormat('%A'));
@@ -72,81 +59,65 @@ class TodayButton extends St.Button {
         * "Tue 9:29 AM").  The string itself should become a full date, e.g.,
         * "February 17 2015".
         */
-        let dateFormat = Shell.util_translate_time_string(N_("%B %-d %Y"));
+        let dateFormat = Shell.util_translate_time_string (N_("%B %-d %Y"));
        this._dateLabel.set_text(date.toLocaleFormat(dateFormat));
        /* Translators: This is the accessible name of the date button shown
         * below the time in the shell; it should combine the weekday and the
         * date, e.g. "Tuesday February 17 2015".
         */
-        dateFormat = Shell.util_translate_time_string(N_("%A %B %e %Y"));
+        dateFormat = Shell.util_translate_time_string (N_("%A %B %e %Y"));
-        this.accessible_name = date.toLocaleFormat(dateFormat);
+        this.actor.accessible_name = date.toLocaleFormat(dateFormat);
    }
-});
+};
-var WorldClocksSection = GObject.registerClass(
+var WorldClocksSection = class WorldClocksSection {
-class WorldClocksSection extends St.Button {
+    constructor() {
    _init() {
        super._init({
            style_class: 'world-clocks-button',
            can_focus: true,
            x_expand: true,
        });
        this._clock = new GnomeDesktop.WallClock();
        this._clockNotifyId = 0;
        this._locations = [];
        this.actor = new St.Button({ style_class: 'world-clocks-button',
                                     x_fill: true,
                                     can_focus: true });
        this.actor.connect('clicked', () => {
            this._clockAppMon.activateApp();
            Main.overview.hide();
            Main.panel.closeCalendar();
        });
        let layout = new Clutter.GridLayout({ orientation: Clutter.Orientation.VERTICAL });
        this._grid = new St.Widget({ style_class: 'world-clocks-grid',
                                     x_expand: true,
                                     layout_manager: layout });
        layout.hookup_style(this._grid);
-        this.child = this._grid;
+        this.actor.child = this._grid;
-        this._clocksApp = null;
+        this._clockAppMon = new Util.AppSettingsMonitor('org.gnome.clocks.desktop',
-        this._clocksProxy = new ClocksProxy(
+                                                        'org.gnome.clocks');
-            Gio.DBus.session,
+        this._clockAppMon.connect('available-changed',
-            'org.gnome.clocks',
+                                  this._sync.bind(this));
-            '/org/gnome/clocks',
+        this._clockAppMon.watchSetting('world-clocks',
-            this._onProxyReady.bind(this),
+                                       this._clocksChanged.bind(this));
            null /* cancellable */,
            Gio.DBusProxyFlags.DO_NOT_AUTO_START | Gio.DBusProxyFlags.GET_INVALIDATED_PROPERTIES);
        this._settings = new Gio.Settings({
            schema_id: 'org.gnome.shell.world-clocks',
        });
        this._settings.connect('changed', this._clocksChanged.bind(this));
        this._clocksChanged();
        this._appSystem = Shell.AppSystem.get_default();
        this._appSystem.connect('installed-changed',
            this._sync.bind(this));
        this._sync();
    }
    vfunc_clicked() {
        if (this._clocksApp)
            this._clocksApp.activate();
        Main.overview.hide();
        Main.panel.closeCalendar();
    }
    _sync() {
-        this._clocksApp = this._appSystem.lookup_app('org.gnome.clocks.desktop');
+        this.actor.visible = this._clockAppMon.available;
        this.visible = this._clocksApp != null;
    }
-    _clocksChanged() {
+    _clocksChanged(settings) {
        this._grid.destroy_all_children();
        this._locations = [];
        let world = GWeather.Location.get_world();
-        let clocks = this._settings.get_value('locations').deep_unpack();
+        let clocks = settings.get_value('world-clocks').deep_unpack();
        for (let i = 0; i < clocks.length; i++) {
-            let l = world.deserialize(clocks[i]);
+            if (!clocks[i].location)
                continue;
            let l = world.deserialize(clocks[i].location);
            if (l && l.get_timezone() != null)
                this._locations.push({ location: l });
        }
@@ -157,14 +128,13 @@ class WorldClocksSection extends St.Button {
        });
        let layout = this._grid.layout_manager;
-        let title = this._locations.length == 0
+        let title = (this._locations.length == 0) ? _("Add world clocks…")
-            ? _("Add world clocks…")
+                                                  : _("World Clocks");
            : _("World Clocks");
        let header = new St.Label({ style_class: 'world-clocks-header',
                                    x_align: Clutter.ActorAlign.START,
                                    text: title });
        layout.attach(header, 0, 0, 2, 1);
-        this.label_actor = header;
+        this.actor.label_actor = header;
        let localOffset = GLib.DateTime.new_now_local().get_utc_offset();
@@ -182,8 +152,8 @@ class WorldClocksSection extends St.Button {
            let otherOffset = this._getTimeAtLocation(l).get_utc_offset();
            let offset = (otherOffset - localOffset) / GLib.TIME_SPAN_HOUR;
-            let fmt = Math.trunc(offset) == offset ? '%s%.0f' : '%s%.1f';
+            let fmt = (Math.trunc(offset) == offset) ? '%s%.0f' : '%s%.1f';
-            let prefix = offset >= 0 ? '+' : '-';
+            let prefix = (offset >= 0) ? '+' : '-';
            let tz = new St.Label({ style_class: 'world-clocks-timezone',
                                    text: fmt.format(prefix, Math.abs(offset)),
                                    x_align: Clutter.ActorAlign.END,
@@ -203,10 +173,9 @@ class WorldClocksSection extends St.Button {
        }
        if (this._grid.get_n_children() > 1) {
-            if (!this._clockNotifyId) {
+            if (!this._clockNotifyId)
                this._clockNotifyId =
                    this._clock.connect('notify::clock', this._updateLabels.bind(this));
            }
            this._updateLabels();
        } else {
            if (this._clockNotifyId)
@@ -227,68 +196,45 @@ class WorldClocksSection extends St.Button {
            l.actor.text = Util.formatTime(now, { timeOnly: true });
        }
    }
 };
-    _onProxyReady(proxy, error) {
+var WeatherSection = class WeatherSection {
-        if (error) {
+    constructor() {
            log(`Failed to create GNOME Clocks proxy: ${error}`);
            return;
        }
        this._clocksProxy.connect('g-properties-changed',
            this._onClocksPropertiesChanged.bind(this));
        this._onClocksPropertiesChanged();
    }
    _onClocksPropertiesChanged() {
        if (this._clocksProxy.g_name_owner == null)
            return;
        this._settings.set_value('locations',
            new GLib.Variant('av', this._clocksProxy.Locations));
    }
 });
 var WeatherSection = GObject.registerClass(
 class WeatherSection extends St.Button {
    _init() {
        super._init({
            style_class: 'weather-button',
            can_focus: true,
            x_expand: true,
        });
        this._weatherClient = new Weather.WeatherClient();
-        let box = new St.BoxLayout({
+        this.actor = new St.Button({ style_class: 'weather-button',
-            style_class: 'weather-box',
+                                     x_fill: true,
-            vertical: true,
+                                     can_focus: true });
-            x_expand: true,
+        this.actor.connect('clicked', () => {
            this._weatherClient.activateApp();
            Main.overview.hide();
            Main.panel.closeCalendar();
        });
        this.actor.connect('notify::mapped', () => {
            if (this.actor.mapped)
                this._weatherClient.update();
        });
-        this.child = box;
+        let box = new St.BoxLayout({ style_class: 'weather-box',
                                     vertical: true });
-        let titleBox = new St.BoxLayout({ style_class: 'weather-header-box' });
+        this.actor.child = box;
-        titleBox.add_child(new St.Label({
+
-            style_class: 'weather-header',
+        let titleBox = new St.BoxLayout();
-            x_align: Clutter.ActorAlign.START,
+        titleBox.add_child(new St.Label({ style_class: 'weather-header',
-            x_expand: true,
+                                          x_align: Clutter.ActorAlign.START,
-            y_align: Clutter.ActorAlign.END,
+                                          x_expand: true,
-            text: _('Weather'),
+                                          text: _("Weather") }));
        }));
        box.add_child(titleBox);
-        this._titleLocation = new St.Label({
+        this._titleLocation = new St.Label({ style_class: 'weather-header location',
-            style_class: 'weather-header location',
+                                             x_align: Clutter.ActorAlign.END });
            x_align: Clutter.ActorAlign.END,
            y_align: Clutter.ActorAlign.END,
        });
        titleBox.add_child(this._titleLocation);
        let layout = new Clutter.GridLayout({ orientation: Clutter.Orientation.VERTICAL });
-        this._forecastGrid = new St.Widget({
+        this._forecastGrid = new St.Widget({ style_class: 'weather-grid',
-            style_class: 'weather-grid',
+                                             layout_manager: layout });
            layout_manager: layout,
        });
        layout.hookup_style(this._forecastGrid);
        box.add_child(this._forecastGrid);
@@ -296,40 +242,26 @@ class WeatherSection extends St.Button {
        this._sync();
    }
    vfunc_map() {
        this._weatherClient.update();
        super.vfunc_map();
    }
    vfunc_clicked() {
        this._weatherClient.activateApp();
        Main.overview.hide();
        Main.panel.closeCalendar();
    }
    _getInfos() {
-        let forecasts = this._weatherClient.info.get_forecast_list();
+        let info = this._weatherClient.info;
        let forecasts = info.get_forecast_list();
-        let now = GLib.DateTime.new_now_local();
+        let current = info;
-        let current = GLib.DateTime.new_from_unix_local(0);
+        let infos = [info];
        let infos = [];
        for (let i = 0; i < forecasts.length; i++) {
-            const [valid, timestamp] = forecasts[i].get_value_update();
+            let [ok, timestamp] = forecasts[i].get_value_update();
-            if (!valid || timestamp === 0)
+            let datetime = new Date(timestamp * 1000);
-                continue;  // 0 means 'never updated'
+            if (!_isToday(datetime))
                continue; // Ignore forecasts from other days
-            const datetime = GLib.DateTime.new_from_unix_local(timestamp);
+            [ok, timestamp] = current.get_value_update();
-            if (now.difference(datetime) > 0)
+            let currenttime = new Date(timestamp * 1000);
-                continue; // Ignore earlier forecasts
+            if (currenttime.getHours() == datetime.getHours())
            if (datetime.difference(current) < GLib.TIME_SPAN_HOUR)
                continue; // Enforce a minimum interval of 1h
-            if (infos.push(forecasts[i]) == MAX_FORECASTS)
+            current = forecasts[i];
            if (infos.push(current) == MAX_FORECASTS)
                break; // Use a maximum of five forecasts
            current = datetime;
        }
        return infos;
    }
@@ -343,31 +275,21 @@ class WeatherSection extends St.Button {
        let col = 0;
        infos.forEach(fc => {
-            const [valid_, timestamp] = fc.get_value_update();
+            let [ok, timestamp] = fc.get_value_update();
            let timeStr = Util.formatTime(new Date(timestamp * 1000), {
-                timeOnly: true,
+                timeOnly: true
                ampm: false,
            });
-            let icon = new St.Icon({
+            let icon = new St.Icon({ style_class: 'weather-forecast-icon',
-                style_class: 'weather-forecast-icon',
+                                     icon_name: fc.get_symbolic_icon_name(),
-                icon_name: fc.get_symbolic_icon_name(),
+                                     x_align: Clutter.ActorAlign.CENTER,
-                x_align: Clutter.ActorAlign.CENTER,
+                                     x_expand: true });
-                x_expand: true,
+            let temp = new St.Label({ style_class: 'weather-forecast-temp',
-            });
+                                      text: fc.get_temp_summary(),
-            let temp = new St.Label({
+                                      x_align: Clutter.ActorAlign.CENTER });
-                style_class: 'weather-forecast-temp',
+            let time = new St.Label({ style_class: 'weather-forecast-time',
-                text: fc.get_temp_summary(),
+                                      text: timeStr,
-                x_align: Clutter.ActorAlign.CENTER,
+                                      x_align: Clutter.ActorAlign.CENTER });
            });
            let time = new St.Label({
                style_class: 'weather-forecast-time',
                text: timeStr,
                x_align: Clutter.ActorAlign.CENTER,
            });
            temp.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
            time.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
            layout.attach(icon, col, 0, 1, 1);
            layout.attach(temp, col, 1, 1, 1);
@@ -391,12 +313,7 @@ class WeatherSection extends St.Button {
        }
        let info = this._weatherClient.info;
-        let loc = info.get_location();
+        this._titleLocation.text = info.get_location().get_name();
        if (loc.get_level() !== GWeather.LocationLevel.CITY && loc.has_coords()) {
            let world = GWeather.Location.get_world();
            loc = world.find_nearest_city(...loc.get_coords());
        }
        this._titleLocation.text = loc.get_name();
        if (this._weatherClient.loading) {
            this._setStatusLabel(_("Loading…"));
@@ -415,27 +332,23 @@ class WeatherSection extends St.Button {
    }
    _sync() {
-        this.visible = this._weatherClient.available;
+        this.actor.visible = this._weatherClient.available;
-        if (!this.visible)
+        if (!this.actor.visible)
            return;
        this._titleLocation.visible = this._weatherClient.hasLocation;
        this._updateForecasts();
    }
-});
+};
-var MessagesIndicator = GObject.registerClass(
+var MessagesIndicator = class MessagesIndicator {
-class MessagesIndicator extends St.Icon {
+    constructor() {
-    _init() {
+        this.actor = new St.Icon({ icon_name: 'message-indicator-symbolic',
-        super._init({
+                                   icon_size: 16,
-            icon_name: 'message-indicator-symbolic',
+                                   visible: false, y_expand: true,
-            icon_size: 16,
+                                   y_align: Clutter.ActorAlign.CENTER });
            visible: false,
            y_expand: true,
            y_align: Clutter.ActorAlign.CENTER,
        });
        this._sources = [];
@@ -448,7 +361,7 @@ class MessagesIndicator extends St.Icon {
    }
    _onSourceAdded(tray, source) {
-        source.connect('notify::count', this._updateCount.bind(this));
+        source.connect('count-updated', this._updateCount.bind(this));
        this._sources.push(source);
        this._updateCount();
    }
@@ -460,12 +373,12 @@ class MessagesIndicator extends St.Icon {
    _updateCount() {
        let count = 0;
-        this._sources.forEach(source => (count += source.unseenCount));
+        this._sources.forEach(source => count += source.unseenCount);
        count -= Main.messageTray.queueCount;
-        this.visible = count > 0;
+        this.actor.visible = (count > 0);
    }
-});
+};
 var IndicatorPad = GObject.registerClass(
 class IndicatorPad extends St.Widget {
@@ -558,13 +471,13 @@ class DateMenuButton extends PanelMenu.Button {
        this._indicator = new MessagesIndicator();
        let box = new St.BoxLayout();
-        box.add_actor(new IndicatorPad(this._indicator));
+        box.add_actor(new IndicatorPad(this._indicator.actor));
        box.add_actor(this._clockDisplay);
-        box.add_actor(this._indicator);
+        box.add_actor(this._indicator.actor);
        this.label_actor = this._clockDisplay;
        this.add_actor(box);
-        this.add_style_class_name('clock-display');
+        this.add_style_class_name ('clock-display');
        let layout = new FreezableBinLayout();
        let bin = new St.Widget({ layout_manager: layout });
@@ -576,11 +489,11 @@ class DateMenuButton extends PanelMenu.Button {
        bin.add_actor(hbox);
        this._calendar = new Calendar.Calendar();
-        this._calendar.connect('selected-date-changed', (_calendar, datetime) => {
+        this._calendar.connect('selected-date-changed',
-            let date = _gDateTimeToDate(datetime);
+                               (calendar, date) => {
-            layout.frozen = !_isToday(date);
+                                   layout.frozen = !_isToday(date);
-            this._messageList.setDate(date);
+                                   this._messageList.setDate(date);
-        });
+                               });
        this.menu.connect('open-state-changed', (menu, isOpen) => {
            // Whenever the menu is opened, select today
@@ -594,36 +507,35 @@ class DateMenuButton extends PanelMenu.Button {
        // Fill up the first column
        this._messageList = new Calendar.CalendarMessageList();
-        hbox.add_child(this._messageList);
+        hbox.add(this._messageList.actor, { expand: true, y_fill: false, y_align: St.Align.START });
        // Fill up the second column
-        let boxLayout = new CalendarColumnLayout(this._calendar);
+        let boxLayout = new CalendarColumnLayout(this._calendar.actor);
        vbox = new St.Widget({ style_class: 'datemenu-calendar-column',
                               layout_manager: boxLayout });
        boxLayout.hookup_style(vbox);
        hbox.add(vbox);
        this._date = new TodayButton(this._calendar);
-        vbox.add_actor(this._date);
+        vbox.add_actor(this._date.actor);
-        vbox.add_actor(this._calendar);
+        vbox.add_actor(this._calendar.actor);
        this._displaysSection = new St.ScrollView({ style_class: 'datemenu-displays-section vfade',
-                                                    x_expand: true,
+                                                    x_expand: true, x_fill: true,
                                                    overlay_scrollbars: true });
        this._displaysSection.set_policy(St.PolicyType.NEVER, St.PolicyType.AUTOMATIC);
        vbox.add_actor(this._displaysSection);
        let displaysBox = new St.BoxLayout({ vertical: true,
                                             x_expand: true,
                                             style_class: 'datemenu-displays-box' });
        this._displaysSection.add_actor(displaysBox);
        this._clocksItem = new WorldClocksSection();
-        displaysBox.add_child(this._clocksItem);
+        displaysBox.add(this._clocksItem.actor, { x_fill: true });
        this._weatherItem = new WeatherSection();
-        displaysBox.add_child(this._weatherItem);
+        displaysBox.add(this._weatherItem.actor, { x_fill: true });
        // Done with hbox for calendar and event list
@@ -661,11 +573,11 @@ class DateMenuButton extends PanelMenu.Button {
    _sessionUpdated() {
        let eventSource;
        let showEvents = Main.sessionMode.showCalendarEvents;
-        if (showEvents)
+        if (showEvents) {
            eventSource = this._getEventSource();
-        else
+        } else {
            eventSource = new Calendar.EmptyEventSource();
-
+        }
        this._setEventSource(eventSource);
        // Displays are not actually expected to launch Settings when activated
--- a/js/ui/dialog.js
+++ b/js/ui/dialog.js
@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported Dialog, MessageDialogContent */
 const { Clutter, Gio, GObject, Pango, St } = imports.gi;
@@ -36,15 +35,19 @@ class Dialog extends St.Widget {
        this._dialog.request_mode = Clutter.RequestMode.HEIGHT_FOR_WIDTH;
        this._dialog.set_offscreen_redirect(Clutter.OffscreenRedirect.ALWAYS);
-        this.contentLayout = new St.BoxLayout({
+        this.contentLayout = new St.BoxLayout({ vertical: true,
-            vertical: true,
+                                                style_class: "modal-dialog-content-box" });
-            style_class: 'modal-dialog-content-box',
+        this._dialog.add(this.contentLayout,
-            y_expand: true,
+                         { expand: true,
-        });
+                           x_fill: true,
-        this._dialog.add_child(this.contentLayout);
+                           y_fill: true,
                           x_align: St.Align.MIDDLE,
                           y_align: St.Align.START });
-        this.buttonLayout = new St.Widget({ layout_manager: new Clutter.BoxLayout({ homogeneous: true }) });
+        this.buttonLayout = new St.Widget ({ layout_manager: new Clutter.BoxLayout({ homogeneous: true }) });
-        this._dialog.add_child(this.buttonLayout);
+        this._dialog.add(this.buttonLayout,
                         { x_align: St.Align.MIDDLE,
                           y_align: St.Align.START });
    }
    _onDestroy() {
@@ -96,7 +99,7 @@ class Dialog extends St.Widget {
    }
    addContent(actor) {
-        this.contentLayout.add(actor, { expand: true });
+        this.contentLayout.add (actor, { expand: true });
    }
    addButton(buttonInfo) {
@@ -117,7 +120,7 @@ class Dialog extends St.Widget {
                                     can_focus: true,
                                     x_expand: true,
                                     y_expand: true,
-                                     label });
+                                     label: label });
        button.connect('clicked', action);
        buttonInfo['button'] = button;
@@ -159,8 +162,8 @@ var MessageDialogContent = GObject.registerClass({
        'body': GObject.ParamSpec.string('body', 'body', 'body',
                                         GObject.ParamFlags.READWRITE |
                                         GObject.ParamFlags.CONSTRUCT,
-                                         null),
+                                         null)
-    },
+    }
 }, class MessageDialogContent extends St.BoxLayout {
    _init(params) {
        this._icon = new St.Icon({ y_align: Clutter.ActorAlign.START });
@@ -211,7 +214,7 @@ var MessageDialogContent = GObject.registerClass({
    set icon(icon) {
        this._icon.set({
            gicon: icon,
-            visible: icon != null,
+            visible: icon != null
        });
        this.notify('icon');
    }
@@ -231,7 +234,7 @@ var MessageDialogContent = GObject.registerClass({
    _setLabel(label, prop, value) {
        label.set({
            text: value || '',
-            visible: value != null,
+            visible: value != null
        });
        this.notify(prop);
    }
--- a/js/ui/dnd.js
+++ b/js/ui/dnd.js
@@ -1,24 +1,24 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported addDragMonitor, removeDragMonitor, makeDraggable */
 const { Clutter, GLib, Meta, Shell, St } = imports.gi;
 const Signals = imports.signals;
 const Main = imports.ui.main;
 const Params = imports.misc.params;
 const Tweener = imports.ui.tweener;
 // Time to scale down to maxDragActorSize
-var SCALE_ANIMATION_TIME = 250;
+var SCALE_ANIMATION_TIME = 0.25;
 // Time to animate to original position on cancel
-var SNAP_BACK_ANIMATION_TIME = 250;
+var SNAP_BACK_ANIMATION_TIME = 0.25;
 // Time to animate to original position on success
-var REVERT_ANIMATION_TIME = 750;
+var REVERT_ANIMATION_TIME = 0.75;
 var DragMotionResult = {
    NO_DROP:   0,
    COPY_DROP: 1,
    MOVE_DROP: 2,
-    CONTINUE:  3,
+    CONTINUE:  3
 };
 var DragState = {
@@ -30,13 +30,13 @@ var DragState = {
 var DRAG_CURSOR_MAP = {
    0: Meta.Cursor.DND_UNSUPPORTED_TARGET,
    1: Meta.Cursor.DND_COPY,
-    2: Meta.Cursor.DND_MOVE,
+    2: Meta.Cursor.DND_MOVE
 };
 var DragDropResult = {
    FAILURE:  0,
    SUCCESS:  1,
-    CONTINUE: 2,
+    CONTINUE: 2
 };
 var dragMonitors = [];
@@ -61,12 +61,11 @@ function addDragMonitor(monitor) {
 }
 function removeDragMonitor(monitor) {
-    for (let i = 0; i < dragMonitors.length; i++) {
+    for (let i = 0; i < dragMonitors.length; i++)
        if (dragMonitors[i] == monitor) {
            dragMonitors.splice(i, 1);
            return;
        }
    }
 }
 var _Draggable = class _Draggable {
@@ -112,6 +111,9 @@ var _Draggable = class _Draggable {
        if (event.get_button() != 1)
            return Clutter.EVENT_PROPAGATE;
        if (Tweener.getTweenCount(actor))
            return Clutter.EVENT_PROPAGATE;
        this._buttonDown = true;
        this._grabActor(event.get_device());
@@ -137,6 +139,9 @@ var _Draggable = class _Draggable {
            !global.display.is_pointer_emulating_sequence(event.get_event_sequence()))
            return Clutter.EVENT_PROPAGATE;
        if (Tweener.getTweenCount(actor))
            return Clutter.EVENT_PROPAGATE;
        this._buttonDown = true;
        this._grabActor(event.get_device(), event.get_event_sequence());
@@ -151,12 +156,12 @@ var _Draggable = class _Draggable {
        if (touchSequence)
            pointer.sequence_grab(touchSequence, actor);
        else if (pointer)
-            pointer.grab(actor);
+            pointer.grab (actor);
        this._grabbedDevice = pointer;
        this._touchSequence = touchSequence;
-        this._capturedEventId = global.stage.connect('captured-event', (o, event) => {
+        this._capturedEventId = global.stage.connect('captured-event', (actor, event) => {
            let device = event.get_device();
            if (device != this._grabbedDevice &&
                device.get_device_type() != Clutter.InputDeviceType.KEYBOARD_DEVICE)
@@ -172,7 +177,7 @@ var _Draggable = class _Draggable {
        }
        if (this._touchSequence)
-            this._grabbedDevice.sequence_ungrab(this._touchSequence);
+            this._grabbedDevice.sequence_ungrab (this._touchSequence);
        else
            this._grabbedDevice.ungrab();
@@ -213,9 +218,9 @@ var _Draggable = class _Draggable {
    _eventIsRelease(event) {
        if (event.type() == Clutter.EventType.BUTTON_RELEASE) {
-            let buttonMask = Clutter.ModifierType.BUTTON1_MASK |
+            let buttonMask = (Clutter.ModifierType.BUTTON1_MASK |
                              Clutter.ModifierType.BUTTON2_MASK |
-                              Clutter.ModifierType.BUTTON3_MASK;
+                              Clutter.ModifierType.BUTTON3_MASK);
            /* We only obey the last button release from the device,
             * other buttons may get pressed/released during the DnD op.
             */
@@ -259,16 +264,16 @@ var _Draggable = class _Draggable {
        } else if (event.type() == Clutter.EventType.MOTION ||
                   (event.type() == Clutter.EventType.TOUCH_UPDATE &&
                    global.display.is_pointer_emulating_sequence(event.get_event_sequence()))) {
-            if (this._dragActor && this._dragState == DragState.DRAGGING)
+            if (this._dragActor && this._dragState == DragState.DRAGGING) {
                return this._updateDragPosition(event);
-            else if (this._dragActor == null && this._dragState != DragState.CANCELLED)
+            } else if (this._dragActor == null && this._dragState != DragState.CANCELLED) {
                return this._maybeStartDrag(event);
-
+            }
        // We intercept KEY_PRESS event so that we can process Esc key press to cancel
        // dragging and ignore all other key presses.
        } else if (event.type() == Clutter.EventType.KEY_PRESS && this._dragState == DragState.DRAGGING) {
            let symbol = event.get_key_symbol();
-            if (symbol == Clutter.KEY_Escape) {
+            if (symbol == Clutter.Escape) {
                this._cancelDrag(event.get_time());
                return Clutter.EVENT_STOP;
            }
@@ -292,11 +297,9 @@ var _Draggable = class _Draggable {
    /**
     * startDrag:
-     * @param {number} stageX: X coordinate of event
+     * @stageX: X coordinate of event
-     * @param {number} stageY: Y coordinate of event
+     * @stageY: Y coordinate of event
-     * @param {number} time: Event timestamp
+     * @time: Event timestamp
     * @param {Clutter.EventSequence=} sequence: Event sequence
     * @param {Clutter.InputDevice=} device: device that originated the event
     *
     * Directly initiate a drag and drop operation from the given actor.
     * This function is useful to call if you've specified manualMode
@@ -341,7 +344,7 @@ var _Draggable = class _Draggable {
        if (this.actor._delegate && this.actor._delegate.getDragActor) {
            this._dragActor = this.actor._delegate.getDragActor();
            Main.uiGroup.add_child(this._dragActor);
-            Main.uiGroup.set_child_above_sibling(this._dragActor, null);
+            this._dragActor.raise_top();
            Shell.util_set_hidden_from_pick(this._dragActor, true);
            // Drag actor does not always have to be the same as actor. For example drag actor
@@ -391,7 +394,7 @@ var _Draggable = class _Draggable {
            this._dragOrigParent.remove_actor(this._dragActor);
            Main.uiGroup.add_child(this._dragActor);
-            Main.uiGroup.set_child_above_sibling(this._dragActor, null);
+            this._dragActor.raise_top();
            Shell.util_set_hidden_from_pick(this._dragActor, true);
        }
@@ -425,22 +428,19 @@ var _Draggable = class _Draggable {
                // to the final position because that tween would
                // fight with updates as the user continues dragging
                // the mouse; instead we do the position computations in
-                // a ::new-frame handler.
+                // an onUpdate() function.
-                this._dragActor.ease({
+                Tweener.addTween(this._dragActor,
-                    scale_x: scale * origScale,
+                                 { scale_x: scale * origScale,
-                    scale_y: scale * origScale,
+                                   scale_y: scale * origScale,
-                    duration: SCALE_ANIMATION_TIME,
+                                   time: SCALE_ANIMATION_TIME,
-                    mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                                   transition: 'easeOutQuad',
-                });
+                                   onUpdate: () => {
-
+                                       let currentScale = this._dragActor.scale_x / origScale;
-                this._dragActor.get_transition('scale-x').connect('new-frame', () => {
+                                       this._dragOffsetX = currentScale * origDragOffsetX;
-                    let currentScale = this._dragActor.scale_x / origScale;
+                                       this._dragOffsetY = currentScale * origDragOffsetY;
-                    this._dragOffsetX = currentScale * origDragOffsetX;
+                                       this._dragActor.set_position(this._dragX + this._dragOffsetX,
-                    this._dragOffsetY = currentScale * origDragOffsetY;
+                                                                    this._dragY + this._dragOffsetY);
-                    this._dragActor.set_position(
+                                   } });
                        this._dragX + this._dragOffsetX,
                        this._dragY + this._dragOffsetY);
                });
            }
        }
    }
@@ -475,7 +475,7 @@ var _Draggable = class _Draggable {
            y: this._dragY,
            dragActor: this._dragActor,
            source: this.actor._delegate,
-            targetActor: target,
+            targetActor: target
        };
        let targetActorDestroyHandlerId;
@@ -503,7 +503,7 @@ var _Draggable = class _Draggable {
        while (target) {
            if (target._delegate && target._delegate.handleDragOver) {
-                let [r_, targX, targY] = target.transform_stage_point(this._dragX, this._dragY);
+                let [r, targX, targY] = target.transform_stage_point(this._dragX, this._dragY);
                // We currently loop through all parents on drag-over even if one of the children has handled it.
                // We can check the return value of the function and break the loop if it's true if we don't want
                // to continue checking the parents.
@@ -554,11 +554,11 @@ var _Draggable = class _Draggable {
        let dropEvent = {
            dropActor: this._dragActor,
            targetActor: target,
-            clutterEvent: event,
+            clutterEvent: event
        };
        for (let i = 0; i < dragMonitors.length; i++) {
            let dropFunc = dragMonitors[i].dragDrop;
-            if (dropFunc) {
+            if (dropFunc)
                switch (dropFunc(dropEvent)) {
                case DragDropResult.FAILURE:
                case DragDropResult.SUCCESS:
@@ -566,7 +566,6 @@ var _Draggable = class _Draggable {
                case DragDropResult.CONTINUE:
                    continue;
                }
            }
        }
        // At this point it is too late to cancel a drag by destroying
@@ -576,16 +575,12 @@ var _Draggable = class _Draggable {
        while (target) {
            if (target._delegate && target._delegate.acceptDrop) {
-                let [r_, targX, targY] = target.transform_stage_point(dropX, dropY);
+                let [r, targX, targY] = target.transform_stage_point(dropX, dropY);
-                let accepted = false;
+                if (target._delegate.acceptDrop(this.actor._delegate,
-                try {
+                                                this._dragActor,
-                    accepted = target._delegate.acceptDrop(this.actor._delegate,
+                                                targX,
-                        this._dragActor, targX, targY, event.get_time());
+                                                targY,
-                } catch (e) {
+                                                event.get_time())) {
                    // On error, skip this target
                    logError(e, "Skipping drag target");
                }
                if (accepted) {
                    // If it accepted the drop without taking the actor,
                    // handle it ourselves.
                    if (this._dragActor && this._dragActor.get_parent() == Main.uiGroup) {
@@ -618,15 +613,15 @@ var _Draggable = class _Draggable {
        if (this._dragActorSource && this._dragActorSource.visible) {
            // Snap the clone back to its source
            [x, y] = this._dragActorSource.get_transformed_position();
-            let [sourceScaledWidth] = this._dragActorSource.get_transformed_size();
+            let [sourceScaledWidth, sourceScaledHeight] = this._dragActorSource.get_transformed_size();
-            scale = sourceScaledWidth ? sourceScaledWidth / this._dragActor.width : 0;
+            scale = sourceScaledWidth ? this._dragActor.width / sourceScaledWidth : 0;
        } else if (this._dragOrigParent) {
            // Snap the actor back to its original position within
            // its parent, adjusting for the fact that the parent
            // may have been moved or scaled
            let [parentX, parentY] = this._dragOrigParent.get_transformed_position();
-            let [parentWidth] = this._dragOrigParent.get_size();
+            let [parentWidth, parentHeight] = this._dragOrigParent.get_size();
-            let [parentScaledWidth] = this._dragOrigParent.get_transformed_size();
+            let [parentScaledWidth, parentScaledHeight] = this._dragOrigParent.get_transformed_size();
            let parentScale = 1.0;
            if (parentWidth != 0)
                parentScale = parentScaledWidth / parentWidth;
@@ -646,7 +641,7 @@ var _Draggable = class _Draggable {
    _cancelDrag(eventTime) {
        this.emit('drag-cancelled', eventTime);
-        let wasCancelled = this._dragState == DragState.CANCELLED;
+        let wasCancelled = (this._dragState == DragState.CANCELLED);
        this._dragState = DragState.CANCELLED;
        if (this._actorDestroyed || wasCancelled) {
@@ -662,13 +657,13 @@ var _Draggable = class _Draggable {
        let [snapBackX, snapBackY, snapBackScale] = this._getRestoreLocation();
-        this._animateDragEnd(eventTime, {
+        this._animateDragEnd(eventTime,
-            x: snapBackX,
+                             { x: snapBackX,
-            y: snapBackY,
+                               y: snapBackY,
-            scale_x: snapBackScale,
+                               scale_x: snapBackScale,
-            scale_y: snapBackScale,
+                               scale_y: snapBackScale,
-            duration: SNAP_BACK_ANIMATION_TIME,
+                               time: SNAP_BACK_ANIMATION_TIME,
-        });
+                             });
    }
    _restoreDragActor(eventTime) {
@@ -680,22 +675,21 @@ var _Draggable = class _Draggable {
        this._dragActor.set_scale(restoreScale, restoreScale);
        this._dragActor.opacity = 0;
-        this._animateDragEnd(eventTime, {
+        this._animateDragEnd(eventTime,
-            duration: REVERT_ANIMATION_TIME,
+                             { time: REVERT_ANIMATION_TIME });
        });
    }
    _animateDragEnd(eventTime, params) {
        this._animationInProgress = true;
        params['opacity']          = this._dragOrigOpacity;
        params['transition']       = 'easeOutQuad';
        params['onComplete']       = this._onAnimationComplete;
        params['onCompleteScope']  = this;
        params['onCompleteParams'] = [this._dragActor, eventTime];
        // start the animation
-        this._dragActor.ease(Object.assign(params, {
+        Tweener.addTween(this._dragActor, params);
            opacity: this._dragOrigOpacity,
            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
            onComplete: () => {
                this._onAnimationComplete(this._dragActor, eventTime);
            },
        }));
    }
    _finishAnimation() {
@@ -748,9 +742,8 @@ Signals.addSignalMethods(_Draggable.prototype);
 /**
 * makeDraggable:
- * @param {Clutter.Actor} actor: Source actor
+ * @actor: Source actor
- * @param {Object=} params: Additional parameters
+ * @params: (optional) Additional parameters
 * @returns {Object} a new Draggable
 *
 * Create an object which controls drag and drop for the given actor.
 *
--- a/js/ui/edgeDragAction.js
+++ b/js/ui/edgeDragAction.js
@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported EdgeDragAction */
 const { Clutter, GObject, Meta, St } = imports.gi;
@@ -27,7 +26,7 @@ var EdgeDragAction = GObject.registerClass({
        return global.display.get_monitor_geometry(monitorIndex);
    }
-    vfunc_gesture_prepare(_actor) {
+    vfunc_gesture_prepare(actor) {
        if (this.get_n_current_points() == 0)
            return false;
@@ -37,17 +36,17 @@ var EdgeDragAction = GObject.registerClass({
        let [x, y] = this.get_press_coords(0);
        let monitorRect = this._getMonitorRect(x, y);
-        return (this._side == St.Side.LEFT && x < monitorRect.x + EDGE_THRESHOLD) ||
+        return ((this._side == St.Side.LEFT && x < monitorRect.x + EDGE_THRESHOLD) ||
                (this._side == St.Side.RIGHT && x > monitorRect.x + monitorRect.width - EDGE_THRESHOLD) ||
                (this._side == St.Side.TOP && y < monitorRect.y + EDGE_THRESHOLD) ||
-                (this._side == St.Side.BOTTOM && y > monitorRect.y + monitorRect.height - EDGE_THRESHOLD);
+                (this._side == St.Side.BOTTOM && y > monitorRect.y + monitorRect.height - EDGE_THRESHOLD));
    }
-    vfunc_gesture_progress(_actor) {
+    vfunc_gesture_progress(actor) {
        let [startX, startY] = this.get_press_coords(0);
        let [x, y] = this.get_motion_coords(0);
-        let offsetX = Math.abs(x - startX);
+        let offsetX = Math.abs (x - startX);
-        let offsetY = Math.abs(y - startY);
+        let offsetY = Math.abs (y - startY);
        if (offsetX < EDGE_THRESHOLD && offsetY < EDGE_THRESHOLD)
            return true;
@@ -63,7 +62,7 @@ var EdgeDragAction = GObject.registerClass({
        return true;
    }
-    vfunc_gesture_end(_actor) {
+    vfunc_gesture_end(actor) {
        let [startX, startY] = this.get_press_coords(0);
        let [x, y] = this.get_motion_coords(0);
        let monitorRect = this._getMonitorRect(startX, startY);
--- a/js/ui/endSessionDialog.js
+++ b/js/ui/endSessionDialog.js
@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported init, EndSessionDialog */
 /*
 * Copyright 2010-2016 Red Hat, Inc
 *
@@ -17,6 +16,8 @@
 * along with this program; if not, see <http://www.gnu.org/licenses/>.
 */
 const Mainloop = imports.mainloop;
 const { AccountsService, Clutter, Gio,
        GLib, GObject, Pango, Polkit, Shell, St }  = imports.gi;
@@ -128,7 +129,7 @@ const DialogType = {
    SHUTDOWN: 1 /* GSM_SHELL_END_SESSION_DIALOG_TYPE_SHUTDOWN */,
    RESTART: 2 /* GSM_SHELL_END_SESSION_DIALOG_TYPE_RESTART */,
    UPDATE_RESTART: 3,
-    UPGRADE_RESTART: 4,
+    UPGRADE_RESTART: 4
 };
 const DialogContent = {
@@ -136,7 +137,7 @@ const DialogContent = {
    1 /* DialogType.SHUTDOWN */: shutdownDialogContent,
    2 /* DialogType.RESTART */: restartDialogContent,
    3 /* DialogType.UPDATE_RESTART */: restartUpdateDialogContent,
-    4 /* DialogType.UPGRADE_RESTART */: restartUpgradeDialogContent,
+    4 /* DialogType.UPGRADE_RESTART */: restartUpgradeDialogContent
 };
 var MAX_USERS_IN_SESSION_DIALOG = 5;
@@ -207,10 +208,10 @@ function _setCheckBoxLabel(checkBox, text) {
    if (text) {
        label.set_text(text);
-        checkBox.show();
+        checkBox.actor.show();
    } else {
        label.set_text('');
-        checkBox.hide();
+        checkBox.actor.hide();
    }
 }
@@ -218,7 +219,7 @@ function init() {
    // This always returns the same singleton object
    // By instantiating it initially, we register the
    // bus object, etc.
-    new EndSessionDialog();
+    (new EndSessionDialog());
 }
 var EndSessionDialog = GObject.registerClass(
@@ -263,39 +264,42 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
        this._userLoadedId = this._user.connect('notify::is_loaded', this._sync.bind(this));
        this._userChangedId = this._user.connect('changed', this._sync.bind(this));
-        let mainContentLayout = new St.BoxLayout({
+        let mainContentLayout = new St.BoxLayout({ vertical: false });
-            vertical: false,
+        this.contentLayout.add(mainContentLayout,
-            x_expand: true,
+                               { x_fill: true,
-            y_expand: false,
+                                 y_fill: false });
        });
        this.contentLayout.add_child(mainContentLayout);
-        this._iconBin = new St.Bin({
+        this._iconBin = new St.Bin();
-            x_expand: true,
+        mainContentLayout.add(this._iconBin,
-            x_align: Clutter.ActorAlign.END,
+                              { x_fill: true,
-        });
+                                y_fill: false,
-        mainContentLayout.add_child(this._iconBin);
+                                x_align: St.Align.END,
                                y_align: St.Align.START });
        let messageLayout = new St.BoxLayout({ vertical: true,
                                               style_class: 'end-session-dialog-layout' });
-        mainContentLayout.add_child(messageLayout);
+        mainContentLayout.add(messageLayout,
                              { y_align: St.Align.START });
        this._subjectLabel = new St.Label({ style_class: 'end-session-dialog-subject' });
-        messageLayout.add_child(this._subjectLabel);
+        messageLayout.add(this._subjectLabel,
                          { x_fill: false,
                            y_fill: false,
                            x_align: St.Align.START,
                            y_align: St.Align.START });
-        this._descriptionLabel = new St.Label({
+        this._descriptionLabel = new St.Label({ style_class: 'end-session-dialog-description' });
            style_class: 'end-session-dialog-description',
            y_expand: true,
        });
        this._descriptionLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
        this._descriptionLabel.clutter_text.line_wrap = true;
-        messageLayout.add_child(this._descriptionLabel);
+        messageLayout.add(this._descriptionLabel,
                          { y_fill: true,
                            y_align: St.Align.START });
        this._checkBox = new CheckBox.CheckBox();
-        this._checkBox.connect('clicked', this._sync.bind(this));
+        this._checkBox.actor.connect('clicked', this._sync.bind(this));
-        messageLayout.add(this._checkBox);
+        messageLayout.add(this._checkBox.actor);
        this._batteryWarning = new St.Label({ style_class: 'end-session-dialog-warning',
                                              text: _("Running on battery power: please plug in before installing updates.") });
@@ -303,13 +307,11 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
        this._batteryWarning.clutter_text.line_wrap = true;
        messageLayout.add(this._batteryWarning);
-        this._scrollView = new St.ScrollView({
+        this._scrollView = new St.ScrollView({ style_class: 'end-session-dialog-list' });
            style_class: 'end-session-dialog-list',
            x_expand: true,
            y_expand: true,
        });
        this._scrollView.set_policy(St.PolicyType.NEVER, St.PolicyType.AUTOMATIC);
-        this.contentLayout.add_child(this._scrollView);
+        this.contentLayout.add(this._scrollView,
                               { x_fill: true,
                                 y_fill: true });
        this._scrollView.hide();
        this._inhibitorSection = new St.BoxLayout({ vertical: true,
@@ -349,15 +351,12 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
        }
        // It only makes sense to check for this permission if PackageKit is available.
-        Polkit.Permission.new(
+        try {
-            'org.freedesktop.packagekit.trigger-offline-update', null, null,
+            this._updatesPermission = Polkit.Permission.new_sync(
-            (source, res) => {
+                'org.freedesktop.packagekit.trigger-offline-update', null, null);
-                try {
+        } catch (e) {
-                    this._updatesPermission = Polkit.Permission.new_finish(res);
+            log('No permission to trigger offline updates: %s'.format(e.toString()));
-                } catch (e) {
+        }
                    log(`No permission to trigger offline updates: ${e}`);
                }
            });
    }
    _onDestroy() {
@@ -366,7 +365,7 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
    }
    _sync() {
-        let open = this.state == ModalDialog.State.OPENING || this.state == ModalDialog.State.OPENED;
+        let open = (this.state == ModalDialog.State.OPENING || this.state == ModalDialog.State.OPENED);
        if (!open)
            return;
@@ -375,12 +374,12 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
        let subject = dialogContent.subject;
        // Use different title when we are installing updates
-        if (dialogContent.subjectWithUpdates && this._checkBox.checked)
+        if (dialogContent.subjectWithUpdates && this._checkBox.actor.checked)
            subject = dialogContent.subjectWithUpdates;
        if (dialogContent.showBatteryWarning) {
            // Warn when running on battery power
-            if (this._powerProxy.OnBattery && this._checkBox.checked)
+            if (this._powerProxy.OnBattery && this._checkBox.actor.checked)
                this._batteryWarning.opacity = 255;
            else
                this._batteryWarning.opacity = 0;
@@ -428,7 +427,7 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
            let avatarWidget = new UserWidget.Avatar(this._user,
                                                     { iconSize: _DIALOG_ICON_SIZE,
                                                       styleClass: dialogContent.iconStyleClass });
-            this._iconBin.child = avatarWidget;
+            this._iconBin.child = avatarWidget.actor;
            avatarWidget.update();
        }
@@ -443,21 +442,19 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
        let dialogContent = DialogContent[this._type];
        let buttons = [{ action: this.cancel.bind(this),
                         label: _("Cancel"),
-                         key: Clutter.KEY_Escape }];
+                         key: Clutter.Escape }];
        for (let i = 0; i < dialogContent.confirmButtons.length; i++) {
            let signal = dialogContent.confirmButtons[i].signal;
            let label = dialogContent.confirmButtons[i].label;
-            buttons.push({
+            buttons.push({ action: () => {
-                action: () => {
+                               this.close(true);
-                    this.close(true);
+                               let signalId = this.connect('closed', () => {
-                    let signalId = this.connect('closed', () => {
+                                   this.disconnect(signalId);
-                        this.disconnect(signalId);
+                                   this._confirm(signal);
-                        this._confirm(signal);
+                               });
-                    });
+                           },
-                },
+                           label: label });
                label,
            });
        }
        this.setButtons(buttons);
@@ -484,13 +481,13 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
        };
        // Offline update not available; just emit the signal
-        if (!this._checkBox.visible) {
+        if (!this._checkBox.actor.visible) {
            callback();
            return;
        }
        // Trigger the offline update as requested
-        if (this._checkBox.checked) {
+        if (this._checkBox.actor.checked) {
            switch (signal) {
            case "ConfirmedReboot":
                this._triggerOfflineUpdateReboot(callback);
@@ -564,9 +561,9 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
        let startTime = GLib.get_monotonic_time();
        this._secondsLeft = this._totalSecondsToStayOpen;
-        this._timerId = GLib.timeout_add_seconds(GLib.PRIORITY_DEFAULT, 1, () => {
+        this._timerId = Mainloop.timeout_add_seconds(1, () => {
            let currentTime = GLib.get_monotonic_time();
-            let secondsElapsed = (currentTime - startTime) / 1000000;
+            let secondsElapsed = ((currentTime - startTime) / 1000000);
            this._secondsLeft = this._totalSecondsToStayOpen - secondsElapsed;
            if (this._secondsLeft > 0) {
@@ -586,7 +583,7 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
    _stopTimer() {
        if (this._timerId > 0) {
-            GLib.source_remove(this._timerId);
+            Mainloop.source_remove(this._timerId);
            this._timerId = 0;
        }
@@ -655,7 +652,7 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
        let actor = new St.BoxLayout({ style_class: 'end-session-dialog-session-list-item',
                                       can_focus: true });
-        actor.add(avatar);
+        actor.add(avatar.actor);
        let nameLabel = new St.Label({ text: userLabelText,
                                       style_class: 'end-session-dialog-session-list-item-name',
@@ -671,7 +668,7 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
        this._loginManager.listSessions(result => {
            let n = 0;
            for (let i = 0; i < result.length; i++) {
-                let [id_, uid_, userName, seat_, sessionPath] = result[i];
+                let [id, uid, userName, seat, sessionPath] = result[i];
                let proxy = new LogindSession(Gio.DBus.system, 'org.freedesktop.login1', sessionPath);
                if (proxy.Class != 'user')
@@ -681,12 +678,11 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
                    continue;
                let sessionId = GLib.getenv('XDG_SESSION_ID');
-                if (!sessionId) {
+                if (!sessionId)
                    this._loginManager.getCurrentSessionProxy(currentSessionProxy => {
                        sessionId = currentSessionProxy.Id;
                        log(`endSessionDialog: No XDG_SESSION_ID, fetched from logind: ${sessionId}`);
                    });
                }
                if (proxy.Id == sessionId)
                    continue;
@@ -738,7 +734,7 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
        let dialogContent = DialogContent[this._type];
        for (let i = 0; i < inhibitorObjectPaths.length; i++) {
-            let inhibitor = new GnomeSession.Inhibitor(inhibitorObjectPaths[i], proxy => {
+            let inhibitor = new GnomeSession.Inhibitor(inhibitorObjectPaths[i], (proxy, error) => {
                this._onInhibitorLoaded(proxy);
            });
@@ -754,14 +750,14 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
        let updatesAllowed = this._updatesPermission && this._updatesPermission.allowed;
        _setCheckBoxLabel(this._checkBox, dialogContent.checkBoxText || '');
-        this._checkBox.visible = dialogContent.checkBoxText && updatePrepared && updatesAllowed;
+        this._checkBox.actor.visible = (dialogContent.checkBoxText && updatePrepared && updatesAllowed);
-        this._checkBox.checked = updatePrepared && updateTriggered;
+        this._checkBox.actor.checked = (updatePrepared && updateTriggered);
        // We show the warning either together with the checkbox, or when
        // updates have already been triggered, but the user doesn't have
        // enough permissions to cancel them.
-        this._batteryWarning.visible = dialogContent.showBatteryWarning &&
+        this._batteryWarning.visible = (dialogContent.showBatteryWarning &&
-                                        (this._checkBox.visible || updatePrepared && updateTriggered && !updatesAllowed);
+                                        (this._checkBox.actor.visible || updatePrepared && updateTriggered && !updatesAllowed));
        this._updateButtons();
@@ -782,7 +778,7 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
        });
    }
-    Close(_parameters, _invocation) {
+    Close(parameters, invocation) {
        this.close();
    }
 });
--- a/js/ui/environment.js
+++ b/js/ui/environment.js
@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported init */
 const Config = imports.misc.config;
@@ -10,7 +9,7 @@ imports.gi.versions.Gtk = '3.0';
 imports.gi.versions.TelepathyGLib = '0.12';
 imports.gi.versions.TelepathyLogger = '0.2';
-const { Clutter, GLib, GObject, Meta, Shell, St } = imports.gi;
+const { Clutter, GLib, Shell, St } = imports.gi;
 const Gettext = imports.gettext;
 // We can't import shell JS modules yet, because they may have
@@ -23,7 +22,7 @@ const Gettext = imports.gettext;
 // of interfaces in Javascript
 function _patchContainerClass(containerClass) {
    // This one is a straightforward mapping of the C method
-    containerClass.prototype.child_set = function (actor, props) {
+    containerClass.prototype.child_set = function(actor, props) {
        let meta = this.get_child_meta(actor);
        for (let prop in props)
            meta[prop] = props[prop];
@@ -32,7 +31,7 @@ function _patchContainerClass(containerClass) {
    // clutter_container_add() actually is a an add-many-actors
    // method. We conveniently, but somewhat dubiously, take the
    // this opportunity to make it do something more useful.
-    containerClass.prototype.add = function (actor, props) {
+    containerClass.prototype.add = function(actor, props) {
        this.add_actor(actor);
        if (props)
            this.child_set(actor, props);
@@ -40,8 +39,8 @@ function _patchContainerClass(containerClass) {
 }
 function _patchLayoutClass(layoutClass, styleProps) {
-    if (styleProps) {
+    if (styleProps)
-        layoutClass.prototype.hookup_style = function (container) {
+        layoutClass.prototype.hookup_style = function(container) {
            container.connect('style-changed', () => {
                let node = container.get_theme_node();
                for (let prop in styleProps) {
@@ -51,157 +50,13 @@ function _patchLayoutClass(layoutClass, styleProps) {
                }
            });
        };
-    }
+    layoutClass.prototype.child_set = function(actor, props) {
-}
+        let meta = this.get_child_meta(actor.get_parent(), actor);
-
+        for (let prop in props)
-function _makeEaseCallback(params, cleanup) {
+            meta[prop] = props[prop];
    let onComplete = params.onComplete;
    delete params.onComplete;
    let onStopped = params.onStopped;
    delete params.onStopped;
    return isFinished => {
        cleanup();
        if (onStopped)
            onStopped(isFinished);
        if (onComplete && isFinished)
            onComplete();
    };
 }
 function _getPropertyTarget(actor, propName) {
    if (!propName.startsWith('@'))
        return [actor, propName];
    let [type, name, prop] = propName.split('.');
    switch (type) {
    case '@layout':
        return [actor.layout_manager, name];
    case '@actions':
        return [actor.get_action(name), prop];
    case '@constraints':
        return [actor.get_constraint(name), prop];
    case '@effects':
        return [actor.get_effect(name), prop];
    }
    throw new Error(`Invalid property name ${propName}`);
 }
 function _easeActor(actor, params) {
    actor.save_easing_state();
    if (params.duration != undefined)
        actor.set_easing_duration(params.duration);
    delete params.duration;
    if (params.delay != undefined)
        actor.set_easing_delay(params.delay);
    delete params.delay;
    let repeatCount = 0;
    if (params.repeatCount != undefined)
        repeatCount = params.repeatCount;
    delete params.repeatCount;
    let autoReverse = false;
    if (params.autoReverse != undefined)
        autoReverse = params.autoReverse;
    delete params.autoReverse;
    if (params.mode != undefined)
        actor.set_easing_mode(params.mode);
    delete params.mode;
    let cleanup = () => Meta.enable_unredirect_for_display(global.display);
    let callback = _makeEaseCallback(params, cleanup);
    // cancel overwritten transitions
    let animatedProps = Object.keys(params).map(p => p.replace('_', '-', 'g'));
    animatedProps.forEach(p => actor.remove_transition(p));
    actor.set(params);
    actor.restore_easing_state();
    let transition = animatedProps.map(p => actor.get_transition(p))
        .find(t => t !== null);
    if (transition && transition.delay)
        transition.connect('started', () => Meta.disable_unredirect_for_display(global.display));
    else
        Meta.disable_unredirect_for_display(global.display);
    if (transition) {
        transition.set({ repeatCount, autoReverse });
        transition.connect('stopped', (t, finished) => callback(finished));
    } else {
        callback(true);
    }
 }
 function _easeActorProperty(actor, propName, target, params) {
    // Avoid pointless difference with ease()
    if (params.mode)
        params.progress_mode = params.mode;
    delete params.mode;
    if (params.duration)
        params.duration = adjustAnimationTime(params.duration);
    let duration = Math.floor(params.duration || 0);
    let repeatCount = 0;
    if (params.repeatCount != undefined)
        repeatCount = params.repeatCount;
    delete params.repeatCount;
    let autoReverse = false;
    if (params.autoReverse != undefined)
        autoReverse = params.autoReverse;
    delete params.autoReverse;
    // Copy Clutter's behavior for implicit animations, see
    // should_skip_implicit_transition()
    if (actor instanceof Clutter.Actor && !actor.mapped)
        duration = 0;
    let cleanup = () => Meta.enable_unredirect_for_display(global.display);
    let callback = _makeEaseCallback(params, cleanup);
    // cancel overwritten transition
    actor.remove_transition(propName);
    if (duration == 0) {
        let [obj, prop] = _getPropertyTarget(actor, propName);
        obj[prop] = target;
        Meta.disable_unredirect_for_display(global.display);
        callback(true);
        return;
    }
    let pspec = actor.find_property(propName);
    let transition = new Clutter.PropertyTransition(Object.assign({
        property_name: propName,
        interval: new Clutter.Interval({ value_type: pspec.value_type }),
        remove_on_complete: true,
        repeat_count: repeatCount,
        auto_reverse: autoReverse,
    }, params));
    actor.add_transition(propName, transition);
    transition.set_to(target);
    if (transition.delay)
        transition.connect('started', () => Meta.disable_unredirect_for_display(global.display));
    else
        Meta.disable_unredirect_for_display(global.display);
    transition.connect('stopped', (t, finished) => callback(finished));
 }
 function _loggingFunc(...args) {
    let fields = { 'MESSAGE': args.join(', ') };
    let domain = "GNOME Shell";
@@ -229,37 +84,16 @@ function init() {
    window.ngettext = Gettext.ngettext;
    window.N_ = s => s;
    GObject.gtypeNameBasedOnJSPath = true;
    // Miscellaneous monkeypatching
    _patchContainerClass(St.BoxLayout);
    _patchLayoutClass(Clutter.TableLayout, { row_spacing: 'spacing-rows',
                                             column_spacing: 'spacing-columns' });
    _patchLayoutClass(Clutter.GridLayout, { row_spacing: 'spacing-rows',
                                            column_spacing: 'spacing-columns' });
    _patchLayoutClass(Clutter.BoxLayout, { spacing: 'spacing' });
-    let origSetEasingDuration = Clutter.Actor.prototype.set_easing_duration;
+    Clutter.Actor.prototype.toString = function() {
    Clutter.Actor.prototype.set_easing_duration = function (msecs) {
        origSetEasingDuration.call(this, adjustAnimationTime(msecs));
    };
    let origSetEasingDelay = Clutter.Actor.prototype.set_easing_delay;
    Clutter.Actor.prototype.set_easing_delay = function (msecs) {
        origSetEasingDelay.call(this, adjustAnimationTime(msecs));
    };
    Clutter.Actor.prototype.ease = function (props, easingParams) {
        _easeActor(this, props, easingParams);
    };
    Clutter.Actor.prototype.ease_property = function (propName, target, params) {
        _easeActorProperty(this, propName, target, params);
    };
    St.Adjustment.prototype.ease = function (target, params) {
        // we're not an actor of course, but we implement the same
        // transition API as Clutter.Actor, so this works anyway
        _easeActorProperty(this, 'value', target, params);
    };
    Clutter.Actor.prototype.toString = function () {
        return St.describe_actor(this);
    };
    // Deprecation warning for former JS classes turned into an actor subclass
@@ -269,17 +103,11 @@ function init() {
            let { stack } = new Error();
            log(`Usage of object.actor is deprecated for ${klass}\n${stack}`);
            return this;
-        },
+        }
    });
    St.set_slow_down_factor = function (factor) {
        let { stack } = new Error();
        log(`St.set_slow_down_factor() is deprecated, use St.Settings.slow_down_factor\n${stack}`);
        St.Settings.get().slow_down_factor = factor;
    };
    let origToString = Object.prototype.toString;
-    Object.prototype.toString = function () {
+    Object.prototype.toString = function() {
        let base = origToString.call(this);
        try {
            if ('actor' in this && this.actor instanceof Clutter.Actor)
@@ -292,16 +120,15 @@ function init() {
    };
    // Work around https://bugzilla.mozilla.org/show_bug.cgi?id=508783
-    Date.prototype.toLocaleFormat = function (format) {
+    Date.prototype.toLocaleFormat = function(format) {
-        let dt = GLib.DateTime.new_from_unix_local(this.getTime() / 1000);
+        return Shell.util_format_date(format, this.getTime());
        return dt ? dt.format(format) : '';
    };
    let slowdownEnv = GLib.getenv('GNOME_SHELL_SLOWDOWN_FACTOR');
    if (slowdownEnv) {
        let factor = parseFloat(slowdownEnv);
        if (!isNaN(factor) && factor > 0.0)
-            St.Settings.get().slow_down_factor = factor;
+            St.set_slow_down_factor(factor);
    }
    // OK, now things are initialized enough that we can import shell JS
@@ -311,17 +138,3 @@ function init() {
    Tweener.init();
    String.prototype.format = Format.format;
 }
 // adjustAnimationTime:
 // @msecs: time in milliseconds
 //
 // Adjust @msecs to account for St's enable-animations
 // and slow-down-factor settings
 function adjustAnimationTime(msecs) {
    let settings = St.Settings.get();
    if (!settings.enable_animations)
        return 1;
    return settings.slow_down_factor * msecs;
 }
--- a/js/ui/extensionDownloader.js
+++ b/js/ui/extensionDownloader.js
@@ -1,14 +1,12 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported init, installExtension, uninstallExtension,
            checkForUpdates, updateExtension */
 const { Clutter, Gio, GLib, GObject, Soup } = imports.gi;
 const Config = imports.misc.config;
 const Dialog = imports.ui.dialog;
 const ExtensionUtils = imports.misc.extensionUtils;
 const ExtensionSystem = imports.ui.extensionSystem;
 const FileUtils = imports.misc.fileUtils;
 const Main = imports.ui.main;
 const ModalDialog = imports.ui.modalDialog;
 var REPOSITORY_URL_BASE = 'https://extensions.gnome.org';
@@ -19,14 +17,14 @@ var REPOSITORY_URL_UPDATE   = `${REPOSITORY_URL_BASE}/update-info/`;
 let _httpSession;
 function installExtension(uuid, invocation) {
-    let params = { uuid,
+    let params = { uuid: uuid,
                   shell_version: Config.PACKAGE_VERSION };
    let message = Soup.form_request_new_from_hash('GET', REPOSITORY_URL_INFO, params);
-    _httpSession.queue_message(message, () => {
+    _httpSession.queue_message(message, (session, message) => {
        if (message.status_code != Soup.KnownStatusCode.OK) {
-            Main.extensionManager.logExtensionError(uuid, `downloading info: ${message.status_code}`);
+            ExtensionSystem.logExtensionError(uuid, `downloading info: ${message.status_code}`);
            invocation.return_dbus_error('org.gnome.Shell.DownloadInfoError', message.status_code.toString());
            return;
        }
@@ -35,7 +33,7 @@ function installExtension(uuid, invocation) {
        try {
            info = JSON.parse(message.response_body.data);
        } catch (e) {
-            Main.extensionManager.logExtensionError(uuid, `parsing info: ${e}`);
+            ExtensionSystem.logExtensionError(uuid, `parsing info: ${e}`);
            invocation.return_dbus_error('org.gnome.Shell.ParseInfoError', e.toString());
            return;
        }
@@ -46,7 +44,7 @@ function installExtension(uuid, invocation) {
 }
 function uninstallExtension(uuid) {
-    let extension = Main.extensionManager.lookup(uuid);
+    let extension = ExtensionUtils.extensions[uuid];
    if (!extension)
        return false;
@@ -54,7 +52,7 @@ function uninstallExtension(uuid) {
    if (extension.type != ExtensionUtils.ExtensionType.PER_USER)
        return false;
-    if (!Main.extensionManager.unloadExtension(extension))
+    if (!ExtensionSystem.unloadExtension(extension))
        return false;
    FileUtils.recursivelyDeleteDir(extension.dir, true);
@@ -90,7 +88,7 @@ function gotExtensionZipFile(session, message, uuid, dir, callback, errback) {
        return;
    }
-    GLib.child_watch_add(GLib.PRIORITY_DEFAULT, pid, (o, status) => {
+    GLib.child_watch_add(GLib.PRIORITY_DEFAULT, pid, (pid, status) => {
        GLib.spawn_close_pid(pid);
        if (status != 0)
@@ -113,12 +111,12 @@ function updateExtension(uuid) {
    let url = REPOSITORY_URL_DOWNLOAD.format(uuid);
    let message = Soup.form_request_new_from_hash('GET', url, params);
-    _httpSession.queue_message(message, session => {
+    _httpSession.queue_message(message, (session, message) => {
        gotExtensionZipFile(session, message, uuid, newExtensionTmpDir, () => {
-            let oldExtension = Main.extensionManager.lookup(uuid);
+            let oldExtension = ExtensionUtils.extensions[uuid];
            let extensionDir = oldExtension.dir;
-            if (!Main.extensionManager.unloadExtension(oldExtension))
+            if (!ExtensionSystem.unloadExtension(oldExtension))
                return;
            FileUtils.recursivelyMoveDir(extensionDir, oldExtensionTmpDir);
@@ -127,11 +125,11 @@ function updateExtension(uuid) {
            let extension = null;
            try {
-                extension = Main.extensionManager.createExtensionObject(uuid, extensionDir, ExtensionUtils.ExtensionType.PER_USER);
+                extension = ExtensionUtils.createExtensionObject(uuid, extensionDir, ExtensionUtils.ExtensionType.PER_USER);
-                Main.extensionManager.loadExtension(extension);
+                ExtensionSystem.loadExtension(extension);
            } catch (e) {
                if (extension)
-                    Main.extensionManager.unloadExtension(extension);
+                    ExtensionSystem.unloadExtension(extension);
                logError(e, 'Error loading extension %s'.format(uuid));
@@ -140,29 +138,29 @@ function updateExtension(uuid) {
                // Restore what was there before. We can't do much if we
                // fail here.
-                Main.extensionManager.loadExtension(oldExtension);
+                ExtensionSystem.loadExtension(oldExtension);
                return;
            }
            FileUtils.recursivelyDeleteDir(oldExtensionTmpDir, true);
-        }, (code, msg) => {
+        }, (code, message) => {
-            log(`Error while updating extension ${uuid}: ${code} (${msg})`);
+            log('Error while updating extension %s: %s (%s)'.format(uuid, code, message ? message : ''));
        });
    });
 }
 function checkForUpdates() {
    let metadatas = {};
-    Main.extensionManager.getUuids().forEach(uuid => {
+    for (let uuid in ExtensionUtils.extensions) {
-        metadatas[uuid] = Main.extensionManager.extensions[uuid].metadata;
+        metadatas[uuid] = ExtensionUtils.extensions[uuid].metadata;
-    });
+    }
    let params = { shell_version: Config.PACKAGE_VERSION,
                   installed: JSON.stringify(metadatas) };
    let url = REPOSITORY_URL_UPDATE;
    let message = Soup.form_request_new_from_hash('GET', url, params);
-    _httpSession.queue_message(message, () => {
+    _httpSession.queue_message(message, (session, message) => {
        if (message.status_code != Soup.KnownStatusCode.OK)
            return;
@@ -186,32 +184,31 @@ class InstallExtensionDialog extends ModalDialog.ModalDialog {
        this._info = info;
        this._invocation = invocation;
-        this.setButtons([{
+        this.setButtons([{ label: _("Cancel"),
-            label: _("Cancel"),
+                           action: this._onCancelButtonPressed.bind(this),
-            action: this._onCancelButtonPressed.bind(this),
+                           key: Clutter.Escape
-            key: Clutter.KEY_Escape,
+                         },
-        }, {
+                         { label: _("Install"),
-            label: _("Install"),
+                           action: this._onInstallButtonPressed.bind(this),
-            action: this._onInstallButtonPressed.bind(this),
+                           default: true
-            default: true,
+                         }]);
        }]);
        let content = new Dialog.MessageDialogContent({
            title: _("Download and install “%s” from extensions.gnome.org?").format(info.name),
            icon: new Gio.FileIcon({
-                file: Gio.File.new_for_uri(`${REPOSITORY_URL_BASE}${info.icon}`),
+                file: Gio.File.new_for_uri(`${REPOSITORY_URL_BASE}${info.icon}`)
-            }),
+            })
        });
        this.contentLayout.add(content);
    }
-    _onCancelButtonPressed() {
+    _onCancelButtonPressed(button, event) {
        this.close();
        this._invocation.return_value(GLib.Variant.new('(s)', ['cancelled']));
    }
-    _onInstallButtonPressed() {
+    _onInstallButtonPressed(button, event) {
        let params = { shell_version: Config.PACKAGE_VERSION };
        let url = REPOSITORY_URL_DOWNLOAD.format(this._uuid);
@@ -220,17 +217,23 @@ class InstallExtensionDialog extends ModalDialog.ModalDialog {
        let uuid = this._uuid;
        let dir = Gio.File.new_for_path(GLib.build_filenamev([global.userdatadir, 'extensions', uuid]));
        let invocation = this._invocation;
-        function errback(code, msg) {
+        function errback(code, message) {
-            log(`Error while installing ${uuid}: ${code} (${msg})`);
+            let msg = message ? message.toString() : '';
-            invocation.return_dbus_error(`org.gnome.Shell.${code}`, msg || '');
+            log('Error while installing %s: %s (%s)'.format(uuid, code, msg));
            invocation.return_dbus_error(`org.gnome.Shell.${code}`, msg);
        }
        function callback() {
            // Add extension to 'enabled-extensions' for the user, always...
            let enabledExtensions = global.settings.get_strv(ExtensionSystem.ENABLED_EXTENSIONS_KEY);
            if (!enabledExtensions.includes(uuid)) {
                enabledExtensions.push(uuid);
                global.settings.set_strv(ExtensionSystem.ENABLED_EXTENSIONS_KEY, enabledExtensions);
            }
            try {
-                let extension = Main.extensionManager.createExtensionObject(uuid, dir, ExtensionUtils.ExtensionType.PER_USER);
+                let extension = ExtensionUtils.createExtensionObject(uuid, dir, ExtensionUtils.ExtensionType.PER_USER);
-                Main.extensionManager.loadExtension(extension);
+                ExtensionSystem.loadExtension(extension);
                if (!Main.extensionManager.enableExtension(uuid))
                    throw new Error(`Cannot add ${uuid} to enabled extensions gsettings key`);
            } catch (e) {
                uninstallExtension(uuid);
                errback('LoadExtensionError', e);
@@ -240,7 +243,7 @@ class InstallExtensionDialog extends ModalDialog.ModalDialog {
            invocation.return_value(GLib.Variant.new('(s)', ['successful']));
        }
-        _httpSession.queue_message(message, session => {
+        _httpSession.queue_message(message, (session, message) => {
            gotExtensionZipFile(session, message, uuid, dir, callback, errback);
        });
--- a/js/ui/extensionSystem.js
+++ b/js/ui/extensionSystem.js
@@ -1,533 +1,374 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported init connect disconnect */
-const { GLib, Gio, St } = imports.gi;
+const { Gio, St } = imports.gi;
 const Signals = imports.signals;
 const ExtensionUtils = imports.misc.extensionUtils;
 const FileUtils = imports.misc.fileUtils;
 const Main = imports.ui.main;
-const { ExtensionState, ExtensionType } = ExtensionUtils;
+var ExtensionState = {
    ENABLED: 1,
    DISABLED: 2,
    ERROR: 3,
    OUT_OF_DATE: 4,
    DOWNLOADING: 5,
    INITIALIZED: 6,
    // Used as an error state for operations on unknown extensions,
    // should never be in a real extensionMeta object.
    UNINSTALLED: 99
 };
 // Arrays of uuids
 var enabledExtensions;
 // Contains the order that extensions were enabled in.
 var extensionOrder = [];
 // We don't really have a class to add signals on. So, create
 // a simple dummy object, add the signal methods, and export those
 // publically.
 var _signals = {};
 Signals.addSignalMethods(_signals);
 var connect = _signals.connect.bind(_signals);
 var disconnect = _signals.disconnect.bind(_signals);
 const ENABLED_EXTENSIONS_KEY = 'enabled-extensions';
 const DISABLED_EXTENSIONS_KEY = 'disabled-extensions';
 const DISABLE_USER_EXTENSIONS_KEY = 'disable-user-extensions';
 const EXTENSION_DISABLE_VERSION_CHECK_KEY = 'disable-extension-version-validation';
-var ExtensionManager = class {
+var initted = false;
-    constructor() {
+var enabled;
        this._initialized = false;
        this._enabled = false;
-        this._extensions = new Map();
+function disableExtension(uuid) {
-        this._enabledExtensions = [];
+    let extension = ExtensionUtils.extensions[uuid];
-        this._extensionOrder = [];
+    if (!extension)
        return;
-        Main.sessionMode.connect('updated', this._sessionUpdated.bind(this));
+    if (extension.state != ExtensionState.ENABLED)
-    }
+        return;
-    init() {
+    // "Rebase" the extension order by disabling and then enabling extensions
-        // The following file should exist for a period of time when extensions
+    // in order to help prevent conflicts.
-        // are enabled after start. If it exists, then the systemd unit will
+
-        // disable extensions should gnome-shell crash.
+    // Example:
-        // Should the file already exist from a previous login, then this is OK.
+    //   order = [A, B, C, D, E]
-        let disableFilename = GLib.build_filenamev([GLib.get_user_runtime_dir(), 'gnome-shell-disable-extensions']);
+    //   user disables C
-        let disableFile = Gio.File.new_for_path(disableFilename);
+    //   this should: disable E, disable D, disable C, enable D, enable E
    let orderIdx = extensionOrder.indexOf(uuid);
    let order = extensionOrder.slice(orderIdx + 1);
    let orderReversed = order.slice().reverse();
    for (let i = 0; i < orderReversed.length; i++) {
        let uuid = orderReversed[i];
        try {
-            disableFile.create(Gio.FileCreateFlags.REPLACE_DESTINATION, null);
+            ExtensionUtils.extensions[uuid].stateObj.disable();
        } catch (e) {
-            log(`Failed to create file ${disableFilename}: ${e.message}`);
+            logExtensionError(uuid, e);
        }
        GLib.timeout_add_seconds(GLib.PRIORITY_DEFAULT, 60, () => {
            disableFile.delete(null);
            return GLib.SOURCE_REMOVE;
        });
        this._sessionUpdated();
    }
-    lookup(uuid) {
+    if (extension.stylesheet) {
-        return this._extensions.get(uuid);
+        let theme = St.ThemeContext.get_for_stage(global.stage).get_theme();
        theme.unload_stylesheet(extension.stylesheet);
        delete extension.stylesheet;
    }
-    getUuids() {
+    try {
-        return [...this._extensions.keys()];
+        extension.stateObj.disable();
    } catch (e) {
        logExtensionError(uuid, e);
    }
-    _callExtensionDisable(uuid) {
+    for (let i = 0; i < order.length; i++) {
-        let extension = this.lookup(uuid);
+        let uuid = order[i];
-        if (!extension)
+        try {
-            return;
+            ExtensionUtils.extensions[uuid].stateObj.enable();
-
+        } catch (e) {
-        if (extension.state != ExtensionState.ENABLED)
+            logExtensionError(uuid, e);
            return;
        // "Rebase" the extension order by disabling and then enabling extensions
        // in order to help prevent conflicts.
        // Example:
        //   order = [A, B, C, D, E]
        //   user disables C
        //   this should: disable E, disable D, disable C, enable D, enable E
        let orderIdx = this._extensionOrder.indexOf(uuid);
        let order = this._extensionOrder.slice(orderIdx + 1);
        let orderReversed = order.slice().reverse();
        for (let i = 0; i < orderReversed.length; i++) {
            let otherUuid = orderReversed[i];
            try {
                this.lookup(otherUuid).stateObj.disable();
            } catch (e) {
                this.logExtensionError(otherUuid, e);
            }
        }
    }
    extensionOrder.splice(orderIdx, 1);
    if ( extension.state != ExtensionState.ERROR ) {
        extension.state = ExtensionState.DISABLED;
        _signals.emit('extension-state-changed', extension);
    }
 }
 function enableExtension(uuid) {
    let extension = ExtensionUtils.extensions[uuid];
    if (!extension)
        return;
    if (extension.state == ExtensionState.INITIALIZED)
        initExtension(uuid);
    if (extension.state != ExtensionState.DISABLED)
        return;
    extensionOrder.push(uuid);
    let stylesheetNames = [`${global.session_mode}.css`, 'stylesheet.css'];
    let theme = St.ThemeContext.get_for_stage(global.stage).get_theme();
    for (let i = 0; i < stylesheetNames.length; i++) {
        try {
            let stylesheetFile = extension.dir.get_child(stylesheetNames[i]);
            theme.load_stylesheet(stylesheetFile);
            extension.stylesheet = stylesheetFile;
            break;
        } catch (e) {
            if (e.matches(Gio.IOErrorEnum, Gio.IOErrorEnum.NOT_FOUND))
                continue; // not an error
            log(`Failed to load stylesheet for extension ${uuid}: ${e.message}`);
            return;
        }
    }
    try {
        extension.stateObj.enable();
        extension.state = ExtensionState.ENABLED;
        _signals.emit('extension-state-changed', extension);
        return;
    } catch (e) {
        if (extension.stylesheet) {
            let theme = St.ThemeContext.get_for_stage(global.stage).get_theme();
            theme.unload_stylesheet(extension.stylesheet);
            delete extension.stylesheet;
        }
-
+        logExtensionError(uuid, e);
-        try {
+        return;
            extension.stateObj.disable();
        } catch (e) {
            this.logExtensionError(uuid, e);
        }
        for (let i = 0; i < order.length; i++) {
            let otherUuid = order[i];
            try {
                this.lookup(otherUuid).stateObj.enable();
            } catch (e) {
                this.logExtensionError(otherUuid, e);
            }
        }
        this._extensionOrder.splice(orderIdx, 1);
        if (extension.state != ExtensionState.ERROR) {
            extension.state = ExtensionState.DISABLED;
            this.emit('extension-state-changed', extension);
        }
    }
 }
-    _callExtensionEnable(uuid) {
+function logExtensionError(uuid, error) {
-        if (!Main.sessionMode.allowExtensions)
+    let extension = ExtensionUtils.extensions[uuid];
-            return;
+    if (!extension)
        return;
-        let extension = this.lookup(uuid);
+    let message = `${error}`;
        if (!extension)
            return;
-        if (extension.state == ExtensionState.INITIALIZED)
+    extension.state = ExtensionState.ERROR;
-            this._callExtensionInit(uuid);
+    if (!extension.errors)
        extension.errors = [];
    extension.errors.push(message);
-        if (extension.state != ExtensionState.DISABLED)
+    log('Extension "%s" had error: %s'.format(uuid, message));
-            return;
+    _signals.emit('extension-state-changed', { uuid: uuid,
                                               error: message,
                                               state: extension.state });
 }
-        let stylesheetNames = [`${global.session_mode}.css`, 'stylesheet.css'];
+function loadExtension(extension) {
-        let theme = St.ThemeContext.get_for_stage(global.stage).get_theme();
+    // Default to error, we set success as the last step
-        for (let i = 0; i < stylesheetNames.length; i++) {
+    extension.state = ExtensionState.ERROR;
-            try {
+
-                let stylesheetFile = extension.dir.get_child(stylesheetNames[i]);
+    let checkVersion = !global.settings.get_boolean(EXTENSION_DISABLE_VERSION_CHECK_KEY);
-                theme.load_stylesheet(stylesheetFile);
+
-                extension.stylesheet = stylesheetFile;
+    if (checkVersion && ExtensionUtils.isOutOfDate(extension)) {
-                break;
+        extension.state = ExtensionState.OUT_OF_DATE;
-            } catch (e) {
+    } else {
-                if (e.matches(Gio.IOErrorEnum, Gio.IOErrorEnum.NOT_FOUND))
+        let enabled = enabledExtensions.includes(extension.uuid);
-                    continue; // not an error
+        if (enabled) {
-                this.logExtensionError(uuid, e);
+            if (!initExtension(extension.uuid))
                return;
-            }
+            if (extension.state == ExtensionState.DISABLED)
-        }
+                enableExtension(extension.uuid);
        try {
            extension.stateObj.enable();
            extension.state = ExtensionState.ENABLED;
            this._extensionOrder.push(uuid);
            this.emit('extension-state-changed', extension);
        } catch (e) {
            if (extension.stylesheet) {
                theme.unload_stylesheet(extension.stylesheet);
                delete extension.stylesheet;
            }
            this.logExtensionError(uuid, e);
        }
    }
    enableExtension(uuid) {
        if (!this._extensions.has(uuid))
            return false;
        let enabledExtensions = global.settings.get_strv(ENABLED_EXTENSIONS_KEY);
        let disabledExtensions = global.settings.get_strv(DISABLED_EXTENSIONS_KEY);
        if (disabledExtensions.includes(uuid)) {
            disabledExtensions = disabledExtensions.filter(item => item !== uuid);
            global.settings.set_strv(DISABLED_EXTENSIONS_KEY, disabledExtensions);
        }
        if (!enabledExtensions.includes(uuid)) {
            enabledExtensions.push(uuid);
            global.settings.set_strv(ENABLED_EXTENSIONS_KEY, enabledExtensions);
        }
        return true;
    }
    disableExtension(uuid) {
        if (!this._extensions.has(uuid))
            return false;
        let enabledExtensions = global.settings.get_strv(ENABLED_EXTENSIONS_KEY);
        let disabledExtensions = global.settings.get_strv(DISABLED_EXTENSIONS_KEY);
        if (enabledExtensions.includes(uuid)) {
            enabledExtensions = enabledExtensions.filter(item => item !== uuid);
            global.settings.set_strv(ENABLED_EXTENSIONS_KEY, enabledExtensions);
        }
        if (!disabledExtensions.includes(uuid)) {
            disabledExtensions.push(uuid);
            global.settings.set_strv(DISABLED_EXTENSIONS_KEY, disabledExtensions);
        }
        return true;
    }
    logExtensionError(uuid, error) {
        let extension = this.lookup(uuid);
        if (!extension)
            return;
        let message = `${error}`;
        extension.error = message;
        extension.state = ExtensionState.ERROR;
        if (!extension.errors)
            extension.errors = [];
        extension.errors.push(message);
        logError(error, `Extension ${uuid}`);
        this.emit('extension-state-changed', extension);
    }
    createExtensionObject(uuid, dir, type) {
        let metadataFile = dir.get_child('metadata.json');
        if (!metadataFile.query_exists(null))
            throw new Error('Missing metadata.json');
        let metadataContents, success_;
        try {
            [success_, metadataContents] = metadataFile.load_contents(null);
            if (metadataContents instanceof Uint8Array)
                metadataContents = imports.byteArray.toString(metadataContents);
        } catch (e) {
            throw new Error(`Failed to load metadata.json: ${e}`);
        }
        let meta;
        try {
            meta = JSON.parse(metadataContents);
        } catch (e) {
            throw new Error(`Failed to parse metadata.json: ${e}`);
        }
        let requiredProperties = ['uuid', 'name', 'description', 'shell-version'];
        for (let i = 0; i < requiredProperties.length; i++) {
            let prop = requiredProperties[i];
            if (!meta[prop])
                throw new Error(`missing "${prop}" property in metadata.json`);
        }
        if (uuid != meta.uuid)
            throw new Error(`uuid "${meta.uuid}" from metadata.json does not match directory name "${uuid}"`);
        let extension = {
            metadata: meta,
            uuid: meta.uuid,
            type,
            dir,
            path: dir.get_path(),
            error: '',
            hasPrefs: dir.get_child('prefs.js').query_exists(null),
            canChange: false,
        };
        this._extensions.set(uuid, extension);
        return extension;
    }
    loadExtension(extension) {
        // Default to error, we set success as the last step
        extension.state = ExtensionState.ERROR;
        let checkVersion = !global.settings.get_boolean(EXTENSION_DISABLE_VERSION_CHECK_KEY);
        if (checkVersion && ExtensionUtils.isOutOfDate(extension)) {
            extension.state = ExtensionState.OUT_OF_DATE;
        } else {
-            let enabled = this._enabledExtensions.includes(extension.uuid);
+            extension.state = ExtensionState.INITIALIZED;
            if (enabled) {
                if (!this._callExtensionInit(extension.uuid))
                    return;
                if (extension.state == ExtensionState.DISABLED)
                    this._callExtensionEnable(extension.uuid);
            } else {
                extension.state = ExtensionState.INITIALIZED;
            }
        }
        this._updateCanChange(extension);
        this.emit('extension-state-changed', extension);
    }
-    unloadExtension(extension) {
+    _signals.emit('extension-state-changed', extension);
-        // Try to disable it -- if it's ERROR'd, we can't guarantee that,
+}
        // but it will be removed on next reboot, and hopefully nothing
        // broke too much.
        this._callExtensionDisable(extension.uuid);
-        extension.state = ExtensionState.UNINSTALLED;
+function unloadExtension(extension) {
-        this.emit('extension-state-changed', extension);
+    // Try to disable it -- if it's ERROR'd, we can't guarantee that,
    // but it will be removed on next reboot, and hopefully nothing
    // broke too much.
    disableExtension(extension.uuid);
-        this._extensions.delete(extension.uuid);
+    extension.state = ExtensionState.UNINSTALLED;
-        return true;
+    _signals.emit('extension-state-changed', extension);
    delete ExtensionUtils.extensions[extension.uuid];
    return true;
 }
 function reloadExtension(oldExtension) {
    // Grab the things we'll need to pass to createExtensionObject
    // to reload it.
    let { uuid: uuid, dir: dir, type: type } = oldExtension;
    // Then unload the old extension.
    unloadExtension(oldExtension);
    // Now, recreate the extension and load it.
    let newExtension;
    try {
        newExtension = ExtensionUtils.createExtensionObject(uuid, dir, type);
    } catch (e) {
        logExtensionError(uuid, e);
        return;
    }
-    reloadExtension(oldExtension) {
+    loadExtension(newExtension);
-        // Grab the things we'll need to pass to createExtensionObject
+}
        // to reload it.
        let { uuid, dir, type } = oldExtension;
-        // Then unload the old extension.
+function initExtension(uuid) {
-        this.unloadExtension(oldExtension);
+    let extension = ExtensionUtils.extensions[uuid];
    let dir = extension.dir;
-        // Now, recreate the extension and load it.
+    if (!extension)
-        let newExtension;
+        throw new Error("Extension was not properly created. Call loadExtension first");
    let extensionJs = dir.get_child('extension.js');
    if (!extensionJs.query_exists(null)) {
        logExtensionError(uuid, new Error('Missing extension.js'));
        return false;
    }
    let extensionModule;
    let extensionState = null;
    ExtensionUtils.installImporter(extension);
    try {
        extensionModule = extension.imports.extension;
    } catch (e) {
        logExtensionError(uuid, e);
        return false;
    }
    if (extensionModule.init) {
        try {
-            newExtension = this.createExtensionObject(uuid, dir, type);
+            extensionState = extensionModule.init(extension);
        } catch (e) {
-            this.logExtensionError(uuid, e);
+            logExtensionError(uuid, e);
            return;
        }
        this.loadExtension(newExtension);
    }
    _callExtensionInit(uuid) {
        if (!Main.sessionMode.allowExtensions)
            return false;
        let extension = this.lookup(uuid);
        if (!extension)
            throw new Error("Extension was not properly created. Call createExtensionObject first");
        let dir = extension.dir;
        let extensionJs = dir.get_child('extension.js');
        if (!extensionJs.query_exists(null)) {
            this.logExtensionError(uuid, new Error('Missing extension.js'));
            return false;
        }
        let extensionModule;
        let extensionState = null;
        ExtensionUtils.installImporter(extension);
        try {
            extensionModule = extension.imports.extension;
        } catch (e) {
            this.logExtensionError(uuid, e);
            return false;
        }
        if (extensionModule.init) {
            try {
                extensionState = extensionModule.init(extension);
            } catch (e) {
                this.logExtensionError(uuid, e);
                return false;
            }
        }
        if (!extensionState)
            extensionState = extensionModule;
        extension.stateObj = extensionState;
        extension.state = ExtensionState.DISABLED;
        this.emit('extension-loaded', uuid);
        return true;
    }
-    _getModeExtensions() {
+    if (!extensionState)
-        if (Array.isArray(Main.sessionMode.enabledExtensions))
+        extensionState = extensionModule;
-            return Main.sessionMode.enabledExtensions;
+    extension.stateObj = extensionState;
        return [];
    }
-    _updateCanChange(extension) {
+    extension.state = ExtensionState.DISABLED;
-        let hasError =
+    _signals.emit('extension-loaded', uuid);
-            extension.state == ExtensionState.ERROR ||
+    return true;
-            extension.state == ExtensionState.OUT_OF_DATE;
+}
-        let isMode = this._getModeExtensions().includes(extension.uuid);
+function getEnabledExtensions() {
-        let modeOnly = global.settings.get_boolean(DISABLE_USER_EXTENSIONS_KEY);
+    let extensions;
    if (Array.isArray(Main.sessionMode.enabledExtensions))
        extensions = Main.sessionMode.enabledExtensions;
    else
        extensions = [];
-        let changeKey = isMode
+    if (global.settings.get_boolean(DISABLE_USER_EXTENSIONS_KEY))
-            ? DISABLE_USER_EXTENSIONS_KEY
+        return extensions;
            : ENABLED_EXTENSIONS_KEY;
-        extension.canChange =
+    return extensions.concat(global.settings.get_strv(ENABLED_EXTENSIONS_KEY));
-            !hasError &&
+}
            global.settings.is_writable(changeKey) &&
            (isMode || !modeOnly);
    }
-    _getEnabledExtensions() {
+function onEnabledExtensionsChanged() {
-        let extensions = this._getModeExtensions();
+    let newEnabledExtensions = getEnabledExtensions();
-        if (!global.settings.get_boolean(DISABLE_USER_EXTENSIONS_KEY))
+    if (!enabled)
-            extensions = extensions.concat(global.settings.get_strv(ENABLED_EXTENSIONS_KEY));
+        return;
-        // filter out 'disabled-extensions' which takes precedence
+    // Find and enable all the newly enabled extensions: UUIDs found in the
-        let disabledExtensions = global.settings.get_strv(DISABLED_EXTENSIONS_KEY);
+    // new setting, but not in the old one.
-        return extensions.filter(item => !disabledExtensions.includes(item));
+    newEnabledExtensions.filter(
-    }
+        uuid => !enabledExtensions.includes(uuid)
    ).forEach(uuid => {
        enableExtension(uuid);
    });
-    _onUserExtensionsEnabledChanged() {
+    // Find and disable all the newly disabled extensions: UUIDs found in the
-        this._onEnabledExtensionsChanged();
+    // old setting, but not in the new one.
-        this._onSettingsWritableChanged();
+    enabledExtensions.filter(
-    }
+        item => !newEnabledExtensions.includes(item)
    ).forEach(uuid => {
        disableExtension(uuid);
    });
-    _onEnabledExtensionsChanged() {
+    enabledExtensions = newEnabledExtensions;
-        let newEnabledExtensions = this._getEnabledExtensions();
+}
-        // Find and enable all the newly enabled extensions: UUIDs found in the
+function _onVersionValidationChanged() {
-        // new setting, but not in the old one.
+    // we want to reload all extensions, but only enable
-        newEnabledExtensions.filter(
+    // extensions when allowed by the sessionMode, so
-            uuid => !this._enabledExtensions.includes(uuid)
+    // temporarily disable them all
-        ).forEach(uuid => {
+    enabledExtensions = [];
-            this._callExtensionEnable(uuid);
+    for (let uuid in ExtensionUtils.extensions)
        reloadExtension(ExtensionUtils.extensions[uuid]);
    enabledExtensions = getEnabledExtensions();
    if (Main.sessionMode.allowExtensions) {
        enabledExtensions.forEach(uuid => {
            enableExtension(uuid);
        });
    }
 }
-        // Find and disable all the newly disabled extensions: UUIDs found in the
+function _loadExtensions() {
-        // old setting, but not in the new one.
+    global.settings.connect(`changed::${ENABLED_EXTENSIONS_KEY}`, onEnabledExtensionsChanged);
-        this._extensionOrder.filter(
+    global.settings.connect(`changed::${DISABLE_USER_EXTENSIONS_KEY}`, onEnabledExtensionsChanged);
-            uuid => !newEnabledExtensions.includes(uuid)
+    global.settings.connect(`changed::${EXTENSION_DISABLE_VERSION_CHECK_KEY}`, _onVersionValidationChanged);
-        ).reverse().forEach(uuid => {
+
-            this._callExtensionDisable(uuid);
+    enabledExtensions = getEnabledExtensions();
    let finder = new ExtensionUtils.ExtensionFinder();
    finder.connect('extension-found', (finder, extension) => {
        loadExtension(extension);
    });
    finder.scanExtensions();
 }
 function enableAllExtensions() {
    if (enabled)
        return;
    if (!initted) {
        _loadExtensions();
        initted = true;
    } else {
        enabledExtensions.forEach(uuid => {
            enableExtension(uuid);
        });
        this._enabledExtensions = newEnabledExtensions;
    }
    enabled = true;
 }
-    _onSettingsWritableChanged() {
+function disableAllExtensions() {
-        for (let extension of this._extensions.values()) {
+    if (!enabled)
-            this._updateCanChange(extension);
+        return;
            this.emit('extension-state-changed', extension);
        }
    }
-    _onVersionValidationChanged() {
+    if (initted) {
        // Disabling extensions modifies the order array, so use a copy
        let extensionOrder = this._extensionOrder.slice();
        // Disable enabled extensions in the reverse order first to avoid
        // the "rebasing" done in _callExtensionDisable...
        extensionOrder.slice().reverse().forEach(uuid => {
-            this._callExtensionDisable(uuid);
+            disableExtension(uuid);
        });
        // ...and then reload and enable extensions in the correct order again.
        [...this._extensions.values()].sort((a, b) => {
            return extensionOrder.indexOf(a.uuid) - extensionOrder.indexOf(b.uuid);
        }).forEach(extension => this.reloadExtension(extension));
    }
    _loadExtensions() {
        global.settings.connect(`changed::${ENABLED_EXTENSIONS_KEY}`,
            this._onEnabledExtensionsChanged.bind(this));
        global.settings.connect(`changed::${DISABLED_EXTENSIONS_KEY}`,
            this._onEnabledExtensionsChanged.bind(this));
        global.settings.connect(`changed::${DISABLE_USER_EXTENSIONS_KEY}`,
            this._onUserExtensionsEnabledChanged.bind(this));
        global.settings.connect(`changed::${EXTENSION_DISABLE_VERSION_CHECK_KEY}`,
            this._onVersionValidationChanged.bind(this));
        global.settings.connect(`writable-changed::${ENABLED_EXTENSIONS_KEY}`,
            this._onSettingsWritableChanged.bind(this));
        global.settings.connect(`writable-changed::${DISABLED_EXTENSIONS_KEY}`,
            this._onSettingsWritableChanged.bind(this));
        this._enabledExtensions = this._getEnabledExtensions();
        let perUserDir = Gio.File.new_for_path(global.userdatadir);
        FileUtils.collectFromDatadirs('extensions', true, (dir, info) => {
            let fileType = info.get_file_type();
            if (fileType != Gio.FileType.DIRECTORY)
                return;
            let uuid = info.get_name();
            let existing = this.lookup(uuid);
            if (existing) {
                log(`Extension ${uuid} already installed in ${existing.path}. ${dir.get_path()} will not be loaded`);
                return;
            }
            let extension;
            let type = dir.has_prefix(perUserDir)
                ? ExtensionType.PER_USER
                : ExtensionType.SYSTEM;
            try {
                extension = this.createExtensionObject(uuid, dir, type);
            } catch (e) {
                logError(e, `Could not load extension ${uuid}`);
                return;
            }
            this.loadExtension(extension);
        });
    }
-    _enableAllExtensions() {
+    enabled = false;
-        if (this._enabled)
+}
            return;
-        if (!this._initialized) {
+function _sessionUpdated() {
-            this._loadExtensions();
+    // For now sessionMode.allowExtensions controls extensions from both the
-            this._initialized = true;
+    // 'enabled-extensions' preference and the sessionMode.enabledExtensions
-        } else {
+    // property; it might make sense to make enabledExtensions independent
-            this._enabledExtensions.forEach(uuid => {
+    // from allowExtensions in the future
-                this._callExtensionEnable(uuid);
+    if (Main.sessionMode.allowExtensions) {
-            });
+        if (initted)
-        }
+            enabledExtensions = getEnabledExtensions();
-        this._enabled = true;
+        enableAllExtensions();
    } else {
        disableAllExtensions();
    }
 }
-    _disableAllExtensions() {
+function init() {
-        if (!this._enabled)
+    Main.sessionMode.connect('updated', _sessionUpdated);
-            return;
+    _sessionUpdated();
-
+}
        if (this._initialized) {
            this._extensionOrder.slice().reverse().forEach(uuid => {
                this._callExtensionDisable(uuid);
            });
        }
        this._enabled = false;
    }
    _sessionUpdated() {
        // For now sessionMode.allowExtensions controls extensions from both the
        // 'enabled-extensions' preference and the sessionMode.enabledExtensions
        // property; it might make sense to make enabledExtensions independent
        // from allowExtensions in the future
        if (Main.sessionMode.allowExtensions) {
            // Take care of added or removed sessionMode extensions
            this._onEnabledExtensionsChanged();
            this._enableAllExtensions();
        } else {
            this._disableAllExtensions();
        }
    }
 };
 Signals.addSignalMethods(ExtensionManager.prototype);
--- a/js/ui/grabHelper.js
+++ b/js/ui/grabHelper.js
@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported GrabHelper */
 const { Clutter, St } = imports.gi;
@@ -195,7 +194,7 @@ var GrabHelper = class GrabHelper {
    }
    _takeModalGrab() {
-        let firstGrab = this._modalCount == 0;
+        let firstGrab = (this._modalCount == 0);
        if (firstGrab) {
            if (!Main.pushModal(this._owner, this._modalParams))
                return false;
@@ -292,7 +291,7 @@ var GrabHelper = class GrabHelper {
        let touchEnd = type == Clutter.EventType.TOUCH_END;
        let touch = touchUpdate || touchBegin || touchEnd;
-        if (touch && !global.display.is_pointer_emulating_sequence(event.get_event_sequence()))
+        if (touch && !global.display.is_pointer_emulating_sequence (event.get_event_sequence()))
            return Clutter.EVENT_PROPAGATE;
        if (this._ignoreUntilRelease && (motion || release || touch)) {
--- a/js/ui/ibusCandidatePopup.js
+++ b/js/ui/ibusCandidatePopup.js
@@ -1,7 +1,7 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported CandidatePopup */
-const { Clutter, GObject, IBus, St } = imports.gi;
+const { Clutter, IBus, St } = imports.gi;
 const Signals = imports.signals;
 const BoxPointer = imports.ui.boxpointer;
 const Main = imports.ui.main;
@@ -11,23 +11,11 @@ var MAX_CANDIDATES_PER_PAGE = 16;
 var DEFAULT_INDEX_LABELS = ['1', '2', '3', '4', '5', '6', '7', '8',
                            '9', '0', 'a', 'b', 'c', 'd', 'e', 'f'];
-var CandidateArea = GObject.registerClass({
+var CandidateArea = class CandidateArea {
-    Signals: {
+    constructor() {
-        'candidate-clicked': { param_types: [GObject.TYPE_UINT,
+        this.actor = new St.BoxLayout({ vertical: true,
-                                             GObject.TYPE_UINT,
+                                        reactive: true,
-                                             Clutter.ModifierType.$gtype] },
+                                        visible: false });
        'cursor-down': {},
        'cursor-up': {},
        'next-page': {},
        'previous-page': {},
    },
 }, class CandidateArea extends St.BoxLayout {
    _init() {
        super._init({
            vertical: true,
            reactive: true,
            visible: false,
        });
        this._candidateBoxes = [];
        for (let i = 0; i < MAX_CANDIDATES_PER_PAGE; ++i) {
            let box = new St.BoxLayout({ style_class: 'candidate-box',
@@ -35,10 +23,10 @@ var CandidateArea = GObject.registerClass({
                                         track_hover: true });
            box._indexLabel = new St.Label({ style_class: 'candidate-index' });
            box._candidateLabel = new St.Label({ style_class: 'candidate-label' });
-            box.add_child(box._indexLabel);
+            box.add(box._indexLabel, { y_fill: false });
-            box.add_child(box._candidateLabel);
+            box.add(box._candidateLabel, { y_fill: false });
            this._candidateBoxes.push(box);
-            this.add(box);
+            this.actor.add(box);
            let j = i;
            box.connect('button-release-event', (actor, event) => {
@@ -47,23 +35,30 @@ var CandidateArea = GObject.registerClass({
            });
        }
        this.actor.connect('scroll-event', (actor, event) => {
            let direction = event.get_scroll_direction();
            switch (direction) {
            case Clutter.ScrollDirection.UP:
                this.emit('cursor-up');
                break;
            case Clutter.ScrollDirection.DOWN:
                this.emit('cursor-down');
                break;
            }
            return Clutter.EVENT_PROPAGATE;
        });
        this._buttonBox = new St.BoxLayout({ style_class: 'candidate-page-button-box' });
-        this._previousButton = new St.Button({
+        this._previousButton = new St.Button({ style_class: 'candidate-page-button candidate-page-button-previous button' });
            style_class: 'candidate-page-button candidate-page-button-previous button',
            x_expand: true,
        });
        this._previousButton.child = new St.Icon({ style_class: 'candidate-page-button-icon' });
-        this._buttonBox.add_child(this._previousButton);
+        this._buttonBox.add(this._previousButton, { expand: true });
-        this._nextButton = new St.Button({
+        this._nextButton = new St.Button({ style_class: 'candidate-page-button candidate-page-button-next button' });
            style_class: 'candidate-page-button candidate-page-button-next button',
            x_expand: true,
        });
        this._nextButton.child = new St.Icon({ style_class: 'candidate-page-button-icon' });
-        this._buttonBox.add_child(this._nextButton);
+        this._buttonBox.add(this._nextButton, { expand: true });
-        this.add(this._buttonBox);
+        this.actor.add(this._buttonBox);
        this._previousButton.connect('clicked', () => {
            this.emit('previous-page');
@@ -76,18 +71,6 @@ var CandidateArea = GObject.registerClass({
        this._cursorPosition = 0;
    }
    vfunc_scroll_event(scrollEvent) {
        switch (scrollEvent.direction) {
        case Clutter.ScrollDirection.UP:
            this.emit('cursor-up');
            break;
        case Clutter.ScrollDirection.DOWN:
            this.emit('cursor-down');
            break;
        }
        return Clutter.EVENT_PROPAGATE;
    }
    setOrientation(orientation) {
        if (this._orientation == orientation)
            return;
@@ -95,15 +78,15 @@ var CandidateArea = GObject.registerClass({
        this._orientation = orientation;
        if (this._orientation == IBus.Orientation.HORIZONTAL) {
-            this.vertical = false;
+            this.actor.vertical = false;
-            this.remove_style_class_name('vertical');
+            this.actor.remove_style_class_name('vertical');
-            this.add_style_class_name('horizontal');
+            this.actor.add_style_class_name('horizontal');
            this._previousButton.child.icon_name = 'go-previous-symbolic';
            this._nextButton.child.icon_name = 'go-next-symbolic';
        } else {                // VERTICAL || SYSTEM
-            this.vertical = true;
+            this.actor.vertical = true;
-            this.add_style_class_name('vertical');
+            this.actor.add_style_class_name('vertical');
-            this.remove_style_class_name('horizontal');
+            this.actor.remove_style_class_name('horizontal');
            this._previousButton.child.icon_name = 'go-up-symbolic';
            this._nextButton.child.icon_name = 'go-down-symbolic';
        }
@@ -118,7 +101,7 @@ var CandidateArea = GObject.registerClass({
            if (!visible)
                continue;
-            box._indexLabel.text = indexes && indexes[i] ? indexes[i] : DEFAULT_INDEX_LABELS[i];
+            box._indexLabel.text = ((indexes && indexes[i]) ? indexes[i] : DEFAULT_INDEX_LABELS[i]);
            box._candidateLabel.text = candidates[i];
        }
@@ -137,23 +120,19 @@ var CandidateArea = GObject.registerClass({
        this._previousButton.reactive = wrapsAround || page > 0;
        this._nextButton.reactive = wrapsAround || page < nPages - 1;
    }
-});
+};
 Signals.addSignalMethods(CandidateArea.prototype);
-var CandidatePopup = GObject.registerClass(
+var CandidatePopup = class CandidatePopup {
-class IbusCandidatePopup extends BoxPointer.BoxPointer {
+    constructor() {
-    _init() {
+        this._boxPointer = new BoxPointer.BoxPointer(St.Side.TOP);
-        super._init(St.Side.TOP);
+        this._boxPointer.visible = false;
-        this.visible = false;
+        this._boxPointer.style_class = 'candidate-popup-boxpointer';
-        this.style_class = 'candidate-popup-boxpointer';
+        Main.layoutManager.addChrome(this._boxPointer);
        this._dummyCursor = new St.Widget({ opacity: 0 });
        Main.layoutManager.uiGroup.add_actor(this._dummyCursor);
        Main.layoutManager.addChrome(this);
        let box = new St.BoxLayout({ style_class: 'candidate-popup-content',
                                     vertical: true });
-        this.bin.set_child(box);
+        this._boxPointer.bin.set_child(box);
        this._preeditText = new St.Label({ style_class: 'candidate-popup-text',
                                           visible: false });
@@ -164,7 +143,7 @@ class IbusCandidatePopup extends BoxPointer.BoxPointer {
        box.add(this._auxText);
        this._candidateArea = new CandidateArea();
-        box.add(this._candidateArea);
+        box.add(this._candidateArea.actor);
        this._candidateArea.connect('previous-page', () => {
            this._panelService.page_up();
@@ -215,42 +194,41 @@ class IbusCandidatePopup extends BoxPointer.BoxPointer {
            this._preeditText.text = text.get_text();
            let attrs = text.get_attributes();
-            if (attrs) {
+            if (attrs)
                this._setTextAttributes(this._preeditText.clutter_text,
                                        attrs);
            }
        });
-        panelService.connect('show-preedit-text', () => {
+        panelService.connect('show-preedit-text', ps => {
            this._preeditText.show();
            this._updateVisibility();
        });
-        panelService.connect('hide-preedit-text', () => {
+        panelService.connect('hide-preedit-text', ps => {
            this._preeditText.hide();
            this._updateVisibility();
        });
-        panelService.connect('update-auxiliary-text', (_ps, text, visible) => {
+        panelService.connect('update-auxiliary-text', (ps, text, visible) => {
            this._auxText.visible = visible;
            this._updateVisibility();
            this._auxText.text = text.get_text();
        });
-        panelService.connect('show-auxiliary-text', () => {
+        panelService.connect('show-auxiliary-text', ps => {
            this._auxText.show();
            this._updateVisibility();
        });
-        panelService.connect('hide-auxiliary-text', () => {
+        panelService.connect('hide-auxiliary-text', ps => {
            this._auxText.hide();
            this._updateVisibility();
        });
-        panelService.connect('update-lookup-table', (_ps, lookupTable, visible) => {
+        panelService.connect('update-lookup-table', (ps, lookupTable, visible) => {
-            this._candidateArea.visible = visible;
+            this._candidateArea.actor.visible = visible;
            this._updateVisibility();
            let nCandidates = lookupTable.get_number_of_candidates();
            let cursorPos = lookupTable.get_cursor_pos();
            let pageSize = lookupTable.get_page_size();
            let nPages = Math.ceil(nCandidates / pageSize);
-            let page = cursorPos == 0 ? 0 : Math.floor(cursorPos / pageSize);
+            let page = ((cursorPos == 0) ? 0 : Math.floor(cursorPos / pageSize));
            let startIndex = page * pageSize;
            let endIndex = Math.min((page + 1) * pageSize, nCandidates);
@@ -278,48 +256,45 @@ class IbusCandidatePopup extends BoxPointer.BoxPointer {
            this._candidateArea.setOrientation(lookupTable.get_orientation());
            this._candidateArea.updateButtons(lookupTable.is_round(), page, nPages);
        });
-        panelService.connect('show-lookup-table', () => {
+        panelService.connect('show-lookup-table', ps => {
-            this._candidateArea.show();
+            this._candidateArea.actor.show();
            this._updateVisibility();
        });
-        panelService.connect('hide-lookup-table', () => {
+        panelService.connect('hide-lookup-table', ps => {
-            this._candidateArea.hide();
+            this._candidateArea.actor.hide();
            this._updateVisibility();
        });
-        panelService.connect('focus-out', () => {
+        panelService.connect('focus-out', ps => {
-            this.close(BoxPointer.PopupAnimation.NONE);
+            this._boxPointer.close(BoxPointer.PopupAnimation.NONE);
            Main.keyboard.resetSuggestions();
        });
    }
    _setDummyCursorGeometry(x, y, w, h) {
-        this._dummyCursor.set_position(Math.round(x), Math.round(y));
+        Main.layoutManager.setDummyCursorGeometry(x, y, w, h);
-        this._dummyCursor.set_size(Math.round(w), Math.round(h));
+        if (this._boxPointer.visible)
-
+            this._boxPointer.setPosition(Main.layoutManager.dummyCursor, 0);
        if (this.visible)
            this.setPosition(this._dummyCursor, 0);
    }
    _updateVisibility() {
-        let isVisible = !Main.keyboard.visible &&
+        let isVisible = (!Main.keyboard.visible &&
                         (this._preeditText.visible ||
                          this._auxText.visible ||
-                          this._candidateArea.visible);
+                          this._candidateArea.actor.visible));
        if (isVisible) {
-            this.setPosition(this._dummyCursor, 0);
+            this._boxPointer.setPosition(Main.layoutManager.dummyCursor, 0);
-            this.open(BoxPointer.PopupAnimation.NONE);
+            this._boxPointer.open(BoxPointer.PopupAnimation.NONE);
-            this.get_parent().set_child_above_sibling(this, null);
+            this._boxPointer.raise_top();
        } else {
-            this.close(BoxPointer.PopupAnimation.NONE);
+            this._boxPointer.close(BoxPointer.PopupAnimation.NONE);
        }
    }
    _setTextAttributes(clutterText, ibusAttrList) {
        let attr;
-        for (let i = 0; (attr = ibusAttrList.get(i)); ++i) {
+        for (let i = 0; (attr = ibusAttrList.get(i)); ++i)
            if (attr.get_attr_type() == IBus.AttrType.BACKGROUND)
                clutterText.set_selection(attr.get_start_index(), attr.get_end_index());
        }
    }
-});
+};
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -1,17 +1,17 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported BaseIcon, IconGrid, PaginatedIconGrid */
-const { Clutter, GLib, GObject, Graphene, Meta, St } = imports.gi;
+const { Clutter, GObject, Meta, St } = imports.gi;
 const Params = imports.misc.params;
 const Tweener = imports.ui.tweener;
 const Main = imports.ui.main;
 var ICON_SIZE = 96;
 var MIN_ICON_SIZE = 16;
-var EXTRA_SPACE_ANIMATION_TIME = 250;
+var EXTRA_SPACE_ANIMATION_TIME = 0.25;
-var ANIMATION_TIME_IN = 350;
+var ANIMATION_TIME_IN = 0.350;
 var ANIMATION_TIME_OUT = 1 / 2 * ANIMATION_TIME_IN;
 var ANIMATION_MAX_DELAY_FOR_ITEM = 2 / 3 * ANIMATION_TIME_IN;
 var ANIMATION_BASE_DELAY_FOR_ITEM = 1 / 4 * ANIMATION_MAX_DELAY_FOR_ITEM;
@@ -22,11 +22,11 @@ var ANIMATION_BOUNCE_ICON_SCALE = 1.1;
 var AnimationDirection = {
    IN: 0,
-    OUT: 1,
+    OUT: 1
 };
 var APPICON_ANIMATION_OUT_SCALE = 3;
-var APPICON_ANIMATION_OUT_TIME = 250;
+var APPICON_ANIMATION_OUT_TIME = 0.25;
 var BaseIcon = GObject.registerClass(
 class BaseIcon extends St.Bin {
@@ -39,28 +39,23 @@ class BaseIcon extends St.Bin {
        if (params.showLabel)
            styleClass += ' overview-icon-with-label';
-        super._init({ style_class: styleClass });
+        super._init({ style_class: styleClass,
                      x_fill: true,
                      y_fill: true });
        this.connect('destroy', this._onDestroy.bind(this));
-        this._box = new St.BoxLayout({
+        this._box = new St.BoxLayout({ vertical: true });
            vertical: true,
            x_expand: true,
            y_expand: true,
        });
        this.set_child(this._box);
        this.iconSize = ICON_SIZE;
-        this._iconBin = new St.Bin();
+        this._iconBin = new St.Bin({ x_align: St.Align.MIDDLE,
                                     y_align: St.Align.MIDDLE });
        this._box.add_actor(this._iconBin);
        if (params.showLabel) {
            this.label = new St.Label({ text: label });
            this.label.clutter_text.set({
                x_align: Clutter.ActorAlign.CENTER,
                y_align: Clutter.ActorAlign.CENTER,
            });
            this._box.add_actor(this.label);
        } else {
            this.label = null;
@@ -76,14 +71,14 @@ class BaseIcon extends St.Bin {
        this._iconThemeChangedId = cache.connect('icon-theme-changed', this._onIconThemeChanged.bind(this));
    }
-    vfunc_get_preferred_width(_forHeight) {
+    vfunc_get_preferred_width(forHeight) {
        // Return the actual height to keep the squared aspect
        return this.get_preferred_height(-1);
    }
    // This can be overridden by a subclass, or by the createIcon
    // parameter to _init()
-    createIcon(_size) {
+    createIcon(size) {
        throw new GObject.NotImplementedError(`createIcon in ${this.constructor.name}`);
    }
@@ -142,14 +137,6 @@ class BaseIcon extends St.Bin {
        // animating.
        zoomOutActor(this.child);
    }
    animateZoomOutAtPos(x, y) {
        zoomOutActorAtPos(this.child, x, y);
    }
    update() {
        this._createIconTexture(this.iconSize);
    }
 });
 function clamp(value, min, max) {
@@ -157,15 +144,10 @@ function clamp(value, min, max) {
 }
 function zoomOutActor(actor) {
    let [x, y] = actor.get_transformed_position();
    zoomOutActorAtPos(actor, x, y);
 }
 function zoomOutActorAtPos(actor, x, y) {
    let actorClone = new Clutter.Clone({ source: actor,
                                         reactive: false });
    let [width, height] = actor.get_transformed_size();
-
+    let [x, y] = actor.get_transformed_position();
    actorClone.set_size(width, height);
    actorClone.set_position(x, y);
    actorClone.opacity = 255;
@@ -182,16 +164,18 @@ function zoomOutActorAtPos(actor, x, y) {
    let containedX = clamp(scaledX, monitor.x, monitor.x + monitor.width - scaledWidth);
    let containedY = clamp(scaledY, monitor.y, monitor.y + monitor.height - scaledHeight);
-    actorClone.ease({
+    Tweener.addTween(actorClone,
-        scale_x: APPICON_ANIMATION_OUT_SCALE,
+                     { time: APPICON_ANIMATION_OUT_TIME,
-        scale_y: APPICON_ANIMATION_OUT_SCALE,
+                       scale_x: APPICON_ANIMATION_OUT_SCALE,
-        translation_x: containedX - scaledX,
+                       scale_y: APPICON_ANIMATION_OUT_SCALE,
-        translation_y: containedY - scaledY,
+                       translation_x: containedX - scaledX,
-        opacity: 0,
+                       translation_y: containedY - scaledY,
-        duration: APPICON_ANIMATION_OUT_TIME,
+                       opacity: 0,
-        mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                       transition: 'easeOutQuad',
-        onComplete: () => actorClone.destroy(),
+                       onComplete() {
-    });
+                           actorClone.destroy();
                       }
                    });
 }
 var IconGrid = GObject.registerClass({
@@ -222,8 +206,6 @@ var IconGrid = GObject.registerClass({
        this.rightPadding = 0;
        this.leftPadding = 0;
        this._updateIconSizesLaterId = 0;
        this._items = [];
        this._clonesAnimating = [];
        // Pulled from CSS, but hardcode some defaults here
@@ -232,23 +214,15 @@ var IconGrid = GObject.registerClass({
        this._fixedHItemSize = this._fixedVItemSize = undefined;
        this.connect('style-changed', this._onStyleChanged.bind(this));
        this.connect('actor-added', this._childAdded.bind(this));
        this.connect('actor-removed', this._childRemoved.bind(this));
        this.connect('destroy', this._onDestroy.bind(this));
    }
    vfunc_unmap() {
        // Cancel animations when hiding the overview, to avoid icons
        // swarming into the void ...
-        this._resetAnimationActors();
+        this.connect('notify::mapped', () => {
-        super.vfunc_unmap();
+            if (!this.mapped)
-    }
+                this._cancelAnimation();
        });
-    _onDestroy() {
+        this.connect('actor-added', this._childAdded.bind(this));
-        if (this._updateIconSizesLaterId) {
+        this.connect('actor-removed', this._childRemoved.bind(this));
            Meta.later_remove(this._updateIconSizesLaterId);
            this._updateIconSizesLaterId = 0;
        }
    }
    _keyFocusIn(actor) {
@@ -257,35 +231,22 @@ var IconGrid = GObject.registerClass({
    _childAdded(grid, child) {
        child._iconGridKeyFocusInId = child.connect('key-focus-in', this._keyFocusIn.bind(this));
        child._paintVisible = child.opacity > 0;
        child._opacityChangedId = child.connect('notify::opacity', () => {
            let paintVisible = child._paintVisible;
            child._paintVisible = child.opacity > 0;
            if (paintVisible !== child._paintVisible)
                this.queue_relayout();
        });
    }
    _childRemoved(grid, child) {
        child.disconnect(child._iconGridKeyFocusInId);
        delete child._iconGridKeyFocusInId;
        child.disconnect(child._opacityChangedId);
        delete child._opacityChangedId;
        delete child._paintVisible;
    }
-    vfunc_get_preferred_width(_forHeight) {
+    vfunc_get_preferred_width(forHeight) {
        if (this._fillParent)
            // Ignore all size requests of children and request a size of 0;
            // later we'll allocate as many children as fit the parent
            return [0, 0];
        let nChildren = this.get_n_children();
-        let nColumns = this._colLimit
+        let nColumns = this._colLimit ? Math.min(this._colLimit,
-            ? Math.min(this._colLimit, nChildren)
+                                                 nChildren)
-            : nChildren;
+                                      : nChildren;
        let totalSpacing = Math.max(0, nColumns - 1) * this._getSpacing();
        // Kind of a lie, but not really an issue right now.  If
        // we wanted to support some sort of hidden/overflow that would
@@ -403,7 +364,7 @@ var IconGrid = GObject.registerClass({
        let allocationBox = this.get_allocation_box();
        let paintBox = themeNode.get_paint_box(allocationBox);
-        let origin = new Graphene.Point3D();
+        let origin = new Clutter.Vertex();
        origin.x = paintBox.x1 - allocationBox.x1;
        origin.y = paintBox.y1 - allocationBox.y1;
        origin.z = 0.0;
@@ -432,35 +393,35 @@ var IconGrid = GObject.registerClass({
        return true;
    }
-    /*
+    /**
     * Intended to be override by subclasses if they need a different
     * set of items to be animated.
     */
    _getChildrenToAnimate() {
-        return this._getVisibleChildren().filter(child => child.opacity > 0);
+        return this._getVisibleChildren();
    }
-    _resetAnimationActors() {
+    _cancelAnimation() {
        this._clonesAnimating.forEach(clone => clone.destroy());
        this._clonesAnimating = [];
    }
    _animationDone() {
        this._clonesAnimating.forEach(clone => {
            clone.source.reactive = true;
            clone.source.opacity = 255;
            clone.destroy();
        });
        this._clonesAnimating = [];
    }
    _animationDone() {
        this._resetAnimationActors();
        this.emit('animation-done');
    }
    animatePulse(animationDirection) {
-        if (animationDirection != AnimationDirection.IN) {
+        if (animationDirection != AnimationDirection.IN)
            throw new GObject.NotImplementedError("Pulse animation only implements " +
                                                  "'in' animation direction");
        }
-        this._resetAnimationActors();
+        this._cancelAnimation();
        let actors = this._getChildrenToAnimate();
        if (actors.length == 0) {
@@ -483,32 +444,30 @@ var IconGrid = GObject.registerClass({
            let delay = index / actors.length * maxDelay;
            let bounceUpTime = ANIMATION_TIME_IN / 4;
            let isLastItem = index == actors.length - 1;
-            actor.ease({
+            Tweener.addTween(actor,
-                scale_x: ANIMATION_BOUNCE_ICON_SCALE,
+                             { time: bounceUpTime,
-                scale_y: ANIMATION_BOUNCE_ICON_SCALE,
+                               transition: 'easeInOutQuad',
-                duration: bounceUpTime,
+                               delay: delay,
-                mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
+                               scale_x: ANIMATION_BOUNCE_ICON_SCALE,
-                delay,
+                               scale_y: ANIMATION_BOUNCE_ICON_SCALE,
-                onComplete: () => {
+                               onComplete: () => {
-                    let duration = ANIMATION_TIME_IN - bounceUpTime;
+                                   Tweener.addTween(actor,
-                    actor.ease({
+                                                    { time: ANIMATION_TIME_IN - bounceUpTime,
-                        scale_x: 1,
+                                                      transition: 'easeInOutQuad',
-                        scale_y: 1,
+                                                      scale_x: 1,
-                        duration,
+                                                      scale_y: 1,
-                        mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
+                                                      onComplete: () => {
-                        onComplete: () => {
+                                                          if (isLastItem)
-                            if (isLastItem)
+                                                              this._animationDone();
-                                this._animationDone();
+                                                      }
-                            actor.reactive = true;
+                                                    });
-                        },
+                               }
-                    });
+                             });
                },
            });
        }
    }
    animateSpring(animationDirection, sourceActor) {
-        this._resetAnimationActors();
+        this._cancelAnimation();
        let actors = this._getChildrenToAnimate();
        if (actors.length == 0) {
@@ -562,25 +521,21 @@ var IconGrid = GObject.registerClass({
                let delay = (1 - (actor._distance - minDist) / normalization) * ANIMATION_MAX_DELAY_FOR_ITEM;
                let [finalX, finalY]  = actor._transformedPosition;
-                movementParams = {
+                movementParams = { time: ANIMATION_TIME_IN,
-                    x: finalX,
+                                   transition: 'easeInOutQuad',
-                    y: finalY,
+                                   delay: delay,
-                    scale_x: 1,
+                                   x: finalX,
-                    scale_y: 1,
+                                   y: finalY,
-                    duration: ANIMATION_TIME_IN,
+                                   scale_x: 1,
-                    mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
+                                   scale_y: 1,
-                    delay,
+                                   onComplete: () => {
-                };
+                                       if (isLastItem)
-
+                                           this._animationDone();
-                if (isLastItem)
+                                   } };
-                    movementParams.onComplete = this._animationDone.bind(this);
+                fadeParams = { time: ANIMATION_FADE_IN_TIME_FOR_ITEM,
-
+                               transition: 'easeInOutQuad',
-                fadeParams = {
+                               delay: delay,
-                    opacity: 255,
+                               opacity: 255 };
                    duration: ANIMATION_FADE_IN_TIME_FOR_ITEM,
                    mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
                    delay,
                };
            } else {
                let isLastItem = actor._distance == maxDist;
@@ -588,29 +543,26 @@ var IconGrid = GObject.registerClass({
                actorClone.set_position(startX, startY);
                let delay = (actor._distance - minDist) / normalization * ANIMATION_MAX_DELAY_OUT_FOR_ITEM;
-                movementParams = {
+                movementParams = { time: ANIMATION_TIME_OUT,
-                    x: adjustedSourcePositionX,
+                                   transition: 'easeInOutQuad',
-                    y: adjustedSourcePositionY,
+                                   delay: delay,
-                    scale_x: scaleX,
+                                   x: adjustedSourcePositionX,
-                    scale_y: scaleY,
+                                   y: adjustedSourcePositionY,
-                    duration: ANIMATION_TIME_OUT,
+                                   scale_x: scaleX,
-                    mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
+                                   scale_y: scaleY,
-                    delay,
+                                   onComplete: () => {
-                };
+                                       if (isLastItem)
-
+                                           this._animationDone();
-                if (isLastItem)
+                                   } };
-                    movementParams.onComplete = this._animationDone.bind(this);
+                fadeParams = { time: ANIMATION_FADE_IN_TIME_FOR_ITEM,
-
+                               transition: 'easeInOutQuad',
-                fadeParams = {
+                               delay: ANIMATION_TIME_OUT + delay - ANIMATION_FADE_IN_TIME_FOR_ITEM,
-                    opacity: 0,
+                               opacity: 0 };
                    duration: ANIMATION_FADE_IN_TIME_FOR_ITEM,
                    mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
                    delay: ANIMATION_TIME_OUT + delay - ANIMATION_FADE_IN_TIME_FOR_ITEM,
                };
            }
-            actorClone.ease(movementParams);
+
-            actorClone.ease(fadeParams);
+            Tweener.addTween(actorClone, movementParams);
            Tweener.addTween(actorClone, fadeParams);
        }
    }
@@ -678,8 +630,8 @@ var IconGrid = GObject.registerClass({
    nRows(forWidth) {
        let children = this._getVisibleChildren();
-        let nColumns = forWidth < 0 ? children.length : this._computeLayout(forWidth)[0];
+        let nColumns = (forWidth < 0) ? children.length : this._computeLayout(forWidth)[0];
-        let nRows = nColumns > 0 ? Math.ceil(children.length / nColumns) : 0;
+        let nRows = (nColumns > 0) ? Math.ceil(children.length / nColumns) : 0;
        if (this._rowLimit)
            nRows = Math.min(nRows, this._rowLimit);
        return nRows;
@@ -719,13 +671,13 @@ var IconGrid = GObject.registerClass({
        this._items.push(item);
        if (index !== undefined)
-            this.insert_child_at_index(item, index);
+            this.insert_child_at_index(item.actor, index);
        else
-            this.add_actor(item);
+            this.add_actor(item.actor);
    }
    removeItem(item) {
-        this.remove_child(item);
+        this.remove_child(item.actor);
    }
    getItemAtIndex(index) {
@@ -785,7 +737,7 @@ var IconGrid = GObject.registerClass({
            this.topPadding = this.rightPadding = this.bottomPadding = this.leftPadding = spacing;
    }
-    /*
+    /**
     * This function must to be called before iconGrid allocation,
     * to know how much spacing can the grid has
     */
@@ -798,29 +750,24 @@ var IconGrid = GObject.registerClass({
            let neededWidth = this.usedWidthForNColumns(this._minColumns) - availWidth;
            let neededHeight = this.usedHeightForNRows(this._minRows) - availHeight;
-            let neededSpacePerItem = neededWidth > neededHeight
+            let neededSpacePerItem = (neededWidth > neededHeight) ? Math.ceil(neededWidth / this._minColumns)
-                ? Math.ceil(neededWidth / this._minColumns)
+                                                                  : Math.ceil(neededHeight / this._minRows);
                : Math.ceil(neededHeight / this._minRows);
            this._fixedHItemSize = Math.max(this._hItemSize - neededSpacePerItem, MIN_ICON_SIZE);
            this._fixedVItemSize = Math.max(this._vItemSize - neededSpacePerItem, MIN_ICON_SIZE);
            this._updateSpacingForSize(availWidth, availHeight);
        }
-        if (!this._updateIconSizesLaterId) {
+        Meta.later_add(Meta.LaterType.BEFORE_REDRAW,
-            this._updateIconSizesLaterId = Meta.later_add(Meta.LaterType.BEFORE_REDRAW,
+                       this._updateIconSizes.bind(this));
                                                          this._updateIconSizes.bind(this));
        }
    }
    // Note that this is ICON_SIZE as used by BaseIcon, not elsewhere in IconGrid; it's a bit messed up
    _updateIconSizes() {
        this._updateIconSizesLaterId = 0;
        let scale = Math.min(this._fixedHItemSize, this._fixedVItemSize) / Math.max(this._hItemSize, this._vItemSize);
        let newIconSize = Math.floor(ICON_SIZE * scale);
-        for (let i in this._items)
+        for (let i in this._items) {
            this._items[i].icon.setIconSize(newIconSize);
-
+        }
        return GLib.SOURCE_REMOVE;
    }
 });
@@ -837,7 +784,7 @@ var PaginatedIconGrid = GObject.registerClass({
        this._childrenPerPage = 0;
    }
-    vfunc_get_preferred_height(_forWidth) {
+    vfunc_get_preferred_height(forWidth) {
        let height = (this._availableHeightPerPageForItems() + this.bottomPadding + this.topPadding) * this._nPages + this._spaceBetweenPages * this._nPages;
        return [height, height];
    }
@@ -881,9 +828,9 @@ var PaginatedIconGrid = GObject.registerClass({
            children[i].show();
            columnIndex++;
-            if (columnIndex == nColumns)
+            if (columnIndex == nColumns) {
                columnIndex = 0;
-
+            }
            if (columnIndex == 0) {
                y += this._getVItemSize() + spacing;
                if ((i + 1) % this._childrenPerPage == 0)
@@ -897,7 +844,7 @@ var PaginatedIconGrid = GObject.registerClass({
    // Overridden from IconGrid
    _getChildrenToAnimate() {
-        let children = super._getChildrenToAnimate();
+        let children = this._getVisibleChildren();
        let firstIndex = this._childrenPerPage * this.currentPage;
        let lastIndex = firstIndex + this._childrenPerPage;
@@ -905,7 +852,7 @@ var PaginatedIconGrid = GObject.registerClass({
    }
    _computePages(availWidthPerPage, availHeightPerPage) {
-        let [nColumns, usedWidth_] = this._computeLayout(availWidthPerPage);
+        let [nColumns, usedWidth] = this._computeLayout(availWidthPerPage);
        let nRows;
        let children = this._getVisibleChildren();
        if (nColumns > 0)
@@ -958,16 +905,15 @@ var PaginatedIconGrid = GObject.registerClass({
    /**
    * openExtraSpace:
-    * @param {Clutter.Actor} sourceItem: item for which to create extra space
+    * @sourceItem: the item for which to create extra space
-    * @param {St.Side} side: where @sourceItem should be located relative to
+    * @side: where @sourceItem should be located relative to the created space
-    *   the created space
+    * @nRows: the amount of space to create
    * @param {number} nRows: the amount of space to create
    *
    * Pan view to create extra space for @nRows above or below @sourceItem.
    */
    openExtraSpace(sourceItem, side, nRows) {
        let children = this._getVisibleChildren();
-        let index = children.indexOf(sourceItem);
+        let index = children.indexOf(sourceItem.actor);
        if (index == -1)
            throw new Error('Item not found.');
@@ -977,7 +923,8 @@ var PaginatedIconGrid = GObject.registerClass({
        let childrenPerRow = this._childrenPerPage / this._rowsPerPage;
        let sourceRow = Math.floor((index - pageOffset) / childrenPerRow);
-        let nRowsAbove = side == St.Side.TOP ? sourceRow + 1 : sourceRow;
+        let nRowsAbove = (side == St.Side.TOP) ? sourceRow + 1
                                               : sourceRow;
        let nRowsBelow = this._rowsPerPage - nRowsAbove;
        let nRowsUp, nRowsDown;
@@ -1017,14 +964,13 @@ var PaginatedIconGrid = GObject.registerClass({
        for (let i = 0; i < children.length; i++) {
            children[i].translation_y = 0;
-            let params = {
+            let params = { translation_y: translationY,
-                translation_y: translationY,
+                           time: EXTRA_SPACE_ANIMATION_TIME,
-                duration: EXTRA_SPACE_ANIMATION_TIME,
+                           transition: 'easeInOutQuad'
-                mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
+                         };
            };
            if (i == (children.length - 1))
                params.onComplete = () => this.emit('space-opened');
-            children[i].ease(params);
+            Tweener.addTween(children[i], params);
        }
    }
@@ -1037,12 +983,12 @@ var PaginatedIconGrid = GObject.registerClass({
        for (let i = 0; i < this._translatedChildren.length; i++) {
            if (!this._translatedChildren[i].translation_y)
                continue;
-            this._translatedChildren[i].ease({
+            Tweener.addTween(this._translatedChildren[i],
-                translation_y: 0,
+                             { translation_y: 0,
-                duration: EXTRA_SPACE_ANIMATION_TIME,
+                               time: EXTRA_SPACE_ANIMATION_TIME,
-                mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
+                               transition: 'easeInOutQuad',
-                onComplete: () => this.emit('space-closed'),
+                               onComplete: () => this.emit('space-closed')
-            });
+                             });
        }
    }
 });
--- a/js/ui/inhibitShortcutsDialog.js
+++ b/js/ui/inhibitShortcutsDialog.js
@@ -1,4 +1,3 @@
 /* exported InhibitShortcutsDialog */
 const { Clutter, Gio, GLib, GObject, Gtk, Meta, Shell } = imports.gi;
 const Dialog = imports.ui.dialog;
@@ -18,8 +17,8 @@ var DialogResponse = Meta.InhibitShortcutsDialogResponse;
 var InhibitShortcutsDialog = GObject.registerClass({
    Implements: [Meta.InhibitShortcutsDialog],
    Properties: {
-        'window': GObject.ParamSpec.override('window', Meta.InhibitShortcutsDialog),
+        'window': GObject.ParamSpec.override('window', Meta.InhibitShortcutsDialog)
-    },
+    }
 }, class InhibitShortcutsDialog extends GObject.Object {
    _init(window) {
        super._init();
@@ -76,19 +75,17 @@ var InhibitShortcutsDialog = GObject.registerClass({
        let name = this._app ? this._app.get_name() : this._window.title;
        /* Translators: %s is an application name like "Settings" */
-        let title = name
+        let title = name ? _("%s wants to inhibit shortcuts").format(name)
-            ? _("%s wants to inhibit shortcuts").format(name)
+                         : _("Application wants to inhibit shortcuts");
            : _("Application wants to inhibit shortcuts");
        let icon = new Gio.ThemedIcon({ name: 'dialog-warning-symbolic' });
        let contentParams = { icon, title };
        let restoreAccel = this._getRestoreAccel();
-        if (restoreAccel) {
+        if (restoreAccel)
            contentParams.subtitle =
                /* Translators: %s is a keyboard shortcut like "Super+x" */
                _("You can restore shortcuts by pressing %s.").format(restoreAccel);
        }
        let content = new Dialog.MessageDialogContent(contentParams);
        this._dialog.contentLayout.add_actor(content);
@@ -135,14 +132,14 @@ var InhibitShortcutsDialog = GObject.registerClass({
            this._permStore.LookupRemote(APP_PERMISSIONS_TABLE,
                                         APP_PERMISSIONS_ID,
-                (res, err) => {
+                (res, error) => {
-                    if (err) {
+                    if (error) {
                        this._dialog.open();
-                        log(err.message);
+                        log(error.message);
                        return;
                    }
-                    let [permissions] = res;
+                    let [permissions, data] = res;
                    if (permissions[appId] === undefined) // Not found
                        this._dialog.open();
                    else if (permissions[appId] == GRANTED)
--- a/js/ui/kbdA11yDialog.js
+++ b/js/ui/kbdA11yDialog.js
@@ -1,4 +1,3 @@
 /* exported KbdA11yDialog */
 const { Clutter, Gio, GObject } = imports.gi;
 const Dialog = imports.ui.dialog;
@@ -27,24 +26,24 @@ class KbdA11yDialog extends GObject.Object {
        if (whatChanged & Clutter.KeyboardA11yFlags.SLOW_KEYS_ENABLED) {
            key = KEY_SLOW_KEYS_ENABLED;
-            enabled = (newFlags & Clutter.KeyboardA11yFlags.SLOW_KEYS_ENABLED) > 0;
+            enabled = (newFlags & Clutter.KeyboardA11yFlags.SLOW_KEYS_ENABLED) ? true : false;
-            title = enabled
+            title = enabled ?
-                ? _("Slow Keys Turned On")
+                    _("Slow Keys Turned On") :
-                : _("Slow Keys Turned Off");
+                    _("Slow Keys Turned Off");
            body = _("You just held down the Shift key for 8 seconds. This is the shortcut " +
                     "for the Slow Keys feature, which affects the way your keyboard works.");
        } else  if (whatChanged & Clutter.KeyboardA11yFlags.STICKY_KEYS_ENABLED) {
            key = KEY_STICKY_KEYS_ENABLED;
-            enabled = (newFlags & Clutter.KeyboardA11yFlags.STICKY_KEYS_ENABLED) > 0;
+            enabled = (newFlags & Clutter.KeyboardA11yFlags.STICKY_KEYS_ENABLED) ? true : false;
-            title = enabled
+            title = enabled ?
-                ? _("Sticky Keys Turned On")
+                    _("Sticky Keys Turned On") :
-                : _("Sticky Keys Turned Off");
+                    _("Sticky Keys Turned Off");
-            body = enabled
+            body = enabled ?
-                ? _("You just pressed the Shift key 5 times in a row. This is the shortcut " +
+                   _("You just pressed the Shift key 5 times in a row. This is the shortcut " +
-                  "for the Sticky Keys feature, which affects the way your keyboard works.")
+                     "for the Sticky Keys feature, which affects the way your keyboard works.") :
-                : _("You just pressed two keys at once, or pressed the Shift key 5 times in a row. " +
+                   _("You just pressed two keys at once, or pressed the Shift key 5 times in a row. " +
-                  "This turns off the Sticky Keys feature, which affects the way your keyboard works.");
+                     "This turns off the Sticky Keys feature, which affects the way your keyboard works.");
        } else {
            return;
        }
@@ -61,7 +60,7 @@ class KbdA11yDialog extends GObject.Object {
                               dialog.close();
                           },
                           default: enabled,
-                           key: !enabled ? Clutter.KEY_Escape : null });
+                           key: !enabled ? Clutter.Escape : null });
        dialog.addButton({ label: enabled ? _("Turn Off") : _("Leave Off"),
                           action: () => {
@@ -69,7 +68,7 @@ class KbdA11yDialog extends GObject.Object {
                               dialog.close();
                           },
                           default: !enabled,
-                           key: enabled ? Clutter.KEY_Escape : null });
+                           key: enabled ? Clutter.Escape : null });
        dialog.open();
    }
--- a/js/ui/keyboard.js
+++ b/js/ui/keyboard.js
--- a/js/ui/layout.js
+++ b/js/ui/layout.js
@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported MonitorConstraint, LayoutManager */
 const { Clutter, Gio, GLib, GObject, Meta, Shell, St } = imports.gi;
 const Signals = imports.signals;
@@ -11,11 +10,12 @@ const LoginManager = imports.misc.loginManager;
 const DND = imports.ui.dnd;
 const Main = imports.ui.main;
 const Params = imports.misc.params;
 const Tweener = imports.ui.tweener;
 const Ripples = imports.ui.ripples;
-var STARTUP_ANIMATION_TIME = 500;
+var STARTUP_ANIMATION_TIME = 0.5;
-var KEYBOARD_ANIMATION_TIME = 150;
+var KEYBOARD_ANIMATION_TIME = 0.15;
-var BACKGROUND_FADE_ANIMATION_TIME = 1000;
+var BACKGROUND_FADE_ANIMATION_TIME = 1.0;
 var HOT_CORNER_PRESSURE_THRESHOLD = 100; // pixels
 var HOT_CORNER_PRESSURE_TIMEOUT = 1000; // ms
@@ -44,7 +44,7 @@ var MonitorConstraint = GObject.registerClass({
        'work-area': GObject.ParamSpec.boolean('work-area',
                                               'Work-area', 'Track monitor\'s work-area',
                                               GObject.ParamFlags.READABLE | GObject.ParamFlags.WRITABLE,
-                                               false),
+                                               false)
    },
 }, class MonitorConstraint extends Clutter.Constraint {
    _init(props) {
@@ -80,12 +80,10 @@ var MonitorConstraint = GObject.registerClass({
        this.notify('index');
    }
    // eslint-disable-next-line camelcase
    get work_area() {
        return this._workArea;
    }
    // eslint-disable-next-line camelcase
    set work_area(v) {
        if (v == this._workArea)
            return;
@@ -167,12 +165,12 @@ var Monitor = class Monitor {
 const UiActor = GObject.registerClass(
 class UiActor extends St.Widget {
-    vfunc_get_preferred_width(_forHeight) {
+    vfunc_get_preferred_width (forHeight) {
        let width = global.stage.width;
        return [width, width];
    }
-    vfunc_get_preferred_height(_forWidth) {
+    vfunc_get_preferred_height (forWidth) {
        let height = global.stage.height;
        return [height, height];
    }
@@ -181,7 +179,7 @@ class UiActor extends St.Widget {
 const defaultParams = {
    trackFullscreen: false,
    affectsStruts: false,
-    affectsInputRegion: true,
+    affectsInputRegion: true
 };
 var LayoutManager = GObject.registerClass({
@@ -189,13 +187,12 @@ var LayoutManager = GObject.registerClass({
               'startup-complete': {},
               'startup-prepared': {},
               'monitors-changed': {},
               'system-modal-opened': {},
               'keyboard-visible-changed': { param_types: [GObject.TYPE_BOOLEAN] } },
 }, class LayoutManager extends GObject.Object {
    _init() {
        super._init();
-        this._rtl = Clutter.get_default_text_direction() == Clutter.TextDirection.RTL;
+        this._rtl = (Clutter.get_default_text_direction() == Clutter.TextDirection.RTL);
        this.monitors = [];
        this.primaryMonitor = null;
        this.primaryIndex = -1;
@@ -213,6 +210,11 @@ var LayoutManager = GObject.registerClass({
        this._startingUp = true;
        this._pendingLoadBackground = false;
        // We don't want to paint the stage background color because either
        // the SystemBackground we create or the MetaBackgroundActor inside
        // global.window_group covers the entirety of the screen.
        global.stage.no_clear_hint = true;
        // Set up stage hierarchy to group all UI actors under one container.
        this.uiGroup = new UiActor({ name: 'uiGroup' });
        this.uiGroup.set_flags(Clutter.ActorFlags.NO_LAYOUT);
@@ -234,12 +236,11 @@ var LayoutManager = GObject.registerClass({
                                             reactive: true });
        this.addChrome(this.overviewGroup);
-        this.screenShieldGroup = new St.Widget({
+        this.screenShieldGroup = new St.Widget({ name: 'screenShieldGroup',
-            name: 'screenShieldGroup',
+                                                 visible: false,
-            visible: false,
+                                                 clip_to_allocation: true,
-            clip_to_allocation: true,
+                                                 layout_manager: new Clutter.BinLayout(),
-            layout_manager: new Clutter.BinLayout(),
+                                               });
        });
        this.addChrome(this.screenShieldGroup);
        this.panelBox = new St.BoxLayout({ name: 'panelBox',
@@ -270,11 +271,11 @@ var LayoutManager = GObject.registerClass({
        this._backgroundGroup = new Meta.BackgroundGroup();
        global.window_group.add_child(this._backgroundGroup);
-        global.window_group.set_child_below_sibling(this._backgroundGroup, null);
+        this._backgroundGroup.lower_bottom();
        this._bgManagers = [];
        this._interfaceSettings = new Gio.Settings({
-            schema_id: 'org.gnome.desktop.interface',
+            schema_id: 'org.gnome.desktop.interface'
        });
        this._interfaceSettings.connect('changed::enable-hot-corners',
@@ -340,11 +341,10 @@ var LayoutManager = GObject.registerClass({
        this.monitors = [];
        let nMonitors = display.get_n_monitors();
-        for (let i = 0; i < nMonitors; i++) {
+        for (let i = 0; i < nMonitors; i++)
            this.monitors.push(new Monitor(i,
                                           display.get_monitor_geometry(i),
                                           display.get_monitor_scale(i)));
        }
        if (nMonitors == 0) {
            this.primaryIndex = this.bottomIndex = -1;
@@ -447,7 +447,7 @@ var LayoutManager = GObject.registerClass({
    _createBackgroundManager(monitorIndex) {
        let bgManager = new Background.BackgroundManager({ container: this._backgroundGroup,
                                                           layoutManager: this,
-                                                           monitorIndex });
+                                                           monitorIndex: monitorIndex });
        bgManager.connect('changed', this._addBackgroundMenu.bind(this));
        this._addBackgroundMenu(bgManager);
@@ -461,17 +461,17 @@ var LayoutManager = GObject.registerClass({
                let backgroundActor = this._bgManagers[i].backgroundActor;
                backgroundActor.show();
                backgroundActor.opacity = 0;
-                backgroundActor.ease({
+                Tweener.addTween(backgroundActor,
-                    opacity: 255,
+                                 { opacity: 255,
-                    duration: BACKGROUND_FADE_ANIMATION_TIME,
+                                   time: BACKGROUND_FADE_ANIMATION_TIME,
-                    mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                                   transition: 'easeOutQuad' });
                });
            }
        }
    }
    _updateBackgrounds() {
-        for (let i = 0; i < this._bgManagers.length; i++)
+        let i;
        for (i = 0; i < this._bgManagers.length; i++)
            this._bgManagers[i].destroy();
        this._bgManagers = [];
@@ -602,17 +602,17 @@ var LayoutManager = GObject.registerClass({
            return;
        }
        this._systemBackground = new Background.SystemBackground();
-        this._systemBackground.hide();
+        this._systemBackground.actor.hide();
-        global.stage.insert_child_below(this._systemBackground, null);
+        global.stage.insert_child_below(this._systemBackground.actor, null);
        let constraint = new Clutter.BindConstraint({ source: global.stage,
                                                      coordinate: Clutter.BindCoordinate.ALL });
-        this._systemBackground.add_constraint(constraint);
+        this._systemBackground.actor.add_constraint(constraint);
        let signalId = this._systemBackground.connect('loaded', () => {
            this._systemBackground.disconnect(signalId);
-            this._systemBackground.show();
+            this._systemBackground.actor.show();
            global.stage.show();
            this._prepareStartupAnimation();
@@ -695,30 +695,30 @@ var LayoutManager = GObject.registerClass({
    }
    _startupAnimationGreeter() {
-        this.panelBox.ease({
+        Tweener.addTween(this.panelBox,
-            translation_y: 0,
+                         { translation_y: 0,
-            duration: STARTUP_ANIMATION_TIME,
+                           time: STARTUP_ANIMATION_TIME,
-            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                           transition: 'easeOutQuad',
-            onComplete: () => this._startupAnimationComplete(),
+                           onComplete: this._startupAnimationComplete,
-        });
+                           onCompleteScope: this });
    }
    _startupAnimationSession() {
-        this.uiGroup.ease({
+        Tweener.addTween(this.uiGroup,
-            scale_x: 1,
+                         { scale_x: 1,
-            scale_y: 1,
+                           scale_y: 1,
-            opacity: 255,
+                           opacity: 255,
-            duration: STARTUP_ANIMATION_TIME,
+                           time: STARTUP_ANIMATION_TIME,
-            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                           transition: 'easeOutQuad',
-            onComplete: () => this._startupAnimationComplete(),
+                           onComplete: this._startupAnimationComplete,
-        });
+                           onCompleteScope: this });
    }
    _startupAnimationComplete() {
        this._coverPane.destroy();
        this._coverPane = null;
-        this._systemBackground.destroy();
+        this._systemBackground.actor.destroy();
        this._systemBackground = null;
        this._startingUp = false;
@@ -737,15 +737,14 @@ var LayoutManager = GObject.registerClass({
    showKeyboard() {
        this.keyboardBox.show();
-        this.keyboardBox.ease({
+        Tweener.addTween(this.keyboardBox,
-            anchor_y: this.keyboardBox.height,
+                         { anchor_y: this.keyboardBox.height,
-            opacity: 255,
+                           opacity: 255,
-            duration: KEYBOARD_ANIMATION_TIME,
+                           time: KEYBOARD_ANIMATION_TIME,
-            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                           transition: 'easeOutQuad',
-            onComplete: () => {
+                           onComplete: this._showKeyboardComplete,
-                this._showKeyboardComplete();
+                           onCompleteScope: this
-            },
+                         });
        });
        this.emit('keyboard-visible-changed', true);
    }
@@ -764,15 +763,14 @@ var LayoutManager = GObject.registerClass({
            this.keyboardBox.disconnect(this._keyboardHeightNotifyId);
            this._keyboardHeightNotifyId = 0;
        }
-        this.keyboardBox.ease({
+        Tweener.addTween(this.keyboardBox,
-            anchor_y: 0,
+                         { anchor_y: 0,
-            opacity: 0,
+                           opacity: 0,
-            duration: immediate ? 0 : KEYBOARD_ANIMATION_TIME,
+                           time: immediate ? 0 : KEYBOARD_ANIMATION_TIME,
-            mode: Clutter.AnimationMode.EASE_IN_QUAD,
+                           transition: 'easeInQuad',
-            onComplete: () => {
+                           onComplete: this._hideKeyboardComplete,
-                this._hideKeyboardComplete();
+                           onCompleteScope: this
-            },
+                         });
        });
        this.emit('keyboard-visible-changed', false);
    }
@@ -851,13 +849,12 @@ var LayoutManager = GObject.registerClass({
            index = this._findActor(ancestor);
        }
-        let ancestorData = ancestor
+        let ancestorData = ancestor ? this._trackedActors[index]
-            ? this._trackedActors[index]
+                                    : defaultParams;
            : defaultParams;
        // We can't use Params.parse here because we want to drop
        // the extra values like ancestorData.actor
        for (let prop in defaultParams) {
-            if (!Object.prototype.hasOwnProperty.call(params, prop))
+            if (!params.hasOwnProperty(prop))
                params[prop] = ancestorData[prop];
        }
@@ -957,7 +954,7 @@ var LayoutManager = GObject.registerClass({
    findIndexForActor(actor) {
        let [x, y] = actor.get_transformed_position();
        let [w, h] = actor.get_transformed_size();
-        let rect = new Meta.Rectangle({ x, y, width: w, height: h });
+        let rect = new Meta.Rectangle({ x: x, y: y, width: w, height: h });
        return global.display.get_monitor_index_for_rect(rect);
    }
@@ -972,10 +969,9 @@ var LayoutManager = GObject.registerClass({
        if (this._startingUp)
            return;
-        if (!this._updateRegionIdle) {
+        if (!this._updateRegionIdle)
            this._updateRegionIdle = Meta.later_add(Meta.LaterType.BEFORE_REDRAW,
                                                    this._updateRegions.bind(this));
        }
    }
    _getWindowActorsForWorkspace(workspace) {
@@ -1012,6 +1008,11 @@ var LayoutManager = GObject.registerClass({
        if (Main.modalCount > 0)
            return GLib.SOURCE_REMOVE;
        // Bug workaround - get_transformed_position()/get_transformed_size() don't work after
        // a change in stage size until the first pick or paint.
        // https://bugzilla.gnome.org/show_bug.cgi?id=761565
        global.stage.get_actor_at_pos(Clutter.PickMode.ALL, 0, 0);
        let rects = [], struts = [], i;
        let isPopupMenuVisible = global.top_window_group.get_children().some(isPopupMetaWindow);
        let wantsInputRegion = !isPopupMenuVisible;
@@ -1029,7 +1030,7 @@ var LayoutManager = GObject.registerClass({
            h = Math.round(h);
            if (actorData.affectsInputRegion && wantsInputRegion && actorData.actor.get_paint_visibility())
-                rects.push(new Meta.Rectangle({ x, y, width: w, height: h }));
+                rects.push(new Meta.Rectangle({ x: x, y: y, width: w, height: h }));
            let monitor = null;
            if (actorData.affectsStruts)
@@ -1067,20 +1068,19 @@ var LayoutManager = GObject.registerClass({
                        side = Meta.Side.RIGHT;
                    else
                        continue;
-                } else if (x1 <= monitor.x) {
+                } else if (x1 <= monitor.x)
                    side = Meta.Side.LEFT;
-                } else if (y1 <= monitor.y) {
+                else if (y1 <= monitor.y)
                    side = Meta.Side.TOP;
-                } else if (x2 >= monitor.x + monitor.width) {
+                else if (x2 >= monitor.x + monitor.width)
                    side = Meta.Side.RIGHT;
-                } else if (y2 >= monitor.y + monitor.height) {
+                else if (y2 >= monitor.y + monitor.height)
                    side = Meta.Side.BOTTOM;
-                } else {
+                else
                    continue;
                }
                let strutRect = new Meta.Rectangle({ x: x1, y: y1, width: x2 - x1, height: y2 - y1 });
-                let strut = new Meta.Strut({ rect: strutRect, side });
+                let strut = new Meta.Strut({ rect: strutRect, side: side });
                struts.push(strut);
            }
        }
@@ -1109,11 +1109,8 @@ var LayoutManager = GObject.registerClass({
 //
 // This class manages a "hot corner" that can toggle switching to
 // overview.
-var HotCorner = GObject.registerClass(
+var HotCorner = class HotCorner {
-class HotCorner extends Clutter.Actor {
+    constructor(layoutManager, monitor, x, y) {
    _init(layoutManager, monitor, x, y) {
        super._init();
        // We use this flag to mark the case where the user has entered the
        // hot corner and has not left both the hot corner and a surrounding
        // guard area (the "environs"). This avoids triggering the hot corner
@@ -1142,8 +1139,6 @@ class HotCorner extends Clutter.Actor {
        this._ripples = new Ripples.Ripples(px, py, 'ripple-box');
        this._ripples.addTo(layoutManager.uiGroup);
        this.connect('destroy', this._onDestroy.bind(this));
    }
    setBarrierSize(size) {
@@ -1183,14 +1178,11 @@ class HotCorner extends Clutter.Actor {
    _setupFallbackCornerIfNeeded(layoutManager) {
        if (!global.display.supports_extended_barriers()) {
-            this.set({
+            this.actor = new Clutter.Actor({ name: 'hot-corner-environs',
-                name: 'hot-corner-environs',
+                                             x: this._x, y: this._y,
-                x: this._x,
+                                             width: 3,
-                y: this._y,
+                                             height: 3,
-                width: 3,
+                                             reactive: true });
                height: 3,
                reactive: true,
            });
            this._corner = new Clutter.Actor({ name: 'hot-corner',
                                               width: 1,
@@ -1199,16 +1191,19 @@ class HotCorner extends Clutter.Actor {
                                               reactive: true });
            this._corner._delegate = this;
-            this.add_child(this._corner);
+            this.actor.add_child(this._corner);
-            layoutManager.addChrome(this);
+            layoutManager.addChrome(this.actor);
            if (Clutter.get_default_text_direction() == Clutter.TextDirection.RTL) {
-                this._corner.set_position(this.width - this._corner.width, 0);
+                this._corner.set_position(this.actor.width - this._corner.width, 0);
-                this.set_anchor_point_from_gravity(Clutter.Gravity.NORTH_EAST);
+                this.actor.set_anchor_point_from_gravity(Clutter.Gravity.NORTH_EAST);
            } else {
                this._corner.set_position(0, 0);
            }
            this.actor.connect('leave-event',
                               this._onEnvironsLeft.bind(this));
            this._corner.connect('enter-event',
                                 this._onCornerEntered.bind(this));
            this._corner.connect('leave-event',
@@ -1216,12 +1211,13 @@ class HotCorner extends Clutter.Actor {
        }
    }
-    _onDestroy() {
+    destroy() {
        this.setBarrierSize(0);
        this._pressureBarrier.destroy();
        this._pressureBarrier = null;
-        this._ripples.destroy();
+        if (this.actor)
            this.actor.destroy();
    }
    _toggleOverview() {
@@ -1234,7 +1230,7 @@ class HotCorner extends Clutter.Actor {
        }
    }
-    handleDragOver(source, _actor, _x, _y, _time) {
+    handleDragOver(source, actor, x, y, time) {
        if (source != Main.xdndHandler)
            return DND.DragMotionResult.CONTINUE;
@@ -1252,18 +1248,18 @@ class HotCorner extends Clutter.Actor {
    }
    _onCornerLeft(actor, event) {
-        if (event.get_related() != this)
+        if (event.get_related() != this.actor)
            this._entered = false;
        // Consume event, otherwise this will confuse onEnvironsLeft
        return Clutter.EVENT_STOP;
    }
-    vfunc_leave_event(crossingEvent) {
+    _onEnvironsLeft(actor, event) {
-        if (crossingEvent.related != this._corner)
+        if (event.get_related() != this._corner)
            this._entered = false;
        return Clutter.EVENT_PROPAGATE;
    }
-});
+};
 var PressureBarrier = class PressureBarrier {
    constructor(threshold, timeout, actionMode) {
@@ -1335,7 +1331,7 @@ var PressureBarrier = class PressureBarrier {
        let threshold = this._lastTime - this._timeout;
        while (i < this._barrierEvents.length) {
-            let [time, distance_] = this._barrierEvents[i];
+            let [time, distance] = this._barrierEvents[i];
            if (time >= threshold)
                break;
            i++;
@@ -1344,14 +1340,14 @@ var PressureBarrier = class PressureBarrier {
        let firstNewEvent = i;
        for (i = 0; i < firstNewEvent; i++) {
-            let [time_, distance] = this._barrierEvents[i];
+            let [time, distance] = this._barrierEvents[i];
            this._currentPressure -= distance;
        }
        this._barrierEvents = this._barrierEvents.slice(firstNewEvent);
    }
-    _onBarrierLeft(barrier, _event) {
+    _onBarrierLeft(barrier, event) {
        barrier._isHit = false;
        if (this._barriers.every(b => !b._isHit)) {
            this._reset();
--- a/js/ui/lightbox.js
+++ b/js/ui/lightbox.js
@@ -1,9 +1,10 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported Lightbox */
 const { Clutter, GObject, Shell, St } = imports.gi;
 const Signals = imports.signals;
 const Params = imports.misc.params;
 const Tweener = imports.ui.tweener;
 var DEFAULT_FADE_FACTOR = 0.4;
 var VIGNETTE_BRIGHTNESS = 0.2;
@@ -22,31 +23,16 @@ t = clamp(t, 0.0, 1.0);\n\
 float pixel_brightness = mix(1.0, 1.0 - vignette_sharpness, t);\n\
 cogl_color_out.a = cogl_color_out.a * (1 - pixel_brightness * brightness);';
-var RadialShaderEffect = GObject.registerClass({
+var RadialShaderQuad = GObject.registerClass(
-    Properties: {
+class RadialShaderQuad extends Shell.GLSLQuad {
        'brightness': GObject.ParamSpec.float(
            'brightness', 'brightness', 'brightness',
            GObject.ParamFlags.READWRITE,
            0, 1, 1
        ),
        'sharpness': GObject.ParamSpec.float(
            'sharpness', 'sharpness', 'sharpness',
            GObject.ParamFlags.READWRITE,
            0, 1, 0
        ),
    },
 }, class RadialShaderEffect extends Shell.GLSLEffect {
    _init(params) {
        this._brightness = undefined;
        this._sharpness = undefined;
        super._init(params);
        this._brightnessLocation = this.get_uniform_location('brightness');
        this._sharpnessLocation = this.get_uniform_location('vignette_sharpness');
        this.brightness = 1.0;
-        this.sharpness = 0.0;
+        this.vignetteSharpness = 0.0;
    }
    vfunc_build_pipeline() {
@@ -59,25 +45,19 @@ var RadialShaderEffect = GObject.registerClass({
    }
    set brightness(v) {
        if (this._brightness == v)
            return;
        this._brightness = v;
        this.set_uniform_float(this._brightnessLocation,
                               1, [this._brightness]);
        this.notify('brightness');
    }
-    get sharpness() {
+    get vignetteSharpness() {
        return this._sharpness;
    }
-    set sharpness(v) {
+    set vignetteSharpness(v) {
        if (this._sharpness == v)
            return;
        this._sharpness = v;
        this.set_uniform_float(this._sharpnessLocation,
                               1, [this._sharpness]);
        this.notify('sharpness');
    }
 });
@@ -88,8 +68,8 @@ var RadialShaderEffect = GObject.registerClass({
 *           - inhibitEvents: whether to inhibit events for @container
 *           - width: shade actor width
 *           - height: shade actor height
- *           - fadeFactor: fading opacity factor
+ *           - fadeInTime: seconds used to fade in
- *           - radialEffect: whether to enable the GLSL radial effect
+ *           - fadeOutTime: seconds used to fade out
 *
 * Lightbox creates a dark translucent "shade" actor to hide the
 * contents of @container, and allows you to specify particular actors
@@ -105,49 +85,44 @@ var RadialShaderEffect = GObject.registerClass({
 * @container and will track any changes in its size. You can override
 * this by passing an explicit width and height in @params.
 */
-var Lightbox = GObject.registerClass({
+var Lightbox = class Lightbox {
-    Properties: {
+    constructor(container, params) {
-        'active': GObject.ParamSpec.boolean(
+        params = Params.parse(params, { inhibitEvents: false,
-            'active', 'active', 'active', GObject.ParamFlags.READABLE, false),
+                                        width: null,
-    },
+                                        height: null,
-}, class Lightbox extends St.Bin {
+                                        fadeFactor: DEFAULT_FADE_FACTOR,
-    _init(container, params) {
+                                        radialEffect: false,
-        params = Params.parse(params, {
+                                      });
            inhibitEvents: false,
            width: null,
            height: null,
            fadeFactor: DEFAULT_FADE_FACTOR,
            radialEffect: false,
        });
        super._init({
            reactive: params.inhibitEvents,
            width: params.width,
            height: params.height,
            visible: false,
        });
        this._active = false;
        this._container = container;
        this._children = container.get_children();
        this._fadeFactor = params.fadeFactor;
        this._radialEffect = Clutter.feature_available(Clutter.FeatureFlags.SHADERS_GLSL) && params.radialEffect;
        if (this._radialEffect)
-            this.add_effect(new RadialShaderEffect({ name: 'radial' }));
+            this.actor = new RadialShaderQuad({ x: 0,
                                                y: 0,
                                                reactive: params.inhibitEvents });
        else
-            this.set({ opacity: 0, style_class: 'lightbox' });
+            this.actor = new St.Bin({ x: 0,
                                      y: 0,
                                      opacity: 0,
                                      style_class: 'lightbox',
                                      reactive: params.inhibitEvents });
-        container.add_actor(this);
+        container.add_actor(this.actor);
-        container.set_child_above_sibling(this, null);
+        this.actor.raise_top();
        this.actor.hide();
        this.shown = false;
-        this.connect('destroy', this._onDestroy.bind(this));
+        this.actor.connect('destroy', this._onDestroy.bind(this));
-        if (!params.width || !params.height) {
+        if (params.width && params.height) {
-            this.add_constraint(new Clutter.BindConstraint({
+            this.actor.width = params.width;
-                source: container,
+            this.actor.height = params.height;
-                coordinate: Clutter.BindCoordinate.ALL,
+        } else {
-            }));
+            let constraint = new Clutter.BindConstraint({ source: container,
                                                          coordinate: Clutter.BindCoordinate.ALL });
            this.actor.add_constraint(constraint);
        }
        this._actorAddedSignalId = container.connect('actor-added', this._actorAdded.bind(this));
@@ -156,20 +131,16 @@ var Lightbox = GObject.registerClass({
        this._highlighted = null;
    }
    get active() {
        return this._active;
    }
    _actorAdded(container, newChild) {
        let children = this._container.get_children();
-        let myIndex = children.indexOf(this);
+        let myIndex = children.indexOf(this.actor);
        let newChildIndex = children.indexOf(newChild);
        if (newChildIndex > myIndex) {
            // The child was added above the shade (presumably it was
            // made the new top-most child). Move it below the shade,
            // and add it to this._children as the new topmost actor.
-            this._container.set_child_above_sibling(this, newChild);
+            newChild.lower(this.actor);
            this._children.push(newChild);
        } else if (newChildIndex == 0) {
            // Bottom of stack
@@ -182,55 +153,61 @@ var Lightbox = GObject.registerClass({
        }
    }
-    lightOn(fadeInTime) {
+    show(fadeInTime) {
-        this.remove_all_transitions();
+        fadeInTime = fadeInTime || 0;
        let easeProps = {
            duration: fadeInTime || 0,
            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
        };
        let onComplete = () => {
            this._active = true;
            this.notify('active');
        };
        this.show();
        Tweener.removeTweens(this.actor);
        if (this._radialEffect) {
-            this.ease_property(
+            Tweener.addTween(this.actor,
-                '@effects.radial.brightness', VIGNETTE_BRIGHTNESS, easeProps);
+                             { brightness: VIGNETTE_BRIGHTNESS,
-            this.ease_property(
+                               vignetteSharpness: VIGNETTE_SHARPNESS,
-                '@effects.radial.sharpness', VIGNETTE_SHARPNESS,
+                               time: fadeInTime,
-                Object.assign({ onComplete }, easeProps));
+                               transition: 'easeOutQuad',
                               onComplete: () => {
                                   this.shown = true;
                                   this.emit('shown');
                               }
                             });
        } else {
-            this.ease(Object.assign(easeProps, {
+            Tweener.addTween(this.actor,
-                opacity: 255 * this._fadeFactor,
+                             { opacity: 255 * this._fadeFactor,
-                onComplete,
+                               time: fadeInTime,
-            }));
+                               transition: 'easeOutQuad',
                               onComplete: () => {
                                   this.shown = true;
                                   this.emit('shown');
                               }
                             });
        }
        this.actor.show();
    }
-    lightOff(fadeOutTime) {
+    hide(fadeOutTime) {
-        this.remove_all_transitions();
+        fadeOutTime = fadeOutTime || 0;
        this._active = false;
        this.notify('active');
        let easeProps = {
            duration: fadeOutTime || 0,
            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
        };
        let onComplete = () => this.hide();
        this.shown = false;
        Tweener.removeTweens(this.actor);
        if (this._radialEffect) {
-            this.ease_property(
+            Tweener.addTween(this.actor,
-                '@effects.radial.brightness', 1.0, easeProps);
+                             { brightness: 1.0,
-            this.ease_property(
+                               vignetteSharpness: 0.0,
-                '@effects.radial.sharpness', 0.0, Object.assign({ onComplete }, easeProps));
+                               opacity: 0,
                               time: fadeOutTime,
                               transition: 'easeOutQuad',
                               onComplete: () => {
                                   this.actor.hide();
                               }
                             });
        } else {
-            this.ease(Object.assign(easeProps, { opacity: 0, onComplete }));
+            Tweener.addTween(this.actor,
                             { opacity: 0,
                               time: fadeOutTime,
                               transition: 'easeOutQuad',
                               onComplete: () => {
                                   this.actor.hide();
                               }
                             });
        }
    }
@@ -245,7 +222,7 @@ var Lightbox = GObject.registerClass({
    /**
     * highlight:
-     * @param {Clutter.Actor=} window: actor to highlight
+     * @window: actor to highlight
     *
     * Highlights the indicated actor and unhighlights any other
     * currently-highlighted actor. With no arguments or a false/null
@@ -261,12 +238,12 @@ var Lightbox = GObject.registerClass({
        // case we may need to indicate some *other* actor as the new
        // sibling of the to-be-lowered one.
-        let below = this;
+        let below = this.actor;
        for (let i = this._children.length - 1; i >= 0; i--) {
            if (this._children[i] == window)
-                this._container.set_child_above_sibling(this._children[i], null);
+                this._children[i].raise_top();
            else if (this._children[i] == this._highlighted)
-                this._container.set_child_below_sibling(this._children[i], below);
+                this._children[i].lower(below);
            else
                below = this._children[i];
        }
@@ -274,6 +251,15 @@ var Lightbox = GObject.registerClass({
        this._highlighted = window;
    }
    /**
     * destroy:
     *
     * Destroys the lightbox.
     */
    destroy() {
        this.actor.destroy();
    }
    /**
     * _onDestroy:
     *
@@ -281,15 +267,10 @@ var Lightbox = GObject.registerClass({
     * by destroying its container or by explicitly calling this.destroy().
     */
    _onDestroy() {
-        if (this._actorAddedSignalId) {
+        this._container.disconnect(this._actorAddedSignalId);
-            this._container.disconnect(this._actorAddedSignalId);
+        this._container.disconnect(this._actorRemovedSignalId);
            this._actorAddedSignalId = 0;
        }
        if (this._actorRemovedSignalId) {
            this._container.disconnect(this._actorRemovedSignalId);
            this._actorRemovedSignalId = 0;
        }
        this.highlight(null);
    }
-});
+};
 Signals.addSignalMethods(Lightbox.prototype);
--- a/js/ui/locatePointer.js
+++ b/js/ui/locatePointer.js
@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported LocatePointer */
 const { Gio } = imports.gi;
 const Ripples = imports.ui.ripples;
@@ -11,29 +10,15 @@ const LOCATE_POINTER_SCHEMA = "org.gnome.desktop.interface";
 var LocatePointer = class {
    constructor() {
        this._settings = new Gio.Settings({ schema_id: LOCATE_POINTER_SCHEMA });
-        this._settings.connect(`changed::${LOCATE_POINTER_KEY}`, () => this._syncEnabled());
+        this._ripples = new Ripples.Ripples(0.5, 0.5, 'ripple-pointer-location');
-        this._syncEnabled();
+        this._ripples.addTo(Main.uiGroup);
    }
    _syncEnabled() {
        let enabled = this._settings.get_boolean(LOCATE_POINTER_KEY);
        if (enabled == !!this._ripples)
            return;
        if (enabled) {
            this._ripples = new Ripples.Ripples(0.5, 0.5, 'ripple-pointer-location');
            this._ripples.addTo(Main.uiGroup);
        } else {
            this._ripples.destroy();
            this._ripples = null;
        }
    }
    show() {
-        if (!this._ripples)
+        if (!this._settings.get_boolean(LOCATE_POINTER_KEY))
            return;
-        let [x, y] = global.get_pointer();
+        let [x, y, mods] = global.get_pointer();
        this._ripples.playAnimation(x, y);
    }
 };
--- a/js/ui/lookingGlass.js
+++ b/js/ui/lookingGlass.js
@@ -1,24 +1,26 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported LookingGlass */
-const { Clutter, Cogl, Gio, GLib, GObject,
+const { Clutter, Cogl, Gio, GLib,
-        Graphene, Meta, Pango, Shell, St } = imports.gi;
+        GObject, Meta, Pango, Shell, St } = imports.gi;
 const Mainloop = imports.mainloop;
 const Signals = imports.signals;
 const System = imports.system;
 const History = imports.misc.history;
 const ExtensionSystem = imports.ui.extensionSystem;
 const ExtensionUtils = imports.misc.extensionUtils;
 const ShellEntry = imports.ui.shellEntry;
 const Tweener = imports.ui.tweener;
 const Main = imports.ui.main;
 const JsParse = imports.misc.jsParse;
 const { ExtensionState } = ExtensionUtils;
 const CHEVRON = '>>> ';
 /* Imports...feel free to add here as needed */
 var commandHeader = 'const { Clutter, Gio, GLib, GObject, Meta, Shell, St } = imports.gi; ' +
                    'const Main = imports.ui.main; ' +
                    'const Mainloop = imports.mainloop; ' +
                    'const Tweener = imports.ui.tweener; ' +
                    /* Utility functions...we should probably be able to use these
                     * in the shell core code too. */
                    'const stage = global.stage; ' +
@@ -30,11 +32,9 @@ var commandHeader = 'const { Clutter, Gio, GLib, GObject, Meta, Shell, St } = im
 const HISTORY_KEY = 'looking-glass-history';
 // Time between tabs for them to count as a double-tab event
 var AUTO_COMPLETE_DOUBLE_TAB_DELAY = 500;
-var AUTO_COMPLETE_SHOW_COMPLETION_ANIMATION_DURATION = 200;
+var AUTO_COMPLETE_SHOW_COMPLETION_ANIMATION_DURATION = 0.2;
 var AUTO_COMPLETE_GLOBAL_KEYWORDS = _getAutoCompleteGlobalKeywords();
 const LG_ANIMATION_TIME = 500;
 function _getAutoCompleteGlobalKeywords() {
    const keywords = ['true', 'false', 'null', 'new'];
    // Don't add the private properties of window (i.e., ones starting with '_')
@@ -54,9 +54,9 @@ var AutoComplete = class AutoComplete {
    }
    _processCompletionRequest(event) {
-        if (event.completions.length == 0)
+        if (event.completions.length == 0) {
            return;
-
+        }
        // Unique match = go ahead and complete; multiple matches + single tab = complete the common starting string;
        // multiple matches + double tab = emit a suggest event with all possible options
        if (event.completions.length == 1) {
@@ -78,20 +78,20 @@ var AutoComplete = class AutoComplete {
    _entryKeyPressEvent(actor, event) {
        let cursorPos = this._entry.clutter_text.get_cursor_position();
        let text = this._entry.get_text();
-        if (cursorPos != -1)
+        if (cursorPos != -1) {
            text = text.slice(0, cursorPos);
-
+        }
-        if (event.get_key_symbol() == Clutter.KEY_Tab) {
+        if (event.get_key_symbol() == Clutter.Tab) {
            let [completions, attrHead] = JsParse.getCompletions(text, commandHeader, AUTO_COMPLETE_GLOBAL_KEYWORDS);
            let currTime = global.get_current_time();
            if ((currTime - this._lastTabTime) < AUTO_COMPLETE_DOUBLE_TAB_DELAY) {
                this._processCompletionRequest({ tabType: 'double',
-                                                 completions,
+                                                 completions: completions,
-                                                 attrHead });
+                                                 attrHead: attrHead });
            } else {
                this._processCompletionRequest({ tabType: 'single',
-                                                 completions,
+                                                 completions: completions,
-                                                 attrHead });
+                                                 attrHead: attrHead });
            }
            this._lastTabTime = currTime;
        }
@@ -110,14 +110,9 @@ var AutoComplete = class AutoComplete {
 Signals.addSignalMethods(AutoComplete.prototype);
-var Notebook = GObject.registerClass({
+var Notebook = class Notebook {
-    Signals: { 'selection': { param_types: [Clutter.Actor.$gtype] } },
+    constructor() {
-}, class Notebook extends St.BoxLayout {
+        this.actor = new St.BoxLayout({ vertical: true });
    _init() {
        super._init({
            vertical: true,
            y_expand: true,
        });
        this.tabControls = new St.BoxLayout({ style_class: 'labels' });
@@ -134,21 +129,21 @@ var Notebook = GObject.registerClass({
            this.selectChild(child);
            return true;
        });
-        labelBox.add_child(label);
+        labelBox.add(label, { expand: true });
        this.tabControls.add(labelBox);
-        let scrollview = new St.ScrollView({ y_expand: true });
+        let scrollview = new St.ScrollView({ x_fill: true, y_fill: true });
        scrollview.get_hscroll_bar().hide();
        scrollview.add_actor(child);
-        let tabData = { child,
+        let tabData = { child: child,
-                        labelBox,
+                        labelBox: labelBox,
-                        label,
+                        label: label,
                        scrollView: scrollview,
                        _scrollToBottom: false };
        this._tabs.push(tabData);
        scrollview.hide();
-        this.add_child(scrollview);
+        this.actor.add(scrollview, { expand: true });
        let vAdjust = scrollview.vscroll.adjustment;
        vAdjust.connect('changed', () => this._onAdjustScopeChanged(tabData));
@@ -179,7 +174,7 @@ var Notebook = GObject.registerClass({
        // Focus the new tab before unmapping the old one
        let tabData = this._tabs[index];
        if (!tabData.scrollView.navigate_focus(null, St.DirectionType.TAB_FORWARD, false))
-            this.grab_key_focus();
+            this.actor.grab_key_focus();
        this._unselect();
@@ -224,23 +219,26 @@ var Notebook = GObject.registerClass({
    nextTab() {
        let nextIndex = this._selectedIndex;
-        if (nextIndex < this._tabs.length - 1)
+        if (nextIndex < this._tabs.length - 1) {
            ++nextIndex;
        }
        this.selectIndex(nextIndex);
    }
    prevTab() {
        let prevIndex = this._selectedIndex;
-        if (prevIndex > 0)
+        if (prevIndex > 0) {
            --prevIndex;
        }
        this.selectIndex(prevIndex);
    }
-});
+};
 Signals.addSignalMethods(Notebook.prototype);
 function objectToString(o) {
-    if (typeof o == typeof objectToString) {
+    if (typeof(o) == typeof(objectToString)) {
        // special case this since the default is way, way too verbose
        return '<js function>';
    } else {
@@ -248,63 +246,57 @@ function objectToString(o) {
    }
 }
-var ObjLink = GObject.registerClass(
+var ObjLink = class ObjLink {
-class ObjLink extends St.Button {
+    constructor(lookingGlass, o, title) {
    _init(lookingGlass, o, title) {
        let text;
        if (title)
            text = title;
        else
            text = objectToString(o);
        text = GLib.markup_escape_text(text, -1);
        super._init({
            reactive: true,
            track_hover: true,
            style_class: 'shell-link',
            label: text,
            x_align: Clutter.ActorAlign.START,
        });
        this.get_child().single_line_mode = true;
        this._obj = o;
        this.actor = new St.Button({ reactive: true,
                                     track_hover: true,
                                     style_class: 'shell-link',
                                     label: text });
        this.actor.get_child().single_line_mode = true;
        this.actor.connect('clicked', this._onClicked.bind(this));
        this._lookingGlass = lookingGlass;
    }
-    vfunc_clicked() {
+    _onClicked(link) {
-        this._lookingGlass.inspectObject(this._obj, this);
+        this._lookingGlass.inspectObject(this._obj, this.actor);
    }
-});
+};
 var Result = GObject.registerClass(
 class Result extends St.BoxLayout {
    _init(lookingGlass, command, o, index) {
        super._init({ vertical: true });
 var Result = class Result {
    constructor(lookingGlass, command, o, index) {
        this.index = index;
        this.o = o;
        this.actor = new St.BoxLayout({ vertical: true });
        this._lookingGlass = lookingGlass;
        let cmdTxt = new St.Label({ text: command });
        cmdTxt.clutter_text.ellipsize = Pango.EllipsizeMode.END;
-        this.add(cmdTxt);
+        this.actor.add(cmdTxt);
        let box = new St.BoxLayout({});
-        this.add(box);
+        this.actor.add(box);
        let resultTxt = new St.Label({ text: `r(${index}) = ` });
        resultTxt.clutter_text.ellipsize = Pango.EllipsizeMode.END;
        box.add(resultTxt);
        let objLink = new ObjLink(this._lookingGlass, o);
-        box.add(objLink);
+        box.add(objLink.actor);
    }
-});
+};
-var WindowList = GObject.registerClass({
+var WindowList = class WindowList {
-}, class WindowList extends St.BoxLayout {
+    constructor(lookingGlass) {
-    _init(lookingGlass) {
+        this.actor = new St.BoxLayout({ name: 'Windows', vertical: true, style: 'spacing: 8px' });
        super._init({ name: 'Windows', vertical: true, style: 'spacing: 8px' });
        let tracker = Shell.WindowTracker.get_default();
-        this._updateId = Main.initializeDeferredWork(this, this._updateWindowList.bind(this));
+        this._updateId = Main.initializeDeferredWork(this.actor, this._updateWindowList.bind(this));
        global.display.connect('window-created', this._updateWindowList.bind(this));
        tracker.connect('tracked-windows-changed', this._updateWindowList.bind(this));
@@ -312,10 +304,7 @@ var WindowList = GObject.registerClass({
    }
    _updateWindowList() {
-        if (!this._lookingGlass.isOpen)
+        this.actor.destroy_all_children();
            return;
        this.destroy_all_children();
        let windows = global.get_window_actors();
        let tracker = Shell.WindowTracker.get_default();
        for (let i = 0; i < windows.length; i++) {
@@ -326,9 +315,9 @@ var WindowList = GObject.registerClass({
                metaWindow._lookingGlassManaged = true;
            }
            let box = new St.BoxLayout({ vertical: true });
-            this.add(box);
+            this.actor.add(box);
            let windowLink = new ObjLink(this._lookingGlass, metaWindow, metaWindow.title);
-            box.add_child(windowLink);
+            box.add(windowLink.actor, { x_align: St.Align.START, x_fill: false });
            let propsBox = new St.BoxLayout({ vertical: true, style: 'padding-left: 6px;' });
            box.add(propsBox);
            propsBox.add(new St.Label({ text: `wmclass: ${metaWindow.get_wm_class()}` }));
@@ -337,42 +326,32 @@ var WindowList = GObject.registerClass({
                let icon = app.create_icon_texture(22);
                let propBox = new St.BoxLayout({ style: 'spacing: 6px; ' });
                propsBox.add(propBox);
-                propBox.add_child(new St.Label({ text: 'app: ' }));
+                propBox.add(new St.Label({ text: 'app: ' }), { y_fill: false });
                let appLink = new ObjLink(this._lookingGlass, app, app.get_id());
-                propBox.add_child(appLink);
+                propBox.add(appLink.actor, { y_fill: false });
-                propBox.add_child(icon);
+                propBox.add(icon, { y_fill: false });
            } else {
                propsBox.add(new St.Label({ text: '<untracked>' }));
            }
        }
    }
 };
 Signals.addSignalMethods(WindowList.prototype);
-    update() {
+var ObjInspector = class ObjInspector {
-        this._updateWindowList();
+    constructor(lookingGlass) {
    }
 });
 var ObjInspector = GObject.registerClass(
 class ObjInspector extends St.ScrollView {
    _init(lookingGlass) {
        super._init({
            pivot_point: new Graphene.Point({ x: 0.5, y: 0.5 }),
        });
        this._obj = null;
        this._previousObj = null;
        this._parentList = [];
-        this.get_hscroll_bar().hide();
+        this.actor = new St.ScrollView({ pivot_point: new Clutter.Point({ x: 0.5, y: 0.5 }),
-        this._container = new St.BoxLayout({
+                                         x_fill: true, y_fill: true });
-            name: 'LookingGlassPropertyInspector',
+        this.actor.get_hscroll_bar().hide();
-            style_class: 'lg-dialog',
+        this._container = new St.BoxLayout({ name: 'LookingGlassPropertyInspector',
-            vertical: true,
+                                             style_class: 'lg-dialog',
-            x_expand: true,
+                                             vertical: true });
-            y_expand: true,
+        this.actor.add_actor(this._container);
        });
        this.add_actor(this._container);
        this._lookingGlass = lookingGlass;
    }
@@ -388,12 +367,10 @@ class ObjInspector extends St.ScrollView {
        let hbox = new St.BoxLayout({ style_class: 'lg-obj-inspector-title' });
        this._container.add_actor(hbox);
-        let label = new St.Label({
+        let label = new St.Label({ text: 'Inspecting: %s: %s'.format(typeof(obj),
-            text: 'Inspecting: %s: %s'.format(typeof obj, objectToString(obj)),
+                                                                     objectToString(obj)) });
            x_expand: true,
        });
        label.single_line_mode = true;
-        hbox.add_child(label);
+        hbox.add(label, { expand: true, y_fill: false });
        let button = new St.Button({ label: 'Insert', style_class: 'lg-obj-inspector-button' });
        button.connect('clicked', this._onInsert.bind(this));
        hbox.add(button);
@@ -408,10 +385,11 @@ class ObjInspector extends St.ScrollView {
        button.add_actor(new St.Icon({ icon_name: 'window-close-symbolic' }));
        button.connect('clicked', this.close.bind(this));
        hbox.add(button);
-        if (typeof obj == typeof {}) {
+        if (typeof(obj) == typeof({})) {
            let properties = [];
-            for (let propName in obj)
+            for (let propName in obj) {
                properties.push(propName);
            }
            properties.sort();
            for (let i = 0; i < properties.length; i++) {
@@ -419,14 +397,14 @@ class ObjInspector extends St.ScrollView {
                let link;
                try {
                    let prop = obj[propName];
-                    link = new ObjLink(this._lookingGlass, prop);
+                    link = new ObjLink(this._lookingGlass, prop).actor;
                } catch (e) {
                    link = new St.Label({ text: '<error>' });
                }
-                let box = new St.BoxLayout();
+                let hbox = new St.BoxLayout();
-                box.add(new St.Label({ text: `${propName}: ` }));
+                hbox.add(new St.Label({ text: `${propName}: ` }));
-                box.add(link);
+                hbox.add(link);
-                this._container.add_actor(box);
+                this._container.add_actor(hbox);
            }
        }
    }
@@ -436,17 +414,14 @@ class ObjInspector extends St.ScrollView {
            return;
        this._previousObj = null;
        this._open = true;
-        this.show();
+        this.actor.show();
        if (sourceActor) {
-            this.set_scale(0, 0);
+            this.actor.set_scale(0, 0);
-            this.ease({
+            Tweener.addTween(this.actor, { scale_x: 1, scale_y: 1,
-                scale_x: 1,
+                                           transition: 'easeOutQuad',
-                scale_y: 1,
+                                           time: 0.2 });
                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
                duration: 200,
            });
        } else {
-            this.set_scale(1, 1);
+            this.actor.set_scale(1, 1);
        }
    }
@@ -454,7 +429,7 @@ class ObjInspector extends St.ScrollView {
        if (!this._open)
            return;
        this._open = false;
-        this.hide();
+        this.actor.hide();
        this._previousObj = null;
        this._obj = null;
    }
@@ -468,44 +443,29 @@ class ObjInspector extends St.ScrollView {
    _onBack() {
        this.selectObject(this._previousObj, true);
    }
-});
+};
 var RedBorderEffect = GObject.registerClass(
 class RedBorderEffect extends Clutter.Effect {
-    _init() {
+    vfunc_paint() {
        super._init();
        this._pipeline = null;
    }
    vfunc_paint(paintContext) {
        let framebuffer = paintContext.get_framebuffer();
        let coglContext = framebuffer.get_context();
        let actor = this.get_actor();
-        actor.continue_paint(paintContext);
+        actor.continue_paint();
-        if (!this._pipeline) {
+        let color = new Cogl.Color();
-            let color = new Cogl.Color();
+        color.init_from_4ub(0xff, 0, 0, 0xc4);
-            color.init_from_4ub(0xff, 0, 0, 0xc4);
+        Cogl.set_source_color(color);
-            this._pipeline = new Cogl.Pipeline(coglContext);
+        let geom = actor.get_allocation_geometry();
            this._pipeline.set_color(color);
        }
        let alloc = actor.get_allocation_box();
        let width = 2;
        // clockwise order
-        framebuffer.draw_rectangle(this._pipeline,
+        Cogl.rectangle(0, 0, geom.width, width);
-            0, 0, alloc.get_width(), width);
+        Cogl.rectangle(geom.width - width, width,
-        framebuffer.draw_rectangle(this._pipeline,
+                       geom.width, geom.height);
-            alloc.get_width() - width, width,
+        Cogl.rectangle(0, geom.height,
-            alloc.get_width(), alloc.get_height());
+                       geom.width - width, geom.height - width);
-        framebuffer.draw_rectangle(this._pipeline,
+        Cogl.rectangle(0, geom.height - width,
-            0, alloc.get_height(),
+                       width, width);
            alloc.get_width() - width, alloc.get_height() - width);
        framebuffer.draw_rectangle(this._pipeline,
            0, alloc.get_height() - width,
            width, width);
    }
 });
@@ -514,7 +474,8 @@ var Inspector = GObject.registerClass({
               'target': { param_types: [Clutter.Actor.$gtype, GObject.TYPE_DOUBLE, GObject.TYPE_DOUBLE] } },
 }, class Inspector extends Clutter.Actor {
    _init(lookingGlass) {
-        super._init({ width: 0, height: 0 });
+        super._init({ width: 0,
                      height: 0 });
        Main.uiGroup.add_actor(this);
@@ -523,8 +484,8 @@ var Inspector = GObject.registerClass({
                                              reactive: true });
        this._eventHandler = eventHandler;
        this.add_actor(eventHandler);
-        this._displayText = new St.Label({ x_expand: true });
+        this._displayText = new St.Label();
-        eventHandler.add_child(this._displayText);
+        eventHandler.add(this._displayText, { expand: true });
        eventHandler.connect('key-press-event', this._onKeyPressEvent.bind(this));
        eventHandler.connect('button-press-event', this._onButtonPressEvent.bind(this));
@@ -557,7 +518,7 @@ var Inspector = GObject.registerClass({
        let primary = Main.layoutManager.primaryMonitor;
-        let [, , natWidth, natHeight] =
+        let [minWidth, minHeight, natWidth, natHeight] =
            this._eventHandler.get_preferred_size();
        let childBox = new Clutter.ActorBox();
@@ -577,7 +538,7 @@ var Inspector = GObject.registerClass({
    }
    _onKeyPressEvent(actor, event) {
-        if (event.get_key_symbol() === Clutter.KEY_Escape)
+        if (event.get_key_symbol() == Clutter.Escape)
            this._close();
        return Clutter.EVENT_STOP;
    }
@@ -649,30 +610,28 @@ var Inspector = GObject.registerClass({
    }
 });
-var Extensions = GObject.registerClass({
+var Extensions = class Extensions {
-}, class Extensions extends St.BoxLayout {
+    constructor(lookingGlass) {
    _init(lookingGlass) {
        super._init({ vertical: true, name: 'lookingGlassExtensions' });
        this._lookingGlass = lookingGlass;
        this.actor = new St.BoxLayout({ vertical: true,
                                        name: 'lookingGlassExtensions' });
        this._noExtensions = new St.Label({ style_class: 'lg-extensions-none',
                                            text: _("No extensions installed") });
        this._numExtensions = 0;
        this._extensionsList = new St.BoxLayout({ vertical: true,
                                                  style_class: 'lg-extensions-list' });
        this._extensionsList.add(this._noExtensions);
-        this.add(this._extensionsList);
+        this.actor.add(this._extensionsList);
-        Main.extensionManager.getUuids().forEach(uuid => {
+        for (let uuid in ExtensionUtils.extensions)
            this._loadExtension(null, uuid);
        });
-        Main.extensionManager.connect('extension-loaded',
+        ExtensionSystem.connect('extension-loaded',
-                                      this._loadExtension.bind(this));
+                                this._loadExtension.bind(this));
    }
    _loadExtension(o, uuid) {
-        let extension = Main.extensionManager.lookup(uuid);
+        let extension = ExtensionUtils.extensions[uuid];
        // There can be cases where we create dummy extension metadata
        // that's not really a proper extension. Don't bother with these.
        if (!extension.metadata.name)
@@ -682,7 +641,7 @@ var Extensions = GObject.registerClass({
        if (this._numExtensions == 0)
            this._extensionsList.remove_actor(this._noExtensions);
-        this._numExtensions++;
+        this._numExtensions ++;
        this._extensionsList.add(extensionDisplay);
    }
@@ -707,7 +666,7 @@ var Extensions = GObject.registerClass({
            let errors = extension.errors;
            let errorDisplay = new St.BoxLayout({ vertical: true });
            if (errors && errors.length) {
-                for (let i = 0; i < errors.length; i++)
+                for (let i = 0; i < errors.length; i ++)
                    errorDisplay.add(new St.Label({ text: errors[i] }));
            } else {
                /* Translators: argument is an extension UUID. */
@@ -729,16 +688,16 @@ var Extensions = GObject.registerClass({
    _stateToString(extensionState) {
        switch (extensionState) {
-        case ExtensionState.ENABLED:
+        case ExtensionSystem.ExtensionState.ENABLED:
            return _("Enabled");
-        case ExtensionState.DISABLED:
+        case ExtensionSystem.ExtensionState.DISABLED:
-        case ExtensionState.INITIALIZED:
+        case ExtensionSystem.ExtensionState.INITIALIZED:
            return _("Disabled");
-        case ExtensionState.ERROR:
+        case ExtensionSystem.ExtensionState.ERROR:
            return _("Error");
-        case ExtensionState.OUT_OF_DATE:
+        case ExtensionSystem.ExtensionState.OUT_OF_DATE:
            return _("Out of date");
-        case ExtensionState.DOWNLOADING:
+        case ExtensionSystem.ExtensionState.DOWNLOADING:
            return _("Downloading");
        }
        return 'Unknown'; // Not translated, shouldn't appear
@@ -746,18 +705,12 @@ var Extensions = GObject.registerClass({
    _createExtensionDisplay(extension) {
        let box = new St.BoxLayout({ style_class: 'lg-extension', vertical: true });
-        let name = new St.Label({
+        let name = new St.Label({ style_class: 'lg-extension-name',
-            style_class: 'lg-extension-name',
+                                  text: extension.metadata.name });
-            text: extension.metadata.name,
+        box.add(name, { expand: true });
-            x_expand: true,
+        let description = new St.Label({ style_class: 'lg-extension-description',
-        });
+                                         text: extension.metadata.description || 'No description' });
-        box.add_child(name);
+        box.add(description, { expand: true });
        let description = new St.Label({
            style_class: 'lg-extension-description',
            text: extension.metadata.description || 'No description',
            x_expand: true,
        });
        box.add_child(description);
        let metaBox = new St.BoxLayout({ style_class: 'lg-extension-meta' });
        box.add(metaBox);
@@ -795,19 +748,10 @@ var Extensions = GObject.registerClass({
        return box;
    }
-});
+};
 var LookingGlass = GObject.registerClass(
 class LookingGlass extends St.BoxLayout {
    _init() {
        super._init({
            name: 'LookingGlassDialog',
            style_class: 'lg-dialog',
            vertical: true,
            visible: false,
            reactive: true,
        });
 var LookingGlass = class LookingGlass {
    constructor() {
        this._borderPaintTarget = null;
        this._redBorderEffect = new RedBorderEffect();
@@ -815,18 +759,26 @@ class LookingGlass extends St.BoxLayout {
        this._it = null;
        this._offset = 0;
        this._results = [];
        // Sort of magic, but...eh.
        this._maxItems = 150;
        this.actor = new St.BoxLayout({ name: 'LookingGlassDialog',
                                        style_class: 'lg-dialog',
                                        vertical: true,
                                        visible: false,
                                        reactive: true });
        this.actor.connect('key-press-event', this._globalKeyPressEvent.bind(this));
        this._interfaceSettings = new Gio.Settings({ schema_id: 'org.gnome.desktop.interface' });
        this._interfaceSettings.connect('changed::monospace-font-name',
                                        this._updateFont.bind(this));
        this._updateFont();
        // We want it to appear to slide out from underneath the panel
-        Main.uiGroup.add_actor(this);
+        Main.uiGroup.add_actor(this.actor);
-        Main.uiGroup.set_child_below_sibling(this,
+        Main.uiGroup.set_child_below_sibling(this.actor,
                                             Main.layoutManager.panelBox);
        Main.layoutManager.panelBox.connect('allocation-changed',
                                            this._queueResize.bind(this));
@@ -834,11 +786,11 @@ class LookingGlass extends St.BoxLayout {
                                               this._queueResize.bind(this));
        this._objInspector = new ObjInspector(this);
-        Main.uiGroup.add_actor(this._objInspector);
+        Main.uiGroup.add_actor(this._objInspector.actor);
-        this._objInspector.hide();
+        this._objInspector.actor.hide();
        let toolbar = new St.BoxLayout({ name: 'Toolbar' });
-        this.add_actor(toolbar);
+        this.actor.add_actor(toolbar);
        let inspectIcon = new St.Icon({ icon_name: 'gtk-color-picker',
                                        icon_size: 24 });
        toolbar.add_actor(inspectIcon);
@@ -849,10 +801,10 @@ class LookingGlass extends St.BoxLayout {
                this._pushResult(`inspect(${Math.round(stageX)}, ${Math.round(stageY)})`, target);
            });
            inspector.connect('closed', () => {
-                this.show();
+                this.actor.show();
                global.stage.set_key_focus(this._entry);
            });
-            this.hide();
+            this.actor.hide();
            return Clutter.EVENT_STOP;
        });
@@ -863,7 +815,7 @@ class LookingGlass extends St.BoxLayout {
        gcIcon.connect('button-press-event', () => {
            gcIcon.icon_name = 'user-trash';
            System.gc();
-            this._timeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 500, () => {
+            this._timeoutId = Mainloop.timeout_add(500, () => {
                gcIcon.icon_name = 'user-trash-full';
                this._timeoutId = 0;
                return GLib.SOURCE_REMOVE;
@@ -874,45 +826,35 @@ class LookingGlass extends St.BoxLayout {
        let notebook = new Notebook();
        this._notebook = notebook;
-        this.add_child(notebook);
+        this.actor.add(notebook.actor, { expand: true });
-        let emptyBox = new St.Bin({ x_expand: true });
+        let emptyBox = new St.Bin();
-        toolbar.add_child(emptyBox);
+        toolbar.add(emptyBox, { expand: true });
        toolbar.add_actor(notebook.tabControls);
        this._evalBox = new St.BoxLayout({ name: 'EvalBox', vertical: true });
        notebook.appendPage('Evaluator', this._evalBox);
-        this._resultsArea = new St.BoxLayout({
+        this._resultsArea = new St.BoxLayout({ name: 'ResultsArea', vertical: true });
-            name: 'ResultsArea',
+        this._evalBox.add(this._resultsArea, { expand: true });
            vertical: true,
            y_expand: true,
        });
        this._evalBox.add_child(this._resultsArea);
-        this._entryArea = new St.BoxLayout({
+        this._entryArea = new St.BoxLayout({ name: 'EntryArea' });
            name: 'EntryArea',
            y_align: Clutter.ActorAlign.END,
        });
        this._evalBox.add_actor(this._entryArea);
        let label = new St.Label({ text: CHEVRON });
        this._entryArea.add(label);
-        this._entry = new St.Entry({
+        this._entry = new St.Entry({ can_focus: true });
            can_focus: true,
            x_expand: true,
        });
        ShellEntry.addContextMenu(this._entry);
-        this._entryArea.add_child(this._entry);
+        this._entryArea.add(this._entry, { expand: true });
        this._windowList = new WindowList(this);
-        notebook.appendPage('Windows', this._windowList);
+        notebook.appendPage('Windows', this._windowList.actor);
        this._extensions = new Extensions(this);
-        notebook.appendPage('Extensions', this._extensions);
+        notebook.appendPage('Extensions', this._extensions.actor);
-        this._entry.clutter_text.connect('activate', (o, _e) => {
+        this._entry.clutter_text.connect('activate', (o, e) => {
            // Hide any completions we are currently showing
            this._hideCompletions();
@@ -928,7 +870,7 @@ class LookingGlass extends St.BoxLayout {
            return true;
        });
-        this._history = new History.HistoryManager({ gsettingsKey: HISTORY_KEY,
+        this._history = new History.HistoryManager({ gsettingsKey: HISTORY_KEY, 
                                                     entry: this._entry.clutter_text });
        this._autoComplete = new AutoComplete(this._entry);
@@ -952,7 +894,7 @@ class LookingGlass extends St.BoxLayout {
        // monospace font to be bold/oblique/etc. Could easily be added here.
        let size = fontDesc.get_size() / 1024.;
        let unit = fontDesc.get_size_is_absolute() ? 'px' : 'pt';
-        this.style = `
+        this.actor.style = `
            font-size: ${size}${unit};
            font-family: "${fontDesc.get_family()}";`;
    }
@@ -966,14 +908,17 @@ class LookingGlass extends St.BoxLayout {
    }
    _pushResult(command, obj) {
-        let index = this._resultsArea.get_n_children() + this._offset;
+        let index = this._results.length + this._offset;
        let result = new Result(this, CHEVRON + command, obj, index);
-        this._resultsArea.add(result);
+        this._results.push(result);
        this._resultsArea.add(result.actor);
        if (obj instanceof Clutter.Actor)
            this.setBorderPaintTarget(obj);
-        if (this._resultsArea.get_n_children() > this._maxItems) {
+        let children = this._resultsArea.get_children();
-            this._resultsArea.get_first_child().destroy();
+        if (children.length > this._maxItems) {
            this._results.shift();
            children[0].destroy();
            this._offset++;
        }
        this._it = obj;
@@ -993,41 +938,35 @@ class LookingGlass extends St.BoxLayout {
        this._completionActor.set_text(completions.join(', '));
        // Setting the height to -1 allows us to get its actual preferred height rather than
-        // whatever was last set when animating
+        // whatever was last given in set_height by Tweener.
        this._completionActor.set_height(-1);
-        let [, naturalHeight] = this._completionActor.get_preferred_height(this._resultsArea.get_width());
+        let [minHeight, naturalHeight] = this._completionActor.get_preferred_height(this._resultsArea.get_width());
        // Don't reanimate if we are already visible
        if (this._completionActor.visible) {
            this._completionActor.height = naturalHeight;
        } else {
            let settings = St.Settings.get();
            let duration = AUTO_COMPLETE_SHOW_COMPLETION_ANIMATION_DURATION / settings.slow_down_factor;
            this._completionActor.show();
-            this._completionActor.remove_all_transitions();
+            Tweener.removeTweens(this._completionActor);
-            this._completionActor.ease({
+            Tweener.addTween(this._completionActor, { time: AUTO_COMPLETE_SHOW_COMPLETION_ANIMATION_DURATION / St.get_slow_down_factor(),
-                height: naturalHeight,
+                                                      transition: 'easeOutQuad',
-                opacity: 255,
+                                                      height: naturalHeight,
-                duration,
+                                                      opacity: 255
-                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                                                    });
            });
        }
    }
    _hideCompletions() {
        if (this._completionActor) {
-            let settings = St.Settings.get();
+            Tweener.removeTweens(this._completionActor);
-            let duration = AUTO_COMPLETE_SHOW_COMPLETION_ANIMATION_DURATION / settings.slow_down_factor;
+            Tweener.addTween(this._completionActor, { time: AUTO_COMPLETE_SHOW_COMPLETION_ANIMATION_DURATION / St.get_slow_down_factor(),
-            this._completionActor.remove_all_transitions();
+                                                      transition: 'easeOutQuad',
-            this._completionActor.ease({
+                                                      height: 0,
-                height: 0,
+                                                      opacity: 0,
-                opacity: 0,
+                                                      onComplete: () => {
-                duration,
+                                                          this._completionActor.hide();
-                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                                                      }
-                onComplete: () => {
+                                                    });
                    this._completionActor.hide();
                },
            });
        }
    }
@@ -1059,11 +998,7 @@ class LookingGlass extends St.BoxLayout {
    }
    getResult(idx) {
-        try {
+        return this._results[idx - this._offset].o;
            return this._resultsArea.get_child_at_index(idx - this._offset).o;
        } catch (e) {
            throw new Error(`Unknown result at index ${idx}`);
        }
    }
    toggle() {
@@ -1074,10 +1009,7 @@ class LookingGlass extends St.BoxLayout {
    }
    _queueResize() {
-        Meta.later_add(Meta.LaterType.BEFORE_REDRAW, () => {
+        Meta.later_add(Meta.LaterType.BEFORE_REDRAW, () => this._resize());
            this._resize();
            return GLib.SOURCE_REMOVE;
        });
    }
    _resize() {
@@ -1085,15 +1017,15 @@ class LookingGlass extends St.BoxLayout {
        let myWidth = primary.width * 0.7;
        let availableHeight = primary.height - Main.layoutManager.keyboardBox.height;
        let myHeight = Math.min(primary.height * 0.7, availableHeight * 0.9);
-        this.x = primary.x + (primary.width - myWidth) / 2;
+        this.actor.x = primary.x + (primary.width - myWidth) / 2;
        this._hiddenY = primary.y + Main.layoutManager.panelBox.height - myHeight;
        this._targetY = this._hiddenY + myHeight;
-        this.y = this._hiddenY;
+        this.actor.y = this._hiddenY;
-        this.width = myWidth;
+        this.actor.width = myWidth;
-        this.height = myHeight;
+        this.actor.height = myHeight;
-        this._objInspector.set_size(Math.floor(myWidth * 0.8), Math.floor(myHeight * 0.8));
+        this._objInspector.actor.set_size(Math.floor(myWidth * 0.8), Math.floor(myHeight * 0.8));
-        this._objInspector.set_position(this.x + Math.floor(myWidth * 0.1),
+        this._objInspector.actor.set_position(this.actor.x + Math.floor(myWidth * 0.1),
-                                        this._targetY + Math.floor(myHeight * 0.1));
+                                              this._targetY + Math.floor(myHeight * 0.1));
    }
    insertObject(obj) {
@@ -1106,21 +1038,24 @@ class LookingGlass extends St.BoxLayout {
    }
    // Handle key events which are relevant for all tabs of the LookingGlass
-    vfunc_key_press_event(keyPressEvent) {
+    _globalKeyPressEvent(actor, event) {
-        let symbol = keyPressEvent.keyval;
+        let symbol = event.get_key_symbol();
-        if (symbol == Clutter.KEY_Escape) {
+        let modifierState = event.get_state();
-            if (this._objInspector.visible)
+        if (symbol == Clutter.Escape) {
            if (this._objInspector.actor.visible) {
                this._objInspector.close();
-            else
+            } else {
                this.close();
            }
            return Clutter.EVENT_STOP;
        }
        // Ctrl+PgUp and Ctrl+PgDown switches tabs in the notebook view
-        if (keyPressEvent.modifier_state & Clutter.ModifierType.CONTROL_MASK) {
+        if (modifierState & Clutter.ModifierType.CONTROL_MASK) {
-            if (symbol == Clutter.KEY_Page_Up)
+            if (symbol == Clutter.KEY_Page_Up) {
                this._notebook.prevTab();
-            else if (symbol == Clutter.KEY_Page_Down)
+            } else if (symbol == Clutter.KEY_Page_Down) {
                this._notebook.nextTab();
            }
        }
        return Clutter.EVENT_PROPAGATE;
    }
@@ -1133,49 +1068,40 @@ class LookingGlass extends St.BoxLayout {
            return;
        this._notebook.selectIndex(0);
-        this.show();
+        this.actor.show();
        this._open = true;
        this._history.lastItem();
-        this.remove_all_transitions();
+        Tweener.removeTweens(this.actor);
        // We inverse compensate for the slow-down so you can change the factor
        // through LookingGlass without long waits.
-        let duration = LG_ANIMATION_TIME / St.Settings.get().slow_down_factor;
+        Tweener.addTween(this.actor, { time: 0.5 / St.get_slow_down_factor(),
-        this.ease({
+                                       transition: 'easeOutQuad',
-            y: this._targetY,
+                                       y: this._targetY
-            duration,
+                                     });
            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
        });
        this._windowList.update();
    }
    close() {
        if (!this._open)
            return;
-        this._objInspector.hide();
+        this._objInspector.actor.hide();
        this._open = false;
-        this.remove_all_transitions();
+        Tweener.removeTweens(this.actor);
        this.setBorderPaintTarget(null);
        Main.popModal(this._entry);
-        let settings = St.Settings.get();
+        Tweener.addTween(this.actor, { time: Math.min(0.5 / St.get_slow_down_factor(), 0.5),
-        let duration = Math.min(LG_ANIMATION_TIME / settings.slow_down_factor,
+                                       transition: 'easeOutQuad',
-                                LG_ANIMATION_TIME);
+                                       y: this._hiddenY,
-        this.ease({
+                                       onComplete: () => {
-            y: this._hiddenY,
+                                           this.actor.hide();
-            duration,
+                                       }
-            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                                     });
            onComplete: () => this.hide(),
        });
    }
-
+};
-    get isOpen() {
+Signals.addSignalMethods(LookingGlass.prototype);
        return this._open;
    }
 });
--- a/js/ui/magnifier.js
+++ b/js/ui/magnifier.js
@@ -2,6 +2,7 @@
 const { Atspi, Clutter, GDesktopEnums,
        Gio, GLib, GObject, Meta, Shell, St } = imports.gi;
 const Mainloop = imports.mainloop;
 const Signals = imports.signals;
 const Background = imports.ui.background;
@@ -55,7 +56,7 @@ var MouseSpriteContent = GObject.registerClass({
        return [true, this._texture.get_width(), this._texture.get_height()];
    }
-    vfunc_paint_content(actor, node, _paintContext) {
+    vfunc_paint_content(actor, node) {
        if (!this._texture)
            return;
@@ -106,7 +107,8 @@ var Magnifier = class Magnifier {
        // Create the first ZoomRegion and initialize it according to the
        // magnification settings.
-        [this.xMouse, this.yMouse] = global.get_pointer();
+        let mask;
        [this.xMouse, this.yMouse, mask] = global.get_pointer();
        let aZoomRegion = new ZoomRegion(this, this._cursorRoot);
        this._zoomRegions.push(aZoomRegion);
@@ -118,7 +120,7 @@ var Magnifier = class Magnifier {
        });
        // Export to dbus.
-        new MagnifierDBus.ShellMagnifier();
+        (new MagnifierDBus.ShellMagnifier());
        this.setActive(St.Settings.get().magnifier_active);
    }
@@ -141,12 +143,12 @@ var Magnifier = class Magnifier {
    /**
     * setActive:
     * Show/hide all the zoom regions.
-     * @param {bool} activate: Boolean to activate or de-activate the magnifier.
+     * @activate:   Boolean to activate or de-activate the magnifier.
     */
    setActive(activate) {
        let isActive = this.isActive();
-        this._zoomRegions.forEach(zoomRegion => {
+        this._zoomRegions.forEach((zoomRegion, index, array) => {
            zoomRegion.setActive(activate);
        });
@@ -177,7 +179,7 @@ var Magnifier = class Magnifier {
    /**
     * isActive:
-     * @returns {bool} Whether the magnifier is active.
+     * @return  Whether the magnifier is active (boolean).
     */
    isActive() {
        // Sufficient to check one ZoomRegion since Magnifier's active
@@ -212,7 +214,7 @@ var Magnifier = class Magnifier {
    /**
     * isTrackingMouse:
-     * @returns {bool} whether the magnifier is currently tracking the mouse
+     * Is the magnifier tracking the mouse currently?
     */
    isTrackingMouse() {
        return !!this._mouseTrackingId;
@@ -222,17 +224,17 @@ var Magnifier = class Magnifier {
     * scrollToMousePos:
     * Position all zoom regions' ROI relative to the current location of the
     * system pointer.
-     * @returns {bool} true.
+     * @return      true.
     */
    scrollToMousePos() {
-        let [xMouse, yMouse] = global.get_pointer();
+        let [xMouse, yMouse, mask] = global.get_pointer();
        if (xMouse != this.xMouse || yMouse != this.yMouse) {
            this.xMouse = xMouse;
            this.yMouse = yMouse;
            let sysMouseOverAny = false;
-            this._zoomRegions.forEach(zoomRegion => {
+            this._zoomRegions.forEach((zoomRegion, index, array) => {
                if (zoomRegion.scrollToMousePos())
                    sysMouseOverAny = true;
            });
@@ -247,24 +249,24 @@ var Magnifier = class Magnifier {
    /**
     * createZoomRegion:
     * Create a ZoomRegion instance with the given properties.
-     * @param {number} xMagFactor:
+     * @xMagFactor:     The power to set horizontal magnification of the
-     *     The power to set horizontal magnification of the ZoomRegion. A value
+     *                  ZoomRegion.  A value of 1.0 means no magnification.  A
-     *     of 1.0 means no magnification, a value of 2.0 doubles the size.
+     *                  value of 2.0 doubles the size.
-     * @param {number} yMagFactor:
+     * @yMagFactor:     The power to set the vertical magnification of the
-     *    The power to set the vertical magnification of the ZoomRegion.
+     *                  ZoomRegion.
-     * @param {{x: number, y: number, width: number, height: number}} roi:
+     * @roi             Object in the form { x, y, width, height } that
-     *    The reg Object that defines the region to magnify, given in
+     *                  defines the region to magnify.  Given in unmagnified
-     *    unmagnified coordinates.
+     *                  coordinates.
-     * @param {{x: number, y: number, width: number, height: number}} viewPort:
+     * @viewPort        Object in the form { x, y, width, height } that defines
-     *     Object that defines the position of the ZoomRegion on screen.
+     *                  the position of the ZoomRegion on screen.
-     * @returns {ZoomRegion} the newly created ZoomRegion.
+     * @return          The newly created ZoomRegion.
     */
    createZoomRegion(xMagFactor, yMagFactor, roi, viewPort) {
        let zoomRegion = new ZoomRegion(this, this._cursorRoot);
        zoomRegion.setViewPort(viewPort);
        // We ignore the redundant width/height on the ROI
-        let fixedROI = Object.create(roi);
+        let fixedROI = new Object(roi);
        fixedROI.width = viewPort.width / xMagFactor;
        fixedROI.height = viewPort.height / yMagFactor;
        zoomRegion.setROI(fixedROI);
@@ -277,7 +279,7 @@ var Magnifier = class Magnifier {
     * addZoomRegion:
     * Append the given ZoomRegion to the list of currently defined ZoomRegions
     * for this Magnifier instance.
-     * @param {ZoomRegion} zoomRegion: The zoomRegion to add.
+     * @zoomRegion:     The zoomRegion to add.
     */
    addZoomRegion(zoomRegion) {
        if (zoomRegion) {
@@ -290,7 +292,7 @@ var Magnifier = class Magnifier {
    /**
     * getZoomRegions:
     * Return a list of ZoomRegion's for this Magnifier.
-     * @returns {number[]} The Magnifier's zoom region list.
+     * @return:     The Magnifier's zoom region list (array).
     */
    getZoomRegions() {
        return this._zoomRegions;
@@ -330,7 +332,7 @@ var Magnifier = class Magnifier {
        this.setCrosshairsClip(clip);
        let theCrossHairs = this._crossHairs;
-        this._zoomRegions.forEach(zoomRegion => {
+        this._zoomRegions.forEach ((zoomRegion, index, array) => {
            zoomRegion.addCrosshairs(theCrossHairs);
        });
    }
@@ -338,7 +340,7 @@ var Magnifier = class Magnifier {
    /**
     * setCrosshairsVisible:
     * Show or hide the cross hair.
-     * @param {bool} visible: Flag that indicates show (true) or hide (false).
+     * @visible    Flag that indicates show (true) or hide (false).
     */
    setCrosshairsVisible(visible) {
        if (visible) {
@@ -346,7 +348,6 @@ var Magnifier = class Magnifier {
                this.addCrosshairs();
            this._crossHairs.show();
        } else {
            // eslint-disable-next-line no-lonely-if
            if (this._crossHairs)
                this._crossHairs.hide();
        }
@@ -355,11 +356,11 @@ var Magnifier = class Magnifier {
    /**
     * setCrosshairsColor:
     * Set the color of the crosshairs for all ZoomRegions.
-     * @param {string} color: The color as a string, e.g. '#ff0000ff' or 'red'.
+     * @color:  The color as a string, e.g. '#ff0000ff' or 'red'.
     */
    setCrosshairsColor(color) {
        if (this._crossHairs) {
-            let [res_, clutterColor] = Clutter.Color.from_string(color);
+            let [res, clutterColor] = Clutter.Color.from_string(color);
            this._crossHairs.setColor(clutterColor);
        }
    }
@@ -367,7 +368,7 @@ var Magnifier = class Magnifier {
    /**
     * getCrosshairsColor:
     * Get the color of the crosshairs.
-     * @returns {string} The color as a string, e.g. '#0000ffff' or 'blue'.
+     * @return: The color as a string, e.g. '#0000ffff' or 'blue'.
     */
    getCrosshairsColor() {
        if (this._crossHairs) {
@@ -381,8 +382,8 @@ var Magnifier = class Magnifier {
    /**
     * setCrosshairsThickness:
     * Set the crosshairs thickness for all ZoomRegions.
-     * @param {number} thickness: The width of the vertical and
+     * @thickness:  The width of the vertical and horizontal lines of the
-     *     horizontal lines of the crosshairs.
+     *              crosshairs.
     */
    setCrosshairsThickness(thickness) {
        if (this._crossHairs)
@@ -392,8 +393,8 @@ var Magnifier = class Magnifier {
    /**
     * getCrosshairsThickness:
     * Get the crosshairs thickness.
-     * @returns {number} The width of the vertical and horizontal
+     * @return: The width of the vertical and horizontal lines of the
-     *     lines of the crosshairs.
+     *          crosshairs.
     */
    getCrosshairsThickness() {
        if (this._crossHairs)
@@ -404,8 +405,7 @@ var Magnifier = class Magnifier {
    /**
     * setCrosshairsOpacity:
-     * @param {number} opacity: Value between 0.0 (transparent)
+     * @opacity:    Value between 0.0 (transparent) and 1.0 (fully opaque).
     *     and 1.0 (fully opaque).
     */
    setCrosshairsOpacity(opacity) {
        if (this._crossHairs)
@@ -414,7 +414,7 @@ var Magnifier = class Magnifier {
    /**
     * getCrosshairsOpacity:
-     * @returns {number} Value between 0.0 (transparent) and 1.0 (fully opaque).
+     * @return:     Value between 0.0 (transparent) and 1.0 (fully opaque).
     */
    getCrosshairsOpacity() {
        if (this._crossHairs)
@@ -426,8 +426,8 @@ var Magnifier = class Magnifier {
    /**
     * setCrosshairsLength:
     * Set the crosshairs length for all ZoomRegions.
-     * @param {number} length: The length of the vertical and horizontal
+     * @length: The length of the vertical and horizontal lines making up the
-     *     lines making up the crosshairs.
+     *          crosshairs.
     */
    setCrosshairsLength(length) {
        if (this._crossHairs)
@@ -437,8 +437,8 @@ var Magnifier = class Magnifier {
    /**
     * getCrosshairsLength:
     * Get the crosshairs length.
-     * @returns {number} The length of the vertical and horizontal
+     * @return: The length of the vertical and horizontal lines making up the
-     *     lines making up the crosshairs.
+     *          crosshairs.
     */
    getCrosshairsLength() {
        if (this._crossHairs)
@@ -450,31 +450,35 @@ var Magnifier = class Magnifier {
    /**
     * setCrosshairsClip:
     * Set whether the crosshairs are clipped at their intersection.
-     * @param {bool} clip: Flag to indicate whether to clip the crosshairs.
+     * @clip:   Flag to indicate whether to clip the crosshairs.
     */
    setCrosshairsClip(clip) {
-        if (!this._crossHairs)
+        if (clip) {
-            return;
+            if (this._crossHairs)
-
+                this._crossHairs.setClip(CROSSHAIRS_CLIP_SIZE);
-        // Setting no clipping on crosshairs means a zero sized clip rectangle.
+        } else {
-        this._crossHairs.setClip(clip ? CROSSHAIRS_CLIP_SIZE : [0, 0]);
+            // Setting no clipping on crosshairs means a zero sized clip
            // rectangle.
            if (this._crossHairs)
                this._crossHairs.setClip([0, 0]);
        }
    }
    /**
     * getCrosshairsClip:
     * Get whether the crosshairs are clipped by the mouse image.
-     * @returns {bool} Whether the crosshairs are clipped.
+     * @return:   Whether the crosshairs are clipped.
     */
    getCrosshairsClip() {
        if (this._crossHairs) {
            let [clipWidth, clipHeight] = this._crossHairs.getClip();
-            return clipWidth > 0 && clipHeight > 0;
+            return (clipWidth > 0 && clipHeight > 0);
        } else {
            return false;
        }
    }
-    // Private methods //
+    //// Private methods ////
    _updateMouseSprite() {
        this._updateSpriteTexture();
@@ -625,8 +629,9 @@ var Magnifier = class Magnifier {
    _updateLensMode() {
        // Applies only to the first zoom region.
-        if (this._zoomRegions.length)
+        if (this._zoomRegions.length) {
            this._zoomRegions[0].setLensMode(this._settings.get_boolean(LENS_MODE_KEY));
        }
    }
    _updateClampMode() {
@@ -773,16 +778,15 @@ var ZoomRegion = class ZoomRegion {
    }
    _updateScreenPosition() {
-        if (this._screenPosition == GDesktopEnums.MagnifierScreenPosition.NONE) {
+        if (this._screenPosition == GDesktopEnums.MagnifierScreenPosition.NONE)
            this._setViewPort({
                x: this._viewPortX,
                y: this._viewPortY,
                width: this._viewPortWidth,
-                height: this._viewPortHeight,
+                height: this._viewPortHeight
            });
-        } else {
+        else
            this.setScreenPosition(this._screenPosition);
        }
    }
    _updateFocus(caller, event) {
@@ -820,7 +824,7 @@ var ZoomRegion = class ZoomRegion {
    /**
     * setActive:
-     * @param {bool} activate: Boolean to show/hide the ZoomRegion.
+     * @activate:   Boolean to show/hide the ZoomRegion.
     */
    setActive(activate) {
        if (activate == this.isActive())
@@ -846,7 +850,7 @@ var ZoomRegion = class ZoomRegion {
    /**
     * isActive:
-     * @returns {bool} Whether this ZoomRegion is active
+     * @return  Whether this ZoomRegion is active (boolean).
     */
    isActive() {
        return this._magView != null;
@@ -854,24 +858,24 @@ var ZoomRegion = class ZoomRegion {
    /**
     * setMagFactor:
-     * @param {number} xMagFactor: The power to set the horizontal
+     * @xMagFactor:     The power to set the horizontal magnification factor to
-     *     magnification factor to of the magnified view. A value of 1.0
+     *                  of the magnified view.  A value of 1.0 means no
-     *     means no magnification. A value of 2.0 doubles the size.
+     *                  magnification.  A value of 2.0 doubles the size.
-     * @param {number} yMagFactor: The power to set the vertical
+     * @yMagFactor:     The power to set the vertical magnification factor to
-     *     magnification factor to of the magnified view.
+     *                  of the magnified view.
     */
    setMagFactor(xMagFactor, yMagFactor) {
-        this._changeROI({ xMagFactor,
+        this._changeROI({ xMagFactor: xMagFactor,
-                          yMagFactor,
+                          yMagFactor: yMagFactor,
                          redoCursorTracking: this._followingCursor });
    }
    /**
     * getMagFactor:
-     * @returns {number[]} an array, [xMagFactor, yMagFactor], containing
+     * @return  an array, [xMagFactor, yMagFactor], containing the horizontal
-     *     the horizontal and vertical magnification powers. A value of
+     *          and vertical magnification powers.  A value of 1.0 means no
-     *     1.0 means no magnification. A value of 2.0 means the contents
+     *          magnification.  A value of 2.0 means the contents are doubled
-     *     are doubled in size, and so on.
+     *          in size, and so on.
     */
    getMagFactor() {
        return [this._xMagFactor, this._yMagFactor];
@@ -879,7 +883,7 @@ var ZoomRegion = class ZoomRegion {
    /**
     * setMouseTrackingMode
-     * @param {GDesktopEnums.MagnifierMouseTrackingMode} mode: the new mode
+     * @mode:     One of the enum MouseTrackingMode values.
     */
    setMouseTrackingMode(mode) {
        if (mode >= GDesktopEnums.MagnifierMouseTrackingMode.NONE &&
@@ -889,7 +893,7 @@ var ZoomRegion = class ZoomRegion {
    /**
     * getMouseTrackingMode
-     * @returns {GDesktopEnums.MagnifierMouseTrackingMode} the current mode
+     * @return:     One of the enum MouseTrackingMode values.
     */
    getMouseTrackingMode() {
        return this._mouseTrackingMode;
@@ -897,7 +901,7 @@ var ZoomRegion = class ZoomRegion {
    /**
     * setFocusTrackingMode
-     * @param {GDesktopEnums.MagnifierFocusTrackingMode} mode: the new mode
+     * @mode:     One of the enum FocusTrackingMode values.
     */
    setFocusTrackingMode(mode) {
        this._focusTrackingMode = mode;
@@ -906,7 +910,7 @@ var ZoomRegion = class ZoomRegion {
    /**
     * setCaretTrackingMode
-     * @param {GDesktopEnums.MagnifierCaretTrackingMode} mode: the new mode
+     * @mode:     One of the enum CaretTrackingMode values.
     */
    setCaretTrackingMode(mode) {
        this._caretTrackingMode = mode;
@@ -936,9 +940,9 @@ var ZoomRegion = class ZoomRegion {
    /**
     * setViewPort
     * Sets the position and size of the ZoomRegion on screen.
-     * @param {{x: number, y: number, width: number, height: number}} viewPort:
+     * @viewPort:   Object defining the position and size of the view port.
-     *     Object defining the position and size of the view port.
+     *              It has members x, y, width, height.  The values are in
-     *     The values are in stage coordinate space.
+     *              stage coordinate space.
     */
    setViewPort(viewPort) {
        this._setViewPort(viewPort);
@@ -948,9 +952,9 @@ var ZoomRegion = class ZoomRegion {
    /**
     * setROI
     * Sets the "region of interest" that the ZoomRegion is magnifying.
-     * @param {{x: number, y: number, width: number, height: number}} roi:
+     * @roi:    Object that defines the region of the screen to magnify.  It
-     *     Object that defines the region of the screen to magnify.
+     *          has members x, y, width, height.  The values are in
-     *     The values are in screen (unmagnified) coordinate space.
+     *          screen (unmagnified) coordinate space.
     */
    setROI(roi) {
        if (roi.width <= 0 || roi.height <= 0)
@@ -968,8 +972,8 @@ var ZoomRegion = class ZoomRegion {
     * Retrieves the "region of interest" -- the rectangular bounds of that part
     * of the desktop that the magnified view is showing (x, y, width, height).
     * The bounds are given in non-magnified coordinates.
-     * @returns {number[]} an array, [x, y, width, height], representing
+     * @return  an array, [x, y, width, height], representing the bounding
-     *     the bounding rectangle of what is shown in the magnified view.
+     *          rectangle of what is shown in the magnified view.
     */
    getROI() {
        let roiWidth = this._viewPortWidth / this._xMagFactor;
@@ -984,18 +988,18 @@ var ZoomRegion = class ZoomRegion {
     * setLensMode:
     * Turn lens mode on/off.  In full screen mode, lens mode does nothing since
     * a lens the size of the screen is pointless.
-     * @param {bool} lensMode: Whether lensMode should be active
+     * @lensMode:   A boolean to set the sense of lens mode.
     */
    setLensMode(lensMode) {
        this._lensMode = lensMode;
        if (!this._lensMode)
-            this.setScreenPosition(this._screenPosition);
+            this.setScreenPosition (this._screenPosition);
    }
    /**
     * isLensMode:
     * Is lens mode on or off?
-     * @returns {bool} The lens mode state.
+     * @return  The lens mode state as a boolean.
     */
    isLensMode() {
        return this._lensMode;
@@ -1005,7 +1009,7 @@ var ZoomRegion = class ZoomRegion {
     * setClampScrollingAtEdges:
     * Stop vs. allow scrolling of the magnified contents when it scroll beyond
     * the edges of the screen.
-     * @param {bool} clamp: Boolean to turn on/off clamping.
+     * @clamp:   Boolean to turn on/off clamping.
     */
    setClampScrollingAtEdges(clamp) {
        this._clampScrollingAtEdges = clamp;
@@ -1089,7 +1093,9 @@ var ZoomRegion = class ZoomRegion {
     * setScreenPosition:
     * Positions the zoom region to one of the enumerated positions on the
     * screen.
-     * @param {GDesktopEnums.MagnifierScreenPosition} inPosition: the position
+     * @position:   one of Magnifier.FULL_SCREEN, Magnifier.TOP_HALF,
     *              Magnifier.BOTTOM_HALF,Magnifier.LEFT_HALF, or
     *              Magnifier.RIGHT_HALF.
     */
    setScreenPosition(inPosition) {
        switch (inPosition) {
@@ -1115,7 +1121,7 @@ var ZoomRegion = class ZoomRegion {
     * getScreenPosition:
     * Tell the outside world what the current mode is -- magnifiying the
     * top half, bottom half, etc.
-     * @returns {GDesktopEnums.MagnifierScreenPosition}: the current position.
+     * @return:  the current mode.
     */
    getScreenPosition() {
        return this._screenPosition;
@@ -1124,8 +1130,7 @@ var ZoomRegion = class ZoomRegion {
    /**
     * scrollToMousePos:
     * Set the region of interest based on the position of the system pointer.
-     * @returns {bool}: Whether the system mouse pointer is over the
+     * @return:     Whether the system mouse pointer is over the magnified view.
     *     magnified view.
     */
    scrollToMousePos() {
        this._followingCursor = true;
@@ -1140,7 +1145,7 @@ var ZoomRegion = class ZoomRegion {
    _clearScrollContentsTimer() {
        if (this._scrollContentsTimerId != 0) {
-            GLib.source_remove(this._scrollContentsTimerId);
+            Mainloop.source_remove(this._scrollContentsTimerId);
            this._scrollContentsTimerId = 0;
        }
    }
@@ -1152,7 +1157,7 @@ var ZoomRegion = class ZoomRegion {
        }
        this._clearScrollContentsTimer();
-        this._scrollContentsTimerId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, POINTER_REST_TIME, () => {
+        this._scrollContentsTimerId = Mainloop.timeout_add(POINTER_REST_TIME, () => {
            this._scrollContentsToDelayed(x, y);
            return GLib.SOURCE_REMOVE;
        });
@@ -1162,8 +1167,8 @@ var ZoomRegion = class ZoomRegion {
     * scrollContentsTo:
     * Shift the contents of the magnified view such it is centered on the given
     * coordinate.
-     * @param {number} x: The x-coord of the point to center on.
+     * @x:      The x-coord of the point to center on.
-     * @param {number} y: The y-coord of the point to center on.
+     * @y:      The y-coord of the point to center on.
     */
    scrollContentsTo(x, y) {
        this._clearScrollContentsTimer();
@@ -1176,21 +1181,22 @@ var ZoomRegion = class ZoomRegion {
    /**
     * addCrosshairs:
     * Add crosshairs centered on the magnified mouse.
-     * @param {Crosshairs} crossHairs: Crosshairs instance
+     * @crossHairs: Crosshairs instance
     */
    addCrosshairs(crossHairs) {
        this._crossHairs = crossHairs;
        // If the crossHairs is not already within a larger container, add it
        // to this zoom region.  Otherwise, add a clone.
-        if (crossHairs && this.isActive())
+        if (crossHairs && this.isActive()) {
            this._crossHairsActor = crossHairs.addToZoomRegion(this, this._mouseActor);
        }
    }
    /**
     * setInvertLightness:
     * Set whether to invert the lightness of the magnified view.
-     * @param {bool} flag: whether brightness should be inverted
+     * @flag    Boolean to either invert brightness (true), or not (false).
     */
    setInvertLightness(flag) {
        this._invertLightness = flag;
@@ -1201,7 +1207,7 @@ var ZoomRegion = class ZoomRegion {
    /**
     * getInvertLightness:
     * Retrieve whether the lightness is inverted.
-     * @returns {bool} whether brightness should be inverted
+     * @return    Boolean indicating inversion (true), or not (false).
     */
    getInvertLightness() {
        return this._invertLightness;
@@ -1210,9 +1216,9 @@ var ZoomRegion = class ZoomRegion {
    /**
     * setColorSaturation:
     * Set the color saturation of the magnified view.
-     * @param {number} saturation: A value from 0.0 to 1.0 that defines
+     * @sauration  A value from 0.0 to 1.0 that defines the color
-     *     the color saturation, with 0.0 defining no color (grayscale),
+     *             saturation, with 0.0 defining no color (grayscale),
-     *     and 1.0 defining full color.
+     *             and 1.0 defining full color.
     */
    setColorSaturation(saturation) {
        this._colorSaturation = saturation;
@@ -1223,7 +1229,6 @@ var ZoomRegion = class ZoomRegion {
    /**
     * getColorSaturation:
     * Retrieve the color saturation of the magnified view.
     * @returns {number} the color saturation
     */
    getColorSaturation() {
        return this._colorSaturation;
@@ -1232,14 +1237,10 @@ var ZoomRegion = class ZoomRegion {
    /**
     * setBrightness:
     * Alter the brightness of the magnified view.
-     * @param {Object} brightness: Object containing the contrast for the
+     * @brightness  Object containing the contrast for the red, green,
-     *     red, green, and blue channels. Values of 0.0 represent "standard"
+     *              and blue channels.  Values of 0.0 represent "standard"
-     *     brightness (no change), whereas values less or greater than
+     *              brightness (no change), whereas values less or greater than
-     *     0.0 indicate decreased or incresaed brightness, respectively.
+     *              0.0 indicate decreased or incresaed brightness, respectively.
     *
     *     {number} brightness.r - the red component
     *     {number} brightness.g - the green component
     *     {number} brightness.b - the blue component
     */
    setBrightness(brightness) {
        this._brightness.r = brightness.r;
@@ -1252,14 +1253,10 @@ var ZoomRegion = class ZoomRegion {
    /**
     * setContrast:
     * Alter the contrast of the magnified view.
-     * @param {Object} contrast: Object containing the contrast for the
+     * @contrast    Object containing the contrast for the red, green,
-     *     red, green, and blue channels. Values of 0.0 represent "standard"
+     *              and blue channels.  Values of 0.0 represent "standard"
-     *     contrast (no change), whereas values less or greater than
+     *              contrast (no change), whereas values less or greater than
-     *     0.0 indicate decreased or incresaed contrast, respectively.
+     *              0.0 indicate decreased or incresaed contrast, respectively.
     *
     *     {number} contrast.r - the red component
     *     {number} contrast.g - the green component
     *     {number} contrast.b - the blue component
     */
    setContrast(contrast) {
        this._contrast.r = contrast.r;
@@ -1272,8 +1269,8 @@ var ZoomRegion = class ZoomRegion {
    /**
     * getContrast:
     * Retrieve the contrast of the magnified view.
-     * @returns {{r: number, g: number, b: number}}: Object containing
+     * @return  Object containing the contrast for the red, green,
-     *     the contrast for the red, green, and blue channels.
+     *          and blue channels.
     */
    getContrast() {
        let contrast = {};
@@ -1283,15 +1280,15 @@ var ZoomRegion = class ZoomRegion {
        return contrast;
    }
-    // Private methods //
+    //// Private methods ////
    _createActors() {
        // The root actor for the zoom region
-        this._magView = new St.Bin({ style_class: 'magnifier-zoom-region' });
+        this._magView = new St.Bin({ style_class: 'magnifier-zoom-region', x_fill: true, y_fill: true });
        global.stage.add_actor(this._magView);
        // hide the magnified region from CLUTTER_PICK_ALL
-        Shell.util_set_hidden_from_pick(this._magView, true);
+        Shell.util_set_hidden_from_pick (this._magView, true);
        // Add a group to clip the contents of the magnified view.
        let mainGroup = new Clutter.Actor({ clip_to_allocation: true });
@@ -1299,7 +1296,7 @@ var ZoomRegion = class ZoomRegion {
        // Add a background for when the magnified uiGroup is scrolled
        // out of view (don't want to see desktop showing through).
-        this._background = new Background.SystemBackground();
+        this._background = (new Background.SystemBackground()).actor;
        mainGroup.add_actor(this._background);
        // Clone the group that contains all of UI on the screen.  This is the
@@ -1331,7 +1328,7 @@ var ZoomRegion = class ZoomRegion {
    _destroyActors() {
        if (this._mouseActor == this._mouseSourceActor)
-            this._mouseActor.get_parent().remove_actor(this._mouseActor);
+            this._mouseActor.get_parent().remove_actor (this._mouseActor);
        if (this._crossHairs)
            this._crossHairs.removeFromParent(this._crossHairsActor);
@@ -1411,12 +1408,11 @@ var ZoomRegion = class ZoomRegion {
        // If in lens mode, move the magnified view such that it is centered
        // over the actual mouse. However, in full screen mode, the "lens" is
        // the size of the screen -- pointless to move such a large lens around.
-        if (this._lensMode && !this._isFullScreen()) {
+        if (this._lensMode && !this._isFullScreen())
            this._setViewPort({ x: this._xCenter - this._viewPortWidth / 2,
                                y: this._yCenter - this._viewPortHeight / 2,
                                width: this._viewPortWidth,
                                height: this._viewPortHeight }, true);
        }
        this._updateCloneGeometry();
        this._updateMousePosition();
@@ -1430,9 +1426,10 @@ var ZoomRegion = class ZoomRegion {
            let xMouse = this._magnifier.xMouse;
            let yMouse = this._magnifier.yMouse;
-            mouseIsOver =
+            mouseIsOver = (
                xMouse >= this._viewPortX && xMouse < (this._viewPortX + this._viewPortWidth) &&
-                yMouse >= this._viewPortY && yMouse < (this._viewPortY + this._viewPortHeight);
+                yMouse >= this._viewPortY && yMouse < (this._viewPortY + this._viewPortHeight)
            );
        }
        return mouseIsOver;
    }
@@ -1457,12 +1454,13 @@ var ZoomRegion = class ZoomRegion {
        let xMouse = this._magnifier.xMouse;
        let yMouse = this._magnifier.yMouse;
-        if (this._mouseTrackingMode == GDesktopEnums.MagnifierMouseTrackingMode.PROPORTIONAL)
+        if (this._mouseTrackingMode == GDesktopEnums.MagnifierMouseTrackingMode.PROPORTIONAL) {
            return this._centerFromPointProportional(xMouse, yMouse);
-        else if (this._mouseTrackingMode == GDesktopEnums.MagnifierMouseTrackingMode.PUSH)
+        } else if (this._mouseTrackingMode == GDesktopEnums.MagnifierMouseTrackingMode.PUSH) {
            return this._centerFromPointPush(xMouse, yMouse);
-        else if (this._mouseTrackingMode == GDesktopEnums.MagnifierMouseTrackingMode.CENTERED)
+        } else if (this._mouseTrackingMode == GDesktopEnums.MagnifierMouseTrackingMode.CENTERED) {
            return this._centerFromPointCentered(xMouse, yMouse);
        }
        return null; // Should never be hit
    }
@@ -1504,20 +1502,20 @@ var ZoomRegion = class ZoomRegion {
        let yRoiBottom = yRoi + heightRoi - cursorHeight;
        if (xPoint < xRoi)
-            xPos -= xRoi - xPoint;
+            xPos -= (xRoi - xPoint);
        else if (xPoint > xRoiRight)
-            xPos += xPoint - xRoiRight;
+            xPos += (xPoint - xRoiRight);
        if (yPoint < yRoi)
-            yPos -= yRoi - yPoint;
+            yPos -= (yRoi - yPoint);
        else if (yPoint > yRoiBottom)
-            yPos += yPoint - yRoiBottom;
+            yPos += (yPoint - yRoiBottom);
        return [xPos, yPos];
    }
    _centerFromPointProportional(xPoint, yPoint) {
-        let [xRoi_, yRoi_, widthRoi, heightRoi] = this.getROI();
+        let [xRoi, yRoi, widthRoi, heightRoi] = this.getROI();
        let halfScreenWidth = global.screen_width / 2;
        let halfScreenHeight = global.screen_height / 2;
        // We want to pad with a constant distance after zooming, so divide
@@ -1595,9 +1593,8 @@ var ZoomRegion = class ZoomRegion {
    }
 };
-var Crosshairs = GObject.registerClass(
+var Crosshairs = class Crosshairs {
-class Crosshairs extends Clutter.Actor {
+    constructor() {
    _init() {
        // Set the group containing the crosshairs to three times the desktop
        // size in case the crosshairs need to appear to be infinite in
@@ -1605,19 +1602,19 @@ class Crosshairs extends Clutter.Actor {
        let groupWidth = global.screen_width * 3;
        let groupHeight = global.screen_height * 3;
-        super._init({
+        this._actor = new Clutter.Actor({
            clip_to_allocation: false,
            width: groupWidth,
-            height: groupHeight,
+            height: groupHeight
        });
        this._horizLeftHair = new Clutter.Actor();
        this._horizRightHair = new Clutter.Actor();
        this._vertTopHair = new Clutter.Actor();
        this._vertBottomHair = new Clutter.Actor();
-        this.add_actor(this._horizLeftHair);
+        this._actor.add_actor(this._horizLeftHair);
-        this.add_actor(this._horizRightHair);
+        this._actor.add_actor(this._horizRightHair);
-        this.add_actor(this._vertTopHair);
+        this._actor.add_actor(this._vertTopHair);
-        this.add_actor(this._vertBottomHair);
+        this._actor.add_actor(this._vertBottomHair);
        this._clipSize = [0, 0];
        this._clones = [];
        this.reCenter();
@@ -1627,7 +1624,7 @@ class Crosshairs extends Clutter.Actor {
    }
    _monitorsChanged() {
-        this.set_size(global.screen_width * 3, global.screen_height * 3);
+        this._actor.set_size(global.screen_width * 3, global.screen_height * 3);
        this.reCenter();
    }
@@ -1637,30 +1634,26 @@ class Crosshairs extends Clutter.Actor {
    * already part of some other ZoomRegion, create a clone of the crosshairs
    * actor, and add the clone instead.  Returns either the original or the
    * clone.
-    * @param {ZoomRegion} zoomRegion: The container to add the crosshairs
+    * @zoomRegion:      The container to add the crosshairs group to.
-    *     group to.
+    * @magnifiedMouse:  The mouse actor for the zoom region -- used to
-    * @param {Clutter.Actor} magnifiedMouse: The mouse actor for the
+    *                   position the crosshairs and properly layer them below
-    *     zoom region -- used to position the crosshairs and properly
+    *                   the mouse.
-    *     layer them below the mouse.
+    * @return           The crosshairs actor, or its clone.
    * @returns {Clutter.Actor} The crosshairs actor, or its clone.
    */
    addToZoomRegion(zoomRegion, magnifiedMouse) {
        let crosshairsActor = null;
        if (zoomRegion && magnifiedMouse) {
            let container = magnifiedMouse.get_parent();
            if (container) {
-                crosshairsActor = this;
+                crosshairsActor = this._actor;
-                if (this.get_parent() != null) {
+                if (this._actor.get_parent() != null) {
-                    crosshairsActor = new Clutter.Clone({ source: this });
+                    crosshairsActor = new Clutter.Clone({ source: this._actor });
                    this._clones.push(crosshairsActor);
                    // Clones don't share visibility.
                    this.bind_property('visible', crosshairsActor, 'visible',
                                       GObject.BindingFlags.SYNC_CREATE);
                }
                crosshairsActor.visible = this._actor.visible;
                container.add_actor(crosshairsActor);
-                container.set_child_above_sibling(magnifiedMouse, crosshairsActor);
+                container.raise_child(magnifiedMouse, crosshairsActor);
                let [xMouse, yMouse] = magnifiedMouse.get_position();
                let [crosshairsWidth, crosshairsHeight] = crosshairsActor.get_size();
                crosshairsActor.set_position(xMouse - crosshairsWidth / 2, yMouse - crosshairsHeight / 2);
@@ -1671,13 +1664,12 @@ class Crosshairs extends Clutter.Actor {
    /**
     * removeFromParent:
-     * @param {Clutter.Actor} childActor: the actor returned from
+     * @childActor: the actor returned from addToZoomRegion
     *     addToZoomRegion
     * Remove the crosshairs actor from its parent container, or destroy the
     * child actor if it was just a clone of the crosshairs actor.
     */
    removeFromParent(childActor) {
-        if (childActor == this)
+        if (childActor == this._actor)
            childActor.get_parent().remove_actor(childActor);
        else
            childActor.destroy();
@@ -1686,7 +1678,7 @@ class Crosshairs extends Clutter.Actor {
    /**
     * setColor:
     * Set the color of the crosshairs.
-     * @param {Clutter.Color} clutterColor: The color
+     * @clutterColor:   The color as a Clutter.Color.
     */
    setColor(clutterColor) {
        this._horizLeftHair.background_color = clutterColor;
@@ -1698,7 +1690,7 @@ class Crosshairs extends Clutter.Actor {
    /**
     * getColor:
     * Get the color of the crosshairs.
-     * @returns {ClutterColor} the crosshairs color
+     * @color:  The color as a Clutter.Color.
     */
    getColor() {
        return this._horizLeftHair.get_color();
@@ -1707,7 +1699,7 @@ class Crosshairs extends Clutter.Actor {
    /**
     * setThickness:
     * Set the width of the vertical and horizontal lines of the crosshairs.
-     * @param {number} thickness: the new thickness value
+     * @thickness
     */
    setThickness(thickness) {
        this._horizLeftHair.set_height(thickness);
@@ -1720,7 +1712,7 @@ class Crosshairs extends Clutter.Actor {
    /**
     * getThickness:
     * Get the width of the vertical and horizontal lines of the crosshairs.
-     * @returns {number} The thickness of the crosshairs.
+     * @return:     The thickness of the crosshairs.
     */
    getThickness() {
        return this._horizLeftHair.get_height();
@@ -1729,8 +1721,7 @@ class Crosshairs extends Clutter.Actor {
    /**
     * setOpacity:
     * Set how opaque the crosshairs are.
-     * @param {number} opacity: Value between 0 (fully transparent)
+     * @opacity:    Value between 0 (fully transparent) and 255 (full opaque).
     *     and 255 (full opaque).
     */
    setOpacity(opacity) {
        // set_opacity() throws an exception for values outside the range
@@ -1749,7 +1740,7 @@ class Crosshairs extends Clutter.Actor {
    /**
     * setLength:
     * Set the length of the vertical and horizontal lines in the crosshairs.
-     * @param {number} length: The length of the crosshairs.
+     * @length: The length of the crosshairs.
     */
    setLength(length) {
        this._horizLeftHair.set_width(length);
@@ -1762,7 +1753,7 @@ class Crosshairs extends Clutter.Actor {
    /**
     * getLength:
     * Get the length of the vertical and horizontal lines in the crosshairs.
-     * @returns {number} The length of the crosshairs.
+     * @return: The length of the crosshairs.
     */
    getLength() {
        return this._horizLeftHair.get_width();
@@ -1772,8 +1763,8 @@ class Crosshairs extends Clutter.Actor {
     * setClip:
     * Set the width and height of the rectangle that clips the crosshairs at
     * their intersection
-     * @param {number[]} size: Array of [width, height] defining the size
+     * @size:   Array of [width, height] defining the size of the clip
-     *     of the clip rectangle.
+     *          rectangle.
     */
    setClip(size) {
        if (size) {
@@ -1788,15 +1779,37 @@ class Crosshairs extends Clutter.Actor {
        }
    }
    /**
     * show:
     * Show the crosshairs.
     */
    show() {
        this._actor.show();
        // Clones don't share visibility.
        for (let i = 0; i < this._clones.length; i++)
            this._clones[i].show();
    }
    /**
     * hide:
     * Hide the crosshairs.
     */
    hide() {
        this._actor.hide();
        // Clones don't share visibility.
        for (let i = 0; i < this._clones.length; i++)
            this._clones[i].hide();
    }
    /**
     * reCenter:
     * Reposition the horizontal and vertical hairs such that they cross at
     * the center of crosshairs group.  If called with the dimensions of
     * the clip rectangle, these are used to update the size of the clip.
-     * @param {number[]=} clipSize: If present, the clip's [width, height].
+     * @clipSize:  Optional.  If present, an array of the form [width, height].
     */
    reCenter(clipSize) {
-        let [groupWidth, groupHeight] = this.get_size();
+        let [groupWidth, groupHeight] = this._actor.get_size();
        let leftLength = this._horizLeftHair.get_width();
        let topLength = this._vertTopHair.get_height();
        let thickness = this._horizLeftHair.get_height();
@@ -1818,7 +1831,7 @@ class Crosshairs extends Clutter.Actor {
        this._vertTopHair.set_position((groupWidth - thickness) / 2, top);
        this._vertBottomHair.set_position((groupWidth - thickness) / 2, bottom);
    }
-});
+};
 var MagShaderEffects = class MagShaderEffects {
    constructor(uiGroupClone) {
@@ -1851,7 +1864,7 @@ var MagShaderEffects = class MagShaderEffects {
    /**
     * setInvertLightness:
     * Enable/disable invert lightness effect.
-     * @param {bool} invertFlag: Enabled flag.
+     * @invertFlag:     Enabled flag.
     */
    setInvertLightness(invertFlag) {
        this._inverse.set_enabled(invertFlag);
@@ -1864,14 +1877,11 @@ var MagShaderEffects = class MagShaderEffects {
    /**
     * setBrightness:
     * Set the brightness of the magnified view.
-     * @param {Object} brightness: Object containing the contrast for the
+     * @brightness: Object containing the brightness for the red, green,
-     *     red, green, and blue channels. Values of 0.0 represent "standard"
+     *              and blue channels.  Values of 0.0 represent "standard"
-     *     brightness (no change), whereas values less or greater than
+     *              brightness (no change), whereas values less or greater than
-     *     0.0 indicate decreased or incresaed brightness, respectively.
+     *              0.0 indicate decreased or incresaed brightness,
-     *
+     *              respectively.
     *     {number} brightness.r - the red component
     *     {number} brightness.g - the green component
     *     {number} brightness.b - the blue component
     */
    setBrightness(brightness) {
        let bRed = brightness.r;
@@ -1883,21 +1893,17 @@ var MagShaderEffects = class MagShaderEffects {
        // it modifies the brightness and/or contrast.
        let [cRed, cGreen, cBlue] = this._brightnessContrast.get_contrast();
        this._brightnessContrast.set_enabled(
-            bRed != NO_CHANGE || bGreen != NO_CHANGE || bBlue != NO_CHANGE ||
+            (bRed != NO_CHANGE || bGreen != NO_CHANGE || bBlue != NO_CHANGE ||
-             cRed != NO_CHANGE || cGreen != NO_CHANGE || cBlue != NO_CHANGE
+             cRed != NO_CHANGE || cGreen != NO_CHANGE || cBlue != NO_CHANGE)
        );
    }
    /**
     * Set the contrast of the magnified view.
-     * @param {Object} contrast: Object containing the contrast for the
+     * @contrast:   Object containing the contrast for the red, green,
-     *     red, green, and blue channels. Values of 0.0 represent "standard"
+     *              and blue channels.  Values of 0.0 represent "standard"
-     *     contrast (no change), whereas values less or greater than
+     *              contrast (no change), whereas values less or greater than
-     *     0.0 indicate decreased or incresaed contrast, respectively.
+     *              0.0 indicate decreased or incresaed contrast, respectively.
     *
     *     {number} contrast.r - the red component
     *     {number} contrast.g - the green component
     *     {number} contrast.b - the blue component
     */
    setContrast(contrast) {
        let cRed = contrast.r;
--- a/js/ui/magnifierDBus.js
+++ b/js/ui/magnifierDBus.js
@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported ShellMagnifier */
 const Gio = imports.gi.Gio;
 const Main = imports.ui.main;
@@ -32,7 +31,7 @@ var ShellMagnifier = class ShellMagnifier {
    /**
     * setActive:
-     * @param {bool} activate: activate or de-activate the magnifier.
+     * @activate:   Boolean to activate or de-activate the magnifier.
     */
    setActive(activate) {
        Main.magnifier.setActive(activate);
@@ -40,7 +39,7 @@ var ShellMagnifier = class ShellMagnifier {
    /**
     * isActive:
-     * @returns {bool} Whether the magnifier is active.
+     * @return  Whether the magnifier is active (boolean).
     */
    isActive() {
        return Main.magnifier.isActive();
@@ -65,25 +64,22 @@ var ShellMagnifier = class ShellMagnifier {
    /**
     * createZoomRegion:
     * Create a new ZoomRegion and return its object path.
-     * @param {number} xMagFactor:
+     * @xMagFactor:     The power to set horizontal magnification of the
-     *     The power to set horizontal magnification of the ZoomRegion.
+     *                  ZoomRegion.  A value of 1.0 means no magnification.  A
-     *     A value of 1.0 means no magnification. A value of 2.0 doubles
+     *                  value of 2.0 doubles the size.
-     *     the size.
+     * @yMagFactor:     The power to set the vertical magnification of the
-     * @param {number} yMagFactor:
+     *                  ZoomRegion.
-     *     The power to set the vertical magnification of the
+     * @roi             Array of integers defining the region of the
-     *     ZoomRegion.
+     *                  screen/desktop to magnify.  The array has the form
-     * @param {number[]} roi
+     *                  [left, top, right, bottom].
-     *     Array of integers defining the region of the screen/desktop
+     * @viewPort        Array of integers, [left, top, right, bottom] that defines
-     *     to magnify.  The array has the form [left, top, right, bottom].
+     *                  the position of the ZoomRegion on screen.
     * @param {number[]} viewPort
     *     Array of integers, [left, top, right, bottom] that defines
     *     the position of the ZoomRegion on screen.
     *
     * FIXME: The arguments here are redundant, since the width and height of
     *   the ROI are determined by the viewport and magnification factors.
     *   We ignore the passed in width and height.
     *
-     * @returns {ZoomRegion} The newly created ZoomRegion.
+     * @return          The newly created ZoomRegion.
     */
    createZoomRegion(xMagFactor, yMagFactor, roi, viewPort) {
        let ROI = { x: roi[0], y: roi[1], width: roi[2] - roi[0], height: roi[3] - roi[1] };
@@ -103,9 +99,7 @@ var ShellMagnifier = class ShellMagnifier {
    /**
     * addZoomRegion:
     * Append the given ZoomRegion to the magnifier's list of ZoomRegions.
-     * @param {string} zoomerObjectPath: The object path for the zoom
+     * @zoomerObjectPath:   The object path for the zoom region proxy.
     *     region proxy.
     * @returns {bool} whether the region was added successfully
     */
    addZoomRegion(zoomerObjectPath) {
        let proxyAndZoomRegion = this._zoomers[zoomerObjectPath];
@@ -120,8 +114,8 @@ var ShellMagnifier = class ShellMagnifier {
    /**
     * getZoomRegions:
     * Return a list of ZoomRegion object paths for this Magnifier.
-     * @returns {string[]}: The Magnifier's zoom region list as an array
+     * @return:     The Magnifier's zoom region list as an array of DBus object
-     *     of DBus object paths.
+     *              paths.
     */
    getZoomRegions() {
        // There may be more ZoomRegions in the magnifier itself than have
@@ -130,7 +124,7 @@ var ShellMagnifier = class ShellMagnifier {
        let zoomRegions = Main.magnifier.getZoomRegions();
        let objectPaths = [];
        let thoseZoomers = this._zoomers;
-        zoomRegions.forEach(aZoomRegion => {
+        zoomRegions.forEach ((aZoomRegion, index, array) => {
            let found = false;
            for (let objectPath in thoseZoomers) {
                let proxyAndZoomRegion = thoseZoomers[objectPath];
@@ -142,7 +136,7 @@ var ShellMagnifier = class ShellMagnifier {
            }
            if (!found) {
                // Got a ZoomRegion with no DBus proxy, make one.
-                let newPath = `${ZOOM_SERVICE_PATH}/zoomer${_zoomRegionInstanceCount}`;
+                let newPath =  ZOOM_SERVICE_PATH + '/zoomer' + _zoomRegionInstanceCount;
                _zoomRegionInstanceCount++;
                let zoomRegionProxy = new ShellMagnifierZoomRegion(newPath, aZoomRegion);
                let proxyAndZoomer = {};
@@ -174,7 +168,7 @@ var ShellMagnifier = class ShellMagnifier {
    /**
     * fullScreenCapable:
     * Consult if the Magnifier can magnify in full-screen mode.
-     * @returns {bool} Always return true.
+     * @return  Always return true.
     */
    fullScreenCapable() {
        return true;
@@ -183,7 +177,7 @@ var ShellMagnifier = class ShellMagnifier {
    /**
     * setCrosswireSize:
     * Set the crosswire size of all ZoomRegions.
-     * @param {number} size: The thickness of each line in the cross wire.
+     * @size:   The thickness of each line in the cross wire.
     */
    setCrosswireSize(size) {
        Main.magnifier.setCrosshairsThickness(size);
@@ -192,7 +186,7 @@ var ShellMagnifier = class ShellMagnifier {
    /**
     * getCrosswireSize:
     * Get the crosswire size of all ZoomRegions.
-     * @returns {number}: The thickness of each line in the cross wire.
+     * @return:   The thickness of each line in the cross wire.
     */
    getCrosswireSize() {
        return Main.magnifier.getCrosshairsThickness();
@@ -201,16 +195,16 @@ var ShellMagnifier = class ShellMagnifier {
    /**
     * setCrosswireLength:
     * Set the crosswire length of all zoom-regions..
-     * @param {number} length: The length of each line in the cross wire.
+     * @size:   The length of each line in the cross wire.
     */
    setCrosswireLength(length) {
        Main.magnifier.setCrosshairsLength(length);
    }
    /**
-     * getCrosswireSize:
+     * setCrosswireSize:
-     * Get the crosswire length of all zoom-regions.
+     * Set the crosswire size of all zoom-regions.
-     * @returns {number} size: The length of each line in the cross wire.
+     * @size:   The thickness of each line in the cross wire.
     */
    getCrosswireLength() {
        return Main.magnifier.getCrosshairsLength();
@@ -219,7 +213,7 @@ var ShellMagnifier = class ShellMagnifier {
    /**
     * setCrosswireClip:
     * Set if the crosswire will be clipped by the cursor image..
-     * @param {bool} clip: Flag to indicate whether to clip the crosswire.
+     * @clip:   Flag to indicate whether to clip the crosswire.
     */
    setCrosswireClip(clip) {
        Main.magnifier.setCrosshairsClip(clip);
@@ -228,7 +222,7 @@ var ShellMagnifier = class ShellMagnifier {
    /**
     * getCrosswireClip:
     * Get the crosswire clip value.
-     * @returns {bool}: Whether the crosswire is clipped by the cursor image.
+     * @return:   Whether the crosswire is clipped by the cursor image.
     */
    getCrosswireClip() {
        return Main.magnifier.getCrosshairsClip();
@@ -237,7 +231,7 @@ var ShellMagnifier = class ShellMagnifier {
    /**
     * setCrosswireColor:
     * Set the crosswire color of all ZoomRegions.
-     * @param {number} color: Unsigned int of the form rrggbbaa.
+     * @color:   Unsigned int of the form rrggbbaa.
     */
    setCrosswireColor(color) {
        Main.magnifier.setCrosshairsColor('#%08x'.format(color));
@@ -246,8 +240,7 @@ var ShellMagnifier = class ShellMagnifier {
    /**
     * getCrosswireClip:
     * Get the crosswire color of all ZoomRegions.
-     * @returns {number}: The crosswire color as an unsigned int in
+     * @return:   The crosswire color as an unsigned int in the form rrggbbaa.
     *     the form rrggbbaa.
     */
    getCrosswireColor() {
        let colorString = Main.magnifier.getCrosshairsColor();
@@ -272,11 +265,11 @@ var ShellMagnifierZoomRegion = class ShellMagnifierZoomRegion {
    /**
     * setMagFactor:
-     * @param {number} xMagFactor: The power to set the horizontal
+     * @xMagFactor:     The power to set the horizontal magnification factor to
-     *     magnification factor to of the magnified view. A value of
+     *                  of the magnified view.  A value of 1.0 means no
-     *     1.0 means no magnification. A value of 2.0 doubles the size.
+     *                  magnification.  A value of 2.0 doubles the size.
-     * @param {number} yMagFactor: The power to set the vertical
+     * @yMagFactor:     The power to set the vertical magnification factor to
-     *     magnification factor to of the magnified view.
+     *                  of the magnified view.
     */
    setMagFactor(xMagFactor, yMagFactor) {
        this._zoomRegion.setMagFactor(xMagFactor, yMagFactor);
@@ -284,7 +277,7 @@ var ShellMagnifierZoomRegion = class ShellMagnifierZoomRegion {
    /**
     * getMagFactor:
-     * @returns {number[]}: [xMagFactor, yMagFactor], containing the horizontal
+     * @return  an array, [xMagFactor, yMagFactor], containing the horizontal
     *          and vertical magnification powers.  A value of 1.0 means no
     *          magnification.  A value of 2.0 means the contents are doubled
     *          in size, and so on.
@@ -296,9 +289,9 @@ var ShellMagnifierZoomRegion = class ShellMagnifierZoomRegion {
    /**
     * setRoi:
     * Sets the "region of interest" that the ZoomRegion is magnifying.
-     * @param {number[]} roi: [left, top, right, bottom], defining the
+     * @roi     Array, [left, top, right, bottom], defining the region of the
-     *     region of the screen to magnify.
+     *          screen to magnify. The values are in screen (unmagnified)
-     *     The values are in screen (unmagnified) coordinate space.
+     *          coordinate space.
     */
    setRoi(roi) {
        let roiObject = { x: roi[0], y: roi[1], width: roi[2] - roi[0], height: roi[3] - roi[1] };
@@ -310,7 +303,7 @@ var ShellMagnifierZoomRegion = class ShellMagnifierZoomRegion {
     * Retrieves the "region of interest" -- the rectangular bounds of that part
     * of the desktop that the magnified view is showing (x, y, width, height).
     * The bounds are given in non-magnified coordinates.
-     * @returns {Array}: [left, top, right, bottom], representing the bounding
+     * @return  an array, [left, top, right, bottom], representing the bounding
     *          rectangle of what is shown in the magnified view.
     */
    getRoi() {
@@ -323,11 +316,10 @@ var ShellMagnifierZoomRegion = class ShellMagnifierZoomRegion {
    /**
     * Set the "region of interest" by centering the given screen coordinate
     * within the zoom region.
-     * @param {number} x: The x-coord of the point to place at the
+     * @x       The x-coord of the point to place at the center of the zoom region.
-     *     center of the zoom region.
+     * @y       The y-coord.
-     * @param {number} y: The y-coord.
+     * @return  Whether the shift was successful (for GS-mag, this is always
-     * @returns {bool} Whether the shift was successful (for GS-mag, this
+     *          true).
     *     is always true).
     */
    shiftContentsTo(x, y) {
        this._zoomRegion.scrollContentsTo(x, y);
@@ -337,8 +329,8 @@ var ShellMagnifierZoomRegion = class ShellMagnifierZoomRegion {
    /**
     * moveResize
     * Sets the position and size of the ZoomRegion on screen.
-     * @param {number[]} viewPort: [left, top, right, bottom], defining
+     * @viewPort    Array, [left, top, right, bottom], defining the position and
-     *     the position and size on screen to place the zoom region.
+     *              size on screen to place the zoom region.
     */
    moveResize(viewPort) {
        let viewRect = { x: viewPort[0], y: viewPort[1], width: viewPort[2] - viewPort[0], height: viewPort[3] - viewPort[1] };
--- a/js/ui/main.js
+++ b/js/ui/main.js
@@ -1,14 +1,7 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported componentManager, notificationDaemon, windowAttentionHandler,
            ctrlAltTabManager, padOsdService, osdWindowManager,
            osdMonitorLabeler, shellMountOpDBusService, shellDBusService,
            shellAccessDialogDBusService, shellAudioSelectionDBusService,
            screenSaverDBus, screencastService, uiGroup, magnifier,
            xdndHandler, keyboard, kbdA11yDialog, introspectService,
            start, pushModal, popModal, activateWindow, createLookingGlass,
            initializeDeferredWork, getThemeStylesheet, setThemeStylesheet */
 const { Clutter, Gio, GLib, GObject, Meta, Shell, St } = imports.gi;
 const Mainloop = imports.mainloop;
 const AccessDialog = imports.ui.accessDialog;
 const AudioDeviceSelection = imports.ui.audioDeviceSelection;
@@ -53,7 +46,6 @@ const LOG_DOMAIN = 'GNOME Shell';
 const GNOMESHELL_STARTED_MESSAGE_ID = 'f3ea493c22934e26811cd62abe8e203a';
 var componentManager = null;
 var extensionManager = null;
 var panel = null;
 var overview = null;
 var runDialog = null;
@@ -189,7 +181,7 @@ function _initializeUI() {
    messageTray = new MessageTray.MessageTray();
    panel = new Panel.Panel();
-    keyboard = new Keyboard.KeyboardManager();
+    keyboard = new Keyboard.Keyboard();
    notificationDaemon = new NotificationDaemon.NotificationDaemon();
    windowAttentionHandler = new WindowAttentionHandler.WindowAttentionHandler();
    componentManager = new Components.ComponentManager();
@@ -199,12 +191,12 @@ function _initializeUI() {
    layoutManager.init();
    overview.init();
-    new PointerA11yTimeout.PointerA11yTimeout();
+    (new PointerA11yTimeout.PointerA11yTimeout());
    _a11ySettings = new Gio.Settings({ schema_id: A11Y_SCHEMA });
    global.display.connect('overlay-key', () => {
-        if (!_a11ySettings.get_boolean(STICKY_KEYS_ENABLE))
+        if (!_a11ySettings.get_boolean (STICKY_KEYS_ENABLE))
            overview.toggle();
    });
@@ -229,17 +221,12 @@ function _initializeUI() {
    EndSessionDialog.init();
    // We're ready for the session manager to move to the next phase
-    GLib.idle_add(GLib.PRIORITY_DEFAULT, () => {
+    Meta.register_with_session();
        Shell.util_sd_notify();
        Meta.register_with_session();
        return GLib.SOURCE_REMOVE;
    });
    _startDate = new Date();
    ExtensionDownloader.init();
-    extensionManager = new ExtensionSystem.ExtensionManager();
+    ExtensionSystem.init();
    extensionManager.init();
    if (sessionMode.isGreeter && screenShield) {
        layoutManager.connect('startup-prepared', () => {
@@ -248,33 +235,20 @@ function _initializeUI() {
    }
    layoutManager.connect('startup-complete', () => {
-        if (actionMode == Shell.ActionMode.NONE)
+        if (actionMode == Shell.ActionMode.NONE) {
            actionMode = Shell.ActionMode.NORMAL;
-
+        }
-        if (screenShield)
+        if (screenShield) {
            screenShield.lockIfWasLocked();
-
+        }
        if (sessionMode.currentMode != 'gdm' &&
            sessionMode.currentMode != 'initial-setup') {
            GLib.log_structured(LOG_DOMAIN, GLib.LogLevelFlags.LEVEL_MESSAGE, {
                'MESSAGE': `GNOME Shell started at ${_startDate}`,
-                'MESSAGE_ID': GNOMESHELL_STARTED_MESSAGE_ID,
+                'MESSAGE_ID': GNOMESHELL_STARTED_MESSAGE_ID
            });
        }
        let credentials = new Gio.Credentials();
        if (credentials.get_unix_user() === 0) {
            notify(_('Logged in as a privileged user'),
                   _('Running a session as a privileged user should be avoided for security reasons. If possible, you should log in as a normal user.'));
        }
        if (sessionMode.currentMode !== 'gdm' &&
            sessionMode.currentMode !== 'initial-setup' &&
            screenShield === null) {
            notify(_('Screen Lock disabled'),
                   _('Screen Locking requires the GNOME display manager.'));
        }
        LoginManager.registerSessionWithGDM();
        let perfModuleName = GLib.getenv("SHELL_PERF_MODULE");
@@ -289,19 +263,19 @@ function _initializeUI() {
 function _getStylesheet(name) {
    let stylesheet;
-    stylesheet = Gio.File.new_for_uri(`resource:///org/gnome/shell/theme/${name}`);
+    stylesheet = Gio.File.new_for_uri('resource:///org/gnome/shell/theme/' + name);
    if (stylesheet.query_exists(null))
        return stylesheet;
    let dataDirs = GLib.get_system_data_dirs();
    for (let i = 0; i < dataDirs.length; i++) {
        let path = GLib.build_filenamev([dataDirs[i], 'gnome-shell', 'theme', name]);
-        stylesheet = Gio.file_new_for_path(path);
+        let stylesheet = Gio.file_new_for_path(path);
        if (stylesheet.query_exists(null))
            return stylesheet;
    }
-    stylesheet = Gio.File.new_for_path(`${global.datadir}/theme/${name}`);
+    stylesheet = Gio.File.new_for_path(global.datadir + '/theme/' + name);
    if (stylesheet.query_exists(null))
        return stylesheet;
@@ -337,7 +311,7 @@ function _loadDefaultStylesheet() {
 *
 * Get the theme CSS file that the shell will load
 *
- * @returns {?Gio.File}: A #GFile that contains the theme CSS,
+ * Returns: A #GFile that contains the theme CSS,
 *          null if using the default
 */
 function getThemeStylesheet() {
@@ -346,8 +320,8 @@ function getThemeStylesheet() {
 /**
 * setThemeStylesheet:
- * @param {string=} cssStylesheet: A file path that contains the theme CSS,
+ * @cssStylesheet: A file path that contains the theme CSS,
- *     set it to null to use the default
+ *                 set it to null to use the default
 *
 * Set the theme CSS file that the shell will load
 */
@@ -359,12 +333,12 @@ function reloadThemeResource() {
    if (_themeResource)
        _themeResource._unregister();
-    _themeResource = Gio.Resource.load(`${global.datadir}/gnome-shell-theme.gresource`);
+    _themeResource = Gio.Resource.load(global.datadir + '/gnome-shell-theme.gresource');
    _themeResource._register();
 }
 function _loadOskLayouts() {
-    _oskResource = Gio.Resource.load(`${global.datadir}/gnome-shell-osk-layouts.gresource`);
+    _oskResource = Gio.Resource.load(global.datadir + '/gnome-shell-osk-layouts.gresource');
    _oskResource._register();
 }
@@ -374,13 +348,11 @@ function _loadOskLayouts() {
 * Reloads the theme CSS file
 */
 function loadTheme() {
-    let themeContext = St.ThemeContext.get_for_stage(global.stage);
+    let themeContext = St.ThemeContext.get_for_stage (global.stage);
    let previousTheme = themeContext.get_theme();
-    let theme = new St.Theme({
+    let theme = new St.Theme ({ application_stylesheet: _cssStylesheet,
-        application_stylesheet: _cssStylesheet,
+                                default_stylesheet: _defaultCssStylesheet });
        default_stylesheet: _defaultCssStylesheet,
    });
    if (theme.default_stylesheet == null)
        throw new Error("No valid stylesheet found for '%s'".format(sessionMode.stylesheetName));
@@ -392,26 +364,26 @@ function loadTheme() {
            theme.load_stylesheet(customStylesheets[i]);
    }
-    themeContext.set_theme(theme);
+    themeContext.set_theme (theme);
 }
 /**
 * notify:
- * @param {string} msg: A message
+ * @msg: A message
- * @param {string} details: Additional information
+ * @details: Additional information
 */
 function notify(msg, details) {
    let source = new MessageTray.SystemNotificationSource();
    messageTray.add(source);
    let notification = new MessageTray.Notification(source, msg, details);
    notification.setTransient(true);
-    source.showNotification(notification);
+    source.notify(notification);
 }
 /**
 * notifyError:
- * @param {string} msg: An error message
+ * @msg: An error message
- * @param {string} details: Additional information
+ * @details: Additional information
 *
 * See shell_global_notify_problem().
 */
@@ -435,8 +407,8 @@ function _findModal(actor) {
 /**
 * pushModal:
- * @param {Clutter.Actor} actor: actor which will be given keyboard focus
+ * @actor: #ClutterActor which will be given keyboard focus
- * @param {Object=} params: optional parameters
+ * @params: optional parameters
 *
 * Ensure we are in a mode where all keyboard and mouse input goes to
 * the stage, and focus @actor. Multiple calls to this function act in
@@ -459,7 +431,7 @@ function _findModal(actor) {
 *                global keybindings; the default of NONE will filter
 *                out all keybindings
 *
- * @returns {bool}: true iff we successfully acquired a grab or already had one
+ * Returns: true iff we successfully acquired a grab or already had one
 */
 function pushModal(actor, params) {
    params = Params.parse(params, { timestamp: global.get_current_time(),
@@ -490,11 +462,11 @@ function pushModal(actor, params) {
                modalActorFocusStack[index].prevFocus = null;
        });
    }
-    modalActorFocusStack.push({ actor,
+    modalActorFocusStack.push({ actor: actor,
                                destroyId: actorDestroyId,
-                                prevFocus,
+                                prevFocus: prevFocus,
-                                prevFocusDestroyId,
+                                prevFocusDestroyId: prevFocusDestroyId,
-                                actionMode });
+                                actionMode: actionMode });
    actionMode = params.actionMode;
    global.stage.set_key_focus(actor);
@@ -503,9 +475,8 @@ function pushModal(actor, params) {
 /**
 * popModal:
- * @param {Clutter.Actor} actor: the actor passed to original invocation
+ * @actor: #ClutterActor passed to original invocation of pushModal()
- *     of pushModal()
+ * @timestamp: optional timestamp
 * @param {number=} timestamp: optional timestamp
 *
 * Reverse the effect of pushModal(). If this invocation is undoing
 * the topmost invocation, then the focus will be restored to the
@@ -576,24 +547,24 @@ function popModal(actor, timestamp) {
 }
 function createLookingGlass() {
-    if (lookingGlass == null)
+    if (lookingGlass == null) {
        lookingGlass = new LookingGlass.LookingGlass();
-
+    }
    return lookingGlass;
 }
 function openRunDialog() {
-    if (runDialog == null)
+    if (runDialog == null) {
        runDialog = new RunDialog.RunDialog();
-
+    }
    runDialog.open();
 }
 /**
 * activateWindow:
- * @param {Meta.Window} window: the window to activate
+ * @window: the Meta.Window to activate
- * @param {number=} time: current event time
+ * @time: (optional) current event time
- * @param {number=} workspaceNum:  window's workspace number
+ * @workspaceNum: (optional) window's workspace number
 *
 * Activates @window, switching to its workspace first if necessary,
 * and switching out of the overview if it's currently active
@@ -601,7 +572,7 @@ function openRunDialog() {
 function activateWindow(window, time, workspaceNum) {
    let workspaceManager = global.workspace_manager;
    let activeWorkspaceNum = workspaceManager.get_active_workspace_index();
-    let windowWorkspaceNum = workspaceNum !== undefined ? workspaceNum : window.get_workspace().index();
+    let windowWorkspaceNum = (workspaceNum !== undefined) ? workspaceNum : window.get_workspace().index();
    if (!time)
        time = global.get_current_time();
@@ -639,7 +610,7 @@ function _runDeferredWork(workId) {
    _deferredWorkQueue.splice(index, 1);
    _deferredWorkData[workId].callback();
    if (_deferredWorkQueue.length == 0 && _deferredTimeoutId > 0) {
-        GLib.source_remove(_deferredTimeoutId);
+        Mainloop.source_remove(_deferredTimeoutId);
        _deferredTimeoutId = 0;
    }
 }
@@ -669,8 +640,8 @@ function _queueBeforeRedraw(workId) {
 /**
 * initializeDeferredWork:
- * @param {Clutter.Actor} actor: an actor
+ * @actor: A #ClutterActor
- * @param {callback} callback: Function to invoke to perform work
+ * @callback: Function to invoke to perform work
 *
 * This function sets up a callback to be invoked when either the
 * given actor is mapped, or after some period of time when the machine
@@ -683,13 +654,13 @@ function _queueBeforeRedraw(workId) {
 * initialization as well, under the assumption that new actors
 * will need it.
 *
- * @returns {string}: A string work identifier
+ * Returns: A string work identifier
 */
-function initializeDeferredWork(actor, callback) {
+function initializeDeferredWork(actor, callback, props) {
    // Turn into a string so we can use as an object property
-    let workId = `${++_deferredWorkSequence}`;
+    let workId = `${(++_deferredWorkSequence)}`;
-    _deferredWorkData[workId] = { actor,
+    _deferredWorkData[workId] = { 'actor': actor,
-                                  callback };
+                                  'callback': callback };
    actor.connect('notify::mapped', () => {
        if (!(actor.mapped && _deferredWorkQueue.includes(workId)))
            return;
@@ -707,7 +678,7 @@ function initializeDeferredWork(actor, callback) {
 /**
 * queueDeferredWork:
- * @param {string} workId: work identifier
+ * @workId: work identifier
 *
 * Ensure that the work identified by @workId will be
 * run on map or timeout. You should call this function
@@ -725,8 +696,9 @@ function queueDeferredWork(workId) {
        _deferredWorkQueue.push(workId);
    if (data.actor.mapped) {
        _queueBeforeRedraw(workId);
        return;
    } else if (_deferredTimeoutId == 0) {
-        _deferredTimeoutId = GLib.timeout_add_seconds(GLib.PRIORITY_DEFAULT, DEFERRED_TIMEOUT_SECONDS, () => {
+        _deferredTimeoutId = Mainloop.timeout_add_seconds(DEFERRED_TIMEOUT_SECONDS, () => {
            _runAllDeferredWork();
            _deferredTimeoutId = 0;
            return GLib.SOURCE_REMOVE;
@@ -743,13 +715,12 @@ class RestartMessage extends ModalDialog.ModalDialog {
                      shouldFadeIn: false,
                      destroyOnClose: true });
-        let label = new St.Label({
+        let label = new St.Label({ text: message });
            text: message,
            x_align: Clutter.ActorAlign.CENTER,
            y_align: Clutter.ActorAlign.CENTER,
        });
-        this.contentLayout.add_child(label);
+        this.contentLayout.add(label, { x_fill: false,
                                        y_fill: false,
                                        x_align: St.Align.MIDDLE,
                                        y_align: St.Align.MIDDLE });
        this.buttonLayout.hide();
    }
 });
--- a/js/ui/messageList.js
+++ b/js/ui/messageList.js
@@ -1,13 +1,13 @@
-/* exported MessageListSection */
+const { Atk, Clutter, Gio, GLib, GObject, Meta, Pango, St } = imports.gi;
 const { Atk, Clutter, Gio, GLib,
        GObject, Graphene, Meta, Pango, St } = imports.gi;
 const Main = imports.ui.main;
 const MessageTray = imports.ui.messageTray;
 const Signals = imports.signals;
 const Calendar = imports.ui.calendar;
 const Tweener = imports.ui.tweener;
 const Util = imports.misc.util;
-var MESSAGE_ANIMATION_TIME = 100;
+var MESSAGE_ANIMATION_TIME = 0.1;
 var DEFAULT_EXPAND_LINES = 6;
@@ -32,18 +32,13 @@ function _fixMarkup(text, allowMarkup) {
    return GLib.markup_escape_text(text, -1);
 }
-var URLHighlighter = GObject.registerClass(
+var URLHighlighter = class URLHighlighter {
-class URLHighlighter extends St.Label {
+    constructor(text = '', lineWrap, allowMarkup) {
-    _init(text = '', lineWrap, allowMarkup) {
+        this.actor = new St.Label({ reactive: true, style_class: 'url-highlighter',
-        super._init({
+                                    x_expand: true, x_align: Clutter.ActorAlign.START });
            reactive: true,
            style_class: 'url-highlighter',
            x_expand: true,
            x_align: Clutter.ActorAlign.START,
        });
        this._linkColor = '#ccccff';
-        this.connect('style-changed', () => {
+        this.actor.connect('style-changed', () => {
-            let [hasColor, color] = this.get_theme_node().lookup_color('link-color', false);
+            let [hasColor, color] = this.actor.get_theme_node().lookup_color('link-color', false);
            if (hasColor) {
                let linkColor = color.to_string().substr(0, 7);
                if (linkColor != this._linkColor) {
@@ -52,75 +47,70 @@ class URLHighlighter extends St.Label {
                }
            }
        });
-        this.clutter_text.line_wrap = lineWrap;
+        this.actor.clutter_text.line_wrap = lineWrap;
-        this.clutter_text.line_wrap_mode = Pango.WrapMode.WORD_CHAR;
+        this.actor.clutter_text.line_wrap_mode = Pango.WrapMode.WORD_CHAR;
        this.setMarkup(text, allowMarkup);
-    }
+        this.actor.connect('button-press-event', (actor, event) => {
            // Don't try to URL highlight when invisible.
            // The MessageTray doesn't actually hide us, so
            // we need to check for paint opacities as well.
            if (!actor.visible || actor.get_paint_opacity() == 0)
                return Clutter.EVENT_PROPAGATE;
-    vfunc_button_press_event(buttonEvent) {
+            // Keep Notification.actor from seeing this and taking
-        // Don't try to URL highlight when invisible.
+            // a pointer grab, which would block our button-release-event
-        // The MessageTray doesn't actually hide us, so
+            // handler, if an URL is clicked
-        // we need to check for paint opacities as well.
+            return this._findUrlAtPos(event) != -1;
-        if (!this.visible || this.get_paint_opacity() == 0)
+        });
        this.actor.connect('button-release-event', (actor, event) => {
            if (!actor.visible || actor.get_paint_opacity() == 0)
                return Clutter.EVENT_PROPAGATE;
            let urlId = this._findUrlAtPos(event);
            if (urlId != -1) {
                let url = this._urls[urlId].url;
                if (!url.includes(':'))
                    url = 'http://' + url;
                Gio.app_info_launch_default_for_uri(url, global.create_app_launch_context(0, -1));
                return Clutter.EVENT_STOP;
            }
            return Clutter.EVENT_PROPAGATE;
        });
        this.actor.connect('motion-event', (actor, event) => {
            if (!actor.visible || actor.get_paint_opacity() == 0)
                return Clutter.EVENT_PROPAGATE;
-        // Keep Notification from seeing this and taking
+            let urlId = this._findUrlAtPos(event);
-        // a pointer grab, which would block our button-release-event
+            if (urlId != -1 && !this._cursorChanged) {
-        // handler, if an URL is clicked
+                global.display.set_cursor(Meta.Cursor.POINTING_HAND);
-        return this._findUrlAtPos(buttonEvent) != -1;
+                this._cursorChanged = true;
-    }
+            } else if (urlId == -1) {
-
+                global.display.set_cursor(Meta.Cursor.DEFAULT);
-    vfunc_button_release_event(buttonEvent) {
+                this._cursorChanged = false;
-        if (!this.visible || this.get_paint_opacity() == 0)
+            }
            return Clutter.EVENT_PROPAGATE;
        });
        this.actor.connect('leave-event', () => {
            if (!this.actor.visible || this.actor.get_paint_opacity() == 0)
                return Clutter.EVENT_PROPAGATE;
-        let urlId = this._findUrlAtPos(buttonEvent);
+            if (this._cursorChanged) {
-        if (urlId != -1) {
+                this._cursorChanged = false;
-            let url = this._urls[urlId].url;
+                global.display.set_cursor(Meta.Cursor.DEFAULT);
-            if (!url.includes(':'))
+            }
                url = `http://${url}`;
            Gio.app_info_launch_default_for_uri(
                url, global.create_app_launch_context(0, -1));
            return Clutter.EVENT_STOP;
        }
        return Clutter.EVENT_PROPAGATE;
    }
    vfunc_motion_event(motionEvent) {
        if (!this.visible || this.get_paint_opacity() == 0)
            return Clutter.EVENT_PROPAGATE;
-
+        });
        let urlId = this._findUrlAtPos(motionEvent);
        if (urlId != -1 && !this._cursorChanged) {
            global.display.set_cursor(Meta.Cursor.POINTING_HAND);
            this._cursorChanged = true;
        } else if (urlId == -1) {
            global.display.set_cursor(Meta.Cursor.DEFAULT);
            this._cursorChanged = false;
        }
        return Clutter.EVENT_PROPAGATE;
    }
    vfunc_leave_event(crossingEvent) {
        if (!this.visible || this.get_paint_opacity() == 0)
            return Clutter.EVENT_PROPAGATE;
        if (this._cursorChanged) {
            this._cursorChanged = false;
            global.display.set_cursor(Meta.Cursor.DEFAULT);
        }
        return super.vfunc_leave_event(crossingEvent);
    }
    setMarkup(text, allowMarkup) {
        text = text ? _fixMarkup(text, allowMarkup) : '';
        this._text = text;
-        this.clutter_text.set_markup(text);
+        this.actor.clutter_text.set_markup(text);
        /* clutter_text.text contain text without markup */
-        this._urls = Util.findUrls(this.clutter_text.text);
+        this._urls = Util.findUrls(this.actor.clutter_text.text);
        this._highlightUrls();
    }
@@ -132,33 +122,33 @@ class URLHighlighter extends St.Label {
        for (let i = 0; i < urls.length; i++) {
            let url = urls[i];
            let str = this._text.substr(pos, url.pos - pos);
-            markup += `${str}<span foreground="${this._linkColor}"><u>${url.url}</u></span>`;
+            markup += str + '<span foreground="' + this._linkColor + '"><u>' + url.url + '</u></span>';
            pos = url.pos + url.url.length;
        }
        markup += this._text.substr(pos);
-        this.clutter_text.set_markup(markup);
+        this.actor.clutter_text.set_markup(markup);
    }
    _findUrlAtPos(event) {
-        let { x, y } = event;
+        let success;
-        [, x, y] = this.transform_stage_point(x, y);
+        let [x, y] = event.get_coords();
        [success, x, y] = this.actor.transform_stage_point(x, y);
        let findPos = -1;
-        for (let i = 0; i < this.clutter_text.text.length; i++) {
+        for (let i = 0; i < this.actor.clutter_text.text.length; i++) {
-            let [, px, py, lineHeight] = this.clutter_text.position_to_coords(i);
+            let [success, px, py, lineHeight] = this.actor.clutter_text.position_to_coords(i);
            if (py > y || py + lineHeight < y || x < px)
                continue;
            findPos = i;
        }
        if (findPos != -1) {
-            for (let i = 0; i < this._urls.length; i++) {
+            for (let i = 0; i < this._urls.length; i++)
                if (findPos >= this._urls[i].pos &&
                    this._urls[i].pos + this._urls[i].url.length > findPos)
                    return i;
            }
        }
        return -1;
    }
-});
+};
 var ScaleLayout = GObject.registerClass(
 class ScaleLayout extends Clutter.BinLayout {
@@ -171,22 +161,20 @@ class ScaleLayout extends Clutter.BinLayout {
        if (this._container == container)
            return;
-        if (this._container) {
+        if (this._container)
            for (let id of this._signals)
                this._container.disconnect(id);
        }
        this._container = container;
        this._signals = [];
-        if (this._container) {
+        if (this._container)
            for (let signal of ['notify::scale-x', 'notify::scale-y']) {
                let id = this._container.connect(signal, () => {
                    this.layout_changed();
                });
                this._signals.push(id);
            }
        }
    }
    vfunc_get_preferred_width(container, forHeight) {
@@ -213,7 +201,7 @@ var LabelExpanderLayout = GObject.registerClass({
                                              'Expansion of the layout, between 0 (collapsed) ' +
                                              'and 1 (fully expanded',
                                              GObject.ParamFlags.READABLE | GObject.ParamFlags.WRITABLE,
-                                              0, 1, 0),
+                                              0, 1, 0)
    },
 }, class LabelExpanderLayout extends Clutter.LayoutManager {
    _init(params) {
@@ -235,7 +223,7 @@ var LabelExpanderLayout = GObject.registerClass({
        let visibleIndex = this._expansion > 0 ? 1 : 0;
        for (let i = 0; this._container && i < this._container.get_n_children(); i++)
-            this._container.get_child_at_index(i).visible = i == visibleIndex;
+            this._container.get_child_at_index(i).visible = (i == visibleIndex);
        this.layout_changed();
    }
@@ -296,31 +284,21 @@ var LabelExpanderLayout = GObject.registerClass({
    }
 });
-
+var Message = class Message {
-var Message = GObject.registerClass({
+    constructor(title, body) {
    Signals: {
        'close': {},
        'expanded': {},
        'unexpanded': {},
    },
 }, class Message extends St.Button {
    _init(title, body) {
        super._init({
            style_class: 'message',
            accessible_role: Atk.Role.NOTIFICATION,
            can_focus: true,
            x_expand: true,
            y_expand: true,
        });
        this.expanded = false;
        this._useBodyMarkup = false;
-        let vbox = new St.BoxLayout({
+        this.actor = new St.Button({ style_class: 'message',
-            vertical: true,
+                                     accessible_role: Atk.Role.NOTIFICATION,
-            x_expand: true,
+                                     can_focus: true,
-        });
+                                     x_expand: true, x_fill: true });
-        this.set_child(vbox);
+        this.actor.connect('key-press-event',
                           this._onKeyPressed.bind(this));
        let vbox = new St.BoxLayout({ vertical: true });
        this.actor.set_child(vbox);
        let hbox = new St.BoxLayout();
        vbox.add_actor(hbox);
@@ -331,7 +309,7 @@ var Message = GObject.registerClass({
        this._iconBin = new St.Bin({ style_class: 'message-icon-bin',
                                     y_expand: true,
-                                     y_align: Clutter.ActorAlign.START,
+                                     y_align: St.Align.START,
                                     visible: false });
        hbox.add_actor(this._iconBin);
@@ -349,18 +327,14 @@ var Message = GObject.registerClass({
        this.setTitle(title);
        titleBox.add_actor(this.titleLabel);
-        this._secondaryBin = new St.Bin({
+        this._secondaryBin = new St.Bin({ style_class: 'message-secondary-bin',
-            style_class: 'message-secondary-bin',
+                                          x_expand: true, y_expand: true,
-            x_expand: true, y_expand: true,
+                                          x_fill: true, y_fill: true });
        });
        titleBox.add_actor(this._secondaryBin);
        let closeIcon = new St.Icon({ icon_name: 'window-close-symbolic',
                                      icon_size: 16 });
-        this._closeButton = new St.Button({
+        this._closeButton = new St.Button({ child: closeIcon, opacity: 0 });
            style_class: 'message-close-button',
            child: closeIcon, opacity: 0,
        });
        titleBox.add_actor(this._closeButton);
        this._bodyStack = new St.Widget({ x_expand: true });
@@ -368,14 +342,15 @@ var Message = GObject.registerClass({
        contentBox.add_actor(this._bodyStack);
        this.bodyLabel = new URLHighlighter('', false, this._useBodyMarkup);
-        this.bodyLabel.add_style_class_name('message-body');
+        this.bodyLabel.actor.add_style_class_name('message-body');
-        this._bodyStack.add_actor(this.bodyLabel);
+        this._bodyStack.add_actor(this.bodyLabel.actor);
        this.setBody(body);
        this._closeButton.connect('clicked', this.close.bind(this));
-        let actorHoverId = this.connect('notify::hover', this._sync.bind(this));
+        let actorHoverId = this.actor.connect('notify::hover', this._sync.bind(this));
-        this._closeButton.connect('destroy', this.disconnect.bind(this, actorHoverId));
+        this._closeButton.connect('destroy', this.actor.disconnect.bind(this.actor, actorHoverId));
-        this.connect('destroy', this._onDestroy.bind(this));
+        this.actor.connect('clicked', this._onClicked.bind(this));
        this.actor.connect('destroy', this._onDestroy.bind(this));
        this._sync();
    }
@@ -385,7 +360,7 @@ var Message = GObject.registerClass({
    setIcon(actor) {
        this._iconBin.child = actor;
-        this._iconBin.visible = actor != null;
+        this._iconBin.visible = (actor != null);
    }
    setSecondaryActor(actor) {
@@ -456,26 +431,24 @@ var Message = GObject.registerClass({
    expand(animate) {
        this.expanded = true;
-        this._actionBin.visible = this._actionBin.get_n_children() > 0;
+        this._actionBin.visible = (this._actionBin.get_n_children() > 0);
        if (this._bodyStack.get_n_children() < 2) {
            this._expandedLabel = new URLHighlighter(this._bodyText,
                                                     true, this._useBodyMarkup);
-            this.setExpandedBody(this._expandedLabel);
+            this.setExpandedBody(this._expandedLabel.actor);
        }
        if (animate) {
-            this._bodyStack.ease_property('@layout.expansion', 1, {
+            Tweener.addTween(this._bodyStack.layout_manager,
-                progress_mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                             { expansion: 1,
-                duration: MessageTray.ANIMATION_TIME,
+                               time: MessageTray.ANIMATION_TIME,
-            });
+                               transition: 'easeOutQuad' });
            this._actionBin.scale_y = 0;
-            this._actionBin.ease({
+            Tweener.addTween(this._actionBin,
-                scale_y: 1,
+                             { scale_y: 1,
-                duration: MessageTray.ANIMATION_TIME,
+                               time: MessageTray.ANIMATION_TIME,
-                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                               transition: 'easeOutQuad' });
            });
        } else {
            this._bodyStack.layout_manager.expansion = 1;
            this._actionBin.scale_y = 1;
@@ -486,20 +459,18 @@ var Message = GObject.registerClass({
    unexpand(animate) {
        if (animate) {
-            this._bodyStack.ease_property('@layout.expansion', 0, {
+            Tweener.addTween(this._bodyStack.layout_manager,
-                progress_mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                             { expansion: 0,
-                duration: MessageTray.ANIMATION_TIME,
+                               time: MessageTray.ANIMATION_TIME,
-            });
+                               transition: 'easeOutQuad' });
-
+            Tweener.addTween(this._actionBin,
-            this._actionBin.ease({
+                             { scale_y: 0,
-                scale_y: 0,
+                               time: MessageTray.ANIMATION_TIME,
-                duration: MessageTray.ANIMATION_TIME,
+                               transition: 'easeOutQuad',
-                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                               onComplete: () => {
-                onComplete: () => {
+                                   this._actionBin.hide();
-                    this._actionBin.hide();
+                                   this.expanded = false;
-                    this.expanded = false;
+                               } });
                },
            });
        } else {
            this._bodyStack.layout_manager.expansion = 0;
            this._actionBin.scale_y = 0;
@@ -514,16 +485,19 @@ var Message = GObject.registerClass({
    }
    _sync() {
-        let visible = this.hover && this.canClose();
+        let visible = this.actor.hover && this.canClose();
        this._closeButton.opacity = visible ? 255 : 0;
        this._closeButton.reactive = visible;
    }
    _onClicked() {
    }
    _onDestroy() {
    }
-    vfunc_key_press_event(keyEvent) {
+    _onKeyPressed(a, event) {
-        let keysym = keyEvent.keyval;
+        let keysym = event.get_key_symbol();
        if (keysym == Clutter.KEY_Delete ||
            keysym == Clutter.KEY_KP_Delete) {
@@ -532,66 +506,37 @@ var Message = GObject.registerClass({
        }
        return Clutter.EVENT_PROPAGATE;
    }
-});
+};
 Signals.addSignalMethods(Message.prototype);
-var MessageListSection = GObject.registerClass({
+var MessageListSection = class MessageListSection {
-    Properties: {
+    constructor() {
-        'can-clear': GObject.ParamSpec.boolean(
+        this.actor = new St.BoxLayout({ style_class: 'message-list-section',
-            'can-clear', 'can-clear', 'can-clear',
+                                        clip_to_allocation: true,
-            GObject.ParamFlags.READABLE,
+                                        x_expand: true, vertical: true });
            false),
        'empty': GObject.ParamSpec.boolean(
            'empty', 'empty', 'empty',
            GObject.ParamFlags.READABLE,
            true),
    },
    Signals: {
        'can-clear-changed': {},
        'empty-changed': {},
        'message-focused': { param_types: [Message.$gtype] },
    },
 }, class MessageListSection extends St.BoxLayout {
    _init() {
        super._init({
            style_class: 'message-list-section',
            clip_to_allocation: true,
            vertical: true,
            x_expand: true,
        });
        this._list = new St.BoxLayout({ style_class: 'message-list-section-list',
                                        vertical: true });
-        this.add_actor(this._list);
+        this.actor.add_actor(this._list);
        this._list.connect('actor-added', this._sync.bind(this));
        this._list.connect('actor-removed', this._sync.bind(this));
        let id = Main.sessionMode.connect('updated',
                                          this._sync.bind(this));
-        this.connect('destroy', () => {
+        this.actor.connect('destroy', () => {
            Main.sessionMode.disconnect(id);
        });
        this._messages = new Map();
        this._date = new Date();
-        this._empty = true;
+        this.empty = true;
-        this._canClear = false;
+        this.canClear = false;
        this._sync();
    }
-    get empty() {
+    _onKeyFocusIn(actor) {
-        return this._empty;
+        this.emit('key-focus-in', actor);
    }
    get canClear() {
        return this._canClear;
    }
    get _messages() {
        return this._list.get_children().map(i => i.child);
    }
    _onKeyFocusIn(messageActor) {
        this.emit('message-focused', messageActor);
    }
    get allowed() {
@@ -610,94 +555,85 @@ var MessageListSection = GObject.registerClass({
    }
    addMessageAtIndex(message, index, animate) {
-        if (this._messages.includes(message))
+        let obj = {
-            throw new Error('Message was already added previously');
+            container: null,
-
+            destroyId: 0,
-        let listItem = new St.Bin({
+            keyFocusId: 0,
-            child: message,
+            closeId: 0
-            layout_manager: new ScaleLayout(),
+        };
-            pivot_point: new Graphene.Point({ x: .5, y: .5 }),
+        let pivot = new Clutter.Point({ x: .5, y: .5 });
        let scale = animate ? 0 : 1;
        obj.container = new St.Widget({ layout_manager: new ScaleLayout(),
                                        pivot_point: pivot,
                                        scale_x: scale, scale_y: scale });
        obj.keyFocusId = message.actor.connect('key-focus-in',
            this._onKeyFocusIn.bind(this));
        obj.destroyId = message.actor.connect('destroy', () => {
            this.removeMessage(message, false);
        });
-        listItem._connectionsIds = [];
+        obj.closeId = message.connect('close', () => {
        listItem._connectionsIds.push(message.connect('key-focus-in',
            this._onKeyFocusIn.bind(this)));
        listItem._connectionsIds.push(message.connect('close', () => {
            this.removeMessage(message, true);
-        }));
+        });
        listItem._connectionsIds.push(message.connect('destroy', () => {
            listItem._connectionsIds.forEach(id => message.disconnect(id));
            listItem.destroy();
        }));
-        this._list.insert_child_at_index(listItem, index);
+        this._messages.set(message, obj);
        obj.container.add_actor(message.actor);
-        if (animate) {
+        this._list.insert_child_at_index(obj.container, index);
-            listItem.set({ scale_x: 0, scale_y: 0 });
+
-            listItem.ease({
+        if (animate)
-                scale_x: 1,
+            Tweener.addTween(obj.container, { scale_x: 1,
-                scale_y: 1,
+                                              scale_y: 1,
-                duration: MESSAGE_ANIMATION_TIME,
+                                              time: MESSAGE_ANIMATION_TIME,
-                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                                              transition: 'easeOutQuad' });
            });
        }
    }
    moveMessage(message, index, animate) {
-        if (!this._messages.includes(message))
+        let obj = this._messages.get(message);
            throw new Error(`Impossible to move untracked message`);
        let listItem = message.get_parent();
        if (!animate) {
-            this._list.set_child_at_index(listItem, index);
+            this._list.set_child_at_index(obj.container, index);
            return;
        }
        let onComplete = () => {
-            this._list.set_child_at_index(listItem, index);
+            this._list.set_child_at_index(obj.container, index);
-            listItem.ease({
+            Tweener.addTween(obj.container, { scale_x: 1,
-                scale_x: 1,
+                                              scale_y: 1,
-                scale_y: 1,
+                                              time: MESSAGE_ANIMATION_TIME,
-                duration: MESSAGE_ANIMATION_TIME,
+                                              transition: 'easeOutQuad' });
                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
            });
        };
-        listItem.ease({
+        Tweener.addTween(obj.container, { scale_x: 0,
-            scale_x: 0,
+                                          scale_y: 0,
-            scale_y: 0,
+                                          time: MESSAGE_ANIMATION_TIME,
-            duration: MESSAGE_ANIMATION_TIME,
+                                          transition: 'easeOutQuad',
-            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                                          onComplete: onComplete });
            onComplete,
        });
    }
    removeMessage(message, animate) {
-        if (!this._messages.includes(message))
+        let obj = this._messages.get(message);
            throw new Error(`Impossible to remove untracked message`);
-        let listItem = message.get_parent();
+        message.actor.disconnect(obj.destroyId);
-        listItem._connectionsIds.forEach(id => message.disconnect(id));
+        message.actor.disconnect(obj.keyFocusId);
        message.disconnect(obj.closeId);
        this._messages.delete(message);
        if (animate) {
-            listItem.ease({
+            Tweener.addTween(obj.container, { scale_x: 0, scale_y: 0,
-                scale_x: 0,
+                                              time: MESSAGE_ANIMATION_TIME,
-                scale_y: 0,
+                                              transition: 'easeOutQuad',
-                duration: MESSAGE_ANIMATION_TIME,
+                                              onComplete() {
-                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                                                  obj.container.destroy();
-                onComplete: () => {
+                                                  global.sync_pointer();
-                    listItem.destroy();
+                                              } });
                    global.sync_pointer();
                },
            });
        } else {
-            listItem.destroy();
+            obj.container.destroy();
            global.sync_pointer();
        }
    }
    clear() {
-        let messages = this._messages.filter(msg => msg.canClose());
+        let messages = [...this._messages.keys()].filter(msg => msg.canClose());
        // If there are few messages, letting them all zoom out looks OK
        if (messages.length < 2) {
@@ -710,37 +646,47 @@ var MessageListSection = GObject.registerClass({
            let delay = MESSAGE_ANIMATION_TIME / Math.max(messages.length, 5);
            for (let i = 0; i < messages.length; i++) {
                let message = messages[i];
-                message.get_parent().ease({
+                let obj = this._messages.get(message);
-                    translation_x: this._list.width,
+                Tweener.addTween(obj.container,
-                    opacity: 0,
+                                 { anchor_x: this._list.width,
-                    duration: MESSAGE_ANIMATION_TIME,
+                                   opacity: 0,
-                    delay: i * delay,
+                                   time: MESSAGE_ANIMATION_TIME,
-                    mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                                   delay: i * delay,
-                    onComplete: () => message.close(),
+                                   transition: 'easeOutQuad',
-                });
+                                   onComplete() {
                                       message.close();
                                   } });
            }
        }
    }
    _canClear() {
        for (let message of this._messages.keys())
            if (message.canClose())
                return true;
        return false;
    }
    _shouldShow() {
        return !this.empty;
    }
    _sync() {
-        let messages = this._messages;
+        let empty = this._list.get_n_children() == 0;
-        let empty = messages.length == 0;
+        let changed = this.empty !== empty;
        this.empty = empty;
-        if (this._empty != empty) {
+        if (changed)
-            this._empty = empty;
+            this.emit('empty-changed');
            this.notify('empty');
        }
-        let canClear = messages.some(m => m.canClose());
+        let canClear = this._canClear();
-        if (this._canClear != canClear) {
+        changed = this.canClear !== canClear;
-            this._canClear = canClear;
+        this.canClear = canClear;
            this.notify('can-clear');
        }
-        this.visible = this.allowed && this._shouldShow();
+        if (changed)
            this.emit('can-clear-changed');
        this.actor.visible = this.allowed && this._shouldShow();
    }
-});
+};
 Signals.addSignalMethods(MessageListSection.prototype);
--- a/js/ui/messageTray.js
+++ b/js/ui/messageTray.js
@@ -1,23 +1,23 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported NotificationPolicy, NotificationGenericPolicy,
   NotificationApplicationPolicy, Source, SourceActor, SourceActorWithLabel,
   SystemNotificationSource, MessageTray */
 const { Clutter, Gio, GLib, GObject, Meta, Shell, St } = imports.gi;
 const Mainloop = imports.mainloop;
 const Signals = imports.signals;
 const Calendar = imports.ui.calendar;
 const GnomeSession = imports.misc.gnomeSession;
 const Layout = imports.ui.layout;
 const Main = imports.ui.main;
 const Params = imports.misc.params;
 const Tweener = imports.ui.tweener;
 const SHELL_KEYBINDINGS_SCHEMA = 'org.gnome.shell.keybindings';
-var ANIMATION_TIME = 200;
+var ANIMATION_TIME = 0.2;
-var NOTIFICATION_TIMEOUT = 4000;
+var NOTIFICATION_TIMEOUT = 4;
-var HIDE_TIMEOUT = 200;
+var HIDE_TIMEOUT = 0.2;
-var LONGER_HIDE_TIMEOUT = 600;
+var LONGER_HIDE_TIMEOUT = 0.6;
 var MAX_NOTIFICATIONS_IN_QUEUE = 3;
 var MAX_NOTIFICATIONS_PER_SOURCE = 3;
@@ -33,7 +33,7 @@ var State = {
    HIDDEN:  0,
    SHOWING: 1,
    SHOWN:   2,
-    HIDING:  3,
+    HIDING:  3
 };
 // These reasons are useful when we destroy the notifications received through
@@ -47,7 +47,7 @@ var NotificationDestroyedReason = {
    EXPIRED: 1,
    DISMISSED: 2,
    SOURCE_CLOSED: 3,
-    REPLACED: 4,
+    REPLACED: 4
 };
 // Message tray has its custom Urgency enumeration. LOW, NORMAL and CRITICAL
@@ -58,7 +58,7 @@ var Urgency = {
    LOW: 0,
    NORMAL: 1,
    HIGH: 2,
-    CRITICAL: 3,
+    CRITICAL: 3
 };
 // The privacy of the details of a notification. USER is for notifications which
@@ -133,82 +133,70 @@ var FocusGrabber = class FocusGrabber {
 // source, such as whether to play sound or honour the critical bit.
 //
 // A notification without a policy object will inherit the default one.
-var NotificationPolicy = GObject.registerClass({
+var NotificationPolicy = class NotificationPolicy {
-    Properties: {
+    constructor(params) {
-        'enable': GObject.ParamSpec.boolean(
+        params = Params.parse(params, { enable: true,
-            'enable', 'enable', 'enable',
+                                        enableSound: true,
-            GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT_ONLY,
+                                        showBanners: true,
-            true),
+                                        forceExpanded: false,
-        'enable-sound': GObject.ParamSpec.boolean(
+                                        showInLockScreen: true,
-            'enable-sound', 'enable-sound', 'enable-sound',
+                                        detailsInLockScreen: false
-            GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT_ONLY,
+                                      });
-            true),
+        Object.getOwnPropertyNames(params).forEach(key => {
-        'show-banners': GObject.ParamSpec.boolean(
+            let desc = Object.getOwnPropertyDescriptor(params, key);
-            'show-banners', 'show-banners', 'show-banners',
+            Object.defineProperty(this, `_${key}`, desc);
-            GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT_ONLY,
+        });
-            true),
+    }
-        'force-expanded': GObject.ParamSpec.boolean(
+
            'force-expanded', 'force-expanded', 'force-expanded',
            GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT_ONLY,
            false),
        'show-in-lock-screen': GObject.ParamSpec.boolean(
            'show-in-lock-screen', 'show-in-lock-screen', 'show-in-lock-screen',
            GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT_ONLY,
            false),
        'details-in-lock-screen': GObject.ParamSpec.boolean(
            'details-in-lock-screen', 'details-in-lock-screen', 'details-in-lock-screen',
            GObject.ParamFlags.READWRITE | GObject.ParamFlags.CONSTRUCT_ONLY,
            false),
    },
 }, class NotificationPolicy extends GObject.Object {
    // Do nothing for the default policy. These methods are only useful for the
    // GSettings policy.
    store() { }
    destroy() { }
-    destroy() {
+    get enable() {
-        this.run_dispose();
+        return this._enable;
    }
    get enableSound() {
-        return this.enable_sound;
+        return this._enableSound;
    }
    get showBanners() {
-        return this.show_banners;
+        return this._showBanners;
    }
    get forceExpanded() {
-        return this.force_expanded;
+        return this._forceExpanded;
    }
    get showInLockScreen() {
-        return this.show_in_lock_screen;
+        return this._showInLockScreen;
    }
    get detailsInLockScreen() {
-        return this.details_in_lock_screen;
+        return this._detailsInLockScreen;
    }
-});
+};
 Signals.addSignalMethods(NotificationPolicy.prototype);
-var NotificationGenericPolicy = GObject.registerClass({
+var NotificationGenericPolicy =
-}, class NotificationGenericPolicy extends NotificationPolicy {
+class NotificationGenericPolicy extends NotificationPolicy {
-    _init() {
+    constructor() {
-        super._init();
+        super();
        this.id = 'generic';
        this._masterSettings = new Gio.Settings({ schema_id: 'org.gnome.desktop.notifications' });
        this._masterSettings.connect('changed', this._changed.bind(this));
    }
    store() { }
    destroy() {
        this._masterSettings.run_dispose();
        super.destroy();
    }
    _changed(settings, key) {
-        if (this.constructor.find_property(key))
+        this.emit('policy-changed', key);
            this.notify(key);
    }
    get showBanners() {
@@ -218,12 +206,12 @@ var NotificationGenericPolicy = GObject.registerClass({
    get showInLockScreen() {
        return this._masterSettings.get_boolean('show-in-lock-screen');
    }
-});
+};
-var NotificationApplicationPolicy = GObject.registerClass({
+var NotificationApplicationPolicy =
-}, class NotificationApplicationPolicy extends NotificationPolicy {
+class NotificationApplicationPolicy extends NotificationPolicy {
-    _init(id) {
+    constructor(id) {
-        super._init();
+        super();
        this.id = id;
        this._canonicalId = this._canonicalizeId(id);
@@ -249,13 +237,12 @@ var NotificationApplicationPolicy = GObject.registerClass({
    destroy() {
        this._masterSettings.run_dispose();
        this._settings.run_dispose();
        super.destroy();
    }
    _changed(settings, key) {
-        if (this.constructor.find_property(key))
+        this.emit('policy-changed', key);
-            this.notify(key);
+        if (key == 'enable')
            this.emit('enable-changed');
    }
    _canonicalizeId(id) {
@@ -289,7 +276,7 @@ var NotificationApplicationPolicy = GObject.registerClass({
    get detailsInLockScreen() {
        return this._settings.get_boolean('details-in-lock-screen');
    }
-});
+};
 // Notification:
 // @source: the notification's Source
@@ -345,26 +332,13 @@ var NotificationApplicationPolicy = GObject.registerClass({
 // event sound is played when the notification is shown (if the policy for
 // @source allows playing sounds).
 //
-// [1] https://developer.gnome.org/notification-spec/#markup
+// [1] https://developer.gnome.org/notification-spec/#markup 
-var Notification = GObject.registerClass({
+var Notification = class Notification {
-    Properties: {
+    constructor(source, title, banner, params) {
        'acknowledged': GObject.ParamSpec.boolean(
            'acknowledged', 'acknowledged', 'acknowledged',
            GObject.ParamFlags.READWRITE,
            false),
    },
    Signals: {
        'activated': {},
        'destroy': { param_types: [GObject.TYPE_UINT] },
        'updated': { param_types: [GObject.TYPE_BOOLEAN] },
    },
 }, class Notification extends GObject.Object {
    _init(source, title, banner, params) {
        super._init();
        this.source = source;
        this.title = title;
        this.urgency = Urgency.NORMAL;
        this.resident = false;
        // 'transient' is a reserved keyword in JS, so we have to use an alternate variable name
        this.isTransient = false;
        this.privacyScope = PrivacyScope.USER;
@@ -376,7 +350,6 @@ var Notification = GObject.registerClass({
        this._soundFile = null;
        this._soundPlayed = false;
        this.actions = [];
        this.setResident(false);
        // If called with only one argument we assume the caller
        // will call .update() later on. This is the case of
@@ -435,7 +408,7 @@ var Notification = GObject.registerClass({
    // @label: the label for the action's button
    // @callback: the callback for the action
    addAction(label, callback) {
-        this.actions.push({ label, callback });
+        this.actions.push({ label: label, callback: callback });
    }
    get acknowledged() {
@@ -446,7 +419,7 @@ var Notification = GObject.registerClass({
        if (this._acknowledged == v)
            return;
        this._acknowledged = v;
-        this.notify('acknowledged');
+        this.emit('acknowledged-changed');
    }
    setUrgency(urgency) {
@@ -455,15 +428,6 @@ var Notification = GObject.registerClass({
    setResident(resident) {
        this.resident = resident;
        if (this.resident) {
            if (this._activatedId) {
                this.disconnect(this._activatedId);
                this._activatedId = 0;
            }
        } else if (!this._activatedId) {
            this._activatedId = this.connect_after('activated', () => this.destroy());
        }
    }
    setTransient(isTransient) {
@@ -505,30 +469,23 @@ var Notification = GObject.registerClass({
    activate() {
        this.emit('activated');
        if (!this.resident)
            this.destroy();
    }
    destroy(reason = NotificationDestroyedReason.DISMISSED) {
        if (this._activatedId) {
            this.disconnect(this._activatedId);
            delete this._activatedId;
        }
        this.emit('destroy', reason);
        this.run_dispose();
    }
-});
+};
 Signals.addSignalMethods(Notification.prototype);
-var NotificationBanner = GObject.registerClass({
+var NotificationBanner =
-    Signals: {
+class NotificationBanner extends Calendar.NotificationMessage {
-        'done-displaying': {},
+    constructor(notification) {
-        'unfocused': {},
+        super(notification);
    },
 }, class NotificationBanner extends Calendar.NotificationMessage {
    _init(notification) {
        super._init(notification);
-        this.can_focus = false;
+        this.actor.can_focus = false;
-        this.add_style_class_name('notification-banner');
+        this.actor.add_style_class_name('notification-banner');
        this._buttonBox = null;
@@ -609,13 +566,13 @@ var NotificationBanner = GObject.registerClass({
    addAction(label, callback) {
        let button = new St.Button({ style_class: 'notification-button',
-                                     label,
+                                     label: label,
                                     x_expand: true,
                                     can_focus: true });
        return this.addButton(button, callback);
    }
-});
+};
 var SourceActor = GObject.registerClass(
 class SourceActor extends St.Widget {
@@ -632,7 +589,8 @@ class SourceActor extends St.Widget {
        this._actorDestroyed = false;
        let scaleFactor = St.ThemeContext.get_for_stage(global.stage).scale_factor;
-        this._iconBin = new St.Bin({ x_expand: true,
+        this._iconBin = new St.Bin({ x_fill: true,
                                     x_expand: true,
                                     height: size * scaleFactor,
                                     width: size * scaleFactor });
@@ -679,7 +637,7 @@ class SourceActorWithLabel extends SourceActor {
        this.add_actor(this._counterBin);
-        this._countUpdatedId = this._source.connect('notify::count', this._updateCount.bind(this));
+        this._countUpdatedId = this._source.connect('count-updated', this._updateCount.bind(this));
        this._updateCount();
        this.connect('destroy', () => {
@@ -692,7 +650,7 @@ class SourceActorWithLabel extends SourceActor {
        let childBox = new Clutter.ActorBox();
-        let [, , naturalWidth, naturalHeight] = this._counterBin.get_preferred_size();
+        let [minWidth, minHeight, naturalWidth, naturalHeight] = this._counterBin.get_preferred_size();
        let direction = this.get_text_direction();
        if (direction == Clutter.TextDirection.LTR) {
@@ -727,33 +685,11 @@ class SourceActorWithLabel extends SourceActor {
    }
 });
-var Source = GObject.registerClass({
+var Source = class Source {
-    Properties: {
+    constructor(title, iconName) {
        'count': GObject.ParamSpec.int(
            'count', 'count', 'count',
            GObject.ParamFlags.READABLE,
            0, GLib.MAXINT32, 0),
        'policy': GObject.ParamSpec.object(
            'policy', 'policy', 'policy',
            GObject.ParamFlags.READWRITE,
            NotificationPolicy.$gtype),
        'title': GObject.ParamSpec.string(
            'title', 'title', 'title',
            GObject.ParamFlags.READWRITE,
            null),
    },
    Signals: {
        'destroy': { param_types: [GObject.TYPE_UINT] },
        'icon-updated': {},
        'notification-added': { param_types: [Notification.$gtype] },
        'notification-show': { param_types: [Notification.$gtype] },
    },
 }, class Source extends GObject.Object {
    _init(title, iconName) {
        super._init({ title });
        this.SOURCE_ICON_SIZE = 48;
        this.title = title;
        this.iconName = iconName;
        this.isChat = false;
@@ -788,7 +724,7 @@ var Source = GObject.registerClass({
    }
    countUpdated() {
-        super.notify('count');
+        this.emit('count-updated');
    }
    _createPolicy() {
@@ -796,17 +732,13 @@ var Source = GObject.registerClass({
    }
    get narrowestPrivacyScope() {
-        return this.notifications.every(n => n.privacyScope == PrivacyScope.SYSTEM)
+        return this.notifications.every(n => n.privacyScope == PrivacyScope.SYSTEM) ? PrivacyScope.SYSTEM
-            ? PrivacyScope.SYSTEM
+                                                                                    : PrivacyScope.USER;
            : PrivacyScope.USER;
    }
    setTitle(newTitle) {
        if (this.title == newTitle)
            return;
        this.title = newTitle;
-        this.notify('title');
+        this.emit('title-changed');
    }
    createBanner(notification) {
@@ -831,10 +763,10 @@ var Source = GObject.registerClass({
            return;
        this.notifications.splice(index, 1);
        this.countUpdated();
        if (this.notifications.length == 0)
            this.destroy();
        this.countUpdated();
    }
    pushNotification(notification) {
@@ -845,36 +777,22 @@ var Source = GObject.registerClass({
            this.notifications.shift().destroy(NotificationDestroyedReason.EXPIRED);
        notification.connect('destroy', this._onNotificationDestroy.bind(this));
-        notification.connect('notify::acknowledged', this.countUpdated.bind(this));
+        notification.connect('acknowledged-changed', this.countUpdated.bind(this));
        this.notifications.push(notification);
        this.emit('notification-added', notification);
        this.countUpdated();
    }
-    showNotification(notification) {
+    notify(notification) {
        notification.acknowledged = false;
        this.pushNotification(notification);
-        if (this.policy.showBanners || notification.urgency == Urgency.CRITICAL)
+        if (this.policy.showBanners || notification.urgency == Urgency.CRITICAL) {
-            this.emit('notification-show', notification);
+            this.emit('notify', notification);
-        else
+        } else {
            notification.playSound();
    }
    notify(propName) {
        if (propName instanceof Notification) {
            try {
                throw new Error('Source.notify() has been moved to Source.showNotification()' +
                                'this code will break in the future');
            } catch (e) {
                logError(e);
                this.showNotification(propName);
                return;
            }
        }
        super.notify(propName);
    }
    destroy(reason) {
@@ -887,8 +805,6 @@ var Source = GObject.registerClass({
            notifications[i].destroy(reason);
        this.emit('destroy', reason);
        this.run_dispose();
    }
    iconUpdated() {
@@ -900,28 +816,18 @@ var Source = GObject.registerClass({
    }
    destroyNonResidentNotifications() {
-        for (let i = this.notifications.length - 1; i >= 0; i--) {
+        for (let i = this.notifications.length - 1; i >= 0; i--)
            if (!this.notifications[i].resident)
                this.notifications[i].destroy();
-        }
+
        this.countUpdated();
    }
-});
+};
 Signals.addSignalMethods(Source.prototype);
-var MessageTray = GObject.registerClass({
+var MessageTray = class MessageTray {
-    Signals: {
+    constructor() {
-        'queue-changed': {},
+        this._presence = new GnomeSession.Presence((proxy, error) => {
        'source-added': { param_types: [Source.$gtype] },
        'source-removed': { param_types: [Source.$gtype] },
    },
 }, class MessageTray extends St.Widget {
    _init() {
        super._init({
            visible: false,
            clip_to_allocation: true,
            layout_manager: new Clutter.BinLayout(),
        });
        this._presence = new GnomeSession.Presence((proxy, _error) => {
            this._onStatusChanged(proxy.status);
        });
        this._busy = false;
@@ -937,15 +843,18 @@ var MessageTray = GObject.registerClass({
            // so fix up Clutter's view of the pointer position in
            // that case.
            let related = ev.get_related();
-            if (!related || this.contains(related))
+            if (!related || this.actor.contains(related))
                global.sync_pointer();
        });
        this.actor = new St.Widget({ visible: false,
                                     clip_to_allocation: true,
                                     layout_manager: new Clutter.BinLayout() });
        let constraint = new Layout.MonitorConstraint({ primary: true });
        Main.layoutManager.panelBox.bind_property('visible',
                                                  constraint, 'work-area',
                                                  GObject.BindingFlags.SYNC_CREATE);
-        this.add_constraint(constraint);
+        this.actor.add_constraint(constraint);
        this._bannerBin = new St.Widget({ name: 'notification-container',
                                          reactive: true,
@@ -959,7 +868,7 @@ var MessageTray = GObject.registerClass({
                                this._onNotificationKeyRelease.bind(this));
        this._bannerBin.connect('notify::hover',
                                this._onNotificationHoverChanged.bind(this));
-        this.add_actor(this._bannerBin);
+        this.actor.add_actor(this._bannerBin);
        this._notificationFocusGrabber = new FocusGrabber(this._bannerBin);
        this._notificationQueue = [];
@@ -988,7 +897,7 @@ var MessageTray = GObject.registerClass({
        this._notificationTimeoutId = 0;
        this._notificationRemoved = false;
-        Main.layoutManager.addChrome(this, { affectsInputRegion: false });
+        Main.layoutManager.addChrome(this.actor, { affectsInputRegion: false });
        Main.layoutManager.trackChrome(this._bannerBin, { affectsInputRegion: true });
        global.display.connect('in-fullscreen-changed', this._updateState.bind(this));
@@ -1031,11 +940,11 @@ var MessageTray = GObject.registerClass({
    }
    _onDragBegin() {
-        Shell.util_set_hidden_from_pick(this, true);
+        Shell.util_set_hidden_from_pick(this.actor, true);
    }
    _onDragEnd() {
-        Shell.util_set_hidden_from_pick(this, false);
+        Shell.util_set_hidden_from_pick(this.actor, false);
    }
    get bannerAlignment() {
@@ -1084,22 +993,23 @@ var MessageTray = GObject.registerClass({
        // Register that we got a notification for this source
        source.policy.store();
-        source.policy.connect('notify::enable', () => {
+        source.policy.connect('enable-changed', () => {
            this._onSourceEnableChanged(source.policy, source);
        });
-        source.policy.connect('notify', this._updateState.bind(this));
+        source.policy.connect('policy-changed', this._updateState.bind(this));
        this._onSourceEnableChanged(source.policy, source);
    }
    _addSource(source) {
        let obj = {
-            showId: 0,
+            source: source,
            notifyId: 0,
            destroyId: 0,
        };
        this._sources.set(source, obj);
-        obj.showId = source.connect('notification-show', this._onNotificationShow.bind(this));
+        obj.notifyId = source.connect('notify', this._onNotify.bind(this));
        obj.destroyId = source.connect('destroy', this._onSourceDestroy.bind(this));
        this.emit('source-added', source);
@@ -1109,7 +1019,7 @@ var MessageTray = GObject.registerClass({
        let obj = this._sources.get(source);
        this._sources.delete(source);
-        source.disconnect(obj.showId);
+        source.disconnect(obj.notifyId);
        source.disconnect(obj.destroyId);
        this.emit('source-removed', source);
@@ -1150,7 +1060,7 @@ var MessageTray = GObject.registerClass({
        }
    }
-    _onNotificationShow(_source, notification) {
+    _onNotify(source, notification) {
        if (this._notification == notification) {
            // If a notification that is being shown is updated, we update
            // how it is shown and extend the time until it auto-hides.
@@ -1162,7 +1072,7 @@ var MessageTray = GObject.registerClass({
            // indicator in the panel; however do make an exception for CRITICAL
            // notifications, as only banner mode allows expansion.
            let bannerCount = this._notification ? 1 : 0;
-            let full = this.queueCount + bannerCount >= MAX_NOTIFICATIONS_IN_QUEUE;
+            let full = (this.queueCount + bannerCount >= MAX_NOTIFICATIONS_IN_QUEUE);
            if (!full || notification.urgency == Urgency.CRITICAL) {
                notification.connect('destroy',
                                     this._onNotificationDestroy.bind(this));
@@ -1179,7 +1089,7 @@ var MessageTray = GObject.registerClass({
    _resetNotificationLeftTimeout() {
        this._useLongerNotificationLeftTimeout = false;
        if (this._notificationLeftTimeoutId) {
-            GLib.source_remove(this._notificationLeftTimeoutId);
+            Mainloop.source_remove(this._notificationLeftTimeoutId);
            this._notificationLeftTimeoutId = 0;
            this._notificationLeftMouseX = -1;
            this._notificationLeftMouseY = -1;
@@ -1217,15 +1127,15 @@ var MessageTray = GObject.registerClass({
            // this._onNotificationLeftTimeout() to determine if the mouse has moved far enough during the initial timeout for us
            // to consider that the user intended to leave the tray and therefore hide the tray. If the mouse is still
            // close to its previous position, we extend the timeout once.
-            let [x, y] = global.get_pointer();
+            let [x, y, mods] = global.get_pointer();
            this._notificationLeftMouseX = x;
            this._notificationLeftMouseY = y;
            // We wait just a little before hiding the message tray in case the user quickly moves the mouse back into it.
            // We wait for a longer period if the notification popped up where the mouse pointer was already positioned.
            // That gives the user more time to mouse away from the notification and mouse back in in order to expand it.
-            let timeout = this._useLongerNotificationLeftTimeout ? LONGER_HIDE_TIMEOUT : HIDE_TIMEOUT;
+            let timeout = this._useLongerNotificationLeftTimeout ? LONGER_HIDE_TIMEOUT * 1000 : HIDE_TIMEOUT * 1000;
-            this._notificationLeftTimeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, timeout, this._onNotificationLeftTimeout.bind(this));
+            this._notificationLeftTimeoutId = Mainloop.timeout_add(timeout, this._onNotificationLeftTimeout.bind(this));
            GLib.Source.set_name_by_id(this._notificationLeftTimeoutId, '[gnome-shell] this._onNotificationLeftTimeout');
        }
    }
@@ -1246,7 +1156,7 @@ var MessageTray = GObject.registerClass({
    }
    _onNotificationLeftTimeout() {
-        let [x, y] = global.get_pointer();
+        let [x, y, mods] = global.get_pointer();
        // We extend the timeout once if the mouse moved no further than MOUSE_LEFT_ACTOR_THRESHOLD to either side.
        if (this._notificationLeftMouseX > -1 &&
            y < this._notificationLeftMouseY + MOUSE_LEFT_ACTOR_THRESHOLD &&
@@ -1254,10 +1164,8 @@ var MessageTray = GObject.registerClass({
            x < this._notificationLeftMouseX + MOUSE_LEFT_ACTOR_THRESHOLD &&
            x > this._notificationLeftMouseX - MOUSE_LEFT_ACTOR_THRESHOLD) {
            this._notificationLeftMouseX = -1;
-            this._notificationLeftTimeoutId = GLib.timeout_add(
+            this._notificationLeftTimeoutId = Mainloop.timeout_add(LONGER_HIDE_TIMEOUT * 1000,
-                GLib.PRIORITY_DEFAULT,
+                                                                   this._onNotificationLeftTimeout.bind(this));
                LONGER_HIDE_TIMEOUT,
                this._onNotificationLeftTimeout.bind(this));
            GLib.Source.set_name_by_id(this._notificationLeftTimeoutId, '[gnome-shell] this._onNotificationLeftTimeout');
        } else {
            this._notificationLeftTimeoutId = 0;
@@ -1282,7 +1190,7 @@ var MessageTray = GObject.registerClass({
    // at the present time.
    _updateState() {
        let hasMonitor = Main.layoutManager.primaryMonitor != null;
-        this.visible = !this._bannerBlocked && hasMonitor && this._banner != null;
+        this.actor.visible = !this._bannerBlocked && hasMonitor && this._banner != null;
        if (this._bannerBlocked || !hasMonitor)
            return;
@@ -1309,7 +1217,7 @@ var MessageTray = GObject.registerClass({
            let nextNotification = this._notificationQueue[0] || null;
            if (hasNotifications && nextNotification) {
                let limited = this._busy || Main.layoutManager.primaryMonitor.inFullscreen;
-                let showNextNotification = !limited || nextNotification.forFeedback || nextNotification.urgency == Urgency.CRITICAL;
+                let showNextNotification = (!limited || nextNotification.forFeedback || nextNotification.urgency == Urgency.CRITICAL);
                if (showNextNotification)
                    this._showNotification();
            }
@@ -1319,7 +1227,7 @@ var MessageTray = GObject.registerClass({
                           this._notification.urgency != Urgency.CRITICAL &&
                           !this._banner.focused &&
                           !this._pointerInNotification) || this._notificationExpired;
-            let mustClose = this._notificationRemoved || !hasNotifications || expired;
+            let mustClose = (this._notificationRemoved || !hasNotifications || expired);
            if (mustClose) {
                let animate = hasNotifications && !this._notificationRemoved;
@@ -1338,6 +1246,34 @@ var MessageTray = GObject.registerClass({
        this._notificationExpired = false;
    }
    _tween(actor, statevar, value, params) {
        let onComplete = params.onComplete;
        let onCompleteScope = params.onCompleteScope;
        let onCompleteParams = params.onCompleteParams;
        params.onComplete = this._tweenComplete;
        params.onCompleteScope = this;
        params.onCompleteParams = [statevar, value, onComplete, onCompleteScope, onCompleteParams];
        // Remove other tweens that could mess with the state machine
        Tweener.removeTweens(actor);
        Tweener.addTween(actor, params);
        let valuing = (value == State.SHOWN) ? State.SHOWING : State.HIDING;
        this[statevar] = valuing;
    }
    _tweenComplete(statevar, value, onComplete, onCompleteScope, onCompleteParams) {
        this[statevar] = value;
        if (onComplete)
            onComplete.apply(onCompleteScope, onCompleteParams);
        this._updateState();
    }
    _clampOpacity() {
        this._bannerBin.opacity = Math.max(0, Math.min(this._bannerBin._opacity, 255));
    }
    _onIdleMonitorBecameActive() {
        this._userActiveWhileNotificationShown = true;
        this._updateNotificationTimeout(2000);
@@ -1362,16 +1298,17 @@ var MessageTray = GObject.registerClass({
            this._updateState();
        });
-        this._bannerBin.add_actor(this._banner);
+        this._bannerBin.add_actor(this._banner.actor);
        this._bannerBin._opacity = 0;
        this._bannerBin.opacity = 0;
-        this._bannerBin.y = -this._banner.height;
+        this._bannerBin.y = -this._banner.actor.height;
-        this.show();
+        this.actor.show();
        Meta.disable_unredirect_for_display(global.display);
        this._updateShowingNotification();
-        let [x, y] = global.get_pointer();
+        let [x, y, mods] = global.get_pointer();
        // We save the position of the mouse at the time when we started showing the notification
        // in order to determine if the notification popped up under it. We make that check if
        // the user starts moving the mouse and _onNotificationHoverChanged() gets called. We don't
@@ -1409,45 +1346,39 @@ var MessageTray = GObject.registerClass({
        // We use this._showNotificationCompleted() onComplete callback to extend the time the updated
        // notification is being shown.
-        this._notificationState = State.SHOWING;
+        let tweenParams = { y: 0,
-        this._bannerBin.remove_all_transitions();
+                            _opacity: 255,
-        this._bannerBin.ease({
+                            time: ANIMATION_TIME,
-            opacity: 255,
+                            transition: 'easeOutBack',
-            duration: ANIMATION_TIME,
+                            onUpdate: this._clampOpacity,
-            mode: Clutter.AnimationMode.LINEAR,
+                            onUpdateScope: this,
-        });
+                            onComplete: this._showNotificationCompleted,
-        this._bannerBin.ease({
+                            onCompleteScope: this
-            y: 0,
+                          };
-            duration: ANIMATION_TIME,
+
-            mode: Clutter.AnimationMode.EASE_OUT_BACK,
+        this._tween(this._bannerBin, '_notificationState', State.SHOWN, tweenParams);
            onComplete: () => {
                this._notificationState = State.SHOWN;
                this._showNotificationCompleted();
                this._updateState();
            },
        });
    }
    _showNotificationCompleted() {
        if (this._notification.urgency != Urgency.CRITICAL)
-            this._updateNotificationTimeout(NOTIFICATION_TIMEOUT);
+            this._updateNotificationTimeout(NOTIFICATION_TIMEOUT * 1000);
    }
    _updateNotificationTimeout(timeout) {
        if (this._notificationTimeoutId) {
-            GLib.source_remove(this._notificationTimeoutId);
+            Mainloop.source_remove(this._notificationTimeoutId);
            this._notificationTimeoutId = 0;
        }
        if (timeout > 0) {
            this._notificationTimeoutId =
-                GLib.timeout_add(GLib.PRIORITY_DEFAULT, timeout,
+                Mainloop.timeout_add(timeout,
-                    this._notificationTimeout.bind(this));
+                                     this._notificationTimeout.bind(this));
            GLib.Source.set_name_by_id(this._notificationTimeoutId, '[gnome-shell] this._notificationTimeout');
        }
    }
    _notificationTimeout() {
-        let [x, y] = global.get_pointer();
+        let [x, y, mods] = global.get_pointer();
        if (y < this._lastSeenMouseY - 10 && !this._notificationHovered) {
            // The mouse is moving towards the notification, so don't
            // hide it yet. (We just create a new timeout (and destroy
@@ -1483,26 +1414,20 @@ var MessageTray = GObject.registerClass({
        }
        this._resetNotificationLeftTimeout();
        this._bannerBin.remove_all_transitions();
        if (animate) {
-            this._notificationState = State.HIDING;
+            this._tween(this._bannerBin, '_notificationState', State.HIDDEN,
-            this._bannerBin.ease({
+                        { y: -this._bannerBin.height,
-                opacity: 0,
+                          _opacity: 0,
-                duration: ANIMATION_TIME,
+                          time: ANIMATION_TIME,
-                mode: Clutter.AnimationMode.EASE_OUT_BACK,
+                          transition: 'easeOutBack',
-            });
+                          onUpdate: this._clampOpacity,
-            this._bannerBin.ease({
+                          onUpdateScope: this,
-                y: -this._bannerBin.height,
+                          onComplete: this._hideNotificationCompleted,
-                duration: ANIMATION_TIME,
+                          onCompleteScope: this
-                mode: Clutter.AnimationMode.EASE_OUT_BACK,
+                        });
                onComplete: () => {
                    this._notificationState = State.HIDDEN;
                    this._hideNotificationCompleted();
                    this._updateState();
                },
            });
        } else {
            Tweener.removeTweens(this._bannerBin);
            this._bannerBin.y = -this._bannerBin.height;
            this._bannerBin.opacity = 0;
            this._notificationState = State.HIDDEN;
@@ -1513,16 +1438,16 @@ var MessageTray = GObject.registerClass({
    _hideNotificationCompleted() {
        let notification = this._notification;
        this._notification = null;
-        if (!this._notificationRemoved && notification.isTransient)
+        if (notification.isTransient)
            notification.destroy(NotificationDestroyedReason.EXPIRED);
        this._pointerInNotification = false;
        this._notificationRemoved = false;
        Meta.enable_unredirect_for_display(global.display);
-        this._banner.destroy();
+        this._banner.actor.destroy();
        this._banner = null;
-        this.hide();
+        this.actor.hide();
    }
    _expandActiveNotification() {
@@ -1544,15 +1469,15 @@ var MessageTray = GObject.registerClass({
    _ensureBannerFocused() {
        this._notificationFocusGrabber.grabFocus();
    }
-});
+};
 Signals.addSignalMethods(MessageTray.prototype);
-var SystemNotificationSource = GObject.registerClass(
+var SystemNotificationSource = class SystemNotificationSource extends Source {
-class SystemNotificationSource extends Source {
+    constructor() {
-    _init() {
+        super(_("System Information"), 'dialog-information-symbolic');
        super._init(_("System Information"), 'dialog-information-symbolic');
    }
    open() {
        this.destroy();
    }
-});
+};
--- a/js/ui/modalDialog.js
+++ b/js/ui/modalDialog.js
@@ -1,5 +1,4 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported ModalDialog */
 const { Atk, Clutter, GObject, Shell, St } = imports.gi;
@@ -8,16 +7,17 @@ const Layout = imports.ui.layout;
 const Lightbox = imports.ui.lightbox;
 const Main = imports.ui.main;
 const Params = imports.misc.params;
 const Tweener = imports.ui.tweener;
-var OPEN_AND_CLOSE_TIME = 100;
+var OPEN_AND_CLOSE_TIME = 0.1;
-var FADE_OUT_DIALOG_TIME = 1000;
+var FADE_OUT_DIALOG_TIME = 1.0;
 var State = {
    OPENED: 0,
    CLOSED: 1,
    OPENING: 2,
    CLOSING: 3,
-    FADED_OUT: 4,
+    FADED_OUT: 4
 };
 var ModalDialog = GObject.registerClass({
@@ -26,9 +26,9 @@ var ModalDialog = GObject.registerClass({
                                       GObject.ParamFlags.READABLE,
                                       Math.min(...Object.values(State)),
                                       Math.max(...Object.values(State)),
-                                       State.CLOSED),
+                                       State.CLOSED)
    },
-    Signals: { 'opened': {}, 'closed': {} },
+    Signals: { 'opened': {}, 'closed': {} }
 }, class ModalDialog extends St.Widget {
    _init(params) {
        super._init({ visible: false,
@@ -57,12 +57,9 @@ var ModalDialog = GObject.registerClass({
                                                      coordinate: Clutter.BindCoordinate.ALL });
        this.add_constraint(constraint);
-        this.backgroundStack = new St.Widget({
+        this.backgroundStack = new St.Widget({ layout_manager: new Clutter.BinLayout() });
-            layout_manager: new Clutter.BinLayout(),
+        this._backgroundBin = new St.Bin({ child: this.backgroundStack,
-            x_expand: true,
+                                           x_fill: true, y_fill: true });
            y_expand: true,
        });
        this._backgroundBin = new St.Bin({ child: this.backgroundStack });
        this._monitorConstraint = new Layout.MonitorConstraint();
        this._backgroundBin.add_constraint(this._monitorConstraint);
        this.add_actor(this._backgroundBin);
@@ -124,18 +121,18 @@ var ModalDialog = GObject.registerClass({
        this.dialogLayout.opacity = 255;
        if (this._lightbox)
-            this._lightbox.lightOn();
+            this._lightbox.show();
        this.opacity = 0;
        this.show();
-        this.ease({
+        Tweener.addTween(this,
-            opacity: 255,
+                         { opacity: 255,
-            duration: this._shouldFadeIn ? OPEN_AND_CLOSE_TIME : 0,
+                           time: this._shouldFadeIn ? OPEN_AND_CLOSE_TIME : 0,
-            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                           transition: 'easeOutQuad',
-            onComplete: () => {
+                           onComplete: () => {
-                this._setState(State.OPENED);
+                               this._setState(State.OPENED);
-                this.emit('opened');
+                               this.emit('opened');
-            },
+                           }
-        });
+                         });
    }
    setInitialKeyFocus(actor) {
@@ -178,16 +175,15 @@ var ModalDialog = GObject.registerClass({
        this.popModal(timestamp);
        this._savedKeyFocus = null;
-        if (this._shouldFadeOut) {
+        if (this._shouldFadeOut)
-            this.ease({
+            Tweener.addTween(this,
-                opacity: 0,
+                             { opacity: 0,
-                duration: OPEN_AND_CLOSE_TIME,
+                               time: OPEN_AND_CLOSE_TIME,
-                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                               transition: 'easeOutQuad',
-                onComplete: () => this._closeComplete(),
+                               onComplete: this._closeComplete.bind(this)
-            });
+                             });
-        } else {
+        else
            this._closeComplete();
        }
    }
    // Drop modal status without closing the dialog; this makes the
@@ -206,7 +202,7 @@ var ModalDialog = GObject.registerClass({
        this._hasModal = false;
        if (!this._shellReactive)
-            this.backgroundStack.set_child_above_sibling(this._eventBlocker, null);
+            this._eventBlocker.raise_top();
    }
    pushModal(timestamp) {
@@ -219,8 +215,6 @@ var ModalDialog = GObject.registerClass({
        if (!Main.pushModal(this, params))
            return false;
        Main.layoutManager.emit('system-modal-opened');
        this._hasModal = true;
        if (this._savedKeyFocus) {
            this._savedKeyFocus.grab_key_focus();
@@ -231,7 +225,7 @@ var ModalDialog = GObject.registerClass({
        }
        if (!this._shellReactive)
-            this.backgroundStack.set_child_below_sibling(this._eventBlocker, null);
+            this._eventBlocker.lower_bottom();
        return true;
    }
@@ -254,11 +248,13 @@ var ModalDialog = GObject.registerClass({
            return;
        this.popModal(timestamp);
-        this.dialogLayout.ease({
+        Tweener.addTween(this.dialogLayout,
-            opacity: 0,
+                         { opacity: 0,
-            duration: FADE_OUT_DIALOG_TIME,
+                           time: FADE_OUT_DIALOG_TIME,
-            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                           transition: 'easeOutQuad',
-            onComplete: () => (this.state = State.FADED_OUT),
+                           onComplete: () => {
-        });
+                               this._setState(State.FADED_OUT);
                           }
                         });
    }
 });
--- a/Show More
+++ b/Show More