shellEntry: Support lockdown of "Show Text" menu in password entries

Some deployments require being able to prevent users from showing the password they're currently typing. This commit adds support for that kind of lockdown. https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/687
2019-12-21 03:49:22 +01:00
141 changed files with 15465 additions and 20198 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -21,8 +21,6 @@ data/org.gnome.shell.gschema.valid
 data/org.gnome.Shell.PortalHelper.desktop
 data/org.gnome.Shell.PortalHelper.service
 data/theme/.sass-cache
-data/theme/gnome-shell*.css.map
-data/theme/gnome-shell*.css
 docs/reference/*/*.args
 docs/reference/*/*.bak
 docs/reference/*/*.hierarchy
--- a/.gitlab/issue_templates/Bug.md
+++ b/.gitlab/issue_templates/Bug.md
@@ -1,55 +0,0 @@
-<!-- 
-Please read https://wiki.gnome.org/Community/GettingInTouch/BugReportingGuidelines
-first to ensure that you create a clear and specific issue.
-->
-
-### Affected version
-
-<!--
-Provide at least the following information:
-* Your OS and version
-* Affected GNOME Shell version
-* Does this issue appear in XOrg and/or Wayland
-->
-
-### Bug summary
-
-<!-- 
-Provide a short summary of the bug you encountered.
-->
-
-### Steps to reproduce
-
-<!-- 
-1. Step one
-2. Step two
-3. ...
-->
-
-### What happened
-
-<!-- 
-What did GNOME Shell do that was unexpected?
-->
-
-### What did you expect to happen
-
-<!-- 
-What did you expect GNOME Shell to do?
-->
-
-### Relevant logs, screenshots, screencasts etc.
-
-<!-- 
-If you have further information, such as technical documentation, logs,
-screenshots or screencasts related, please provide them here.
-
-If the bug is a crash, please obtain a stack trace with installed debug
-symbols (at least for GNOME Shell and Mutter) and attach it to
-this issue following the instructions on
-https://wiki.gnome.org/Community/GettingInTouch/Bugzilla/GettingTraces.
-->
-
-
-<!-- Do not remove the following line. -->
-/label ~"1. Bug"
--- a/.gitlab/issue_templates/Feature.md
+++ b/.gitlab/issue_templates/Feature.md
@@ -1,30 +0,0 @@
-<!-- 
-Please read https://wiki.gnome.org/Community/GettingInTouch/BugReportingGuidelines
-first to ensure that you create a clear and specific issue.
-->
-
-### Feature summary
-
-<!-- 
-Describe what you would like to be able to do with GNOME Shell
-that you currently cannot do.
-->
-
-### How would you like it to work
-
-<!-- 
-If you can think of a way GNOME Shell might be able to do this,
-let us know here.
-->
-
-### Relevant links, screenshots, screencasts etc.
-
-<!-- 
-If you have further information, such as technical documentation,
-code, mockups or a similar feature in another desktop environments,
-please provide them here.
-->
-
-
-<!-- Do not remove the following line. -->
-/label ~"1. Feature"
--- a/HACKING.md
+++ b/HACKING.md
@@ -29,8 +29,9 @@ what to do.
            bar = do_thing(b);

        if (var == 5) {
-            for (let i = 0; i < 10; i++)
+            for (let i = 0; i < 10; i++) {
                print(i);
+            }
        } else {
            print(20);
        }
@@ -101,8 +102,9 @@ under the imports:
 Always use either `const` or `let` when defining a variable.
 ```javascript
    // Iterating over an array
-    for (let i = 0; i < arr.length; ++i)
+    for (let i = 0; i < arr.length; ++i) {
        let item = arr[i];
+    }

    // Iterating over an object's properties
    for (let prop in someobj) {
@@ -250,7 +252,7 @@ variable that can be captured in closures.
 All closures should be wrapped with Function.prototype.bind or use arrow
 notation.
 ```javascript
-    let closure1 = () => this._fnorbate();
+    let closure1 = () => { this._fnorbate(); };
    let closure2 = this._fnorbate.bind(this);
 ```

--- a/19
+++ b/19
@@ -1,22 +1,3 @@
-3.35.3
-======
-* Add discrete GPU support for NVidia drivers [Bastien; #1810]
-* Fix DND of window previews with tablet devices [Carlos; !897]
-* Update pad OSD actions dynamically on mode changes [Carlos; !898]
-* st: Add dedicated PasswordEntry widget [Umang; !619]
-* Allow stand-alone builds of gnome-extensions tool [Florian; !877]
-* extension-tool: Don't treat missing .js handler as error [Chuck; !905]
-* Disallow top bar menus without top bar [Florian; #2002]
-* Misc. bug fixes and cleanups [Georges, Florian, Robert, Umang; !901,
-  #789937, !909, !910, !911, !913, !916]
-
-Contributors:
-  Michael Catanzaro, Chuck, Carlos Garnacho, Umang Jain, Robert Mader,
-  Florian Müllner, Georges Basile Stavracas Neto, Bastien Nocera
-
-Translators:
-  Fabio Tomat [fur], Fran Dieguez [gl], Jordi Mas [ca], Daniel Mustieles [es]
-
 3.35.2
 ======
 * Fix unredirection after cancelled animations [Florian; #1788]
--- a/data/gnome-shell-extension-prefs.desktop.in.in
+++ b/data/gnome-shell-extension-prefs.desktop.in.in
@@ -3,6 +3,10 @@ Type=Application
 Name=Shell Extensions
 Comment=Configure GNOME Shell Extensions
 Exec=@bindir@/gnome-shell-extension-prefs %u
+X-GNOME-Bugzilla-Bugzilla=GNOME
+X-GNOME-Bugzilla-Product=gnome-shell
+X-GNOME-Bugzilla-Component=extensions
+X-GNOME-Bugzilla-Version=@VERSION@
 Categories=GNOME;GTK;
 OnlyShowIn=GNOME;
 NoDisplay=true
--- a/data/meson.build
+++ b/data/meson.build
@@ -13,6 +13,7 @@ desktopconf = configuration_data()
 # We substitute in bindir so it works as an autostart
 # 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
--- a/data/org.gnome.Shell.desktop.in.in
+++ b/data/org.gnome.Shell.desktop.in.in
@@ -3,6 +3,10 @@ Type=Application
 Name=GNOME Shell
 Comment=Window management and application launching
 Exec=@bindir@/gnome-shell
+X-GNOME-Bugzilla-Bugzilla=GNOME
+X-GNOME-Bugzilla-Product=gnome-shell
+X-GNOME-Bugzilla-Component=general
+X-GNOME-Bugzilla-Version=@VERSION@
 Categories=GNOME;GTK;Core;
 OnlyShowIn=GNOME;
 NoDisplay=true
--- a/data/org.gnome.shell.gschema.xml.in
+++ b/data/org.gnome.shell.gschema.xml.in
@@ -50,7 +50,7 @@
      </description>
    </key>
    <key name="favorite-apps" type="as">
-      <default>[ 'org.gnome.Epiphany.desktop', 'org.gnome.Geary.desktop', 'org.gnome.Calendar.desktop', 'org.gnome.Music.desktop', 'org.gnome.Photos.desktop', 'org.gnome.Nautilus.desktop', 'org.gnome.Software.desktop' ]</default>
+      <default>[ 'org.gnome.Epiphany.desktop', 'org.gnome.Evolution.desktop', 'rhythmbox.desktop', 'org.gnome.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
--- a/data/theme/gnome-shell-high-contrast.scss
+++ b/data/theme/gnome-shell-high-contrast.scss
@@ -1,17 +1,16 @@
-$variant: 'dark';
+$variant: 'light';

@import "gnome-shell-sass/_high-contrast-colors"; //use gtk colors
@import "gnome-shell-sass/_drawing";
@import "gnome-shell-sass/_common";
-@import "gnome-shell-sass/_widgets";

 //force symbolic icons
 stage {
-	-st-icon-style: symbolic;
+  -st-icon-style: symbolic;
 }

 .toggle-switch { width: 48px; }
 .toggle-switch-us, .toggle-switch-intl {
-	background-image: url("resource:///org/gnome/shell/theme/toggle-off-hc.svg");
-	&:checked { background-image: url("resource:///org/gnome/shell/theme/toggle-on-hc.svg"); }
+  background-image: url("resource:///org/gnome/shell/theme/toggle-off-hc.svg");
+  &:checked { background-image: url("resource:///org/gnome/shell/theme/toggle-on-hc.svg"); }
 }
--- a/data/theme/gnome-shell-sass/_colors.scss
+++ b/data/theme/gnome-shell-sass/_colors.scss
@@ -1,15 +1,16 @@
 // When color definition differs for dark and light variant,
 // it gets @if ed depending on $variant

-$base_color: if($variant == 'light', #fff, lighten(desaturate(#241f31, 20%), 2%));
+
+$base_color: if($variant == 'light', #ffffff, lighten(desaturate(#241f31, 20%), 2%));
 $bg_color: if($variant == 'light', #f6f5f4, darken(desaturate(#3d3846, 100%), 4%));
 $fg_color: if($variant == 'light', #2e3436, #eeeeec);

-$selected_fg_color: #fff;
+$selected_fg_color: #ffffff;
 $selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 10%));
 $selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%));
-$borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 8%));
-$borders_edge: if($variant == 'light', rgba(255,255,255,0.8), transparentize($fg_color, 0.93));
+$borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 10%));
+$borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93));
 $link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%));
 $link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%));
 $top_hilight: $borders_edge;
@@ -19,20 +20,21 @@ $error_color: #ff8080;
 $success_color: if($variant == 'light', #33d17a, darken(#33d17a, 10%));
 $destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%));

-$osd_fg_color: $fg_color;
-$osd_text_color: if($variant == 'light', #000, #fff);
-$osd_bg_color: if($variant == 'light', rgba(255,255,255,0.9), transparentize(darken(desaturate(#3d3846, 100%), 12%),0.04));
+$osd_fg_color: #eeeeec;
+$osd_text_color: white;
+$osd_bg_color: transparentize(darken(desaturate(#3d3846, 100%), 12%),0.04);
 $osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
 $osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%);
-$osd_borders_color: if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0.7));
-$osd_outer_borders_color: if($variant == 'light', rgba(0,0,0,0.1), lighten($osd_bg_color, 7%));
+$osd_borders_color: transparentize(black, 0.3);
+$osd_outer_borders_color: transparentize(white, 0.84);

-$shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2));
+$tooltip_borders_color: $osd_outer_borders_color;
+$shadow_color: transparentize(black, 0.9);

 //insensitive state derived colors
 $insensitive_fg_color: mix($fg_color, $bg_color, 50%);
 $insensitive_bg_color: mix($bg_color, $base_color, 60%);
-$insensitive_borders_color: mix($borders_color, $base_color, 60%);
+$insensitive_borders_color: $borders_color;

 //colors for the backdrop state, derived from the main colors.
 $backdrop_base_color: if($variant =='light', darken($base_color,1%), lighten($base_color,1%));
@@ -40,4 +42,4 @@ $backdrop_bg_color: $bg_color;
 $backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 80%);
 $backdrop_insensitive_color: if($variant =='light', darken($backdrop_bg_color,15%), lighten($backdrop_bg_color,15%));
 $backdrop_borders_color: mix($borders_color, $bg_color, 90%);
-$backdrop_dark_fill: mix($backdrop_borders_color,$backdrop_bg_color, 35%);
+$backdrop_dark_fill: mix($backdrop_borders_color,$backdrop_bg_color, 35%);
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -2,7 +2,7 @@

 // generic drawing of more complex things

-@function draw_widget_edge($c:$borders_edge) {
+@function _widget_edge($c:$borders_edge) {
 // outer highlight "used" on most widgets
  @return 0 1px $c;
 }
@@ -13,7 +13,7 @@
  //font-size: ($size / $base) * 1rem;
 }

-@mixin draw_shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
+@mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
 //
 // Helper function to stack up to 4 box-shadows;
 //
@@ -31,7 +31,8 @@
 //
 // $t: entry type
 // $fc: focus color
-// $edge: set to none to not draw the bottom edge or specify a color to not use the default one
+// $edge: set to none to not draw the bottom edge or specify a color to not
+//        use the default one
 //
 // possible $t values:
 // normal, focus, insensitive
@@ -44,9 +45,8 @@
  }
  @if $t==focus {
    border-color: if($fc==$selected_bg_color,
-              $selected_borders_color,
-              darken($fc,35%));
-    box-shadow: inset 0 0 0 1px $fc;
+                     $selected_borders_color,
+                     darken($fc,35%));
  }
  @if $t==hover { }
  @if $t==insensitive {
@@ -58,39 +58,36 @@

 // buttons

-@function draw_border_color ($c) {
-  //
-  // colored buttons want the border form the base color
-  //
-  @return if($variant == 'light', darken($c, 18%), darken($c, 4%));
-}
+@function _border_color ($c) { @return darken($c,25%); } // colored buttons want
+                                                         // the border form the
+                                                         // base color

-@function draw_text_shadow_color ($tc:$fg_color, $bg:$bg_color) {
+@function _text_shadow_color ($tc:$fg_color, $bg:$bg_color) {
 //
 // calculate the color of text shadows
 //
 // $tc is the text color
 // $bg is the background color
 //
-  $lbg: lightness($bg)/100%;
-  @if lightness($tc)<50% { @return rgba(255,255,255,$lbg/($lbg*1.3)); }
-  @else { @return rgba(0,0,0,1-$lbg*0.8); }
+  $_lbg: lightness($bg)/100%;
+  @if lightness($tc)<50% { @return transparentize(white,1-$_lbg/($_lbg*1.3)); }
+  @else { @return transparentize(black,$_lbg*0.8); }
 }

-@function draw_button_hilight_color($c) {
+@function _button_hilight_color($c) {
 //
 // calculate the right top hilight color for buttons
 //
 // $c: base color;
 //
  @if lightness($c)>90% { @return white; }
-  @else if lightness($c)>80% { @return rgba(255,255,255, 0.7); }
-  @else if lightness($c)>50% { @return rgba(255,255,255, 0.5); }
-  @else if lightness($c)>40% { @return rgba(255,255,255, 0.3); }
-  @else { @return rgba(255,255,255, 0.1); }
+  @else if lightness($c)>80% { @return transparentize(white, 0.3); }
+  @else if lightness($c)>50% { @return transparentize(white, 0.5); }
+  @else if lightness($c)>40% { @return transparentize(white, 0.7); }
+  @else { @return transparentize(white, 0.9); }
 }

-@mixin draw_button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
+@mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
 //
 // helper function for the text emboss effect
 //
@@ -99,19 +96,19 @@
 // TODO: this functions needs a way to deal with special cases
 //

-  $shadow: draw_text_shadow_color($tc, $bg);
+  $_shadow: _text_shadow_color($tc, $bg);

  @if lightness($tc)<50% {
-    text-shadow: 0 1px $shadow;
-    icon-shadow: 0 1px $shadow;
+    text-shadow: 0 1px $_shadow;
+    icon-shadow: 0 1px $_shadow;
  }
  @else {
-    text-shadow: 0 -1px $shadow;
-    icon-shadow: 0 -1px $shadow;
+    text-shadow: 0 -1px $_shadow;
+    icon-shadow: 0 -1px $_shadow;
  }
 }

-@mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_edge, $shadow: $shadow_color) {
+@mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_edge) {
 //
 // Button drawing function
 //
@@ -120,8 +117,6 @@
 // $tc:   optional text color for colored* types
 // $edge: set to none to not draw the bottom edge or specify a color to not
 //        use the default one
-// $shadow: set to none to not draw the drop shadow or specify a color to not
-//          use the default one
 //
 // possible $t values:
 // normal, hover, active, insensitive, insensitive-active,
@@ -129,68 +124,79 @@
 // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
 //

-  $hilight_color: draw_button_hilight_color($c);
-  $button_edge: if($edge == none, none, draw_widget_edge($edge));
-  $blank_edge: if($edge == none, none, draw_widget_edge(transparentize($edge,1)));
-  $button_shadow: if($shadow == none, none, 0 1px 1px 0 $shadow);
+  $_hilight_color: _button_hilight_color($c);
+  $_button_edge: if($edge == none, none, _widget_edge($edge));
+  $_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1)));
+  $_button_shadow: 0 1px 2px transparentize($shadow_color, 0.03);

-  // normal button
  @if $t==normal {
-    color: $tc;
-    background-color: lighten($c, 3%) !important;
-    border-color: draw_border_color($c);
-    @include draw_shadows($button_shadow);
-    // box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
-    text-shadow: 0 1px $text_shadow_color;
-    icon-shadow: 0 1px $text_shadow_color;
-  }
+  //
+  // normal button
+  //

-  // focused button
-  @if $t==focus {
    color: $tc;
-    text-shadow: 0 1px $text_shadow_color;
-    icon-shadow: 0 1px $text_shadow_color;
-    box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.7);
+    background-color: $c;
+    border-color: $borders_color;
+    box-shadow: $_button_shadow;
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black;
+  }
+  @if $t==focus {
+  //
+  // focused button
+  //  
+    color: $tc;
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black;
+    box-shadow: inset 0px 0px 0px 2px $selected_bg_color;
    //border-color: $selected_bg_color;
  }

-  // hover button
  @else if $t==hover {
+  //
+  // active osd button
+  //
    color: $tc;
-    background-color: lighten($c, if($variant == 'light', 8%, 5%)) !important;
-    border-color: if($variant == 'light', draw_border_color(lighten($c, 7%)), draw_border_color($c));
-    @include draw_shadows($button_shadow);
-    text-shadow: 0 1px $text_shadow_color;
-    icon-shadow: 0 1px $text_shadow_color;
-  }
+    border-color: $borders_color;
+    background-color: $c;
+    box-shadow: $_button_shadow;
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black;

-  // active button
+  }
  @else if $t==active {
+  //
+  // active osd button
+  //
    color: $tc;
-    background-color: darken($c,3%) !important;
-    border-color: draw_border_color(if($variant == 'light', $c, darken($c,7%)));
+    border-color: $borders_color;
+    background-color: $c;
    text-shadow: none;
    icon-shadow: none;
    box-shadow: none;
  }
-
-  // insensitive button
  @else if $t==insensitive {
+
    color: $insensitive_fg_color;
    border-color: $insensitive_borders_color;
-    background-color: $insensitive_bg_color !important;
+    background-color: $insensitive_bg_color;
    box-shadow: none;
    text-shadow: none;
    icon-shadow: none;
  }
-
-  // reset
  @else if $t==undecorated {
+  //
+  // reset
+  //
    border-color: transparent;
    background-color: transparent;
    background-image: none;
-    @include draw_shadows(inset 0 1px rgba(255,255,255,0),$blank_edge);
+
+    @include _shadows(inset 0 1px transparentize(white,1),
+                      $_blank_edge);
+
    text-shadow: none;
    icon-shadow: none;
  }
 }
+
--- a/data/theme/gnome-shell-sass/_high-contrast-colors.scss
+++ b/data/theme/gnome-shell-sass/_high-contrast-colors.scss
@@ -22,10 +22,11 @@ $destructive_color: darken(#ef2929,10%);

 $osd_fg_color: #eeeeec;
 $osd_bg_color: #2e3436;
-$osd_borders_color: rgba(0,0,0, 0.7);
-$osd_outer_borders_color: rgba(255,255,255, 0.1);
+$osd_borders_color: transparentize(black, 0.3);
+$osd_outer_borders_color: transparentize(white, 0.9);

-$shadow_color: rgba(0,0,0, 0.1);
+$tooltip_borders_color: $osd_outer_borders_color;
+$shadow_color: transparentize(black, 0.9);

 //insensitive state derived colors
 $insensitive_fg_color: mix($fg_color, $bg_color, 50%);
--- a/data/theme/gnome-shell-sass/_widgets.scss
+++ b/data/theme/gnome-shell-sass/_widgets.scss
@@ -1,38 +0,0 @@
-//
-// Shell widgets stylesheets are placed in separate .scss files
-// in 'widgets' and imported into the main stylesheet in this file.
-// To create or update a widget for the shell modify the list below.
-//
-
-/* WIDGETS */
-@import 'widgets/app-grid';
-@import 'widgets/app-switcher';
-@import 'widgets/buttons';
-@import 'widgets/calendar';
-@import 'widgets/check-box';
-@import 'widgets/corner-ripple';
-@import 'widgets/dash';
-@import 'widgets/dialogs';
-@import 'widgets/entries';
-@import 'widgets/hotplug';
-@import 'widgets/ibus-popup';
-@import 'widgets/keyboard';
-@import 'widgets/login-dialog';
-@import 'widgets/looking-glass';
-@import 'widgets/message-list';
-@import 'widgets/notifications';
-@import 'widgets/misc';
-@import 'widgets/network-dialog';
-@import 'widgets/osd';
-@import 'widgets/overview';
-@import 'widgets/panel';
-@import 'widgets/popovers';
-@import 'widgets/screen-shield';
-@import 'widgets/scrollbars';
-@import 'widgets/search-entry';
-@import 'widgets/search-results';
-@import 'widgets/slider';
-@import 'widgets/switches';
-@import 'widgets/tiled-previews';
-@import 'widgets/window-picker';
-@import 'widgets/workspace-switcher';
--- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
@@ -1,237 +0,0 @@
-/* App Grid */
-
-$app_icon_size: 96px;
-$app_icon_padding: 24px;
-
-// app icons
-.icon-grid {
-  -shell-grid-horizontal-item-size: $app_icon_size + $app_icon_padding * 2;
-  -shell-grid-vertical-item-size: $app_icon_size + $app_icon_padding * 2;
-  spacing: $base_spacing * 6;
-
-  .overview-icon {
-    icon-size: $app_icon_size;
-    StIcon { margin-bottom: $base_margin; } // margin on icon so label isn't close
-  }
-}
-
-//.app-display { spacing: 20px; }
-
-/* App Icons */
-
-$app_grid_fg_color: #fff;
-
-// Outline for low res icons
-.lowres-icon {
-  icon-shadow: 0 1px 2px rgba(0,0,0,0.3);
-}
-
-// Dropshadow for large icons
-.icon-dropshadow {
-  icon-shadow: 0 1px 2px rgba(0,0,0,0.4);
-}
-
-// Icon tiles in the app grid
-.app-well-app,
-.app-folder {
-
-  .overview-icon {
-    @extend %icon_tile;
-    color: $app_grid_fg_color !important;
-  }
-
-  &:selected {
-    .overview-icon {
-      background-color: transparentize($osd_bg_color,0.7);
-      color: $app_grid_fg_color;
-    }
-  }
-
-  &:hover,
-  &:focus,
-  &:selected {
-    .overview-icon {
-      background-color: transparentize($osd_fg_color,0.9);
-      color: $osd_fg_color;
-    }
-  }
-
-  &:focus {
-    .overview-icon {
-      background-color: transparentize($osd_fg_color,0.7  );
-      // border-color: $selected_bg_color;
-      color: $app_grid_fg_color;
-    }
-  }
-
-  &:drop {
-    .overview-icon {
-      background-color: transparentize($selected_bg_color,.15);
-    }
-  }
-
-  &:active,
-  &:checked {
-    .overview-icon {
-      background-color: transparentize(darken($osd_bg_color,10%), 0.5);
-    }
-  }
-}
-
-/* App Folders */
-.app-folder {
-  .overview-icon {
-    @extend %icon_tile;
-  }
-}
-
-// expanded folder
-.app-folder-dialog {
-  border-radius: 8px;
-  spacing: 24px;
-  background-color: transparentize(darken($osd_bg_color,10%), 0.05);
-
-  & .folder-name-container {
-    padding: 12px 18px;
-    spacing: 12px;
-
-    & .folder-name-label,
-    & .folder-name-entry {
-      font-size: 18pt;
-      font-weight: bold;
-    }
-
-    & .folder-name-entry { width: 300px }
-
-    /* FIXME: this is to keep the label in sync with the entry */
-    & .folder-name-label { padding: 5px 7px }
-
-    & .edit-folder-button {
-      @extend %button;
-
-      padding: 0;
-      width: 36px;
-      height: 36px;
-      border-radius: 18px;
-
-      & > StIcon { icon-size: 16px }
-    }
-  }
-}
-.app-folder-dialog-container {
-  padding: 12px;
-  width: 800px;
-  height: 600px;
-}
-
-.app-folder-icon {
-  padding: $base_padding;
-  spacing-rows: $base_spacing;
-  spacing-columns: $base_spacing;
-}
-
-
-// Running app indicator (also shown in dash)
-.app-well-app-running-dot {
-  height: 5px;
-  width: 5px;
-  border-radius:5px;
-  background-color: $osd_fg_color;
-  margin-bottom: 1px;
-}
-
-// Rename popup for app folders
-.rename-folder-popup {
-  .rename-folder-popup-item {
-    spacing: $base_spacing;
-    &:ltr, &:rtl { padding: 0 $base_padding * 2; }
-  }
-}
-
-// right-click app menu
-.app-menu,
-.app-well-menu {
-  max-width: 27.25em;
-}
-
-// App Grid pagination indicators
-.page-indicator {
-  padding: 15px 20px;
-
-  .page-indicator-icon {
-    width: 10px;
-    height: 10px;
-    border-radius: 10px; // the same as height&width
-    background-color: white;
-  }
-}
-
-// Some hacks I don't even know
-.all-apps,
-.frequent-apps > StBoxLayout {
-  // horizontal padding to make sure scrollbars or dash don't overlap content
-  padding: 0px 88px 10px 88px;
-}
-
-.app-well-app > .overview-icon.overview-icon-with-label {
-  padding: 10px 8px 5px 8px;
-  spacing: $base_spacing;
-}
-
-// Label when no frequent apps
-.no-frequent-applications-label { @extend %status_text; }
-
-// shutdown and other actions in the grid
-.system-action-icon {
-  background-color: rgba(0,0,0,0.8);
-  color: #fff;
-  border-radius: 99px;
-  icon-size: $app_icon_size * 0.5;
-}
-
-/* Frequent | All toggle */
-
-// container
-.app-view-controls { 
-  padding-bottom: 32px;
-}
-
-// buttons
-.app-view-control { 
-  padding: $base_padding $base_padding*5;
-  margin: 0;
-  background-color: transparentize($osd_bg_color, 0.5);
-  border-width: 1px;
-  color: darken($osd_fg_color, 25%);
-
-  &:hover {
-    background-color: transparentize($osd_bg_color, 0.5) !important;
-    box-shadow:none !important;
-    color: darken($osd_fg_color, 25%);
-  }
-
-  &:active {
-    box-shadow: none;
-    background-color: $selected_bg_color !important;
-    &:hover {
-      background-color: lighten($selected_bg_color, 11%) !important;
-    }
-  }
-
-  &:checked {
-    background-color: $selected_bg_color !important;
-    color: $selected_fg_color;
-    box-shadow: none;
-    &:active { background-color: darken($selected_bg_color, 4%) !important; }
-    &:hover { background-color: lighten($selected_bg_color, 7%) !important; }
-  }
-
-  &:first-child {
-    border-right-width: 0 !important;
-    border-radius: $base_border_radius 0 0 $base_border_radius;
-  }
-
-  &:last-child {
-    border-radius: 0 $base_border_radius $base_border_radius 0;
-  }
-}
--- a/data/theme/gnome-shell-sass/widgets/_app-switcher.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-switcher.scss
@@ -1,55 +0,0 @@
-/* App Switcher */
-
-.switcher-popup {
-  padding: 8px;
-  spacing: $base_spacing * 4;
-}
-
-// switcher onscreen panel
-.switcher-list {
-  @extend %osd_panel;
-
-  .item-box {
-    padding: 8px;
-    border-radius: $base_border_radius + 1px;
-    border: 1px solid transparent;
-
-    &:outlined {
-      border: 1px solid darken($borders_color,5%);
-      background-color: transparentize($osd_fg_color, 0.9);
-      box-shadow: inset 0 2px 2px 0 rgba(0,0,0,0.4);
-    }
-
-    &:selected {
-      background-color: transparentize($osd_fg_color, 0.9);
-      color: $osd_fg_color;
-    }
-  }
-
-  // window thumbnails
-  .thumbnail-box {
-    padding: 2px;
-    spacing: $base_spacing;
-  }
-
-  .thumbnail {
-    width: 256px;
-  }
-
-  .separator {
-    width: 1px;
-    background: $borders_color;
-  }
-
-  .switcher-list-item-container {
-    spacing: $base_spacing * 2;
-  }
-}
-
-.switcher-arrow {
-  border-color: rgba(0,0,0,0);
-  color: transparentize($fg_color,0.2);
-  &:highlighted {
-    color: $fg_color;
-  }
-}
--- a/data/theme/gnome-shell-sass/widgets/_buttons.scss
+++ b/data/theme/gnome-shell-sass/widgets/_buttons.scss
@@ -1,5 +0,0 @@
-/* Buttons */
-
-.button {
-  @extend %button; // that's it
-}
--- a/data/theme/gnome-shell-sass/widgets/_calendar.scss
+++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss
@@ -1,268 +0,0 @@
-/* Date/Time Menu */
-
-.clock-display-box { spacing: $base_spacing; }
-
-// overall menu
-#calendarArea {
-  padding:0;
-  margin:0;
-}
-
-// Calendar menu side column
-.datemenu-calendar-column {
-  spacing: 0;
-  border: 0 solid $bubble_borders_color;
-  padding: $base_padding * 2;
-  padding-bottom: 3em; // account for the notifications clear button
-  padding-top:0;
-
-  &:ltr {margin-right: $base_margin * 2; border-left-width: 1px; }
-  &:rtl {margin-left: $base_margin * 2; border-right-width: 1px; }
-
-  // today button (the date)
-  .datemenu-today-button {
-    padding: $base_padding * 1.5;
-    margin: $base_margin;
-    border: 1px solid transparent;
-    border-radius: $base_border_radius + 2px;
-
-    &:hover { @include button(hover);}
-    &:focus { @include button(focus);}
-
-    &:active {
-      @include button(active);
-    }
-
-    // weekday label
-    .day-label {
-      @include fontsize($base_font_size+1);
-      font-weight: bold;
-    }
-
-    // date label
-    .date-label {
-      @include fontsize($base_font_size+7);
-      font-weight: 1000;
-    }
-  }
-
-  // calendar
-  .calendar {
-    @extend %notification_bubble;
-    margin:$base_margin !important;
-    margin-bottom: $base_padding + $base_margin !important;
-    padding:$base_padding !important;
-
-    // more below for sub-elements
-  }
-
-  .datemenu-displays-section {
-    margin:0;
-  }
-
-  .datemenu-displays-box {
-    spacing: $base_spacing;
-    margin:0;
-
-    // world clocks and weather
-    .world-clocks-button,
-    .weather-button {
-      @extend %notification_bubble;
-      padding:$base_padding !important;
-    }
-  }
-}
-
-.events-section-title {
-  color: desaturate(darken($fg_color,40%), 10%);
-  font-weight: bold;
-  border-radius: 4px;
-  padding: .4em;
-}
-
-/* Calendar */
-.calendar {
-
-  // month
-  .calendar-month-label {
-    color: lighten($fg_color,5%);
-    font-weight: bold;
-    padding: 8px 0;
-    &:focus {}
-  }
-
-  // prev/next month icons
-  .calendar-change-month-back StIcon,
-  .calendar-change-month-forward StIcon {
-    icon-size: $base_icon_size;
-  }
-
-  .pager-button {
-    background-color: transparent;
-    height: 32px;
-    width: 32px;
-    border-radius: $base_border_radius;
-    &:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
-    &:active { background-color: $active_bg_color; }
-  }
-
-
-  $calendar_day_size: 32px;
-
-  .calendar-day-base {
-    @include fontsize($base_font_size - 3);
-    text-align: center;
-    width: $calendar_day_size;
-    height: $calendar_day_size;
-    padding: 0;
-    margin: 2px;
-    border-radius: $calendar_day_size * 0.5 + 2px;
-    border: 1px solid transparent; //avoid jumparound due to today
-    font-feature-settings: "tnum";
-    &:hover, &:focus { background-color: $hover_bg_color; }
-    &:active,&:selected {
-      color: lighten($fg_color,10%);
-      background-color: darken($bg_color,5%);
-    }
-
-    // day of week heading
-    &.calendar-day-heading {
-      color: lighten($fg_color,10%);
-      margin-top: 1em;
-      @include fontsize($base_font_size - 4);
-    }
-  }
-  .calendar-day { //border collapse hack - see calendar.js
-    border-width: 0;
-  }
-
-  .calendar-day-top {
-    border-top-width: 1px;
-  }
-
-  .calendar-day-left { border-left-width: 1px; }
-  .calendar-work-day {}
-  .calendar-nonwork-day {
-    color: $insensitive_fg_color;
-  }
-
-  // Today
-  .calendar-today {
-    font-weight: bold;
-    border: 1px solid transparent;
-    background-color: $selected_bg_color;
-    color: $selected_fg_color;
-
-    &:hover,&:focus {
-      background-color:lighten($selected_bg_color, 3%);
-      color: $selected_fg_color;
-    }
-
-    &:active,&:selected {
-      background-color: $selected_bg_color;
-      color: $selected_fg_color;
-      &:hover,&:focus {
-        background-color:lighten($selected_bg_color, 3%);
-        color: $selected_fg_color;
-      }
-    }
-
-  }
-  .calendar-day-with-events {
-    color: lighten($fg_color,10%);
-    font-weight: bold;
-    background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg");
-  }
-
-  .calendar-other-month-day {
-    color: transparentize($fg_color ,0.5);
-    opacity: 0.5;
-  }
-
-  .calendar-week-number {
-    @include fontsize($base_font_size - 4);
-    font-weight: bold;
-    height: 1.8em;
-    width: 2.3em; 
-    border-radius: 2px;
-    padding: 0.5em 0 0;
-    margin: 6px;
-    background-color: darken($bg_color, 2%);
-    color: lighten($fg_color, 5%);
-  }
-}
-
-
-/* Weather */
-.weather-box {
-  spacing: $base_spacing;
-  padding:$base_padding;
-
-  .weather-header {
-    color: desaturate(darken($fg_color,40%), 10%);
-    font-weight: bold;
-    &.location {
-      font-weight: normal;
-      @include fontsize($base_font_size - 1);
-    }
-  }
-
-  .weather-grid {
-    margin-top: $base_margin;
-    spacing-rows: $base_spacing;
-    spacing-columns: $base_spacing * 2;
-  }
-
-  .weather-forecast-time {
-    color: darken($fg_color,30%);
-    font-feature-settings: "tnum";
-    @include fontsize($base_font_size - 2);
-    font-weight: normal;
-    padding-top: 0.2em;
-    padding-bottom: 0.4em;
-  }
-
-  .weather-forecast-icon {
-    icon-size: $base_icon_size * 2;
-  }
-
-  .weather-forecast-temp {
-    font-weight: bold;
-  }
-}
-
-/* World clocks */
-.world-clocks-grid {
-  padding:$base_padding;
-  spacing-rows: $base_spacing;
-  spacing-columns: $base_spacing * 2;
-
-  // title
-  .world-clocks-header {
-    color: desaturate(darken($fg_color,40%), 10%);
-    font-weight: bold;
-  }
-
-  // city label
-  .world-clocks-city {
-    color: $fg_color;
-    @include fontsize($base_font_size);
-    font-weight: normal;
-  }
-
-  // timezone time
-  .world-clocks-time {
-    font-weight: bold;
-    color: $fg_color;
-    font-feature-settings: "lnum";
-    @include fontsize($base_font_size);
-    text-align: right;
-  }
-
-  // timezone offset label
-  .world-clocks-timezone {
-    color: darken($fg_color,20%);
-    font-feature-settings: "tnum";
-    @include fontsize($base_font_size - 1);
-  }
-}
--- a/data/theme/gnome-shell-sass/widgets/_check-box.scss
+++ b/data/theme/gnome-shell-sass/widgets/_check-box.scss
@@ -1,18 +0,0 @@
-/* Check Boxes */
-
-// these are equal to the size of the SVG assets
-$check_height: 22px;
-$check_width: 24px;
-
-
-.check-box {
-  StBoxLayout { spacing: .8em; }
-  StBin {
-    width: $check_width;
-    height: $check_height;
-    background-image: url("resource:///org/gnome/shell/theme/checkbox-off.svg");
-  }
-  &:focus StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox-off-focused.svg"); }
-  &:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox.svg"); }
-  &:focus:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox-focused.svg"); }
-}
--- a/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss
+++ b/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss
@@ -1,24 +0,0 @@
-/* Activities Ripple */
-
-$ripple_size: 50px;
-
-.ripple-box {
-  background-color: lighten(transparentize($selected_bg_color, 0.7), 40%);
-  box-shadow: 0 0 2px 2px lighten($selected_bg_color, 20%);
-  // plus + 2px for the border (box-shadow)
-  width: $ripple_size + 2px;
-  height: $ripple_size + 2px;
-  border-radius: 0 0 $ripple_size + 2px 0; // radius equals the size of the box to give us the curve
-
-  // just a simple change to the border radius position
-  &:rtl { border-radius: 0 0 0 $ripple_size + 2px; }
-}
-
-// Pointer location
-.ripple-pointer-location {
-  width: $ripple_size;
-  height: $ripple_size;
-  border-radius: $ripple_size * 0.5; // radius equals the size of the box to give us the curve
-  background-color: lighten(transparentize($selected_bg_color, 0.7), 30%);
-  box-shadow: 0 0 2px 2px lighten($selected_bg_color, 20%);
-}
--- a/data/theme/gnome-shell-sass/widgets/_dash.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dash.scss
@@ -1,85 +0,0 @@
-/* Dash */
-
-$dash_placeholder_size: 32px;
-$dash_spacing: $base_padding + 4px;
-$dash_border_radius: $modal_radius * 1.5;
-
-#dash {
-  @extend %overview_panel;
-  @include fontsize($base_font_size - 2);
-  padding: ($dash_spacing / 2) 0;
-
-  //fixme: can't have non uniform borders :(
-  border-radius: 0 $dash_border_radius $dash_border_radius 0; 
-  border-left-width: 0 !important;
-  &:rtl { 
-    border-radius: $dash_border_radius 0 0 $dash_border_radius;
-    border-right-width: 0 !important;
-  }
-
-  .placeholder {
-    // background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg");
-    background-image:none;
-    background-size: contain;
-    height: $dash_placeholder_size;
-  }
-
-  .empty-dash-drop-target {
-    width: $dash_placeholder_size;
-    height: $dash_placeholder_size;
-  }
-}
-
-// Dash Items
-.dash-item-container > StWidget {
-  padding: ($dash_spacing / 2) $dash_spacing;
-}
-
-// OSD Tooltip
-.dash-label {
-  background-color: transparentize($osd_bg_color,0.05);
-  border-radius: $base_border_radius + 2px;
-  border:none;
-  box-shadow:0 0 0 1px $osd_outer_borders_color;
-  color: $osd_fg_color;
-  padding: $base_padding $base_padding + 2px;
-  text-align: center;
-  -x-offset: $base_margin * 2; // distance from the dash edge
-}
-
-// Show apps button
-.show-apps {
-  color: $osd_fg_color;
-
-  & .overview-icon {
-    @extend %icon_tile;
-    color: $osd_fg_color;
-  }
-
-  &:hover,
-  &:focus,
-  &:selected {
-    .overview-icon {
-      background-color: transparentize($osd_fg_color,0.9);
-      color: $osd_fg_color;
-    }
-  }
-
-  &:drop .overview-icon {
-    background-color: transparentize($selected_bg_color,.15);
-  }
-
-  &:active, &:checked {
-    .overview-icon {
-      background-color: darken($osd_bg_color,10%);
-    }
-  }
-
-  &:checked, &:focus {
-     .show-apps-icon {
-      color: $fg_color;
-      transition-duration: 100ms;
-    }
-  }
-}
-
--- a/data/theme/gnome-shell-sass/widgets/_dialogs.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dialogs.scss
@@ -1,199 +0,0 @@
-/* Modal Dialogs */
-
-.modal-dialog {
-  border-radius: $modal_radius;
-  @extend %bubble_panel;
-
-  .modal-dialog-content-box {
-    margin: 32px 40px;
-    spacing: 32px;
-    max-width: 28em;
-  }
-
-  .modal-dialog-linked-button {
-    @extend %bubble_button;
-  }
-}
-
-.mount-dialog-subject {
-  @include fontsize($base_font_size + 3);
-}
-
-/* End Session Dialog */
-
-.end-session-dialog {
-  width: 30em;
-
-  .end-session-dialog-battery-warning,
-  .dialog-list-title {
-    color: $warning_color;
-  }
-}
-
-/* Message Dialog */
-.message-dialog-content {
-  spacing: 18px;
-
-  .message-dialog-title {
-    text-align: center;
-    font-size: 18pt;
-    font-weight: 800;
-  }
-  .message-dialog-description { text-align: center; }
-}
-
-/* Dialog List */
-.dialog-list {
-  spacing: 18px;
-
-  .dialog-list-title {
-    text-align: center;
-    font-weight: bold;
-  }
-
-  .dialog-list-scrollview { max-height: 200px; }
-  .dialog-list-box {
-    spacing: 1em;
-
-    .dialog-list-item {
-      spacing: 1em;
-
-      .dialog-list-item-title { font-weight: bold; }
-      .dialog-list-item-description {
-        color: darken($fg_color,5%);
-        @include fontsize($base_font_size - 1);
-      }
-    }
-  }
-}
-
-/* Run Dialog */
-.run-dialog {
-  .modal-dialog-content-box {
-    margin-top: 24px;
-    margin-bottom: 14px;
-  }
-  .run-dialog-entry { width: 20em; }
-  .run-dialog-description {
-    @include fontsize($base_font_size - 1);
-    text-align: center;
-    color: darken($fg_color, 20%);
-  }
-}
-
-/* Password or Authentication Dialog */
-
-.prompt-dialog {
-  //this is the width of the entire modal popup
-  width: 34em;
-
-  .message-dialog-content { spacing: $base_spacing * 4; }
-  .message-dialog-title { color: lighten($fg_color,15%); }
-}
-
-.prompt-dialog-description:rtl {
-  text-align: right;
-}
-
-.prompt-dialog-password-box {
-  spacing: 1em;
-  padding-bottom: 1em;
-}
-
-.prompt-dialog-error-label {
-  @include fontsize($base_font_size - 1);
-  color: $warning_color;
-  padding-bottom: 8px;
-}
-
-.prompt-dialog-info-label {
-  @include fontsize($base_font_size - 1);
-  padding-bottom: 8px;
-}
-
-.prompt-dialog-null-label {
-  @include fontsize($base_font_size - 1);
-  padding-bottom: 8px;
-}
-
-.prompt-dialog-pim-box {
-  spacing: 1em;
-}
-
-.prompt-dialog-grid {
-  spacing-rows: 15px;
-  spacing-columns: 1em;
-}
-
-.prompt-dialog-keyfiles-box {
-  spacing: 1em;
-}
-
-.prompt-dialog-button.button {
-  padding: 8px;
-}
-
-
-/* Polkit Dialog */
-
-.polkit-dialog-user-layout {
-  padding-left: 10px;
-  spacing: 10px;
-  &:rtl {
-    padding-left: 0px;
-    padding-right: 10px;
-  }
-}
-
-.polkit-dialog-user-root-label {
-  color: $warning_color;
-}
-
-.polkit-dialog-user-icon {
-  border-radius: 99px;
-  background-size: contain;
-  width: 48px;
-  height: 48px;
-}
-
-/* Audio selection dialog */
-.audio-device-selection-dialog {
-  .modal-dialog-content-box { margin-bottom: 28px; }
-  .audio-selection-box { spacing: 20px; }
-}
-
-.audio-selection-device {
-  border: 1px solid $bubble_borders_color;
-  border-radius: 12px;
-  &:hover,&:focus { background-color: $hover_bg_color; }
-  &:active { 
-    background-color: $selected_bg_color;
-    color: $selected_fg_color;
-  }
-}
-
-.audio-selection-device-box {
-  padding: 20px;
-  spacing: 20px;
-}
-
-.audio-selection-device-icon {
-  icon-size: $base_icon_size * 4;
-}
-
-/* Access Dialog */
-.access-dialog {
-  spacing: 30px;
-}
-
-/* Network Agent Dialog */
-
-.network-dialog-secret-table {
-  spacing-rows: 15px;
-  spacing-columns: 1em;
-}
-
-.keyring-dialog-control-table {
-  spacing-rows: 15px;
-  spacing-columns: 1em;
-}
--- a/data/theme/gnome-shell-sass/widgets/_entries.scss
+++ b/data/theme/gnome-shell-sass/widgets/_entries.scss
@@ -1,27 +0,0 @@
-/* Entries */
-
-StEntry {
-  border-radius: $base_border_radius;
-  padding: 8px;
-  border-width: 1px;
-  color: $fg_color;
-  @include entry(normal);
-  //&:hover { @include entry(hover);}
-  &:focus { @include entry(focus);}
-  &:insensitive { @include entry(insensitive);}
-  selection-background-color: $selected_bg_color;
-  selected-color: $selected_fg_color;
-  StIcon.capslock-warning {
-    icon-size: 16px;
-    warning-color: $warning_color;
-    padding: 0 4px;
-  }
-  StIcon.peek-password {
-    icon-size: $base_icon_size;
-    padding: 0 4px;
-  }
-  StLabel.hint-text {
-    margin-left: 2px;
-    color: transparentize($fg_color, 0.3);
-  }
-}
--- a/data/theme/gnome-shell-sass/widgets/_hotplug.scss
+++ b/data/theme/gnome-shell-sass/widgets/_hotplug.scss
@@ -1,10 +0,0 @@
-// hotplug
-
-.hotplug-notification-item {
-  @extend %bubble_button;
-}
-
-.hotplug-notification-item-icon {
-  icon-size: 24px;
-  padding: 0 4px;
-}
--- a/data/theme/gnome-shell-sass/widgets/_ibus-popup.scss
+++ b/data/theme/gnome-shell-sass/widgets/_ibus-popup.scss
@@ -1,30 +0,0 @@
-// IBus Candidate Popup
-.candidate-popup-content {
-  padding: 0.5em;
-  spacing: 0.3em;
-}
-
-.candidate-index {
-  padding: 0 0.5em 0 0;
-  color: darken($fg_color,10%);
-}
-
-.candidate-box {
-  padding: 0.3em 0.5em 0.3em 0.5em;
-  border-radius: $base_border_radius;
-  &:selected,&:hover { background-color: $selected_bg_color; color: $selected_fg_color; }
-}
-
-.candidate-page-button-box {
-  height: 2em;
-  .vertical & { padding-top: 0.5em; }
-  .horizontal & { padding-left: 0.5em; }
-}
-
-.candidate-page-button {
-  padding: 4px;
-}
-
-.candidate-page-button-previous { border-radius: $base_border_radius 0px 0px $base_border_radius; border-right-width: 0; }
-.candidate-page-button-next { border-radius: 0px $base_border_radius $base_border_radius 0px;  }
-.candidate-page-button-icon { icon-size: 1em; }
--- a/data/theme/gnome-shell-sass/widgets/_keyboard.scss
+++ b/data/theme/gnome-shell-sass/widgets/_keyboard.scss
@@ -1,124 +0,0 @@
-/* On-screen Keyboard */
-
-$key_size: 1.2em;
-$key_border_radius: $base_border_radius + 3px;
-$key_bg_color:  $bg_color;
-// $default_key_bg_color: darken($key_bg_color, 4%);
-$default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten($osd_bg_color, 2%));
-
-
-// draw keys using button function
-#keyboard {
-  background-color: transparentize(if($variant=='light', darken($bg_color, 5%), darken($bg_color, 8%)), 0.1);
-  box-shadow: inset 0 1px 0 0 $osd_outer_borders_color !important;
-
-  .page-indicator {
-    padding: $base_padding;
-
-    .page-indicator-icon {
-      width: 8px;
-      height: 8px;
-    }
-  }
-}
-
-// the container for individual keys
-.key-container {
-  padding: $base_margin;
-  spacing: $base_margin;
-}
-
-// the keys
-.keyboard-key {
-
-  @include button(normal, $c:$key_bg_color);
-
-  &:focus { @include button(focus);}
-  &:hover, &:checked { @include button(hover, $c: $key_bg_color);}
-  &:active { @include button(active, $c: $key_bg_color); }
-
-  @include fontsize($base_font_size + 5);
-  min-height: $key_size;
-  min-width: $key_size;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: $key_border_radius;
-
-  &:grayed { //FIXMEy
-    background-color: darken($bg_color, 3%);
-    color: $osd_fg_color;
-    border-color: $osd_borders_color;
-  }
-
-  // non-character keys
-  &.default-key {
-
-    // size of the icon asset
-    background-size: 24px;
-
-    @include button(normal, $c:$default_key_bg_color);
-    &:hover, &:checked {@include button(hover, $c: $default_key_bg_color);}
-    &:active { @include button(active, $c: $default_key_bg_color);}
-  }
-
-  // enter key is suggested-action
-  &.enter-key {
-    background-image: url("resource:///org/gnome/shell/theme/key-enter.svg");
-
-    @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
-    &:hover, &:checked { @include button(hover, $c: lighten($selected_bg_color, 3%));}
-    &:active {@include button(active, $c: darken($selected_bg_color, 2%));}
-  }
-
-  // key assets
-  &.shift-key-lowercase {background-image: url("resource:///org/gnome/shell/theme/key-shift.svg");}
-  &.shift-key-uppercase {background-image: url("resource:///org/gnome/shell/theme/key-shift-uppercase.svg");}
-  &.shift-key-uppercase:latched {background-image: url("resource:///org/gnome/shell/theme/key-shift-latched-uppercase.svg");}
-  &.hide-key {background-image: url("resource:///org/gnome/shell/theme/key-hide.svg");}
-  &.layout-key {background-image: url("resource:///org/gnome/shell/theme/key-layout.svg");}
-}
-
-// long press on a key popup
-.keyboard-subkeys {
-  color: $osd_fg_color;
-  -arrow-border-radius: $modal_radius;
-  -arrow-background-color: $osd_bg_color;
-  -arrow-border-width: 1px;
-  -arrow-border-color: lighten($osd_bg_color, 9%);
-  -arrow-base: 20px;
-  -arrow-rise: 10px;
-  -boxpointer-gap: $base_spacing;
-
-  .keyboard-key {
-    @include button(normal, $c:$key_bg_color);
-
-    &:focus { @include button(focus);}
-    &:hover, &:checked { @include button(hover, $c: $key_bg_color);}
-    &:active { @include button(active, $c: $key_bg_color); }
-
-    border-radius:$base_border_radius;
-  }
-}
-
-// emoji
-.emoji-page {
-  .keyboard-key {
-    background-color: transparent;
-    border: none;
-    color: initial;
-  }
-}
-
-.emoji-panel {
-  .keyboard-key:latched {
-    border-color: lighten($selected_bg_color, 5%);
-    background-color: $selected_bg_color;
-  }
-}
-
-// suggestions
-.word-suggestions {
-  @include fontsize($base_font_size + 3);
-  spacing: 12px;
-  min-height: 20pt;
-}
--- a/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
+++ b/data/theme/gnome-shell-sass/widgets/_login-dialog.scss
@@ -1,151 +0,0 @@
-/* Login Dialog */
-
-.login-dialog-banner-view {
-  padding-top: 24px;
-  max-width: 23em;
-}
-
-.login-dialog {
-  //reset
-  border: none;
-  background-color: transparent;
-
-  $_gdm_bg: lighten(#2e3436, 19%);
-
-  StEntry {
-    @if $variant=='dark' {
-      $_gdm_entry_bg: transparentize(lighten(desaturate(#241f31, 20%), 2%), 0.5);
-      background-color: $_gdm_entry_bg;
-      color: $osd_fg_color;
-    }
-  }
-
-  .modal-dialog-button-box { spacing: 3px; }
-  .modal-dialog-button {
-    padding: 4px 18px;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
-    background-color: $_gdm_bg;
-    border-color: $_gdm_bg;
-    color: $fg_color;
-
-    $_hover_c: lighten($_gdm_bg, 5%);
-    &:hover, &:focus {
-      background-color: $_hover_c;
-      border-color: $_hover_c;
-    }
-    &:active {
-      $_active_c: darken($_gdm_bg, 5%);
-      box-shadow: none;
-      background-color: $_active_c;
-      border-color: $_active_c;
-    }
-    &:insensitive {
-      @include button(insensitive);
-      border-color: darken($_gdm_bg, 5%);
-      background-color: darken($_gdm_bg, 5%);
-      color: transparentize($fg_color, 0.3);
-    }
-    &:default {
-      @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
-      border-color: $selected_bg_color;
-      &:hover, &:focus { 
-        @include button(hover,$c:$selected_bg_color, $tc:$selected_fg_color);
-        $_def_hover_c: lighten($selected_bg_color, 5%);
-        background-color: $_def_hover_c;
-        border-color: $_def_hover_c;
-      }
-      &:active {
-        @include button(active,$c:$selected_bg_color, $tc:$selected_fg_color);
-        $_def_active_c: darken($selected_bg_color, 5%);
-        background-color: $_def_active_c;
-        border-color: $_def_active_c;
-      }
-      &:insensitive {
-        @include button(insensitive);
-        border-color: darken($selected_bg_color, 10%);
-        background-color: darken($selected_bg_color, 10%);
-        color: transparentize($selected_fg_color, 0.3);
-      }
-    }
-  }
-}
-
-.login-dialog-logo-bin { padding: 24px 0px; }
-.login-dialog-banner { color: darken($osd_fg_color,10%); }
-.login-dialog-button-box { spacing: 5px; }
-.login-dialog-message-warning { color: $warning_color; }
-.login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; }
-.login-dialog-user-selection-box { padding: 100px 0px; }
-.login-dialog-not-listed-label {
-  padding-left: 2px;
-  .login-dialog-not-listed-button:focus &,
-  .login-dialog-not-listed-button:hover & {
-    color: $osd_fg_color;
-  }
-}
-
-.login-dialog-not-listed-label {
-  @include fontsize($base_font_size - 1);
-  font-weight: bold;
-  color: darken($osd_fg_color,30%);
-  padding-top: 1em;
-}
-
-.login-dialog-user-list-view { -st-vfade-offset: 1em; }
-.login-dialog-user-list {
-  spacing: 12px;
-  width: 23em;
-  &:expanded .login-dialog-user-list-item:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
-  &:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid $selected_bg_color; }
-}
-
-.login-dialog-user-list-item {
-  border-radius: 5px;
-  padding: 6px;
-  color: darken($osd_fg_color,30%);
-  &:ltr .user-widget { padding-right: 1em; }
-  &:rtl .user-widget { padding-left: 1em; }
-  .login-dialog-timed-login-indicator {
-    height: 2px;
-    margin-top: 6px;
-    background-color: $osd_fg_color;
-  }
-  &:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; }
-}
-
-.login-dialog-username,
-.user-widget-label {
-  color: $osd_fg_color;
-  @include fontsize($base_font_size + 2);
-  font-weight: bold;
-  text-align: left;
-  padding-left: 15px;
-}
-
-.user-widget-label {
-  &:ltr { padding-left: 14px; }
-  &:rtl { padding-right: 14px; }
-}
-
-.login-dialog-prompt-layout {
-  padding-top: 24px;
-  padding-bottom: 12px;
-  spacing: $base_spacing * 2;
-  width: 23em;
-}
-
-.login-dialog-prompt-label {
-  color: darken($osd_fg_color, 20%);
-  @include fontsize($base_font_size + 1);
-  padding-top: 1em;
-}
-
-.login-dialog-session-list-button StIcon {
-  icon-size: 1.25em;
-}
-
-.login-dialog-session-list-button {
-  color: darken($osd_fg_color,30%);
-  &:hover,&:focus { color: $osd_fg_color; }
-  &:active { color: darken($osd_fg_color, 50%); }
-}
--- a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss
+++ b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss
@@ -1,97 +0,0 @@
-/* Looking Glass */
-
-// Dialog
-#LookingGlassDialog {
-  background-color: $osd_bg_color;
-  spacing: $base_spacing;
-  padding: 4px;
-  border: 2px solid transparentize($osd_fg_color, 0.8);
-  border-top-width:0;
-  border-radius: 0 0 $base_border_radius $base_border_radius;
-
-  & > #Toolbar {
-    border: none;
-    border-radius: $base_border_radius;
-    background-color: darken($osd_bg_color, 10%);
-  }
-
-  .labels { spacing: $base_spacing; }
-  .notebook-tab {
-    -natural-hpadding: $base_padding * 2;
-    -minimum-hpadding: 6px;
-    font-weight: bold;
-    color: $fg_color;
-    transition-duration: 100ms;
-    padding-left: .3em;
-    padding-right: .3em;
-    &:hover {
-      color: white;
-      text-shadow: black 0px 2px 2px;
-    }
-    &:selected {
-      border-bottom-width: 2px;
-      border-color: lighten($selected_bg_color,5%);
-      color: white;
-      text-shadow: black 0px 2px 2px;
-    }
-  }
-  StBoxLayout#EvalBox { padding: 4px; spacing: $base_spacing; }
-  StBoxLayout#ResultsArea { spacing: $base_spacing; }
-}
-
-.lg-dialog {
-  StEntry {
-    selection-background-color: #bbbbbb;
-    selected-color: $osd_bg_color;
-  }
-  .shell-link {
-    color: #999999;
-    &:hover { color: #dddddd; }
-   }
-}
-
-.lg-completions-text {
-    font-size: .9em;
-    font-style: italic;
-}
-
-.lg-obj-inspector-title {
-    spacing: $base_spacing;
-}
-
-.lg-obj-inspector-button {
-    border: 1px solid gray;
-    padding: 4px;
-    border-radius: $base_border_radius;
-    &:hover { border: 1px solid #ffffff; }
-}
-
-// Extensions
-#lookingGlassExtensions { padding: 4px; }
-
-.lg-extensions-list {
-    padding: 4px;
-    spacing: 6px;
-}
-
-.lg-extension {
-    border: 1px solid $osd_borders_color;
-    border-radius: $base_border_radius;
-    padding: 4px;
-}
-
-.lg-extension-name {
-    font-weight: bold;
-}
-
-.lg-extension-meta {
-    spacing: 6px;
-}
-
-// Inspector
-#LookingGlassPropertyInspector {
-  background: $osd_bg_color;
-  border: 1px solid $osd_borders_color;
-  border-radius: $base_border_radius;
-  padding: 6px;
-}
--- a/data/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -1,147 +0,0 @@
-/* Message List */
-// a.k.a. notifications in the menu
-
-// main list
-.message-list {
-  width: 31.5em;
-  padding: 0 $base_padding * 2;
-
-  .message-list-placeholder { spacing: 12px; }
-}
-
-.message-list-sections {
-  spacing: $base_spacing;
-  margin: $base_margin * 4; // to account for scrollbar
-}
-
-.message-list-section,
-.message-list-section-list {
-  spacing: $base_spacing;
-}
-
-.message-list-section-list {
-  &:ltr {padding:0;}
-  &:rtl {padding:0;}
-}
-
-// do-not-disturb + clear button
-.message-list-controls {
-  margin: $base_margin $base_margin*2;
-  spacing: $base_spacing;
-}
-
-// message bubbles
-.message {
-  @extend %notification_bubble;
-
-  // title
-  .message-title {
-    color: $fg_color;
-    font-weight: bold;
-    margin-bottom:4px;
-  }
-
-  // content
-  .message-content {
-    color: darken($fg_color, 10%);
-    padding: $base_padding 0;
-    margin:$base_margin * 2;
-    &:ltr {
-      margin-left: $base_margin;
-      padding-right:$base_padding;
-    }
-    &:rtl {
-      margin-right: $base_margin;
-      padding-left:$base_padding;
-    }
-  }
-
-  // close button
-  .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%)); }
-  }
-
-
-  // icon container
-  .message-icon-bin {
-    padding: $base_padding;
-    margin:$base_padding 0;
-
-    &:rtl {
-      // padding: $base_padding;
-    }
-
-    // icon size and color
-    > StIcon {
-      color: $fg_color;
-      icon-size: $base_icon_size*2; // 32px
-      -st-icon-style: symbolic;
-
-      padding:0;
-      margin:$base_padding;
-    }
-
-    // fallback
-    > .fallback-app-icon {
-      width: $base_icon_size;
-      height: $base_icon_size;
-    }
-  }
-
-  // secondary container in title box
-  .message-secondary-bin {
-    padding: 0;
-
-    // notification time stamp
-    > .event-time {
-      color: transparentize($fg_color, 0.5);
-      @include fontsize($base_font_size - 2);
-      text-align: right;
-      margin: 0 $base_margin * 2;
-      /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
-      padding-bottom: $base_padding;
-    }
-  }
-
-}
-
-/* Media Controls */
-.message-media-control {
-  padding: $base_padding * 2 $base_padding * 4;
-  color: darken($fg_color, 15%);
-
-  // uses $hover_bg_color since the media controls are in a notification_bubble
-  &:hover {
-    background-color: lighten($hover_bg_color, 5%);
-    color: $fg_color;
-  }
-
-  &:active { 
-    background-color: darken($hover_bg_color, 2%);
-    color: $fg_color;
-  }
-
-  &:insensitive { color: darken($fg_color,40%); }
-  
-  // fix border-radius for last button on hover
-  &:last-child:ltr { &:hover {border-radius:  0 $base_border_radius+2 $base_border_radius+2 0;} }
-  &:last-child:rtl { &:hover {border-radius: $base_border_radius+2 0 0 $base_border_radius+2;} }
-}
-
-// album-art
-.media-message-cover-icon {
-  icon-size: $base_icon_size*2 !important; // 48px
-  border-radius: $base_border_radius;
-
-  // when there is no artwork
-  &.fallback {
-    color: darken($fg_color, 17%);
-    background-color: $bg_color;
-    border: 1px solid transparent;
-    border-radius: $base_border_radius;
-    icon-size: $base_icon_size * 2 !important;
-    padding: $base_padding * 2;
-  }
-}
--- a/data/theme/gnome-shell-sass/widgets/_misc.scss
+++ b/data/theme/gnome-shell-sass/widgets/_misc.scss
@@ -1,67 +0,0 @@
-// Links/URLs
-.shell-link {
-  color: $link_color;
-  &:hover { color: lighten($link_color,10%); }
-}
-
-.url-highlighter { link-color: $link_color; }
-
-// Rubberband for select-area screenshots
-.select-area-rubberband {
-  background-color: transparentize($selected_bg_color,0.7);
-  border: 1px solid $selected_bg_color;
-}
-
-// Pointer accessibility notifications
-.pie-timer {
-  width: 60px;
-  height: 60px;
-  -pie-border-width: 3px;
-  -pie-border-color: $selected_bg_color;
-  -pie-background-color: lighten(transparentize($selected_bg_color, 0.7), 40%);
-}
-
-// Screen zoom/Magnifier
-.magnifier-zoom-region {
-  border: 2px solid $selected_bg_color;
-  &.full-screen { border-width: 0; }
-}
-
-// User icon
-.user-icon {
-  background-size: contain;
-  color: $osd_fg_color;
-  border-radius: 99px;
-  &:hover {
-    color: lighten($osd_fg_color,30%);
-  }
-}
-
-// Input Source Switcher
-.input-source-switcher-symbol {
-  font-size: 34pt;
-  width: 96px;
-  height: 96px;
-}
-
-// Window cycler highlight
-.cycler-highlight {
-  border: 5px solid $selected_bg_color;
-}
-
-// Text
-.headline { @include fontsize($base_font_size + 1); }
-.lightbox { background-color: black; }
-.flashspot { background-color: white; }
-
-
-// Hidden
-.hidden { color: rgba(0,0,0,0);}
-
-// Caps-lock warning
-.caps-lock-warning-label {
-  padding-bottom: 8px;
-  padding-left: 6.2em;
-  @include fontsize($base_font_size - 1);
-  color: $warning_color;
-}
--- a/data/theme/gnome-shell-sass/widgets/_network-dialog.scss
+++ b/data/theme/gnome-shell-sass/widgets/_network-dialog.scss
@@ -1,56 +0,0 @@
-/* Network Dialogs */
-.nm-dialog {
-  max-height: 34em;
-  min-height: 31em;
-  min-width: 32em;
-}
-
-.nm-dialog-content {
-  spacing: 20px;
-  padding: 24px;
-}
-
-.nm-dialog-airplane-box { spacing: 12px; }
-
-.nm-dialog-airplane-headline {
-  font-weight: bold;
-  text-align: center;
-}
-
-.nm-dialog-airplane-text { color: $fg_color; }
-
-// header
-.nm-dialog-header {
-  font-weight: bold;
-}
-.nm-dialog-header-icon {
-  icon-size: $base_icon_size * 2;
-}
-.nm-dialog-header-hbox { spacing: 10px; }
-
-// list of networks
-.nm-dialog-scroll-view {
-  border: 1px solid $borders_color;
-  padding:0;
-  background-color: darken($bg_color, 3%);
-}
-
-// list item
-.nm-dialog-item {
-  @include fontsize($base_font_size);
-  border-bottom: 1px solid $borders_color;
-  padding: $base_padding * 2;
-  spacing: 0px;
-  &:selected {
-    background-color: $selected_bg_color;
-    color: $selected_fg_color;
-  }
-}
-
-// icons in list
-.nm-dialog-icon { icon-size: $base_icon_size; }
-.nm-dialog-icons { spacing: $base_spacing * 2; }
-
-// no networks
-.no-networks-label { color: $insensitive_fg_color; }
-.no-networks-box { spacing: $base_padding; }
--- a/data/theme/gnome-shell-sass/widgets/_notifications.scss
+++ b/data/theme/gnome-shell-sass/widgets/_notifications.scss
@@ -1,90 +0,0 @@
-/* Notifications & Mesage Tray */
-
-$notification_banner_height: 64px;
-$notification_banner_width: 34em;
-
-// Banner notifications
-.notification-banner {
-  min-height: $notification_banner_height;
-  width: $notification_banner_width;
-  @include fontsize($base_font_size);
-  margin: $base_margin;
-  border-radius: $modal_radius;
-
-  .message-title { color: $fg_color }
-  .message-content { color: $fg_color; }
-
-  &:hover { background: $bg_color; }
-  &, &:focus, &:active {
-    background-color: $bg_color;
-    .message-title { color: $fg_color }
-    .message-content { color: $fg_color; }
-  }
-
-  // icon
-  .message-icon-bin > StIcon {
-    icon-size: $base_icon_size * 2;
-    color: $fg_color;
-  }
-
-  .notification-icon {
-    padding: 5px;
-  }
-
-  .notification-content {
-    padding: 5px;
-    spacing: 5px;
-  }
-
-  .secondary-icon { icon-size: $base_icon_size; }
-
-  .notification-actions {
-    padding-top: 0;
-    spacing: 0;
-  }
-
-  .notification-button {
-    @extend %bubble_button;
-  }
-}
-
-// counter
-.summary-source-counter {
-  font-size: $base_font_size - 1pt;
-  font-weight: bold;
-  height: 1.6em;
-  width: 1.6em;
-  -shell-counter-overlap-x: 3px;
-  -shell-counter-overlap-y: 3px;
-  background-color: $selected_bg_color;
-  color: $selected_fg_color;
-  border: 2px solid $fg_color;
-  box-shadow: 0 2px 2px rgba(0,0,0,0.5);
-  border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
-}
-
-.secondary-icon { icon-size: $base_icon_size; }
-
-// chat bubbles
-.chat-body { spacing: 5px; }
-.chat-response { margin: 5px; }
-.chat-log-message { color: darken($fg_color,10%); }
-.chat-new-group { padding-top: 1em; }
-.chat-received {
-  padding-left: 4px;
-  &:rtl { padding-left: 0px; padding-right: 4px; }
-}
-
-.chat-sent {
-  padding-left: 18pt;
-  color: lighten($fg_color, 15%);
-  &:rtl { padding-left: 0; padding-right: 18pt; }
-}
-
-.chat-meta-message {
-  padding-left: 4px;
-  @include fontsize($base_font_size - 2);
-  font-weight: bold;
-  color: lighten($fg_color,18%);
-  &:rtl { padding-left: 0; padding-right: 4px; }
-}
--- a/data/theme/gnome-shell-sass/widgets/_osd.scss
+++ b/data/theme/gnome-shell-sass/widgets/_osd.scss
@@ -1,45 +0,0 @@
-/* OSD */
-
-$osd_levelbar_height:8px;
-
-.osd-window {
-  @extend %osd_panel;
-  text-align: center;
-  font-weight: bold;
-  spacing: $base_spacing * 2; // 12px
-  margin: $base_margin * 8; // 32px
-  min-width: 64px;
-  min-height: 64px;
-
-  StIcon {
-    icon-size:$base_icon_size * 6;
-  }
-
-  .osd-monitor-label { font-size: 3em; }
-  
-  .level {
-    height: $osd_levelbar_height;
-    -barlevel-height: $osd_levelbar_height;
-    -barlevel-background-color: transparentize($osd_fg_color, if($variant=='light', 0.7, 0.9));
-    -barlevel-active-background-color: $osd_fg_color;
-    -barlevel-overdrive-color: $destructive_color;
-    -barlevel-overdrive-separator-width: 3px;
-  }
-}
-
-/* Pad OSD */
-.pad-osd-window {
-  padding: 32px;
-  background-color: transparentize(#000, 0.2);
-
-  .pad-osd-title-box { spacing: 12px; }
-  .pad-osd-title-menu-box { spacing: 6px; }
-}
-
-.combo-box-label {
-  width: 15em;
-}
-
-.resize-popup {
-  @extend %osd_panel;
-}
--- a/data/theme/gnome-shell-sass/widgets/_overview.scss
+++ b/data/theme/gnome-shell-sass/widgets/_overview.scss
@@ -1,10 +0,0 @@
-/* OVERVIEW */
-
-#overview {
-  spacing: 24px;
-  background-color: transparent;
-}
-
-.overview-controls {
-  padding-bottom: 32px;
-}
--- a/data/theme/gnome-shell-sass/widgets/_panel.scss
+++ b/data/theme/gnome-shell-sass/widgets/_panel.scss
@@ -1,106 +0,0 @@
-/* Top Bar */
-// a.k.a. the panel
-
-$panel_corner_radius: $base_border_radius+1;
-$panel_bg_color: if($variant == 'light', rgba(0,0,0,0.9), #000);
-$panel_fg_color: if($variant == 'light', darken($fg_color, 15%), darken($fg_color, 10%));
-$panel_height: 1.86em;
-
-
-#panel {
-  background-color: $panel_bg_color;
-  font-weight: bold;
-  height: $panel_height;
-  font-feature-settings: "tnum";
-
-  // transparent panel on lock & login screens
-  &.unlock-screen,
-  &.login-screen,
-  &.lock-screen {
-    background-color: transparent;
-
-    .panel-corner {
-      -panel-corner-radius: 0;
-      -panel-corner-background-color: transparent;
-      -panel-corner-border-color: transparent;
-    }
-  }
-
-  // spacing between activities, app menu and such
-  #panelLeft, #panelCenter {
-    spacing: $base_spacing;
-  }
-
-  // the rounded outset corners
-  .panel-corner {
-    -panel-corner-radius: $panel_corner_radius;
-    -panel-corner-background-color: $panel_bg_color;
-    -panel-corner-border-width: 2px;
-    -panel-corner-border-color: transparent;
-
-    &:active, &:overview, &:focus {
-      -panel-corner-border-color: lighten($selected_bg_color,5%);
-    }
-  }
-
-  // panel menus
-  .panel-button {
-    font-weight: bold;
-    color: $panel_fg_color;
-    -natural-hpadding: $base_padding * 2;
-    -minimum-hpadding: $base_padding;
-
-    &:hover {
-      color: lighten($panel_fg_color, 20%);
-    }
-
-    &:active, &:overview, &:focus, &:checked {
-      background-color: $panel_bg_color; // Trick due to St limitations. It needs a background to draw a box-shadow
-      box-shadow: inset 0 -2px 0 0 lighten($selected_bg_color,5%);
-
-      color: lighten($panel_fg_color, 20%);
-    }
-
-    // status area icons
-    .system-status-icon {
-      icon-size: $base_icon_size;
-      padding: $base_padding - 1px;
-    }
-
-    // app menu icon
-    .app-menu-icon {
-      margin-left: $base_margin;
-      margin-right: $base_margin;
-      -st-icon-style: symbolic;
-      // dimensions of the icon are hardcoded
-    }
-
-    // lock & login screen styles
-    .unlock-screen &,
-    .login-screen &,
-    .lock-screen & {
-      color: lighten($fg_color, 10%);
-      &:focus, &:hover, &:active { color: lighten($fg_color, 10%); }
-    }
-  }
-
-  .panel-status-indicators-box,
-  .panel-status-menu-box {
-    spacing: 2px;
-  }
-
-  // spacing between power icon and (optional) percentage label
-  .power-status.panel-status-indicators-box {
-    spacing: 0;
-  }
-
-  // indicator for active
-  .screencast-indicator,
-  .remote-access-indicator { color: $warning_color; }
-}
-
-// App Menu
-#appMenu {
-  spacing: $base_spacing;
-  .label-shadow { color: transparent; }
-}
--- a/data/theme/gnome-shell-sass/widgets/_popovers.scss
+++ b/data/theme/gnome-shell-sass/widgets/_popovers.scss
@@ -1,121 +0,0 @@
-/* Popovers/Menus */
-
-$popover_arrow_height: 12px;
-
-//.the popover itself
-.popup-menu-boxpointer,
-.candidate-popup-boxpointer {
-  -arrow-border-radius: $base_border_radius+4;
-  -arrow-background-color: $bg_color;
-  -arrow-border-width: 1px;
-  -arrow-border-color: $borders_color;
-  -arrow-base: $popover_arrow_height * 2;
-  -arrow-rise: $popover_arrow_height;
-  -arrow-box-shadow: 0 1px 3px rgba(0,0,0,0.5); // dreaming bugzilla #689995
-}
-
-// container of the popover menu
-.popup-menu {
-  min-width: 15em;
-  color: $fg_color;
-
-  //.popup-status-menu-item { font-weight: normal;  color: pink; } //dunno what that is
-  &.panel-menu {
-    -boxpointer-gap: $base_margin; // distance from the panel
-    margin-bottom: 1.75em;
-  }
-}
-
-.popup-menu-content {
-  padding: $base_padding * 2 + $base_margin 0;
-}
-
-// menu items
-.popup-menu-item {
-  spacing: $base_padding;
-  padding: $base_padding;
-
-  &:ltr { padding-right:1.75em; padding-left: 0; }
-  &:rtl { padding-right: 0; padding-left:1.75em; }
-
-  &:checked {
-    background-color: lighten($bg_color, 2%);
-    box-shadow: none;
-  }
-
-  &.selected {
-    background-color: transparentize(white, if($variant=='light', 0.2, 0.9));
-    color: $fg_color;
-  }
-
-  &:active { 
-    background-color: $selected_bg_color;
-    color: $selected_fg_color;
-  }
-
-  &:insensitive { color: transparentize($fg_color,0.5);}
-}
-
-// all icons and other graphical elements
-.popup-inactive-menu-item {
-  color: $fg_color;
-
-  &:insensitive { color: transparentize($fg_color,0.5); }
-}
-
-// symbolic icons in popover
-.popup-menu-arrow,
-.popup-menu-icon { icon-size: $base_icon_size; }
-
-// popover submenus
-.popup-sub-menu {
-  background-color: darken($bg_color, 3%);
-  box-shadow: none;
-  border-top: 1px solid transparentize($borders_color, 0.2);
-  border-bottom: 1px solid transparentize($borders_color, 0.2);
-}
-
-// container for radio and check boxes
-.popup-menu-ornament {
-  text-align: right;
-  width: 1.2em;
-}
-
-// separator
-.popup-separator-menu-item {
-  //-margin-horizontal: 24px;
-  height: 1px; //not really the whole box
-  margin: 6px 64px;
-  background-color: lighten($borders_color, 2%);
-  border: none !important;
-}
-
-// desktop background menu
-.background-menu {
-  -boxpointer-gap: $base_margin;
-  -arrow-rise: 0px; // hide the beak on the menu
-}
-
-// system status menu
-.aggregate-menu {
-  min-width: 21em;
-
-  // lock screen, shutdown, etc. buttons
-  .popup-menu-icon { 
-    padding:0;
-    margin: 0 $base_margin;
-    -st-icon-style: symbolic;
-  }
-
-  .popup-sub-menu .popup-menu-item > :first-child {
-    // account for icons in submenus with padding
-    &:ltr {
-      padding-left: $base_padding + $base_margin * 2; 
-      margin-left: $base_icon_size;
-    }
-    &:rtl {
-      padding-right: $base_padding + $base_margin * 2; ;
-      margin-right: $base_icon_size;
-    }
-  }
-}
--- a/data/theme/gnome-shell-sass/widgets/_screen-shield.scss
+++ b/data/theme/gnome-shell-sass/widgets/_screen-shield.scss
@@ -1,83 +0,0 @@
-/* Screen Shield */
-
-$_screenshield_shadow: 0px 0px 6px rgba(0, 0, 0, 0.726);
-
-.screen-shield-arrows {
-  padding-bottom: 3em;
-}
-
-.screen-shield-arrows Gjs_Arrow {
-  color: white;
-  width: 80px;
-  height: 48px;
-  -arrow-thickness: 12px;
-  -arrow-shadow: $_screenshield_shadow;
-}
-
-.screen-shield-clock {
-  color: white;
-  text-shadow: $_screenshield_shadow;
-  font-weight: bold;
-  text-align: center;
-  padding-bottom: 1.5em;
-}
-
-.screen-shield-clock-time {
-  font-size: 72pt;
-  text-shadow: $_screenshield_shadow;
-  font-feature-settings: "tnum";
-}
-
-.screen-shield-clock-date { 
-  font-size: 28pt;
-  font-weight: normal;
-}
-
-.screen-shield-notifications-container {
-  spacing: 6px;
-  width: 30em;
-  background-color: transparent;
-  max-height: 500px;
-  .summary-notification-stack-scrollview {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
-  .notification,
-  .screen-shield-notification-source {
-    padding: 12px 6px;
-    border: 1px solid $osd_outer_borders_color;
-    background-color: transparentize($osd_bg_color,0.5);
-    color: $osd_fg_color;
-    border-radius: 4px;
-  }
-  .notification { margin-right: 15px; } //compensate for space allocated to the scrollbar
-}
-
-
-.screen-shield-notification-label {
-  font-weight: bold;
-  padding: 0px 0px 0px 12px;
-}
-
-.screen-shield-notification-count-text { padding: 0px 0px 0px 12px; }
-
-#panel.lock-screen { background-color: transparentize($osd_bg_color, 0.5); }
-
-.screen-shield-background { //just the shadow, really
-  background: black;
-  box-shadow: 0px 2px 4px rgba(0,0,0,0.6);
-}
-
-#lockDialogGroup {
-  background: lighten(#2e3436, 8%) url(resource:///org/gnome/shell/theme/noise-texture.png);
-  background-repeat: repeat;
-}
-
-#screenShieldNotifications {
-  StButton#vhandle, StButton#hhandle {
-    background-color: transparentize($bg_color,0.7);
-    &:hover, &:focus { background-color: transparentize($bg_color,0.5); }
-    &:active { background-color: transparentize($selected_bg_color,0.5); }
-  }
-}
--- a/data/theme/gnome-shell-sass/widgets/_scrollbars.scss
+++ b/data/theme/gnome-shell-sass/widgets/_scrollbars.scss
@@ -1,29 +0,0 @@
-/* Scrollbars */
-
-StScrollView {
-  &.vfade { -st-vfade-offset: 68px; }
-  &.hfade { -st-hfade-offset: 68px; }
-}
-
-StScrollBar {
-  padding: 0;
-
-  StScrollView & {
-    min-width: 14px;
-    min-height: 14px;
-  }
-
-  StBin#trough {
-    border-radius: 0;
-    background-color: transparent;
-  }
-
-  StButton#vhandle, StButton#hhandle {
-    border-radius: 8px;
-    background-color: mix($fg_color, $bg_color, 60%);
-    //border: 3px solid transparent; //would be nice to margin or at least to transparent
-    margin: 3px;
-    &:hover { background-color: mix($fg_color, $bg_color, 80%); }
-    &:active { background-color: $selected_bg_color; }
-  }
-}
--- a/data/theme/gnome-shell-sass/widgets/_search-entry.scss
+++ b/data/theme/gnome-shell-sass/widgets/_search-entry.scss
@@ -1,35 +0,0 @@
-// Search entry
-
-$search_entry_width: 320px;
-$search_entry_height: 36px;
-
-%search_entry,
-.search-entry {
-  width: $search_entry_width;
-  padding: $base_padding+1 $base_padding+3;
-  border-radius: $search_entry_height * 0.5; // half the height
-  color: transparentize($fg_color,0.3);
-  background-color: $bg_color;
-  border-color: $borders_color;
-
-  &:hover {
-    background-color: $hover_bg_color;
-    border-color: $hover_borders_color;
-    color: $hover_fg_color;
-  }
-
-  &:focus {
-    padding: $base_padding $base_padding+2; // 1px less to account for wider border
-    border-width: 2px;
-    border-style: solid;
-    border-color: $selected_bg_color;
-    color: $fg_color;
-    box-shadow: inset 0 1px 2px 1px rgba(0,0,0,0.2);
-  }
-
-  .search-entry-icon { 
-    icon-size: $base_icon_size;
-    padding: 0 4px;
-    color: inherit;
-  }
-}
--- a/data/theme/gnome-shell-sass/widgets/_search-results.scss
+++ b/data/theme/gnome-shell-sass/widgets/_search-results.scss
@@ -1,151 +0,0 @@
-/* Search */
-
-// search overview container
-#searchResultsContent {
-  max-width: 1024px;
-}
-
-// search results sections "the boxes"
-.search-section {
-  spacing: $base_margin * 2;
-  padding:0 !important;
-  margin:0 !important;
-  background-color:transparent;
-  box-shadow:none;
-  border:none;
-  // separator
-  .search-section-separator { 
-    // margin-top: $base_padding * 2;
-    // height: 1px;
-    // background-color: $osd_outer_borders_color;
-    height: 0;
-    background-color: transparent;
-  }
-}
-
-// content
-.search-section-content {
-  background-color: transparentize(lighten($osd_bg_color, 5%), 0.2);
-  border-radius: $modal_radius+3;
-  border: 1px solid $osd_outer_borders_color;
-  box-shadow: 0 2px 4px 0 $shadow_color;
-  text-shadow: 0 1px if($variant == 'light', rgba(255,255,255,0.2), rgba(0,0,0,0.2));
-  color: $osd_fg_color;
-  padding: $base_padding * 3;
-  margin: $base_margin 0;
-  spacing: 0;
-}
-
-// "no results" text
-.search-statustext {
-  @extend %status_text;
-}
-
-// Search results with icons
-.grid-search-result {
-  > .overview-icon {
-    @extend %icon_tile;
-    color: $osd_fg_color;
-  }
-
-  > .overview-icon.overview-icon-with-label {
-    padding: 10px 8px 5px 8px;
-    spacing: $base_spacing;
-  }
-
-  &:hover,
-  &:focus,
-  &:selected {
-    .overview-icon {
-      background-color: transparentize($osd_bg_color,0.8);
-      color: $osd_fg_color;
-    }
-  }
-
-  &: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);
-  }
-}
-
-// search result provider
-.search-provider-icon {
-  @extend %icon_tile;
-
-  padding: $base_padding;
-  spacing: 0;
-  margin-right: $base_margin * 2;
-
-  &:focus,
-  &:selected,
-  &:hover {
-    background-color: transparentize($osd_fg_color,.9);
-    transition-duration: 200ms;
-  }
-
-  &:active,
-  &:checked {
-    background-color: transparentize(darken($osd_bg_color,10%),.1);
-  }
-
-  // content
-  .list-search-provider-content {
-    spacing: $base_spacing * 2;
-
-    // provider labels
-    .list-search-provider-details {
-      width: 120px;
-      margin-top: 0;
-      color: darken($osd_fg_color, 8%);
-      // font-weight: bold;
-    }
-  }
-}
-
-// search results list
-.list-search-results {
-  spacing: $base_spacing;
-}
-
-// search result listitem
-.list-search-result {
-  @extend %icon_tile;
-  spacing: 0;
-  padding: $base_padding;
-  color: $osd_fg_color;
-
-  border-radius: $base_border_radius + 2px !important;
-
-  &:focus,
-  &:selected,
-  &:hover {
-    background-color: transparentize($osd_fg_color,.9);
-    transition-duration: 200ms;
-  }
-  &:active,
-  &:checked {
-    background-color: transparentize(darken($osd_bg_color,10%),.1);
-  }
-
-  // content
-  .list-search-result-content {
-    spacing: 0;
-  }
-
-  // list item title
-  .list-search-result-title {
-    color: $osd_fg_color;
-    spacing: $base_spacing * 2;
-    padding-right: $base_padding;
-    // font-weight: bold;
-  }
-
-  // list item description
-  .list-search-result-description {
-    color: darken($osd_fg_color, 30%);
-  }
-}
--- a/data/theme/gnome-shell-sass/widgets/_slider.scss
+++ b/data/theme/gnome-shell-sass/widgets/_slider.scss
@@ -1,27 +0,0 @@
-/* Slider */
-
-$slider_size: 15px;
-
-.slider {
-  height: $slider_size;
-  // slider trough
-  -barlevel-height: 3px; // has to be an odd number
-  -barlevel-background-color: $borders_color; //background of the trough
-  -barlevel-border-width: 1px; 
-  -barlevel-border-color: $borders_color; // trough border color
-  // fill style
-  -barlevel-active-background-color: $selected_bg_color; //active trough fill
-  -barlevel-active-border-color: if($variant == 'light', darken($selected_bg_color, 4%), lighten($selected_bg_color, 2%)); //active trough border
-  // overfill style (red in this case)
-  -barlevel-overdrive-color: $destructive_color;
-  -barlevel-overdrive-border-color: if($variant == 'light', darken($destructive_color, 4%), lighten($destructive_color, 2%)); //trough border when red;
-  -barlevel-overdrive-separator-width:1px;
-  // slider hander
-  -slider-handle-radius: $slider_size * 0.5; // half the size of the size
-  -slider-handle-border-width: 1px;
-  -slider-handle-border-color: if($variant == 'light', $borders_color, $fg_color);
-
-  color: if($variant == 'light', lighten($bg_color, 10%), $fg_color);
-  &:hover { color: $hover_bg_color; }
-  &:active { color: $active_bg_color; }
-}
--- a/data/theme/gnome-shell-sass/widgets/_switches.scss
+++ b/data/theme/gnome-shell-sass/widgets/_switches.scss
@@ -1,16 +0,0 @@
-/* Switches */
-
-// these are equal to the size of the SVG assets
-$switch_height: 22px;
-$switch_width: 46px;
-
-.toggle-switch {
-  color: $fg_color;
-  height: $switch_height;
-  width: $switch_width;
-  background-size: contain;
-  background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-off.svg"),url("resource:///org/gnome/shell/theme/toggle-off-dark.svg"));
-  &:checked { 
-    background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-on.svg"),url("resource:///org/gnome/shell/theme/toggle-on-dark.svg"));
-  }
-}
--- a/data/theme/gnome-shell-sass/widgets/_tiled-previews.scss
+++ b/data/theme/gnome-shell-sass/widgets/_tiled-previews.scss
@@ -1,19 +0,0 @@
-
-/* Tiled window previews */
-$tile_corner_radius: $base_border_radius + 1px;
-.tile-preview {
-  background-color: transparentize($selected_bg_color,0.5);
-  border: 1px solid $selected_bg_color;
-}
-
-.tile-preview-left.on-primary {
-  border-radius: $tile_corner_radius 0 0 0;
-}
-
-.tile-preview-right.on-primary {
-  border-radius: 0 $tile_corner_radius 0 0;
-}
-
-.tile-preview-left.tile-preview-right.on-primary {
-  border-radius: $tile_corner_radius $tile_corner_radius 0 0;
-}
--- a/data/theme/gnome-shell-sass/widgets/_window-picker.scss
+++ b/data/theme/gnome-shell-sass/widgets/_window-picker.scss
@@ -1,66 +0,0 @@
-/* Window Picker */
-
-$window_picker_spacing: $base_spacing * 8; // 48px
-$window_picker_padding: $base_padding * 10; // 60px
-
-$window_thumbnail_border_color:transparentize($selected_fg_color, 0.65);
-
-$window_close_button_size: 24px;
-$window_close_button_padding: 3px;
-
-
-// Window picker
-.window-picker {
-  // Space between window thumbnails
-  -horizontal-spacing: $window_picker_spacing;
-  -vertical-spacing: $window_picker_spacing;
-  // Padding for container around window thumbnails
-  padding: $window_picker_padding;
-
-  &.external-monitor { padding: $window_picker_padding; }
-}
-
-// Borders on window thumbnails
-.window-clone-border {
-  border-width: 6px;
-  border-style: solid;
-  border-color: $window_thumbnail_border_color;
-  border-radius: $base_border_radius + 2;
-  // For window decorations with round corners we can't match
-  // the exact shape when the window is scaled. So apply a shadow
-  // to fix that case
-  box-shadow: inset 0 0 0 1px transparentize($borders_color, 0.8);
-}
-
-// Window titles
-.window-caption {
-  color: $osd_fg_color;
-  background-color: $osd_bg_color;
-  border:1px solid $osd_outer_borders_color;
-  border-radius: $base_border_radius + 1;
-  padding: $base_padding $base_padding * 2;
-  font-weight: bold;
-  @include fontsize($base_font_size + 1);
-}
-
-// Close button
-.window-close {
-  background-color: $selected_bg_color;
-  color: $selected_fg_color;
-  border: none;
-  border-radius: $window_close_button_size * 0.5 + $window_close_button_padding * 2;
-  padding: $window_close_button_padding;
-  height: $window_close_button_size;
-  width: $window_close_button_size;
-  box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5);
-
-  -shell-close-overlap: $window_close_button_size * 0.5;
-
-  &:hover {
-    background-color: lighten($selected_bg_color, 5%);
-  }
-
-  &:active {
-    background-color: darken($selected_bg_color, 5%);
-  }
-}
--- a/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss
+++ b/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss
@@ -1,72 +0,0 @@
-/* Workspace Switcher */
-.workspace-switcher-group {
-  padding: $base_padding * 2;
-}
-
-.workspace-switcher-container {
-  @extend %osd_panel;
-}
-
-.workspace-switcher {
-  background: transparent;
-  border: none;
-  border-radius: 0;
-  padding: 0;
-  spacing: $base_spacing * 2;
-}
-
-.ws-switcher-box {
-  // background: transparent;
-  background: transparent;
-  height: 50px;
-  background-size: 32px;
-  border: 1px solid transparentize($osd_fg_color,0.9);
-  border-radius: $base_border_radius + 3px;
-}
-
-// active workspace in the switcher
-.ws-switcher-active-up,
-.ws-switcher-active-down,
-.ws-switcher-active-left,
-.ws-switcher-active-right {
-  background-color: $selected_bg_color;
-  border: 1px solid if($variant=='light', darken($selected_bg_color, 8%), lighten($selected_bg_color, 5%));
-  border-radius: $base_border_radius + 3px;
-  color: $selected_fg_color;
-}
-
-/* Workspace pager */
-
-// thumbnails in overview
-.workspace-thumbnails { 
-  @extend %overview_panel;
-  visible-width: 32px; //amount visible before hover
-  spacing: $base_spacing;
-  padding: $base_padding;
-
-  border-radius: $modal_radius 0 0 $modal_radius;
-  border-right-width: 0 !important;
-  //fixme: can't have non uniform borders :(
-  border-top-left-radius:0 !important;
-  border-bottom-left-radius:0 !important;
-
-  &:rtl { 
-    border-radius: 0 $modal_radius $modal_radius 0; 
-    border-left-width: 0 !important;
-  }
-
-  // drag and drop indicator
-  .placeholder {
-    background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg");
-    background-size: contain;
-    height: 24px;
-  }
-}
-
-// selected indicator
-.workspace-thumbnail-indicator {
-  border: 3px solid $selected_bg_color;
-  border-radius: 3px;
-  padding: 0px;
-  // background-color: transparentize($selected_bg_color, 0.9);
-}
--- a/data/theme/gnome-shell.scss
+++ b/data/theme/gnome-shell.scss
@@ -3,4 +3,3 @@ $variant: 'dark';
@import "gnome-shell-sass/_colors"; //use gtk colors
@import "gnome-shell-sass/_drawing";
@import "gnome-shell-sass/_common";
-@import "gnome-shell-sass/_widgets";
--- a/data/theme/key-enter.svg
+++ b/data/theme/key-enter.svg
@@ -1,4 +1,109 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="keyboard-key" width="24" height="24">
-    <path overflow="visible" font-weight="400" style="line-height:normal;-inkscape-font-specification:'Bitstream Vera Sans';text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none" d="M10 23H8.5c-.398 0-.796-.14-1.079-.422L.345 15.5l7.078-7.078C7.704 8.14 8.102 8 8.5 8H10v1.5c0 .398-.14.796-.422 1.079L4.657 15.5l4.921 4.922c.282.282.422.68.422 1.078z" color="#000" font-family="Bitstream Vera Sans" fill="#fff"/>
-    <path overflow="visible" d="M22 1.5v9a5 5 0 01-5 5H4" style="marker:none" color="#000" fill="none" stroke="#fff" stroke-width="3"/>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg7384"
+   height="32"
+   sodipodi:docname="key-enter.svg"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1744"
+     inkscape:window-height="866"
+     id="namedview19"
+     showgrid="false"
+     inkscape:zoom="14.75"
+     inkscape:cx="7.9322034"
+     inkscape:cy="14.554666"
+     inkscape:window-x="0"
+     inkscape:window-y="55"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg7384" />
+  <metadata
+     id="metadata90">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386">
+    <linearGradient
+       osb:paint="solid"
+       id="linearGradient19282"
+       gradientTransform="matrix(-2.7365795,0.28202934,-0.18908311,-0.99988321,239.54008,-879.45557)">
+      <stop
+         style="stop-color:#666666;stop-opacity:1;"
+         offset="0"
+         id="stop19284" />
+    </linearGradient>
+  </defs>
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="layer9" />
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="layer10" />
+  <g
+     transform="translate(-141.0002,-791)"
+     id="layer11" />
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="layer13" />
+  <g
+     transform="translate(-141.0002,-791)"
+     id="layer14" />
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="layer15" />
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="g71291" />
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="g4953" />
+  <g
+     transform="matrix(2,0,0,2,-281.56285,-1615.0002)"
+     style="display:inline"
+     id="layer12">
+    <path
+       id="path16589"
+       d="m 148.00015,821.0002 h -1 c -0.26528,0 -0.53057,-0.093 -0.71875,-0.2812 l -3.71875,-3.7188 c 0,0 2.47917,-2.4792 3.71875,-3.7187 0.18817,-0.1882 0.45344,-0.2813 0.71875,-0.2813 h 1 v 1 c 0,0.2653 -0.0931,0.5306 -0.28125,0.7188 l -2.28125,2.2812 2.28125,2.2813 c 0.18811,0.1881 0.28129,0.4534 0.28125,0.7187 z"
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:'Bitstream Vera Sans';-inkscape-font-specification:'Bitstream Vera Sans';text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:2;marker:none;enable-background:accumulate"
+       inkscape:connector-curvature="0" />
+    <path
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;stroke:#bebebe;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+       d="m 154.0002,810 v 4.5 c 0,1.3807 -1.11929,2.5 -2.5,2.5 h -6.50005"
+       id="path16591"
+       inkscape:connector-curvature="0" />
+  </g>
 </svg>
--- a/data/theme/key-hide.svg
+++ b/data/theme/key-hide.svg
@@ -1,3 +1,114 @@
-<svg class="keyboard-key" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
-    <path d="M12 20.875L.562 9.438C.171 9.046 0 8.51 0 8V6h2c.511 0 1.046.17 1.438.563L12 15.125l8.563-8.562C20.953 6.17 21.488 6 22 6h2v2c0 .511-.17 1.046-.563 1.438z" fill="#e5e5e5"/>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg7384"
+   height="32"
+   sodipodi:docname="key-hide.svg"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1919"
+     inkscape:window-height="1011"
+     id="namedview19"
+     showgrid="false"
+     inkscape:zoom="14.75"
+     inkscape:cx="-12.338983"
+     inkscape:cy="14.554666"
+     inkscape:window-x="0"
+     inkscape:window-y="55"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg7384" />
+  <metadata
+     id="metadata90">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386">
+    <linearGradient
+       osb:paint="solid"
+       id="linearGradient19282"
+       gradientTransform="matrix(-2.7365795,0.28202934,-0.18908311,-0.99988321,239.54008,-879.45557)">
+      <stop
+         style="stop-color:#666666;stop-opacity:1;"
+         offset="0"
+         id="stop19284" />
+    </linearGradient>
+  </defs>
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="layer9" />
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="layer10" />
+  <g
+     transform="translate(-141.0002,-791)"
+     id="layer11" />
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="layer13" />
+  <g
+     transform="translate(-141.0002,-791)"
+     id="layer14" />
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="layer15" />
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="g71291" />
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="g4953" />
+  <g
+     style="display:inline"
+     inkscape:label="go-down"
+     id="g11722"
+     transform="matrix(2,0,0,2,-362.0004,-1494)">
+    <rect
+       transform="rotate(90)"
+       style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:none;stroke:none;stroke-width:1;marker:none;enable-background:new"
+       id="rect11718"
+       y="-197.0002"
+       x="747"
+       height="16"
+       width="16" />
+    <path
+       style="display:inline;fill:#e5e5e5;fill-opacity:1;stroke:none"
+       d="m 189.0002,759.4375 -5.71875,-5.7187 C 183.08558,753.5229 183.0002,753.2556 183.0002,753 v -1 h 1 c 0.25562,0 0.52288,0.085 0.71875,0.2813 l 4.28125,4.2812 4.28125,-4.2812 C 193.47732,752.0854 193.74458,752 194.0002,752 h 1 v 1 c 0,0.2556 -0.0854,0.5229 -0.28125,0.7188 z"
+       id="path11720"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccscsccsscscc" />
+  </g>
 </svg>
--- a/data/theme/key-layout.svg
+++ b/data/theme/key-layout.svg
@@ -1,5 +1,129 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="keyboard-key" width="24" height="24">
-    <path d="M4.5 2v21" fill="#e5e5e5" fill-rule="evenodd" stroke="#e5e5e5" stroke-width="3"/>
-    <path d="M4 12h6l2 4h8V6h-6l-2-4H4z" fill="none" stroke="#e5e5e5" stroke-width="2" stroke-linejoin="round"/>
-    <path d="M4 12h6l2 4h8V6h-6l-2-4H4z" fill="#e5e5e5" fill-rule="evenodd"/>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg7384"
+   height="32"
+   sodipodi:docname="key-layout.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="3440"
+     inkscape:window-height="1376"
+     id="namedview19"
+     showgrid="false"
+     inkscape:zoom="1"
+     inkscape:cx="46.246852"
+     inkscape:cy="17.474578"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg7384">
+    <inkscape:grid
+       type="xygrid"
+       id="grid861" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata90">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386">
+    <linearGradient
+       osb:paint="solid"
+       id="linearGradient19282"
+       gradientTransform="matrix(-2.7365795,0.28202934,-0.18908311,-0.99988321,239.54008,-879.45557)">
+      <stop
+         style="stop-color:#666666;stop-opacity:1;"
+         offset="0"
+         id="stop19284" />
+    </linearGradient>
+  </defs>
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="layer9" />
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="layer10" />
+  <g
+     transform="translate(-141.0002,-791)"
+     id="layer11" />
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="layer13" />
+  <g
+     transform="translate(-141.0002,-791)"
+     id="layer14" />
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="layer15" />
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="g71291" />
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="g4953" />
+  <g
+     style="stroke-width:0.5;enable-background:new"
+     id="g3561"
+     inkscape:label="preferences-desktop-locale"
+     transform="matrix(2,0,0,2,135.99464,-895.9793)">
+    <path
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0"
+       id="path3535"
+       d="m -65,450 v 12"
+       style="fill:#e5e5e5;fill-opacity:1;fill-rule:evenodd;stroke:#e5e5e5;stroke-width:1;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       sodipodi:nodetypes="ccccccccc"
+       inkscape:connector-curvature="0"
+       id="path3537"
+       d="m -65,456 h 4 l 1,2 h 5 v -6 h -4 l -1,-2 h -5 z"
+       style="fill:none;fill-rule:evenodd;stroke:#e5e5e5;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       style="opacity:1;vector-effect:none;fill:#e5e5e5;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       d="m -65,456 h 4 l 1,2 h 5 v -6 h -4 l -1,-2 h -5 z"
+       id="path3539"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccccc" />
+    <rect
+       style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:none;stroke:none;stroke-width:0.89050001;marker:none;enable-background:new"
+       id="rect3543"
+       y="448"
+       x="-68"
+       height="16"
+       width="16" />
+  </g>
 </svg>
--- a/data/theme/key-shift-latched-uppercase.svg
+++ b/data/theme/key-shift-latched-uppercase.svg
@@ -1,3 +1,109 @@
-<svg class="keyboard-key" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
-    <path style="marker:none" d="M12 0L2 12h6v6h8v-6h6zM8 21v3h8v-3z" color="#000" overflow="visible" fill="#3584e4"/>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg7384"
+   height="32"
+   sodipodi:docname="key-shift-latched-uppercase.svg"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1791"
+     inkscape:window-height="984"
+     id="namedview19"
+     showgrid="false"
+     inkscape:zoom="14.75"
+     inkscape:cx="-0.77966097"
+     inkscape:cy="18.847458"
+     inkscape:window-x="0"
+     inkscape:window-y="55"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg7384" />
+  <metadata
+     id="metadata90">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386">
+    <linearGradient
+       osb:paint="solid"
+       id="linearGradient19282"
+       gradientTransform="matrix(-2.7365795,0.28202934,-0.18908311,-0.99988321,239.54008,-879.45557)">
+      <stop
+         style="stop-color:#666666;stop-opacity:1;"
+         offset="0"
+         id="stop19284" />
+    </linearGradient>
+  </defs>
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="layer9" />
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="layer10" />
+  <g
+     transform="translate(-141.0002,-791)"
+     id="layer11" />
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="layer13" />
+  <g
+     transform="translate(-141.0002,-791)"
+     id="layer14" />
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="layer15" />
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="g71291" />
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="g4953" />
+  <g
+     transform="matrix(2,0,0,2,-282.0004,-1614.2187)"
+     style="display:inline;fill:#006098;fill-opacity:1"
+     id="layer12">
+    <path
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#006098;fill-opacity:1;stroke:none;stroke-width:2;marker:none;enable-background:new"
+       d="m 147,818 v -4 h -3.1248 l 5.125,-5.7813 5.125,5.7813 h -3.1875 v 4 z"
+       id="path16532"
+       inkscape:connector-curvature="0" />
+    <path
+       id="path16534"
+       d="m 147,822 v -2 h 3.9377 v 2 z"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#006098;fill-opacity:1;stroke:none;stroke-width:2;marker:none;enable-background:new"
+       inkscape:connector-curvature="0" />
+  </g>
 </svg>
--- a/data/theme/key-shift-uppercase.svg
+++ b/data/theme/key-shift-uppercase.svg
@@ -1,3 +1,104 @@
-<svg class="keyboard-key" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
-    <path d="M8 22v-8H2L12 2l10 12h-6v8z" style="marker:none" color="#000" overflow="visible" fill="#3584e4"/>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg7384"
+   height="32"
+   sodipodi:docname="key-shift-uppercase.svg"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2160"
+     inkscape:window-height="1311"
+     id="namedview18"
+     showgrid="false"
+     inkscape:zoom="14.75"
+     inkscape:cx="-27.898305"
+     inkscape:cy="8"
+     inkscape:window-x="0"
+     inkscape:window-y="55"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg7384" />
+  <metadata
+     id="metadata90">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386">
+    <linearGradient
+       osb:paint="solid"
+       id="linearGradient19282"
+       gradientTransform="matrix(-2.7365795,0.28202934,-0.18908311,-0.99988321,239.54008,-879.45557)">
+      <stop
+         style="stop-color:#666666;stop-opacity:1;"
+         offset="0"
+         id="stop19284" />
+    </linearGradient>
+  </defs>
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="layer9" />
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="layer10" />
+  <g
+     transform="translate(-141.0002,-791)"
+     id="layer11" />
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="layer13" />
+  <g
+     transform="translate(-141.0002,-791)"
+     id="layer14" />
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="layer15" />
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="g71291" />
+  <g
+     transform="translate(-141.0002,-791)"
+     style="display:inline"
+     id="g4953" />
+  <g
+     transform="matrix(2,0,0,2,-282.0008,-1614.2187)"
+     style="display:inline;fill:#006098;fill-opacity:1"
+     id="layer12">
+    <path
+       id="path16548"
+       d="m 147.0002,820 v -4 h -3.1248 l 5.125,-5.7813 5.125,5.7813 h -3.1875 v 4 z"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#006098;fill-opacity:1;stroke:none;stroke-width:2;marker:none;enable-background:new"
+       inkscape:connector-curvature="0" />
+  </g>
 </svg>
--- a/data/theme/key-shift.svg
+++ b/data/theme/key-shift.svg
@@ -1,3 +1,108 @@
-<svg class="keyboard-key" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
-    <path d="M8 22v-8H2L12 2l10 12h-6v8z" style="marker:none" color="#000" overflow="visible" fill="#bebebe"/>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="32"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg7384"
+   height="32"
+   sodipodi:docname="key-shift.svg"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1400"
+     inkscape:window-height="1034"
+     id="namedview4569"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="14.75"
+     inkscape:cx="1.5993763"
+     inkscape:cy="5"
+     inkscape:window-x="0"
+     inkscape:window-y="55"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg7384" />
+  <metadata
+     id="metadata90">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386">
+    <linearGradient
+       osb:paint="solid"
+       id="linearGradient19282"
+       gradientTransform="matrix(-2.7365795,0.28202934,-0.18908311,-0.99988321,239.54008,-879.45557)">
+      <stop
+         style="stop-color:#666666;stop-opacity:1;"
+         offset="0"
+         id="stop19284" />
+    </linearGradient>
+  </defs>
+  <g
+     transform="translate(-143.8754,-788)"
+     style="display:inline"
+     id="layer9" />
+  <g
+     transform="translate(-143.8754,-788)"
+     style="display:inline"
+     id="layer10" />
+  <g
+     transform="translate(-143.8754,-788)"
+     id="layer11" />
+  <g
+     transform="translate(-143.8754,-788)"
+     style="display:inline"
+     id="layer13" />
+  <g
+     transform="translate(-143.8754,-788)"
+     id="layer14" />
+  <g
+     transform="translate(-143.8754,-788)"
+     style="display:inline"
+     id="layer15" />
+  <g
+     transform="translate(-143.8754,-788)"
+     style="display:inline"
+     id="g71291" />
+  <g
+     transform="translate(-143.8754,-788)"
+     style="display:inline"
+     id="g4953" />
+  <g
+     transform="matrix(2,0,0,2,-282.0008,-1614.2187)"
+     style="display:inline"
+     id="layer12">
+    <path
+       id="path16548"
+       d="m 147.0002,820 v -4 h -3.1248 l 5.125,-5.7813 5.125,5.7813 h -3.1875 v 4 z"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:2;marker:none;enable-background:new"
+       inkscape:connector-curvature="0" />
+  </g>
 </svg>
--- a/data/theme/meson.build
+++ b/data/theme/meson.build
@@ -4,39 +4,7 @@ theme_sources = files([
  'gnome-shell-sass/_colors.scss',
  'gnome-shell-sass/_common.scss',
  'gnome-shell-sass/_drawing.scss',
-  'gnome-shell-sass/_high-contrast-colors.scss',
-  'gnome-shell-sass/_widgets.scss',
-  'gnome-shell-sass/widgets/_app-grid.scss',
-  'gnome-shell-sass/widgets/_app-switcher.scss',
-  'gnome-shell-sass/widgets/_buttons.scss',
-  'gnome-shell-sass/widgets/_calendar.scss',
-  'gnome-shell-sass/widgets/_check-box.scss',
-  'gnome-shell-sass/widgets/_corner-ripple.scss',
-  'gnome-shell-sass/widgets/_dash.scss',
-  'gnome-shell-sass/widgets/_dialogs.scss',
-  'gnome-shell-sass/widgets/_entries.scss',
-  'gnome-shell-sass/widgets/_hotplug.scss',
-  'gnome-shell-sass/widgets/_ibus-popup.scss',
-  'gnome-shell-sass/widgets/_keyboard.scss',
-  'gnome-shell-sass/widgets/_login-dialog.scss',
-  'gnome-shell-sass/widgets/_looking-glass.scss',
-  'gnome-shell-sass/widgets/_message-list.scss',
-  'gnome-shell-sass/widgets/_misc.scss',
-  'gnome-shell-sass/widgets/_network-dialog.scss',
-  'gnome-shell-sass/widgets/_notifications.scss',
-  'gnome-shell-sass/widgets/_osd.scss',
-  'gnome-shell-sass/widgets/_overview.scss',
-  'gnome-shell-sass/widgets/_panel.scss',
-  'gnome-shell-sass/widgets/_popovers.scss',
-  'gnome-shell-sass/widgets/_screen-shield.scss',
-  'gnome-shell-sass/widgets/_scrollbars.scss',
-  'gnome-shell-sass/widgets/_search-entry.scss',
-  'gnome-shell-sass/widgets/_search-results.scss',
-  'gnome-shell-sass/widgets/_slider.scss',
-  'gnome-shell-sass/widgets/_switches.scss',
-  'gnome-shell-sass/widgets/_tiled-previews.scss',
-  'gnome-shell-sass/widgets/_window-picker.scss',
-  'gnome-shell-sass/widgets/_workspace-switcher.scss'
+  'gnome-shell-sass/_high-contrast-colors.scss'
 ])

 styles = [
@@ -55,4 +23,3 @@ foreach style: styles
                              ],
                              depend_files: theme_sources)
 endforeach
-
--- a/js/extensionPrefs/main.js
+++ b/js/extensionPrefs/main.js
@@ -8,6 +8,7 @@ const Format = imports.format;

 const _ = Gettext.gettext;

+const Config = imports.misc.config;
 const ExtensionUtils = imports.misc.extensionUtils;
 const { loadInterfaceXML } = imports.misc.fileUtils;

@@ -691,5 +692,8 @@ function initEnvironment() {
 function main(argv) {
    initEnvironment();

+    Gettext.bindtextdomain(Config.GETTEXT_PACKAGE, Config.LOCALEDIR);
+    Gettext.textdomain(Config.GETTEXT_PACKAGE);
+
    new Application().run(argv);
 }
--- a/js/js-resources.gresource.xml
+++ b/js/js-resources.gresource.xml
@@ -98,7 +98,6 @@
    <file>ui/shellEntry.js</file>
    <file>ui/shellMountOperation.js</file>
    <file>ui/slider.js</file>
-    <file>ui/swipeTracker.js</file>
    <file>ui/switcherPopup.js</file>
    <file>ui/switchMonitor.js</file>
    <file>ui/tweener.js</file>
--- a/js/misc/extensionUtils.js
+++ b/js/misc/extensionUtils.js
@@ -31,15 +31,7 @@ var ExtensionState = {
    UNINSTALLED: 99,
 };

-const SERIALIZED_PROPERTIES = [
-    'type',
-    'state',
-    'path',
-    'error',
-    'hasPrefs',
-    'hasUpdate',
-    'canChange',
-];
+const SERIALIZED_PROPERTIES = ['type', 'state', 'path', 'error', 'hasPrefs', 'canChange'];

 /**
 * getCurrentExtension:
--- a/js/misc/systemActions.js
+++ b/js/misc/systemActions.js
@@ -89,7 +89,7 @@ const SystemActions = GObject.registerClass({
            name: C_("search-result", "Power Off"),
            iconName: 'system-shutdown-symbolic',
            // Translators: A list of keywords that match the power-off action, separated by semicolons
-            keywords: _('power off;shutdown;reboot;restart;halt;stop').split(/[; ]/),
+            keywords: _("power off;shutdown;reboot;restart").split(/[; ]/),
            available: false,
        });
        this._actions.set(LOCK_SCREEN_ACTION_ID, {
@@ -125,10 +125,11 @@ const SystemActions = GObject.registerClass({
            available: false,
        });
        this._actions.set(LOCK_ORIENTATION_ACTION_ID, {
-            name: '',
+            // Translators: The name of the lock orientation action in search
+            name: C_("search-result", "Lock Orientation"),
            iconName: '',
            // Translators: A list of keywords that match the lock orientation action, separated by semicolons
-            keywords: _("lock orientation;unlock orientation;screen;rotation").split(/[; ]/),
+            keywords: _("lock orientation;screen;rotation").split(/[; ]/),
            available: false,
        });

@@ -166,10 +167,11 @@ const SystemActions = GObject.registerClass({

        this.forceUpdate();

-        this._orientationSettings.connect('changed::orientation-lock', () => {
-            this._updateOrientationLock();
-            this._updateOrientationLockStatus();
-        });
+        this._orientationSettings.connect('changed::orientation-lock',
+                                          () => {
+                                              this._updateOrientationLock();
+                                              this._updateOrientationLockIcon();
+                                          });
        Main.layoutManager.connect('monitors-changed',
                                   () => this._updateOrientationLock());
        this._sensorProxy = new SensorProxy(Gio.DBus.system,
@@ -188,7 +190,7 @@ const SystemActions = GObject.registerClass({
            this._updateOrientationLock();
        });
        this._updateOrientationLock();
-        this._updateOrientationLockStatus();
+        this._updateOrientationLockIcon();

        Main.sessionMode.connect('updated', () => this._sessionUpdated());
        this._sessionUpdated();
@@ -241,21 +243,12 @@ const SystemActions = GObject.registerClass({
        this.notify('can-lock-orientation');
    }

-    _updateOrientationLockStatus() {
+    _updateOrientationLockIcon() {
        let locked = this._orientationSettings.get_boolean('orientation-lock');
-        let action = this._actions.get(LOCK_ORIENTATION_ACTION_ID);
-
-        // Translators: The name of the lock orientation action in search
-        // and in the system status menu
-        let name = locked
-            ? C_('search-result', 'Unlock Screen Rotation')
-            : C_('search-result', 'Lock Screen Rotation');
        let iconName = locked
            ? 'rotation-locked-symbolic'
            : 'rotation-allowed-symbolic';
-
-        action.name = name;
-        action.iconName = iconName;
+        this._actions.get(LOCK_ORIENTATION_ACTION_ID).iconName = iconName;

        this.notify('orientation-lock-icon');
    }
--- a/js/ui/accessDialog.js
+++ b/js/ui/accessDialog.js
@@ -1,5 +1,5 @@
 /* exported AccessDialogDBus */
-const { Clutter, Gio, GLib, GObject, Shell, St } = imports.gi;
+const { Clutter, Gio, GLib, GObject, Shell } = imports.gi;

 const CheckBox = imports.ui.checkBox;
 const Dialog = imports.ui.dialog;
@@ -18,7 +18,7 @@ var DialogResponse = {

 var AccessDialog = GObject.registerClass(
 class AccessDialog extends ModalDialog.ModalDialog {
-    _init(invocation, handle, title, description, body, options) {
+    _init(invocation, handle, title, subtitle, body, options) {
        super._init({ styleClass: 'access-dialog' });

        this._invocation = invocation;
@@ -30,17 +30,21 @@ class AccessDialog extends ModalDialog.ModalDialog {
        for (let option in options)
            options[option] = options[option].deep_unpack();

-        this._buildLayout(title, description, body, options);
+        this._buildLayout(title, subtitle, body, options);
    }

-    _buildLayout(title, description, body, options) {
+    _buildLayout(title, subtitle, body, options) {
        // No support for non-modal system dialogs, so ignore the option
        // let modal = options['modal'] || true;
        let denyLabel = options['deny_label'] || _("Deny Access");
        let grantLabel = options['grant_label'] || _("Grant Access");
+        let iconName = options['icon'] || null;
        let choices = options['choices'] || [];

-        let content = new Dialog.MessageDialogContent({ title, description });
+        let contentParams = { title, subtitle, body };
+        if (iconName)
+            contentParams.icon = new Gio.ThemedIcon({ name: iconName });
+        let content = new Dialog.MessageDialogContent(contentParams);
        this.contentLayout.add_actor(content);

        this._choices = new Map();
@@ -53,17 +57,11 @@ class AccessDialog extends ModalDialog.ModalDialog {
            let check = new CheckBox.CheckBox();
            check.getLabelActor().text = name;
            check.checked = selected == "true";
-            content.add_child(check);
+            content.insertBeforeBody(check);

            this._choices.set(id, check);
        }

-        let bodyLabel = new St.Label({
-            text: body,
-            x_align: Clutter.ActorAlign.CENTER,
-        });
-        content.add_child(bodyLabel);
-
        this.addButton({ label: denyLabel,
                         action: () => {
                             this._sendResponse(DialogResponse.CANCEL);
@@ -135,7 +133,7 @@ var AccessDialogDBus = class {
            return;
        }

-        let [handle, appId, parentWindow_, title, description, 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) {
@@ -145,8 +143,8 @@ var AccessDialogDBus = class {
            return;
        }

-        let dialog = new AccessDialog(
-            invocation, handle, title, description, body, options);
+        let dialog = new AccessDialog(invocation, handle, title,
+                                      subtitle, body, options);
        dialog.open();

        dialog.connect('closed', () => (this._accessDialog = null));
--- a/js/ui/altTab.js
+++ b/js/ui/altTab.js
@@ -64,6 +64,9 @@ class AppSwitcherPopup extends SwitcherPopup.SwitcherPopup {

        let apps = Shell.AppSystem.get_default().get_running();

+        if (apps.length == 0)
+            return;
+
        this._switcherList = new AppSwitcher(apps, this);
        this._items = this._switcherList.icons;
    }
@@ -175,7 +178,7 @@ 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 || keysym === Clutter.KEY_Q) {
+        } else if (keysym === Clutter.KEY_q) {
            this._quitApplication(this._selectedIndex);
        } else if (this._thumbnailsFocused) {
            if (keysym === Clutter.KEY_Left)
@@ -184,7 +187,7 @@ class AppSwitcherPopup extends SwitcherPopup.SwitcherPopup {
                this._select(this._selectedIndex, this._nextWindow());
            else if (keysym === Clutter.KEY_Up)
                this._select(this._selectedIndex, null, true);
-            else if (keysym === Clutter.KEY_w || keysym === Clutter.KEY_W || keysym === Clutter.KEY_F4)
+            else if (keysym === Clutter.KEY_w || keysym === Clutter.KEY_F4)
                this._closeAppWindow(this._selectedIndex, this._currentWindow);
            else
                return Clutter.EVENT_PROPAGATE;
@@ -245,20 +248,20 @@ class AppSwitcherPopup extends SwitcherPopup.SwitcherPopup {
        this._select(n);
    }

-    _windowActivated(thumbnailSwitcher, n) {
+    _windowActivated(thumbnailList, n) {
        let appIcon = this._items[this._selectedIndex];
        Main.activateWindow(appIcon.cachedWindows[n]);
        this.fadeAndDestroy();
    }

-    _windowEntered(thumbnailSwitcher, n) {
+    _windowEntered(thumbnailList, n) {
        if (!this.mouseActive)
            return;

        this._select(this._selectedIndex, n);
    }

-    _windowRemoved(thumbnailSwitcher, n) {
+    _windowRemoved(thumbnailList, n) {
        let appIcon = this._items[this._selectedIndex];
        if (!appIcon)
            return;
@@ -370,7 +373,7 @@ class AppSwitcherPopup extends SwitcherPopup.SwitcherPopup {
    }

    _createThumbnails() {
-        this._thumbnails = new ThumbnailSwitcher(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));
@@ -478,6 +481,9 @@ var CyclerPopup = GObject.registerClass({

        this._items = this._getWindows();

+        if (this._items.length == 0)
+            return;
+
        this._highlight = new CyclerHighlight();
        global.window_group.add_actor(this._highlight);

@@ -553,8 +559,11 @@ class WindowSwitcherPopup extends SwitcherPopup.SwitcherPopup {

        let windows = this._getWindowList();

+        if (windows.length == 0)
+            return;
+
        let mode = this._settings.get_enum('app-icon-mode');
-        this._switcherList = new WindowSwitcher(windows, mode);
+        this._switcherList = new WindowList(windows, mode);
        this._items = this._switcherList.icons;
    }

@@ -587,7 +596,7 @@ class WindowSwitcherPopup extends SwitcherPopup.SwitcherPopup {
            this._select(this._previous());
        else if (keysym == Clutter.KEY_Right)
            this._select(this._next());
-        else if (keysym === Clutter.KEY_w || keysym === Clutter.KEY_W || keysym === Clutter.KEY_F4)
+        else if (keysym == Clutter.KEY_w || keysym == Clutter.KEY_F4)
            this._closeWindow(this._selectedIndex);
        else
            return Clutter.EVENT_PROPAGATE;
@@ -802,7 +811,7 @@ class AppSwitcher extends SwitcherPopup.SwitcherList {
    }

    // We override SwitcherList's highlight() method to also deal with
-    // the AppSwitcher->ThumbnailSwitcher arrows. Apps with only 1 window
+    // the AppSwitcher->ThumbnailList arrows. Apps with only 1 window
    // will hide their arrows by default, but show them when their
    // thumbnails are visible (ie, when the app icon is supposed to be
    // in justOutline mode). Apps with multiple windows will normally
@@ -859,8 +868,8 @@ class AppSwitcher extends SwitcherPopup.SwitcherList {
    }
 });

-var ThumbnailSwitcher = GObject.registerClass(
-class ThumbnailSwitcher extends SwitcherPopup.SwitcherList {
+var ThumbnailList = GObject.registerClass(
+class ThumbnailList extends SwitcherPopup.SwitcherList {
    _init(windows) {
        super._init(false);

@@ -1013,8 +1022,8 @@ class WindowIcon extends St.BoxLayout {
    }
 });

-var WindowSwitcher = GObject.registerClass(
-class WindowSwitcher extends SwitcherPopup.SwitcherList {
+var WindowList = GObject.registerClass(
+class WindowList extends SwitcherPopup.SwitcherList {
    _init(windows, mode) {
        super._init(true);

--- a/js/ui/animation.js
+++ b/js/ui/animation.js
@@ -12,22 +12,14 @@ var SPINNER_ANIMATION_DELAY = 1000;
 var Animation = GObject.registerClass(
 class Animation extends St.Bin {
    _init(file, width, height, speed) {
-        const themeContext = St.ThemeContext.get_for_stage(global.stage);
-
-        super._init({
-            width: width * themeContext.scale_factor,
-            height: height * themeContext.scale_factor,
-        });
-
+        super._init({ width, height });
        this.connect('destroy', this._onDestroy.bind(this));
        this.connect('resource-scale-changed',
            this._loadFile.bind(this, file, width, height));

+        let themeContext = St.ThemeContext.get_for_stage(global.stage);
        this._scaleChangedId = themeContext.connect('notify::scale-factor',
-            () => {
-                this._loadFile(file, width, height);
-                this.set_size(width * themeContext.scale_factor, height * themeContext.scale_factor);
-            });
+            this._loadFile.bind(this, file, width, height));

        this._speed = speed;

--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
--- a/js/ui/audioDeviceSelection.js
+++ b/js/ui/audioDeviceSelection.js
@@ -1,7 +1,6 @@
 /* exported AudioDeviceSelectionDBus */
 const { Clutter, Gio, GLib, GObject, Meta, Shell, St } = imports.gi;

-const Dialog = imports.ui.dialog;
 const Main = imports.ui.main;
 const ModalDialog = imports.ui.modalDialog;

@@ -37,17 +36,18 @@ var AudioDeviceSelectionDialog = GObject.registerClass({
    }

    _buildLayout() {
-        let content = new Dialog.MessageDialogContent({
-            title: _('Select Audio Device'),
-        });
+        let title = new St.Label({ style_class: 'audio-selection-title',
+                                   text: _("Select Audio Device"),
+                                   x_align: Clutter.ActorAlign.CENTER });
+
+        this.contentLayout.style_class = 'audio-selection-content';
+        this.contentLayout.add(title);

        this._selectionBox = new St.BoxLayout({
            style_class: 'audio-selection-box',
            x_expand: true,
        });
-        content.add_child(this._selectionBox);
-
-        this.contentLayout.add_child(content);
+        this.contentLayout.add_child(this._selectionBox);

        if (Main.sessionMode.allowSettings) {
            this.addButton({ action: this._openSettings.bind(this),
--- a/js/ui/calendar.js
+++ b/js/ui/calendar.js
@@ -7,7 +7,6 @@ const Main = imports.ui.main;
 const MessageList = imports.ui.messageList;
 const MessageTray = imports.ui.messageTray;
 const Mpris = imports.ui.mpris;
-const PopupMenu = imports.ui.popupMenu;
 const Util = imports.misc.util;

 const { loadInterfaceXML } = imports.misc.fileUtils;
@@ -864,10 +863,12 @@ class EventsSection extends MessageList.MessageListSection {
        let now = new Date();
        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"));
+            dayFormat = Shell.util_translate_time_string(NC_("calendar heading",
+                                                             "%A, %B %-d"));
        } 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"));
+            dayFormat = Shell.util_translate_time_string(NC_("calendar heading",
+                                                             "%A, %B %-d, %Y"));
        }
        this._title.label = this._date.toLocaleFormat(dayFormat);
    }
@@ -1101,26 +1102,6 @@ class Placeholder extends St.BoxLayout {
    }
 });

-const DoNotDisturbSwitch = GObject.registerClass(
-class DoNotDisturbSwitch extends PopupMenu.Switch {
-    _init() {
-        this._settings = new Gio.Settings({
-            schema_id: 'org.gnome.desktop.notifications',
-        });
-
-        super._init(this._settings.get_boolean('show-banners'));
-
-        this._settings.bind('show-banners',
-            this, 'state',
-            Gio.SettingsBindFlags.INVERT_BOOLEAN);
-
-        this.connect('destroy', () => {
-            this._settings.run_dispose();
-            this._settings = null;
-        });
-    }
-});
-
 var CalendarMessageList = GObject.registerClass(
 class CalendarMessageList extends St.Widget {
    _init() {
@@ -1146,33 +1127,16 @@ class CalendarMessageList extends St.Widget {
        this._scrollView.set_policy(St.PolicyType.NEVER, St.PolicyType.AUTOMATIC);
        box.add_actor(this._scrollView);

-        let hbox = new St.BoxLayout({ style_class: 'message-list-controls' });
-        box.add_child(hbox);
-
-        hbox.add_child(new St.Label({
-            text: _('Do Not Disturb'),
-            y_align: Clutter.ActorAlign.CENTER,
-        }));
-
-        this._dndSwitch = new DoNotDisturbSwitch();
-        this._dndButton = new St.Button({
-            can_focus: true,
-            child: this._dndSwitch,
-        });
-        this._dndButton.connect('clicked', () => this._dndSwitch.toggle());
-        hbox.add_child(this._dndButton);
-
        this._clearButton = new St.Button({
            style_class: 'message-list-clear-button button',
            label: _('Clear'),
            can_focus: true,
-            x_expand: true,
            x_align: Clutter.ActorAlign.END,
        });
        this._clearButton.connect('clicked', () => {
            this._sectionList.get_children().forEach(s => s.clear());
        });
-        hbox.add_actor(this._clearButton);
+        box.add_actor(this._clearButton);

        this._placeholder.bind_property('visible',
            this._clearButton, 'visible',
--- a/js/ui/checkBox.js
+++ b/js/ui/checkBox.js
@@ -19,7 +19,7 @@ class CheckBox extends St.Button {
        this._box = new St.Bin({ y_align: Clutter.ActorAlign.START });
        container.add_actor(this._box);

-        this._label = new St.Label({ y_align: Clutter.ActorAlign.CENTER });
+        this._label = new St.Label();
        this._label.clutter_text.set_line_wrap(true);
        this._label.clutter_text.set_ellipsize(Pango.EllipsizeMode.NONE);
        container.add_actor(this._label);
--- a/js/ui/closeDialog.js
+++ b/js/ui/closeDialog.js
@@ -1,7 +1,7 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported CloseDialog */

-const { Clutter, GLib, GObject, Meta, Shell, St } = imports.gi;
+const { Clutter, Gio, GLib, GObject, Meta, Shell, St } = imports.gi;

 const Dialog = imports.ui.dialog;
 const Main = imports.ui.main;
@@ -40,9 +40,10 @@ var CloseDialog = GObject.registerClass({

        /* Translators: %s is an application name */
        let title = _("“%s” is not responding.").format(windowApp.get_name());
-        let description = _('You may choose to wait a short while for it to ' +
-                            'continue or force the application to quit entirely.');
-        return new Dialog.MessageDialogContent({ title, description });
+        let subtitle = _("You may choose to wait a short while for it to " +
+                         "continue or force the application to quit entirely.");
+        let icon = new Gio.ThemedIcon({ name: 'dialog-warning-symbolic' });
+        return new Dialog.MessageDialogContent({ icon, title, subtitle });
    }

    _updateScale() {
@@ -66,7 +67,7 @@ var CloseDialog = GObject.registerClass({
        this._dialog.width = windowActor.width;
        this._dialog.height = windowActor.height;

-        this._dialog.contentLayout.add_child(this._createDialogContent());
+        this._dialog.addContent(this._createDialogContent());
        this._dialog.addButton({ label: _('Force Quit'),
                                 action: this._onClose.bind(this),
                                 default: true });
--- a/js/ui/components/keyring.js
+++ b/js/ui/components/keyring.js
@@ -21,11 +21,12 @@ class KeyringDialog extends ModalDialog.ModalDialog {
        this.prompt.connect('show-confirm', this._onShowConfirm.bind(this));
        this.prompt.connect('prompt-close', this._onHidePrompt.bind(this));

-        this._content = new Dialog.MessageDialogContent();
+        let icon = new Gio.ThemedIcon({ name: 'dialog-password-symbolic' });
+        this._content = new Dialog.MessageDialogContent({ icon });
        this.contentLayout.add(this._content);

        this.prompt.bind_property('message', this._content, 'title', GObject.BindingFlags.SYNC_CREATE);
-        this.prompt.bind_property('description', this._content, 'description', GObject.BindingFlags.SYNC_CREATE);
+        this.prompt.bind_property('description', this._content, 'body', GObject.BindingFlags.SYNC_CREATE);

        this._workSpinner = null;
        this._controlTable = null;
@@ -153,7 +154,7 @@ class KeyringDialog extends ModalDialog.ModalDialog {
        }

        this._controlTable = table;
-        this._content.add_child(table);
+        this._content.messageBox.add_child(table);
    }

    _updateSensitivity(sensitive) {
--- a/js/ui/components/networkAgent.js
+++ b/js/ui/components/networkAgent.js
@@ -29,10 +29,11 @@ class NetworkSecretDialog extends ModalDialog.ModalDialog {
        else
            this._content = this._getContent();

-        let contentBox = new Dialog.MessageDialogContent({
-            title: this._content.title,
-            description: this._content.message,
-        });
+        let icon = new Gio.ThemedIcon({ name: 'dialog-password-symbolic' });
+        let contentParams = { icon,
+                              title: this._content.title,
+                              body: this._content.message };
+        let contentBox = new Dialog.MessageDialogContent(contentParams);
        this.contentLayout.add_actor(contentBox);

        let layout = new Clutter.GridLayout({ orientation: Clutter.Orientation.VERTICAL });
@@ -108,7 +109,7 @@ class NetworkSecretDialog extends ModalDialog.ModalDialog {
                layout.attach(this._capsLockWarningLabel, 1, pos, 1, 1);
        }

-        contentBox.add_child(secretTable);
+        contentBox.messageBox.add(secretTable);

        if (flags & NM.SecretAgentGetSecretsFlags.WPS_PBC_ACTIVE) {
            let descriptionLabel = new St.Label({ style_class: 'prompt-dialog-description',
@@ -116,7 +117,7 @@ class NetworkSecretDialog extends ModalDialog.ModalDialog {
            descriptionLabel.clutter_text.line_wrap = true;
            descriptionLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;

-            contentBox.add_child(descriptionLabel);
+            contentBox.messageBox.add_child(descriptionLabel);
        }

        this._okButton = {
@@ -724,10 +725,6 @@ var NetworkAgent = class {
            title = _("Mobile broadband network password");
            body = _("A password is required to connect to “%s”.").format(connectionSetting.get_id());
            break;
-        case 'vpn':
-            title = _("VPN password");
-            body = _("A password is required to connect to “%s”.").format(connectionSetting.get_id());
-            break;
        default:
            log(`Invalid connection type: ${connectionType}`);
            this._native.respond(requestId, Shell.NetworkAgentResponse.INTERNAL_ERROR);
--- a/js/ui/components/polkitAgent.js
+++ b/js/ui/components/polkitAgent.js
@@ -1,7 +1,7 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported Component */

-const { AccountsService, Clutter, GLib,
+const { AccountsService, Clutter, Gio, GLib,
        GObject, Pango, PolkitAgent, Polkit, Shell, St } = imports.gi;

 const Animation = imports.ui.animation;
@@ -25,11 +25,11 @@ const DELAYED_RESET_TIMEOUT = 200;
 var AuthenticationDialog = GObject.registerClass({
    Signals: { 'done': { param_types: [GObject.TYPE_BOOLEAN] } },
 }, class AuthenticationDialog extends ModalDialog.ModalDialog {
-    _init(actionId, description, cookie, userNames) {
+    _init(actionId, body, cookie, userNames) {
        super._init({ styleClass: 'prompt-dialog' });

        this.actionId = actionId;
-        this.message = description;
+        this.message = body;
        this.userNames = userNames;

        this._sessionUpdatedId = Main.sessionMode.connect('updated', () => {
@@ -38,9 +38,10 @@ var AuthenticationDialog = GObject.registerClass({

        this.connect('closed', this._onDialogClosed.bind(this));

+        let icon = new Gio.ThemedIcon({ name: 'dialog-password-symbolic' });
        let title = _("Authentication Required");

-        let content = new Dialog.MessageDialogContent({ title, description });
+        let content = new Dialog.MessageDialogContent({ icon, title, body });
        this.contentLayout.add_actor(content);

        if (userNames.length > 1) {
@@ -61,7 +62,7 @@ var AuthenticationDialog = GObject.registerClass({
            style_class: 'polkit-dialog-user-layout',
            vertical: false,
        });
-        content.add_child(userBox);
+        content.messageBox.add(userBox);

        this._userAvatar = new UserWidget.Avatar(this._user, {
            iconSize: DIALOG_ICON_SIZE,
@@ -83,7 +84,7 @@ var AuthenticationDialog = GObject.registerClass({
        userBox.add_child(this._userLabel);

        this._passwordBox = new St.BoxLayout({ vertical: false, style_class: 'prompt-dialog-password-box' });
-        content.add_child(this._passwordBox);
+        content.messageBox.add(this._passwordBox);
        this._passwordLabel = new St.Label({
            style_class: 'prompt-dialog-password-label',
            y_align: Clutter.ActorAlign.CENTER,
@@ -108,19 +109,19 @@ var AuthenticationDialog = GObject.registerClass({
        this._passwordBox.add(this._workSpinner);

        this._passwordBox.hide();
-        let capsLockWarning = new ShellEntry.CapsLockWarning();
-        content.add_child(capsLockWarning);
+        this._capsLockWarningLabel = new ShellEntry.CapsLockWarning({ style_class: 'prompt-dialog-caps-lock-warning' });
+        content.messageBox.add(this._capsLockWarningLabel);

        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.add_child(this._errorMessageLabel);
+        content.messageBox.add_child(this._errorMessageLabel);
        this._errorMessageLabel.hide();

        this._infoMessageLabel = new St.Label({ style_class: 'prompt-dialog-info-label' });
        this._infoMessageLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
        this._infoMessageLabel.clutter_text.line_wrap = true;
-        content.add_child(this._infoMessageLabel);
+        content.messageBox.add(this._infoMessageLabel);
        this._infoMessageLabel.hide();

        /* text is intentionally non-blank otherwise the height is not the same as for
@@ -132,7 +133,7 @@ var AuthenticationDialog = GObject.registerClass({
        this._nullMessageLabel.add_style_class_name('hidden');
        this._nullMessageLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
        this._nullMessageLabel.clutter_text.line_wrap = true;
-        content.add_child(this._nullMessageLabel);
+        content.messageBox.add(this._nullMessageLabel);
        this._nullMessageLabel.show();

        this._cancelButton = this.addButton({ label: _("Cancel"),
--- a/js/ui/dateMenu.js
+++ b/js/ui/dateMenu.js
@@ -348,14 +348,7 @@ class WeatherSection extends St.Button {
                timeOnly: true,
                ampm: false,
            });
-            const [, tempValue] = fc.get_value_temp(GWeather.TemperatureUnit.DEFAULT);
-            const tempPrefix = tempValue >= 0 ? ' ' : '';

-            let time = new St.Label({
-                style_class: 'weather-forecast-time',
-                text: timeStr,
-                x_align: Clutter.ActorAlign.CENTER,
-            });
            let icon = new St.Icon({
                style_class: 'weather-forecast-icon',
                icon_name: fc.get_symbolic_icon_name(),
@@ -364,16 +357,21 @@ class WeatherSection extends St.Button {
            });
            let temp = new St.Label({
                style_class: 'weather-forecast-temp',
-                text: '%s%.0f°'.format(tempPrefix, tempValue),
+                text: fc.get_temp_summary(),
+                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(time, col, 0, 1, 1);
-            layout.attach(icon, col, 1, 1, 1);
-            layout.attach(temp, col, 2, 1, 1);
+            layout.attach(icon, col, 0, 1, 1);
+            layout.attach(temp, col, 1, 1, 1);
+            layout.attach(time, col, 2, 1, 1);
            col++;
        });
    }
@@ -432,6 +430,7 @@ var MessagesIndicator = GObject.registerClass(
 class MessagesIndicator extends St.Icon {
    _init() {
        super._init({
+            icon_name: 'message-indicator-symbolic',
            icon_size: 16,
            visible: false,
            y_expand: true,
@@ -439,13 +438,6 @@ class MessagesIndicator extends St.Icon {
        });

        this._sources = [];
-        this._count = 0;
-        this._doNotDisturb = false;
-
-        this._settings = new Gio.Settings({
-            schema_id: 'org.gnome.desktop.notifications',
-        });
-        this._settings.connect('changed::show-banners', this._sync.bind(this));

        Main.messageTray.connect('source-added', this._onSourceAdded.bind(this));
        Main.messageTray.connect('source-removed', this._onSourceRemoved.bind(this));
@@ -453,11 +445,6 @@ class MessagesIndicator extends St.Icon {

        let sources = Main.messageTray.getSources();
        sources.forEach(source => this._onSourceAdded(null, source));
-
-        this.connect('destroy', () => {
-            this._settings.run_dispose();
-            this._settings = null;
-        });
    }

    _onSourceAdded(tray, source) {
@@ -474,17 +461,9 @@ class MessagesIndicator extends St.Icon {
    _updateCount() {
        let count = 0;
        this._sources.forEach(source => (count += source.unseenCount));
-        this._count = count - Main.messageTray.queueCount;
+        count -= Main.messageTray.queueCount;

-        this._sync();
-    }
-
-    _sync() {
-        let doNotDisturb = !this._settings.get_boolean('show-banners');
-        this.icon_name = doNotDisturb
-            ? 'notifications-disabled-symbolic'
-            : 'message-indicator-symbolic';
-        this.visible = doNotDisturb || this._count > 0;
+        this.visible = count > 0;
    }
 });

@@ -492,19 +471,21 @@ var IndicatorPad = GObject.registerClass(
 class IndicatorPad extends St.Widget {
    _init(actor) {
        this._source = actor;
+        this._source.connect('notify::visible', () => this.queue_relayout());
        this._source.connect('notify::size', () => this.queue_relayout());
        super._init();
-        this._source.bind_property('visible',
-            this, 'visible',
-            GObject.BindingFlags.SYNC_CREATE);
    }

    vfunc_get_preferred_width(forHeight) {
-        return this._source.get_preferred_width(forHeight);
+        if (this._source.visible)
+            return this._source.get_preferred_width(forHeight);
+        return [0, 0];
    }

    vfunc_get_preferred_height(forWidth) {
-        return this._source.get_preferred_height(forWidth);
+        if (this._source.visible)
+            return this._source.get_preferred_height(forWidth);
+        return [0, 0];
    }
 });

@@ -576,7 +557,7 @@ class DateMenuButton extends PanelMenu.Button {
        this._clockDisplay = new St.Label({ y_align: Clutter.ActorAlign.CENTER });
        this._indicator = new MessagesIndicator();

-        let box = new St.BoxLayout({ style_class: 'clock-display-box' });
+        let box = new St.BoxLayout();
        box.add_actor(new IndicatorPad(this._indicator));
        box.add_actor(this._clockDisplay);
        box.add_actor(this._indicator);
--- a/js/ui/dialog.js
+++ b/js/ui/dialog.js
@@ -1,14 +1,7 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported Dialog, MessageDialogContent, ListSection, ListSectionItem */
+/* exported Dialog, MessageDialogContent */

-const { Clutter, GObject, Pango, St } = imports.gi;
-
-function _setLabel(label, value) {
-    label.set({
-        text: value || '',
-        visible: value !== null,
-    });
-}
+const { Clutter, Gio, GObject, Pango, St } = imports.gi;

 var Dialog = GObject.registerClass(
 class Dialog extends St.Widget {
@@ -32,12 +25,10 @@ class Dialog extends St.Widget {
    }

    _createDialog() {
-        this._dialog = new St.BoxLayout({
-            style_class: 'modal-dialog',
-            x_align: Clutter.ActorAlign.CENTER,
-            y_align: Clutter.ActorAlign.CENTER,
-            vertical: true,
-        });
+        this._dialog = new St.BoxLayout({ style_class: 'modal-dialog',
+                                          x_align: Clutter.ActorAlign.CENTER,
+                                          y_align: Clutter.ActorAlign.CENTER,
+                                          vertical: true });

        // modal dialogs are fixed width and grow vertically; set the request
        // mode accordingly so wrapped labels are handled correctly during
@@ -52,9 +43,7 @@ class Dialog extends St.Widget {
        });
        this._dialog.add_child(this.contentLayout);

-        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);
    }

@@ -106,6 +95,10 @@ class Dialog extends St.Widget {
        return this._initialKeyFocus || this;
    }

+    addContent(actor) {
+        this.contentLayout.add(actor, { expand: true });
+    }
+
    addButton(buttonInfo) {
        let { label, action, key } = buttonInfo;
        let isDefault = buttonInfo['default'];
@@ -118,15 +111,13 @@ class Dialog extends St.Widget {
        else
            keys = [];

-        let button = new St.Button({
-            style_class: 'modal-dialog-linked-button',
-            button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
-            reactive: true,
-            can_focus: true,
-            x_expand: true,
-            y_expand: true,
-            label,
-        });
+        let button = new St.Button({ style_class: 'modal-dialog-linked-button',
+                                     button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
+                                     reactive: true,
+                                     can_focus: true,
+                                     x_expand: true,
+                                     y_expand: true,
+                                     label });
        button.connect('clicked', action);

        buttonInfo['button'] = button;
@@ -153,170 +144,99 @@ class Dialog extends St.Widget {

 var MessageDialogContent = GObject.registerClass({
    Properties: {
-        'title': GObject.ParamSpec.string(
-            'title', 'title', 'title',
-            GObject.ParamFlags.READWRITE |
-            GObject.ParamFlags.CONSTRUCT,
-            null),
-        'description': GObject.ParamSpec.string(
-            'description', 'description', 'description',
-            GObject.ParamFlags.READWRITE |
-            GObject.ParamFlags.CONSTRUCT,
-            null),
+        'icon': GObject.ParamSpec.object('icon', 'icon', 'icon',
+                                         GObject.ParamFlags.READWRITE |
+                                         GObject.ParamFlags.CONSTRUCT,
+                                         Gio.Icon.$gtype),
+        'title': GObject.ParamSpec.string('title', 'title', 'title',
+                                          GObject.ParamFlags.READWRITE |
+                                          GObject.ParamFlags.CONSTRUCT,
+                                          null),
+        'subtitle': GObject.ParamSpec.string('subtitle', 'subtitle', 'subtitle',
+                                             GObject.ParamFlags.READWRITE |
+                                             GObject.ParamFlags.CONSTRUCT,
+                                             null),
+        'body': GObject.ParamSpec.string('body', 'body', 'body',
+                                         GObject.ParamFlags.READWRITE |
+                                         GObject.ParamFlags.CONSTRUCT,
+                                         null),
    },
 }, class MessageDialogContent extends St.BoxLayout {
    _init(params) {
-        this._title = new St.Label({ style_class: 'message-dialog-title' });
-        this._description = new St.Label({ style_class: 'message-dialog-description' });
+        this._icon = new St.Icon({ y_align: Clutter.ActorAlign.START });
+        this._title = new St.Label({ style_class: 'headline' });
+        this._subtitle = new St.Label();
+        this._body = new St.Label();

-        this._description.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
-        this._description.clutter_text.line_wrap = true;
+        ['icon', 'title', 'subtitle', 'body'].forEach(prop => {
+            this[`_${prop}`].add_style_class_name(`message-dialog-${prop}`);
+        });

-        let defaultParams = {
-            style_class: 'message-dialog-content',
-            x_expand: true,
-            vertical: true,
-        };
+        let textProps = { ellipsize: Pango.EllipsizeMode.NONE,
+                          line_wrap: true };
+        this._subtitle.clutter_text.set(textProps);
+        this._body.clutter_text.set(textProps);
+
+        let defaultParams = { style_class: 'message-dialog-main-layout' };
        super._init(Object.assign(defaultParams, params));

-        this.add_child(this._title);
-        this.add_child(this._description);
+        this.messageBox = new St.BoxLayout({ style_class: 'message-dialog-content',
+                                             x_expand: true,
+                                             vertical: true });
+
+        this.messageBox.add_actor(this._title);
+        this.messageBox.add_actor(this._subtitle);
+        this.messageBox.add_actor(this._body);
+
+        this.add_actor(this._icon);
+        this.add_actor(this.messageBox);
+    }
+
+    get icon() {
+        return this._icon.gicon;
    }

    get title() {
        return this._title.text;
    }

-    get description() {
-        return this._description.text;
+    get subtitle() {
+        return this._subtitle.text;
+    }
+
+    get body() {
+        return this._body.text;
+    }
+
+    set icon(icon) {
+        this._icon.set({
+            gicon: icon,
+            visible: icon != null,
+        });
+        this.notify('icon');
    }

    set title(title) {
-        _setLabel(this._title, title);
-        this.notify('title');
+        this._setLabel(this._title, 'title', title);
    }

-    set description(description) {
-        _setLabel(this._description, description);
-        this.notify('description');
-    }
-});
-
-var ListSection = GObject.registerClass({
-    Properties: {
-        'title': GObject.ParamSpec.string(
-            'title', 'title', 'title',
-            GObject.ParamFlags.READWRITE |
-            GObject.ParamFlags.CONSTRUCT,
-            null),
-    },
-}, class ListSection extends St.BoxLayout {
-    _init(params) {
-        this._title = new St.Label({ style_class: 'dialog-list-title' });
-
-        this._listScrollView = new St.ScrollView({
-            style_class: 'dialog-list-scrollview',
-            hscrollbar_policy: St.PolicyType.NEVER,
-        });
-
-        this.list = new St.BoxLayout({
-            style_class: 'dialog-list-box',
-            vertical: true,
-        });
-        this._listScrollView.add_actor(this.list);
-
-        let defaultParams = {
-            style_class: 'dialog-list',
-            x_expand: true,
-            vertical: true,
-        };
-        super._init(Object.assign(defaultParams, params));
-
-        this.label_actor = this._title;
-        this.add_child(this._title);
-        this.add_child(this._listScrollView);
-    }
-
-    get title() {
-        return this._title.text;
-    }
-
-    set title(title) {
-        _setLabel(this._title, title);
-        this.notify('title');
-    }
-});
-
-var ListSectionItem = GObject.registerClass({
-    Properties: {
-        'icon-actor':  GObject.ParamSpec.object(
-            'icon-actor', 'icon-actor', 'Icon actor',
-            GObject.ParamFlags.READWRITE,
-            Clutter.Actor.$gtype),
-        'title': GObject.ParamSpec.string(
-            'title', 'title', 'title',
-            GObject.ParamFlags.READWRITE |
-            GObject.ParamFlags.CONSTRUCT,
-            null),
-        'description': GObject.ParamSpec.string(
-            'description', 'description', 'description',
-            GObject.ParamFlags.READWRITE |
-            GObject.ParamFlags.CONSTRUCT,
-            null),
-    },
-}, class ListSectionItem extends St.BoxLayout {
-    _init(params) {
-        this._iconActorBin = new St.Bin();
-
-        let textLayout = new St.BoxLayout({
-            vertical: true,
-            y_expand: true,
-            y_align: Clutter.ActorAlign.CENTER,
-        });
-
-        this._title = new St.Label({ style_class: 'dialog-list-item-title' });
-
-        this._description = new St.Label({
-            style_class: 'dialog-list-item-title-description',
-        });
-
-        textLayout.add_child(this._title);
-        textLayout.add_child(this._description);
-
-        let defaultParams = { style_class: 'dialog-list-item' };
-        super._init(Object.assign(defaultParams, params));
-
-        this.label_actor = this._title;
-        this.add_child(this._iconActorBin);
-        this.add_child(textLayout);
-    }
-
-    // eslint-disable-next-line camelcase
-    get icon_actor() {
-        return this._iconActorBin.get_child();
-    }
-
-    // eslint-disable-next-line camelcase
-    set icon_actor(actor) {
-        this._iconActorBin.set_child(actor);
-        this.notify('icon-actor');
-    }
-
-    get title() {
-        return this._title.text;
-    }
-
-    set title(title) {
-        _setLabel(this._title, title);
-        this.notify('title');
-    }
-
-    get description() {
-        return this._description.text;
-    }
-
-    set description(description) {
-        _setLabel(this._description, description);
-        this.notify('description');
+    set subtitle(subtitle) {
+        this._setLabel(this._subtitle, 'subtitle', subtitle);
+    }
+
+    set body(body) {
+        this._setLabel(this._body, 'body', body);
+    }
+
+    _setLabel(label, prop, value) {
+        label.set({
+            text: value || '',
+            visible: value != null,
+        });
+        this.notify(prop);
+    }
+
+    insertBeforeBody(actor) {
+        this.messageBox.insert_child_below(actor, this._body);
    }
 });
--- a/js/ui/dnd.js
+++ b/js/ui/dnd.js
@@ -313,8 +313,8 @@ var _Draggable = class _Draggable {
                device = event.get_device();

            if (device == undefined) {
-                let seat = Clutter.get_default_backend().get_default_seat();
-                device = seat.get_pointer();
+                let manager = Clutter.DeviceManager.get_default();
+                device = manager.get_core_device(Clutter.InputDeviceType.POINTER_DEVICE);
            }
        }

--- a/js/ui/endSessionDialog.js
+++ b/js/ui/endSessionDialog.js
@@ -21,7 +21,6 @@ const { AccountsService, Clutter, Gio,
        GLib, GObject, Pango, Polkit, Shell, St }  = imports.gi;

 const CheckBox = imports.ui.checkBox;
-const Dialog = imports.ui.dialog;
 const GnomeSession = imports.misc.gnomeSession;
 const LoginManager = imports.misc.loginManager;
 const ModalDialog = imports.ui.modalDialog;
@@ -29,7 +28,8 @@ const UserWidget = imports.ui.userWidget;

 const { loadInterfaceXML } = imports.misc.fileUtils;

-const _ITEM_ICON_SIZE = 64;
+const _ITEM_ICON_SIZE = 48;
+const _DIALOG_ICON_SIZE = 48;

 const EndSessionDialogIface = loadInterfaceXML('org.gnome.SessionManager.EndSessionDialog');

@@ -49,6 +49,7 @@ const logoutDialogContent = {
    showBatteryWarning: false,
    confirmButtons: [{ signal: 'ConfirmedLogout',
                       label: C_("button", "Log Out") }],
+    iconStyleClass: 'end-session-dialog-logout-icon',
    showOtherSessions: false,
 };

@@ -67,6 +68,7 @@ const shutdownDialogContent = {
                     { signal: 'ConfirmedShutdown',
                       label: C_("button", "Power Off") }],
    iconName: 'system-shutdown-symbolic',
+    iconStyleClass: 'end-session-dialog-shutdown-icon',
    showOtherSessions: true,
 };

@@ -81,6 +83,7 @@ const restartDialogContent = {
    confirmButtons: [{ signal: 'ConfirmedReboot',
                       label: C_("button", "Restart") }],
    iconName: 'view-refresh-symbolic',
+    iconStyleClass: 'end-session-dialog-shutdown-icon',
    showOtherSessions: true,
 };

@@ -98,6 +101,7 @@ const restartUpdateDialogContent = {
    unusedFutureButtonForTranslation: C_("button", "Install &amp; Power Off"),
    unusedFutureCheckBoxForTranslation: C_("checkbox", "Power off after updates are installed"),
    iconName: 'view-refresh-symbolic',
+    iconStyleClass: 'end-session-dialog-shutdown-icon',
    showOtherSessions: true,
 };

@@ -115,6 +119,7 @@ const restartUpgradeDialogContent = {
    confirmButtons: [{ signal: 'ConfirmedReboot',
                       label: C_("button", "Restart &amp; Install") }],
    iconName: 'view-refresh-symbolic',
+    iconStyleClass: 'end-session-dialog-shutdown-icon',
    showOtherSessions: true,
 };

@@ -187,6 +192,16 @@ function _roundSecondsToInterval(totalSeconds, secondsLeft, interval) {
    return time;
 }

+function _setLabelText(label, text) {
+    if (text) {
+        label.set_text(text);
+        label.show();
+    } else {
+        label.set_text('');
+        label.hide();
+    }
+}
+
 function _setCheckBoxLabel(checkBox, text) {
    let label = checkBox.getLabelActor();

@@ -245,34 +260,75 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
        this.connect('opened',
                     this._onOpened.bind(this));

-        this._userLoadedId = this._user.connect('notify::is-loaded', this._sync.bind(this));
+        this._userLoadedId = this._user.connect('notify::is_loaded', this._sync.bind(this));
        this._userChangedId = this._user.connect('changed', this._sync.bind(this));

-        this._messageDialogContent = new Dialog.MessageDialogContent();
+        let mainContentLayout = new St.BoxLayout({
+            vertical: false,
+            x_expand: true,
+            y_expand: false,
+        });
+        this.contentLayout.add_child(mainContentLayout);
+
+        this._iconBin = new St.Bin({
+            x_expand: true,
+            x_align: Clutter.ActorAlign.END,
+        });
+        mainContentLayout.add_child(this._iconBin);
+
+        let messageLayout = new St.BoxLayout({ vertical: true,
+                                               style_class: 'end-session-dialog-layout' });
+        mainContentLayout.add_child(messageLayout);
+
+        this._subjectLabel = new St.Label({ style_class: 'end-session-dialog-subject' });
+
+        messageLayout.add_child(this._subjectLabel);
+
+        this._descriptionLabel = new St.Label({
+            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);

        this._checkBox = new CheckBox.CheckBox();
        this._checkBox.connect('clicked', this._sync.bind(this));
-        this._messageDialogContent.add_child(this._checkBox);
+        messageLayout.add(this._checkBox);

-        this._batteryWarning = new St.Label({
-            style_class: 'end-session-dialog-battery-warning',
-            text: _('Running on battery power: Please plug in before installing updates.'),
-        });
+        this._batteryWarning = new St.Label({ style_class: 'end-session-dialog-warning',
+                                              text: _("Running on battery power: please plug in before installing updates.") });
        this._batteryWarning.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
        this._batteryWarning.clutter_text.line_wrap = true;
-        this._messageDialogContent.add_child(this._batteryWarning);
+        messageLayout.add(this._batteryWarning);

-        this.contentLayout.add_child(this._messageDialogContent);
-
-        this._applicationSection = new Dialog.ListSection({
-            title: _('Some applications are busy or have unsaved work'),
+        this._scrollView = new St.ScrollView({
+            style_class: 'end-session-dialog-list',
+            x_expand: true,
+            y_expand: true,
        });
-        this.contentLayout.add_child(this._applicationSection);
+        this._scrollView.set_policy(St.PolicyType.NEVER, St.PolicyType.AUTOMATIC);
+        this.contentLayout.add_child(this._scrollView);
+        this._scrollView.hide();

-        this._sessionSection = new Dialog.ListSection({
-            title: _('Other users are logged in'),
-        });
-        this.contentLayout.add_child(this._sessionSection);
+        this._inhibitorSection = new St.BoxLayout({ vertical: true,
+                                                    style_class: 'end-session-dialog-inhibitor-layout' });
+        this._scrollView.add_actor(this._inhibitorSection);
+
+        this._applicationHeader = new St.Label({ style_class: 'end-session-dialog-list-header',
+                                                 text: _("Some applications are busy or have unsaved work.") });
+        this._applicationList = new St.BoxLayout({ style_class: 'end-session-dialog-app-list',
+                                                   vertical: true });
+        this._inhibitorSection.add_actor(this._applicationHeader);
+        this._inhibitorSection.add_actor(this._applicationList);
+
+        this._sessionHeader = new St.Label({ style_class: 'end-session-dialog-list-header',
+                                             text: _("Other users are logged in.") });
+        this._sessionList = new St.BoxLayout({ style_class: 'end-session-dialog-session-list',
+                                               vertical: true });
+        this._inhibitorSection.add_actor(this._sessionHeader);
+        this._inhibitorSection.add_actor(this._sessionList);

        this._dbusImpl = Gio.DBusExportedObject.wrapJSObject(EndSessionDialogIface, this);
        this._dbusImpl.export(Gio.DBus.session, '/org/gnome/SessionManager/EndSessionDialog');
@@ -323,8 +379,11 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
            subject = dialogContent.subjectWithUpdates;

        if (dialogContent.showBatteryWarning) {
-            this._batteryWarning.visible =
-                this._powerProxy.OnBattery && this._checkBox.checked;
+            // Warn when running on battery power
+            if (this._powerProxy.OnBattery && this._checkBox.checked)
+                this._batteryWarning.opacity = 255;
+            else
+                this._batteryWarning.opacity = 0;
        }

        let description;
@@ -358,14 +417,26 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
        if (!description)
            description = dialogContent.description(displayTime);

-        this._messageDialogContent.title = subject;
-        this._messageDialogContent.description = description;
+        _setLabelText(this._descriptionLabel, description);
+        _setLabelText(this._subjectLabel, subject);
+
+        if (dialogContent.iconName) {
+            this._iconBin.child = new St.Icon({ icon_name: dialogContent.iconName,
+                                                icon_size: _DIALOG_ICON_SIZE,
+                                                style_class: dialogContent.iconStyleClass });
+        } else {
+            let avatarWidget = new UserWidget.Avatar(this._user,
+                                                     { iconSize: _DIALOG_ICON_SIZE,
+                                                       styleClass: dialogContent.iconStyleClass });
+            this._iconBin.child = avatarWidget;
+            avatarWidget.update();
+        }

        let hasApplications = this._applications.length > 0;
        let hasSessions = this._sessions.length > 0;
-
-        this._applicationSection.visible = hasApplications;
-        this._sessionSection.visible = hasSessions;
+        this._scrollView.visible = hasApplications || hasSessions;
+        this._applicationHeader.visible = hasApplications;
+        this._sessionHeader.visible = hasSessions;
    }

    _updateButtons() {
@@ -522,6 +593,31 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
        this._secondsLeft = 0;
    }

+    _constructListItemForApp(inhibitor, app) {
+        let actor = new St.BoxLayout({ style_class: 'end-session-dialog-app-list-item',
+                                       can_focus: true });
+        actor.add(app.create_icon_texture(_ITEM_ICON_SIZE));
+
+        let textLayout = new St.BoxLayout({ vertical: true,
+                                            y_expand: true,
+                                            y_align: Clutter.ActorAlign.CENTER });
+        actor.add(textLayout);
+
+        let nameLabel = new St.Label({ text: app.get_name(),
+                                       style_class: 'end-session-dialog-app-list-item-name' });
+        textLayout.add(nameLabel);
+        actor.label_actor = nameLabel;
+
+        let [reason] = inhibitor.GetReasonSync();
+        if (reason) {
+            let reasonLabel = new St.Label({ text: reason,
+                                             style_class: 'end-session-dialog-app-list-item-description' });
+            textLayout.add(reasonLabel);
+        }
+
+        return actor;
+    }
+
    _onInhibitorLoaded(inhibitor) {
        if (!this._applications.includes(inhibitor)) {
            // Stale inhibitor
@@ -531,13 +627,8 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
        let app = findAppFromInhibitor(inhibitor);

        if (app) {
-            let [description] = inhibitor.GetReasonSync();
-            let listItem = new Dialog.ListSectionItem({
-                icon_actor: app.create_icon_texture(_ITEM_ICON_SIZE),
-                title: app.get_name(),
-                description,
-            });
-            this._applicationSection.list.add_child(listItem);
+            let actor = this._constructListItemForApp(inhibitor, app);
+            this._applicationList.add(actor);
        } else {
            // inhibiting app is a service, not an application
            this._applications.splice(this._applications.indexOf(inhibitor), 1);
@@ -546,6 +637,36 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
        this._sync();
    }

+    _constructListItemForSession(session) {
+        let avatar = new UserWidget.Avatar(session.user, { iconSize: _ITEM_ICON_SIZE });
+        avatar.update();
+
+        let userName = session.user.get_real_name() ? session.user.get_real_name() : session.username;
+        let userLabelText;
+
+        if (session.remote)
+            /* Translators: Remote here refers to a remote session, like a ssh login */
+            userLabelText = _("%s (remote)").format(userName);
+        else if (session.type == "tty")
+            /* Translators: Console here refers to a tty like a VT console */
+            userLabelText = _("%s (console)").format(userName);
+        else
+            userLabelText = userName;
+
+        let actor = new St.BoxLayout({ style_class: 'end-session-dialog-session-list-item',
+                                       can_focus: true });
+        actor.add(avatar);
+
+        let nameLabel = new St.Label({ text: userLabelText,
+                                       style_class: 'end-session-dialog-session-list-item-name',
+                                       y_expand: true,
+                                       y_align: Clutter.ActorAlign.CENTER });
+        actor.add(nameLabel);
+        actor.label_actor = nameLabel;
+
+        return actor;
+    }
+
    _loadSessions() {
        this._loginManager.listSessions(result => {
            let n = 0;
@@ -576,27 +697,8 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
                                remote: proxy.Remote };
                this._sessions.push(session);

-                let userAvatar = new UserWidget.Avatar(session.user, { iconSize: _ITEM_ICON_SIZE });
-                userAvatar.update();
-
-                userName = session.user.get_real_name()
-                    ? session.user.get_real_name() : session.username;
-
-                let userLabelText;
-                if (session.remote)
-                    /* Translators: Remote here refers to a remote session, like a ssh login */
-                    userLabelText = _('%s (remote)').format(userName);
-                else if (session.type === 'tty')
-                    /* Translators: Console here refers to a tty like a VT console */
-                    userLabelText = _('%s (console)').format(userName);
-                else
-                    userLabelText = userName;
-
-                let listItem = new Dialog.ListSectionItem({
-                    icon_actor: userAvatar,
-                    title: userLabelText,
-                });
-                this._sessionSection.list.add_child(listItem);
+                let actor = this._constructListItemForSession(session);
+                this._sessionList.add(actor);

                // limit the number of entries
                n++;
@@ -622,10 +724,10 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
        }

        this._applications = [];
-        this._applicationSection.list.destroy_all_children();
+        this._applicationList.destroy_all_children();

        this._sessions = [];
-        this._sessionSection.list.destroy_all_children();
+        this._sessionList.destroy_all_children();

        if (!(this._type in DialogContent)) {
            invocation.return_dbus_error('org.gnome.Shell.ModalDialog.TypeError',
--- a/js/ui/environment.js
+++ b/js/ui/environment.js
@@ -247,8 +247,8 @@ function init() {
        origSetEasingDelay.call(this, adjustAnimationTime(msecs));
    };

-    Clutter.Actor.prototype.ease = function (props) {
-        _easeActor(this, props);
+    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);
--- a/js/ui/extensionDownloader.js
+++ b/js/ui/extensionDownloader.js
@@ -1,5 +1,6 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported init, installExtension, uninstallExtension, checkForUpdates */
+/* exported init, installExtension, uninstallExtension,
+            checkForUpdates, updateExtension */

 const { Clutter, Gio, GLib, GObject, Soup } = imports.gi;

@@ -99,9 +100,13 @@ function gotExtensionZipFile(session, message, uuid, dir, callback, errback) {
    });
 }

-function downloadExtensionUpdate(uuid) {
-    let dir = Gio.File.new_for_path(
-        GLib.build_filenamev([global.userdatadir, 'extension-updates', uuid]));
+function updateExtension(uuid) {
+    // This gets a bit tricky. We want the update to be seamless -
+    // if we have any error during downloading or extracting, we
+    // want to not unload the current version.
+
+    let oldExtensionTmpDir = GLib.Dir.make_tmp('XXXXXX-shell-extension');
+    let newExtensionTmpDir = GLib.Dir.make_tmp('XXXXXX-shell-extension');

    let params = { shell_version: Config.PACKAGE_VERSION };

@@ -109,10 +114,39 @@ function downloadExtensionUpdate(uuid) {
    let message = Soup.form_request_new_from_hash('GET', url, params);

    _httpSession.queue_message(message, session => {
-        gotExtensionZipFile(session, message, uuid, dir, () => {
-            Main.extensionManager.notifyExtensionUpdate(uuid);
+        gotExtensionZipFile(session, message, uuid, newExtensionTmpDir, () => {
+            let oldExtension = Main.extensionManager.lookup(uuid);
+            let extensionDir = oldExtension.dir;
+
+            if (!Main.extensionManager.unloadExtension(oldExtension))
+                return;
+
+            FileUtils.recursivelyMoveDir(extensionDir, oldExtensionTmpDir);
+            FileUtils.recursivelyMoveDir(newExtensionTmpDir, extensionDir);
+
+            let extension = null;
+
+            try {
+                extension = Main.extensionManager.createExtensionObject(uuid, extensionDir, ExtensionUtils.ExtensionType.PER_USER);
+                Main.extensionManager.loadExtension(extension);
+            } catch (e) {
+                if (extension)
+                    Main.extensionManager.unloadExtension(extension);
+
+                logError(e, 'Error loading extension %s'.format(uuid));
+
+                FileUtils.recursivelyDeleteDir(extensionDir, false);
+                FileUtils.recursivelyMoveDir(oldExtensionTmpDir, extensionDir);
+
+                // Restore what was there before. We can't do much if we
+                // fail here.
+                Main.extensionManager.loadExtension(oldExtension);
+                return;
+            }
+
+            FileUtils.recursivelyDeleteDir(oldExtensionTmpDir, true);
        }, (code, msg) => {
-            log(`Error while downloading update for extension ${uuid}: ${code} (${msg})`);
+            log(`Error while updating extension ${uuid}: ${code} (${msg})`);
        });
    });
 }
@@ -120,21 +154,11 @@ function downloadExtensionUpdate(uuid) {
 function checkForUpdates() {
    let metadatas = {};
    Main.extensionManager.getUuids().forEach(uuid => {
-        let extension = Main.extensionManager.lookup(uuid);
-        if (extension.type !== ExtensionUtils.ExtensionType.PER_USER)
-            return;
-        if (extension.hasUpdate)
-            return;
-        metadatas[uuid] = extension.metadata;
+        metadatas[uuid] = Main.extensionManager.extensions[uuid].metadata;
    });

-    let versionCheck = global.settings.get_boolean(
-        'disable-extension-version-validation');
-    let params = {
-        shell_version: Config.PACKAGE_VERSION,
-        installed: JSON.stringify(metadatas),
-        disable_version_validation: `${versionCheck}`,
-    };
+    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);
@@ -148,7 +172,7 @@ function checkForUpdates() {
            if (operation == 'blacklist')
                uninstallExtension(uuid);
            else if (operation == 'upgrade' || operation == 'downgrade')
-                downloadExtensionUpdate(uuid);
+                updateExtension(uuid);
        }
    });
 }
@@ -173,8 +197,10 @@ class InstallExtensionDialog extends ModalDialog.ModalDialog {
        }]);

        let content = new Dialog.MessageDialogContent({
-            title: _('Install Extension'),
-            description: _('Download and install “%s” from extensions.gnome.org?').format(info.name),
+            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}`),
+            }),
        });

        this.contentLayout.add(content);
--- a/js/ui/extensionSystem.js
+++ b/js/ui/extensionSystem.js
@@ -45,7 +45,6 @@ var ExtensionManager = class {
            return GLib.SOURCE_REMOVE;
        });

-        this._installExtensionUpdates();
        this._sessionUpdated();
    }

@@ -199,15 +198,6 @@ var ExtensionManager = class {
        return true;
    }

-    notifyExtensionUpdate(uuid) {
-        let extension = this.lookup(uuid);
-        if (!extension)
-            return;
-
-        extension.hasUpdate = true;
-        this.emit('extension-state-changed', extension);
-    }
-
    logExtensionError(uuid, error) {
        let extension = this.lookup(uuid);
        if (!extension)
@@ -263,7 +253,6 @@ var ExtensionManager = class {
            path: dir.get_path(),
            error: '',
            hasPrefs: dir.get_child('prefs.js').query_exists(null),
-            hasUpdate: false,
            canChange: false,
        };
        this._extensions.set(uuid, extension);
@@ -457,21 +446,6 @@ var ExtensionManager = class {
        }).forEach(extension => this.reloadExtension(extension));
    }

-    _installExtensionUpdates() {
-        FileUtils.collectFromDatadirs('extension-updates', true, (dir, info) => {
-            let fileType = info.get_file_type();
-            if (fileType !== Gio.FileType.DIRECTORY)
-                return;
-            let uuid = info.get_name();
-            let extensionDir = Gio.File.new_for_path(
-                GLib.build_filenamev([global.userdatadir, 'extensions', uuid]));
-
-            FileUtils.recursivelyDeleteDir(extensionDir, false);
-            FileUtils.recursivelyMoveDir(dir, extensionDir);
-            FileUtils.recursivelyDeleteDir(dir, true);
-        });
-    }
-
    _loadExtensions() {
        global.settings.connect(`changed::${ENABLED_EXTENSIONS_KEY}`,
            this._onEnabledExtensionsChanged.bind(this));
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -9,6 +9,8 @@ const Main = imports.ui.main;
 var ICON_SIZE = 96;
 var MIN_ICON_SIZE = 16;

+var EXTRA_SPACE_ANIMATION_TIME = 250;
+
 var ANIMATION_TIME_IN = 350;
 var ANIMATION_TIME_OUT = 1 / 2 * ANIMATION_TIME_IN;
 var ANIMATION_MAX_DELAY_FOR_ITEM = 2 / 3 * ANIMATION_TIME_IN;
@@ -26,8 +28,6 @@ var AnimationDirection = {
 var APPICON_ANIMATION_OUT_SCALE = 3;
 var APPICON_ANIMATION_OUT_TIME = 250;

-const ICON_POSITION_DELAY = 25;
-
 var BaseIcon = GObject.registerClass(
 class BaseIcon extends St.Bin {
    _init(label, params) {
@@ -194,23 +194,6 @@ function zoomOutActorAtPos(actor, x, y) {
    });
 }

-function animateIconPosition(icon, box, flags, nChangedIcons) {
-    if (!icon.has_allocation() || icon.allocation.equal(box)) {
-        icon.allocate(box, flags);
-        return false;
-    }
-
-    icon.save_easing_state();
-    icon.set_easing_mode(Clutter.AnimationMode.EASE_OUT_QUAD);
-    icon.set_easing_delay(nChangedIcons * ICON_POSITION_DELAY);
-
-    icon.allocate(box, flags);
-
-    icon.restore_easing_state();
-
-    return true;
-}
-
 var IconGrid = GObject.registerClass({
    Signals: { 'animation-done': {},
               'child-focused': { param_types: [Clutter.Actor.$gtype] } },
@@ -383,7 +366,6 @@ var IconGrid = GObject.registerClass({
        let y = box.y1 + this.topPadding;
        let columnIndex = 0;
        let rowIndex = 0;
-        let nChangedIcons = 0;
        for (let i = 0; i < children.length; i++) {
            let childBox = this._calculateChildBox(children[i], x, y, box);

@@ -393,9 +375,7 @@ var IconGrid = GObject.registerClass({
            } else {
                if (!animating)
                    children[i].opacity = 255;
-
-                if (animateIconPosition(children[i], childBox, flags, nChangedIcons))
-                    nChangedIcons++;
+                children[i].allocate(childBox, flags);
            }

            columnIndex++;
@@ -577,14 +557,14 @@ var IconGrid = GObject.registerClass({

                actorClone.opacity = 0;
                actorClone.set_scale(scaleX, scaleY);
-                actorClone.set_translation(
-                    adjustedSourcePositionX, adjustedSourcePositionY, 0);
+
+                actorClone.set_position(adjustedSourcePositionX, adjustedSourcePositionY);

                let delay = (1 - (actor._distance - minDist) / normalization) * ANIMATION_MAX_DELAY_FOR_ITEM;
                let [finalX, finalY]  = actor._transformedPosition;
                movementParams = {
-                    translation_x: finalX,
-                    translation_y: finalY,
+                    x: finalX,
+                    y: finalY,
                    scale_x: 1,
                    scale_y: 1,
                    duration: ANIMATION_TIME_IN,
@@ -605,12 +585,12 @@ var IconGrid = GObject.registerClass({
                let isLastItem = actor._distance == maxDist;

                let [startX, startY]  = actor._transformedPosition;
-                actorClone.set_translation(startX, startY, 0);
+                actorClone.set_position(startX, startY);

                let delay = (actor._distance - minDist) / normalization * ANIMATION_MAX_DELAY_OUT_FOR_ITEM;
                movementParams = {
-                    translation_x: adjustedSourcePositionX,
-                    translation_y: adjustedSourcePositionY,
+                    x: adjustedSourcePositionX,
+                    y: adjustedSourcePositionY,
                    scale_x: scaleX,
                    scale_y: scaleY,
                    duration: ANIMATION_TIME_OUT,
@@ -844,8 +824,10 @@ var IconGrid = GObject.registerClass({
    }
 });

-var PaginatedIconGrid = GObject.registerClass(
-class PaginatedIconGrid extends IconGrid {
+var PaginatedIconGrid = GObject.registerClass({
+    Signals: { 'space-opened': {},
+               'space-closed': {} },
+}, class PaginatedIconGrid extends IconGrid {
    _init(params) {
        super._init(params);
        this._nPages = 0;
@@ -893,13 +875,9 @@ class PaginatedIconGrid extends IconGrid {
        let y = box.y1 + this.topPadding;
        let columnIndex = 0;

-        let nChangedIcons = 0;
        for (let i = 0; i < children.length; i++) {
            let childBox = this._calculateChildBox(children[i], x, y, box);
-
-            if (animateIconPosition(children[i], childBox, flags, nChangedIcons))
-                nChangedIcons++;
-
+            children[i].allocate(childBox, flags);
            children[i].show();

            columnIndex++;
@@ -977,4 +955,94 @@ class PaginatedIconGrid extends IconGrid {
            throw new Error('Item not found.');
        return Math.floor(index / this._childrenPerPage);
    }
+
+    /**
+    * openExtraSpace:
+    * @param {Clutter.Actor} sourceItem: item for which to create extra space
+    * @param {St.Side} side: where @sourceItem should be located relative to
+    *   the created space
+    * @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);
+        if (index == -1)
+            throw new Error('Item not found.');
+
+        let pageIndex = Math.floor(index / this._childrenPerPage);
+        let pageOffset = pageIndex * this._childrenPerPage;
+
+        let childrenPerRow = this._childrenPerPage / this._rowsPerPage;
+        let sourceRow = Math.floor((index - pageOffset) / childrenPerRow);
+
+        let nRowsAbove = side == St.Side.TOP ? sourceRow + 1 : sourceRow;
+        let nRowsBelow = this._rowsPerPage - nRowsAbove;
+
+        let nRowsUp, nRowsDown;
+        if (side == St.Side.TOP) {
+            nRowsDown = Math.min(nRowsBelow, nRows);
+            nRowsUp = nRows - nRowsDown;
+        } else {
+            nRowsUp = Math.min(nRowsAbove, nRows);
+            nRowsDown = nRows - nRowsUp;
+        }
+
+        let childrenDown = children.splice(pageOffset +
+                                           nRowsAbove * childrenPerRow,
+                                           nRowsBelow * childrenPerRow);
+        let childrenUp = children.splice(pageOffset,
+                                         nRowsAbove * childrenPerRow);
+
+        // Special case: On the last row with no rows below the icon,
+        // there's no need to move any rows either up or down
+        if (childrenDown.length == 0 && nRowsUp == 0) {
+            this._translatedChildren = [];
+            this.emit('space-opened');
+        } else {
+            this._translateChildren(childrenUp, St.DirectionType.UP, nRowsUp);
+            this._translateChildren(childrenDown, St.DirectionType.DOWN, nRowsDown);
+            this._translatedChildren = childrenUp.concat(childrenDown);
+        }
+    }
+
+    _translateChildren(children, direction, nRows) {
+        let translationY = nRows * (this._getVItemSize() + this._getSpacing());
+        if (translationY == 0)
+            return;
+
+        if (direction == St.DirectionType.UP)
+            translationY *= -1;
+
+        for (let i = 0; i < children.length; i++) {
+            children[i].translation_y = 0;
+            let params = {
+                translation_y: translationY,
+                duration: EXTRA_SPACE_ANIMATION_TIME,
+                mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
+            };
+            if (i == (children.length - 1))
+                params.onComplete = () => this.emit('space-opened');
+            children[i].ease(params);
+        }
+    }
+
+    closeExtraSpace() {
+        if (!this._translatedChildren || !this._translatedChildren.length) {
+            this.emit('space-closed');
+            return;
+        }
+
+        for (let i = 0; i < this._translatedChildren.length; i++) {
+            if (!this._translatedChildren[i].translation_y)
+                continue;
+            this._translatedChildren[i].ease({
+                translation_y: 0,
+                duration: EXTRA_SPACE_ANIMATION_TIME,
+                mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
+                onComplete: () => this.emit('space-closed'),
+            });
+        }
+    }
 });
--- a/js/ui/inhibitShortcutsDialog.js
+++ b/js/ui/inhibitShortcutsDialog.js
@@ -1,5 +1,5 @@
 /* exported InhibitShortcutsDialog */
-const { Clutter, Gio, GLib, GObject, Gtk, Meta, Shell, St } = imports.gi;
+const { Clutter, Gio, GLib, GObject, Gtk, Meta, Shell } = imports.gi;

 const Dialog = imports.ui.dialog;
 const ModalDialog = imports.ui.modalDialog;
@@ -75,25 +75,23 @@ var InhibitShortcutsDialog = GObject.registerClass({
    _buildLayout() {
        let name = this._app ? this._app.get_name() : this._window.title;

-        let content = new Dialog.MessageDialogContent({
-            title: _('Allow inhibiting shortcuts'),
-            description: name
-                /* Translators: %s is an application name like "Settings" */
-                ? _('The application %s wants to inhibit shortcuts').format(name)
-                : _('An application wants to inhibit shortcuts'),
-        });
+        /* Translators: %s is an application name like "Settings" */
+        let title = name
+            ? _("%s wants to inhibit shortcuts").format(name)
+            : _("Application wants to inhibit shortcuts");
+        let icon = new Gio.ThemedIcon({ name: 'dialog-warning-symbolic' });
+
+        let contentParams = { icon, title };

        let restoreAccel = this._getRestoreAccel();
        if (restoreAccel) {
-            let restoreLabel = new St.Label({
+            contentParams.subtitle =
                /* Translators: %s is a keyboard shortcut like "Super+x" */
-                text: _('You can restore shortcuts by pressing %s.').format(restoreAccel),
-                style_class: 'message-dialog-description',
-            });
-            content.add_child(restoreLabel);
+                _("You can restore shortcuts by pressing %s.").format(restoreAccel);
        }

-        this._dialog.contentLayout.add_child(content);
+        let content = new Dialog.MessageDialogContent(contentParams);
+        this._dialog.contentLayout.add_actor(content);

        this._dialog.addButton({ label: _("Deny"),
                                 action: () => {
--- a/js/ui/kbdA11yDialog.js
+++ b/js/ui/kbdA11yDialog.js
@@ -15,14 +15,14 @@ class KbdA11yDialog extends GObject.Object {

        this._a11ySettings = new Gio.Settings({ schema_id: KEYBOARD_A11Y_SCHEMA });

-        let seat = Clutter.get_default_backend().get_default_seat();
-        seat.connect('kbd-a11y-flags-changed',
-                     this._showKbdA11yDialog.bind(this));
+        let deviceManager = Clutter.DeviceManager.get_default();
+        deviceManager.connect('kbd-a11y-flags-changed',
+                              this._showKbdA11yDialog.bind(this));
    }

-    _showKbdA11yDialog(seat, newFlags, whatChanged) {
+    _showKbdA11yDialog(deviceManager, newFlags, whatChanged) {
        let dialog = new ModalDialog.ModalDialog();
-        let title, description;
+        let title, body;
        let key, enabled;

        if (whatChanged & Clutter.KeyboardA11yFlags.SLOW_KEYS_ENABLED) {
@@ -31,8 +31,8 @@ class KbdA11yDialog extends GObject.Object {
            title = enabled
                ? _("Slow Keys Turned On")
                : _("Slow Keys Turned Off");
-            description = _('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.');
+            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;
@@ -40,7 +40,7 @@ class KbdA11yDialog extends GObject.Object {
            title = enabled
                ? _("Sticky Keys Turned On")
                : _("Sticky Keys Turned Off");
-            description = enabled
+            body = enabled
                ? _("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.")
                : _("You just pressed two keys at once, or pressed the Shift key 5 times in a row. " +
@@ -49,8 +49,11 @@ class KbdA11yDialog extends GObject.Object {
            return;
        }

-        let content = new Dialog.MessageDialogContent({ title, description });
-        dialog.contentLayout.add_child(content);
+        let icon = new Gio.ThemedIcon({ name: 'preferences-desktop-accessibility-symbolic' });
+        let contentParams = { icon, title, body, styleClass: 'access-dialog' };
+        let content = new Dialog.MessageDialogContent(contentParams);
+
+        dialog.contentLayout.add_actor(content);

        dialog.addButton({ label: enabled ? _("Leave On") : _("Turn On"),
                           action: () => {
--- a/js/ui/keyboard.js
+++ b/js/ui/keyboard.js
@@ -614,7 +614,6 @@ var EmojiPager = GObject.registerClass({
            layout_manager: new Clutter.BinLayout(),
            reactive: true,
            clip_to_allocation: true,
-            y_expand: true,
        });
        this._sections = sections;
        this._nCols = nCols;
@@ -935,6 +934,7 @@ var EmojiSelection = GObject.registerClass({
        this.add_child(bottomRow);

        this._curPage = 0;
+        this._emojiPager.setCurrentPage(0);
    }

    vfunc_map() {
@@ -942,6 +942,11 @@ var EmojiSelection = GObject.registerClass({
        super.vfunc_map();
    }

+    vfunc_unmap() {
+        super.vfunc_unmap();
+        this._emojiPager.setCurrentPage(0);
+    }
+
    _onPageChanged(sectionLabel, page, nPages) {
        this._curPage = page;
        this._pageIndicator.setNPages(nPages);
@@ -1102,10 +1107,13 @@ var KeyboardManager = class KeyBoardManager {
        this._a11yApplicationsSettings = new Gio.Settings({ schema_id: A11Y_APPLICATIONS_SCHEMA });
        this._a11yApplicationsSettings.connect('changed', this._syncEnabled.bind(this));

-        this._lastDevice = null;
-        Meta.get_backend().connect('last-device-changed', (backend, device) => {
+        this._lastDeviceId = null;
+        Meta.get_backend().connect('last-device-changed', (backend, deviceId) => {
+            let manager = Clutter.DeviceManager.get_default();
+            let device = manager.get_device(deviceId);
+
            if (device.get_device_name().indexOf('XTEST') < 0) {
-                this._lastDevice = device;
+                this._lastDeviceId = deviceId;
                this._syncEnabled();
            }
        });
@@ -1113,11 +1121,16 @@ var KeyboardManager = class KeyBoardManager {
    }

    _lastDeviceIsTouchscreen() {
-        if (!this._lastDevice)
+        if (!this._lastDeviceId)
            return false;

-        let deviceType = this._lastDevice.get_device_type();
-        return deviceType == Clutter.InputDeviceType.TOUCHSCREEN_DEVICE;
+        let manager = Clutter.DeviceManager.get_default();
+        let device = manager.get_device(this._lastDeviceId);
+
+        if (!device)
+            return false;
+
+        return device.get_device_type() == Clutter.InputDeviceType.TOUCHSCREEN_DEVICE;
    }

    _syncEnabled() {
@@ -1277,10 +1290,7 @@ class Keyboard extends St.BoxLayout {
        this._suggestions = new Suggestions();
        this.add_child(this._suggestions);

-        this._aspectContainer = new AspectContainer({
-            layout_manager: new Clutter.BinLayout(),
-            y_expand: true,
-        });
+        this._aspectContainer = new AspectContainer({ layout_manager: new Clutter.BinLayout() });
        this.add_child(this._aspectContainer);

        this._emojiSelection = new EmojiSelection();
@@ -1580,17 +1590,7 @@ class Keyboard extends St.BoxLayout {

        let maxHeight = monitor.height / 3;
        this.width = monitor.width;
-
-        if (monitor.width > monitor.height) {
-            this.height = maxHeight;
-        } else {
-            /* In portrait mode, lack of horizontal space means we won't be
-             * able to make the OSK that big while keeping size ratio, so
-             * we allow the OSK being smaller than 1/3rd of the monitor height
-             * there.
-             */
-            this.height = Math.min(maxHeight, this.get_preferred_height(monitor.width));
-        }
+        this.height = maxHeight;
    }

    _onGroupChanged() {
@@ -1829,8 +1829,8 @@ class Keyboard extends St.BoxLayout {

 var KeyboardController = class {
    constructor() {
-        let seat = Clutter.get_default_backend().get_default_seat();
-        this._virtualDevice = seat.create_virtual_device(Clutter.InputDeviceType.KEYBOARD_DEVICE);
+        let deviceManager = Clutter.DeviceManager.get_default();
+        this._virtualDevice = deviceManager.create_virtual_device(Clutter.InputDeviceType.KEYBOARD_DEVICE);

        this._inputSourceManager = InputSourceManager.getInputSourceManager();
        this._sourceChangedId = this._inputSourceManager.connect('current-source-changed',
--- a/js/ui/lightbox.js
+++ b/js/ui/lightbox.js
@@ -6,7 +6,7 @@ const { Clutter, GObject, Shell, St } = imports.gi;
 const Params = imports.misc.params;

 var DEFAULT_FADE_FACTOR = 0.4;
-var VIGNETTE_BRIGHTNESS = 0.5;
+var VIGNETTE_BRIGHTNESS = 0.2;
 var VIGNETTE_SHARPNESS = 0.7;

 const VIGNETTE_DECLARATIONS = '\
--- a/js/ui/lookingGlass.js
+++ b/js/ui/lookingGlass.js
@@ -531,9 +531,9 @@ var Inspector = GObject.registerClass({
        eventHandler.connect('scroll-event', this._onScrollEvent.bind(this));
        eventHandler.connect('motion-event', this._onMotionEvent.bind(this));

-        let seat = Clutter.get_default_backend().get_default_seat();
-        this._pointerDevice = seat.get_pointer();
-        this._keyboardDevice = seat.get_keyboard();
+        let dm = Clutter.DeviceManager.get_default();
+        this._pointerDevice = dm.get_core_device(Clutter.InputDeviceType.POINTER_DEVICE);
+        this._keyboardDevice = dm.get_core_device(Clutter.InputDeviceType.KEYBOARD_DEVICE);

        this._pointerDevice.grab(eventHandler);
        this._keyboardDevice.grab(eventHandler);
--- a/js/ui/magnifier.js
+++ b/js/ui/magnifier.js
@@ -745,8 +745,7 @@ var ZoomRegion = class ZoomRegion {
        this._xCaret = 0;
        this._yCaret = 0;

-        let seat = Clutter.get_default_backend().get_default_seat();
-        this._pointerIdleMonitor = Meta.IdleMonitor.get_for_device(seat.get_pointer());
+        this._pointerIdleMonitor = Meta.IdleMonitor.get_for_device(Meta.VIRTUAL_CORE_POINTER_ID);
        this._scrollContentsTimerId = 0;
    }

--- a/js/ui/overview.js
+++ b/js/ui/overview.js
@@ -689,9 +689,5 @@ var Overview = class {

        return this.dash.showAppsButton;
    }
-
-    get searchEntry() {
-        return this._overview.searchEntry;
-    }
 };
 Signals.addSignalMethods(Overview.prototype);
--- a/js/ui/overviewControls.js
+++ b/js/ui/overviewControls.js
@@ -31,10 +31,15 @@ var SlideLayout = GObject.registerClass({
            'slide-x', 'slide-x', 'slide-x',
            GObject.ParamFlags.READWRITE,
            0, 1, 1),
+        'translation-x': GObject.ParamSpec.double(
+            'translation-x', 'translation-x', 'translation-x',
+            GObject.ParamFlags.READWRITE,
+            -Infinity, Infinity, 0),
    },
 }, class SlideLayout extends Clutter.FixedLayout {
    _init(params) {
        this._slideX = 1;
+        this._translationX = 0;
        this._direction = SlideDirection.LEFT;

        super._init(params);
@@ -67,7 +72,7 @@ var SlideLayout = GObject.registerClass({
            : availWidth - natWidth * this._slideX;

        let actorBox = new Clutter.ActorBox();
-        actorBox.x1 = box.x1 + alignX;
+        actorBox.x1 = box.x1 + alignX + this._translationX;
        actorBox.x2 = actorBox.x1 + (child.x_expand ? availWidth : natWidth);
        actorBox.y1 = box.y1;
        actorBox.y2 = actorBox.y1 + availHeight;
@@ -97,6 +102,20 @@ var SlideLayout = GObject.registerClass({
    get slideDirection() {
        return this._direction;
    }
+
+    // eslint-disable-next-line camelcase
+    set translation_x(value) {
+        if (this._translationX == value)
+            return;
+        this._translationX = value;
+        this.notify('translation-x');
+        this.layout_changed();
+    }
+
+    // eslint-disable-next-line camelcase
+    get translation_x() {
+        return this._translationX;
+    }
 });

 var SlidingControl = GObject.registerClass(
@@ -165,12 +184,11 @@ class SlidingControl extends St.Widget {
        else
            translationEnd = translation;

-        if (this.translation_x === translationEnd)
+        if (this.layout.translation_x == translationEnd)
            return;

-        this.translation_x = translationStart;
-        this.ease({
-            translation_x: translationEnd,
+        this.layout.translation_x = translationStart;
+        this.ease_property('@layout.translation-x', translationEnd, {
            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
            duration: SIDE_CONTROLS_ANIMATION_TIME,
        });
@@ -418,28 +436,11 @@ class ControlsManager extends St.Widget {
        this._dashSpacer = new DashSpacer();
        this._dashSpacer.setDashActor(this._dashSlider);

-        let workspaceManager = global.workspace_manager;
-        let activeWorkspaceIndex = workspaceManager.get_active_workspace_index();
-
-        this._workspaceAdjustment = new St.Adjustment({
-            value: activeWorkspaceIndex,
-            lower: 0,
-            page_increment: 1,
-            page_size: 1,
-            step_increment: 0,
-            upper: workspaceManager.n_workspaces,
-        });
-
-        this._nWorkspacesNotifyId =
-            workspaceManager.connect('notify::n-workspaces',
-                this._updateAdjustment.bind(this));
-
-        this._thumbnailsBox =
-            new WorkspaceThumbnail.ThumbnailsBox(this._workspaceAdjustment);
+        this._thumbnailsBox = new WorkspaceThumbnail.ThumbnailsBox();
        this._thumbnailsSlider = new ThumbnailsSlider(this._thumbnailsBox);

        this.viewSelector = new ViewSelector.ViewSelector(searchEntry,
-            this._workspaceAdjustment, this.dash.showAppsButton);
+                                                          this.dash.showAppsButton);
        this.viewSelector.connect('page-changed', this._setVisibility.bind(this));
        this.viewSelector.connect('page-empty', this._onPageEmpty.bind(this));

@@ -456,24 +457,6 @@ class ControlsManager extends St.Widget {
        layout.connect('allocation-changed', this._updateWorkspacesGeometry.bind(this));

        Main.overview.connect('showing', this._updateSpacerVisibility.bind(this));
-
-        this.connect('destroy', this._onDestroy.bind(this));
-    }
-
-    _onDestroy() {
-        global.workspace_manager.disconnect(this._nWorkspacesNotifyId);
-    }
-
-    _updateAdjustment() {
-        let workspaceManager = global.workspace_manager;
-        let newNumWorkspaces = workspaceManager.n_workspaces;
-        let activeIndex = workspaceManager.get_active_workspace_index();
-
-        this._workspaceAdjustment.upper = newNumWorkspaces;
-
-        // A workspace might have been inserted or removed before the active
-        // one, causing the adjustment to go out of sync, so update the value
-        this._workspaceAdjustment.value = activeIndex;
    }

    _updateWorkspacesGeometry() {
--- a/js/ui/padOsd.js
+++ b/js/ui/padOsd.js
@@ -648,15 +648,15 @@ var PadOsd = GObject.registerClass({
        this._capturedEventId = global.stage.connect('captured-event', this._onCapturedEvent.bind(this));
        this._padChooser = null;

-        let seat = Clutter.get_default_backend().get_default_seat();
-        this._deviceAddedId = seat.connect('device-added', (_seat, device) => {
+        let deviceManager = Clutter.DeviceManager.get_default();
+        this._deviceAddedId = deviceManager.connect('device-added', (manager, device) => {
            if (device.get_device_type() == Clutter.InputDeviceType.PAD_DEVICE &&
                this.padDevice.is_grouped(device)) {
                this._groupPads.push(device);
                this._updatePadChooser();
            }
        });
-        this._deviceRemovedId = seat.connect('device-removed', (_seat, device) => {
+        this._deviceRemovedId = deviceManager.connect('device-removed', (manager, device) => {
            // If the device is being removed, destroy the padOsd.
            if (device == this.padDevice) {
                this.destroy();
@@ -669,7 +669,7 @@ var PadOsd = GObject.registerClass({
            }
        });

-        seat.list_devices().forEach(device => {
+        deviceManager.list_devices().forEach(device => {
            if (device != this.padDevice &&
                device.get_device_type() == Clutter.InputDeviceType.PAD_DEVICE &&
                this.padDevice.is_grouped(device))
@@ -960,13 +960,13 @@ var PadOsd = GObject.registerClass({
        Main.popModal(this);
        this._actionEditor.close();

-        let seat = Clutter.get_default_backend().get_default_seat();
+        let deviceManager = Clutter.DeviceManager.get_default();
        if (this._deviceRemovedId != 0) {
-            seat.disconnect(this._deviceRemovedId);
+            deviceManager.disconnect(this._deviceRemovedId);
            this._deviceRemovedId = 0;
        }
        if (this._deviceAddedId != 0) {
-            seat.disconnect(this._deviceAddedId);
+            deviceManager.disconnect(this._deviceAddedId);
            this._deviceAddedId = 0;
        }

@@ -990,8 +990,8 @@ var PadOsdService = class {

    ShowAsync(params, invocation) {
        let [deviceNode, editionMode] = params;
-        let seat = Clutter.get_default_backend().get_default_seat();
-        let devices = seat.list_devices();
+        let deviceManager = Clutter.DeviceManager.get_default();
+        let devices = deviceManager.list_devices();
        let padDevice = null;

        devices.forEach(device => {
--- a/js/ui/pointerA11yTimeout.js
+++ b/js/ui/pointerA11yTimeout.js
@@ -108,9 +108,9 @@ var PieTimer = GObject.registerClass({

 var PointerA11yTimeout = class PointerA11yTimeout {
    constructor() {
-        let seat = Clutter.get_default_backend().get_default_seat();
+        let manager = Clutter.DeviceManager.get_default();

-        seat.connect('ptr-a11y-timeout-started', (o, device, type, timeout) => {
+        manager.connect('ptr-a11y-timeout-started', (o, device, type, timeout) => {
            let [x, y] = global.get_pointer();

            this._pieTimer = new PieTimer();
@@ -123,7 +123,7 @@ var PointerA11yTimeout = class PointerA11yTimeout {
                global.display.set_cursor(Meta.Cursor.CROSSHAIR);
        });

-        seat.connect('ptr-a11y-timeout-stopped', (o, device, type, clicked) => {
+        manager.connect('ptr-a11y-timeout-stopped', (o, device, type, clicked) => {
            if (!clicked)
                this._pieTimer.destroy();

--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -305,44 +305,25 @@ class PopupSeparatorMenuItem extends PopupBaseMenuItem {
    }
 });

-var Switch = GObject.registerClass({
-    Properties: {
-        'state': GObject.ParamSpec.boolean(
-            'state', 'state', 'state',
-            GObject.ParamFlags.READWRITE,
-            false),
-    },
-}, class Switch extends St.Bin {
+var Switch = GObject.registerClass(
+class Switch extends St.Bin {
    _init(state) {
-        this._state = false;
-
-        super._init({
-            style_class: 'toggle-switch',
-            accessible_role: Atk.Role.CHECK_BOX,
-            can_focus: true,
-            state,
-        });
+        super._init({ style_class: 'toggle-switch',
+                      accessible_role: Atk.Role.CHECK_BOX,
+                      can_focus: true });
+        this.setToggleState(state);
    }

-    get state() {
-        return this._state;
-    }
-
-    set state(state) {
-        if (this._state === state)
-            return;
-
+    setToggleState(state) {
        if (state)
            this.add_style_pseudo_class('checked');
        else
            this.remove_style_pseudo_class('checked');
-
-        this._state = state;
-        this.notify('state');
+        this.state = state;
    }

    toggle() {
-        this.state = !this.state;
+        this.setToggleState(!this.state);
    }
 });

@@ -412,7 +393,7 @@ var PopupSwitchMenuItem = GObject.registerClass({
    }

    setToggleState(state) {
-        this._switch.state = state;
+        this._switch.setToggleState(state);
        this.checkAccessibleState();
    }

--- a/js/ui/runDialog.js
+++ b/js/ui/runDialog.js
@@ -3,7 +3,6 @@

 const { Clutter, Gio, GLib, GObject, Meta, Shell, St } = imports.gi;

-const Dialog = imports.ui.dialog;
 const Main = imports.ui.main;
 const ModalDialog = imports.ui.modalDialog;
 const ShellEntry = imports.ui.shellEntry;
@@ -19,13 +18,13 @@ const TERMINAL_SCHEMA = 'org.gnome.desktop.default-applications.terminal';
 const EXEC_KEY = 'exec';
 const EXEC_ARG_KEY = 'exec-arg';

+var DIALOG_GROW_TIME = 100;
+
 var RunDialog = GObject.registerClass(
 class RunDialog extends ModalDialog.ModalDialog {
    _init() {
-        super._init({
-            styleClass: 'run-dialog',
-            destroyOnClose: false,
-        });
+        super._init({ styleClass: 'run-dialog',
+                      destroyOnClose: false });

        this._lockdownSettings = new Gio.Settings({ schema_id: LOCKDOWN_SCHEMA });
        this._terminalSettings = new Gio.Settings({ schema_id: TERMINAL_SCHEMA });
@@ -55,41 +54,58 @@ class RunDialog extends ModalDialog.ModalDialog {
            },
        };

-        let title = _('Run a Command');
+        let label = new St.Label({ style_class: 'run-dialog-label',
+                                   text: _("Enter a Command") });

-        let content = new Dialog.MessageDialogContent({ title });
-        this.contentLayout.add_actor(content);
+        this.contentLayout.add_child(label);

-        let entry = new St.Entry({
-            style_class: 'run-dialog-entry',
-            can_focus: true,
-        });
+        let entry = new St.Entry({ style_class: 'run-dialog-entry',
+                                   can_focus: true });
        ShellEntry.addContextMenu(entry);

+        entry.label_actor = label;
+
        this._entryText = entry.clutter_text;
-        content.add_child(entry);
+        this.contentLayout.add_child(entry);
        this.setInitialKeyFocus(this._entryText);

-        let defaultDescriptionText = _('Press ESC to close');
+        this._errorBox = new St.BoxLayout({ style_class: 'run-dialog-error-box' });

-        this._descriptionLabel = new St.Label({
-            style_class: 'run-dialog-description',
-            text: defaultDescriptionText,
-        });
-        content.add_child(this._descriptionLabel);
+        this.contentLayout.add_child(this._errorBox);
+
+        let errorIcon = new St.Icon({ icon_name: 'dialog-error-symbolic',
+                                      icon_size: 24,
+                                      style_class: 'run-dialog-error-icon',
+                                      y_align: Clutter.ActorAlign.CENTER });
+
+        this._errorBox.add_child(errorIcon);

        this._commandError = false;

+        this._errorMessage = new St.Label({
+            style_class: 'run-dialog-error-label',
+            y_align: Clutter.ActorAlign.CENTER,
+        });
+        this._errorMessage.clutter_text.line_wrap = true;
+
+        this._errorBox.add_child(this._errorMessage);
+
+        this._errorBox.hide();
+
+        this.setButtons([{
+            action: this.close.bind(this),
+            label: _("Close"),
+            key: Clutter.KEY_Escape,
+        }]);
+
        this._pathCompleter = new Gio.FilenameCompleter();

-        this._history = new History.HistoryManager({
-            gsettingsKey: HISTORY_KEY,
-            entry: this._entryText,
-        });
+        this._history = new History.HistoryManager({ gsettingsKey: HISTORY_KEY,
+                                                     entry: this._entryText });
        this._entryText.connect('activate', o => {
            this.popModal();
            this._run(o.get_text(),
-                Clutter.get_current_event().get_state() & Clutter.ModifierType.CONTROL_MASK);
+                      Clutter.get_current_event().get_state() & Clutter.ModifierType.CONTROL_MASK);
            if (!this._commandError ||
                !this.pushModal())
                this.close();
@@ -112,18 +128,6 @@ class RunDialog extends ModalDialog.ModalDialog {
            }
            return Clutter.EVENT_PROPAGATE;
        });
-        this._entryText.connect('text-changed', () => {
-            this._descriptionLabel.set_text(defaultDescriptionText);
-        });
-    }
-
-    vfunc_key_release_event(event) {
-        if (event.keyval === Clutter.KEY_Escape) {
-            this.close();
-            return Clutter.EVENT_STOP;
-        }
-
-        return Clutter.EVENT_PROPAGATE;
    }

    _getCommandCompletion(text) {
@@ -212,7 +216,7 @@ class RunDialog extends ModalDialog.ModalDialog {
                    let file = Gio.file_new_for_path(path);
                    try {
                        Gio.app_info_launch_default_for_uri(file.get_uri(),
-                            global.create_app_launch_context(0, -1));
+                                                            global.create_app_launch_context(0, -1));
                    } catch (err) {
                        // The exception from gjs contains an error string like:
                        //     Error invoking Gio.app_info_launch_default_for_uri: No application
@@ -230,7 +234,24 @@ class RunDialog extends ModalDialog.ModalDialog {

    _showError(message) {
        this._commandError = true;
-        this._descriptionLabel.set_text(message);
+
+        this._errorMessage.set_text(message);
+
+        if (!this._errorBox.visible) {
+            let [, errorBoxNaturalHeight] = this._errorBox.get_preferred_height(-1);
+
+            let parentActor = this._errorBox.get_parent();
+            let height = parentActor.height + errorBoxNaturalHeight;
+            parentActor.ease({
+                height,
+                duration: DIALOG_GROW_TIME,
+                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+                onComplete: () => {
+                    parentActor.set_height(-1);
+                    this._errorBox.show();
+                },
+            });
+        }
    }

    _restart() {
@@ -245,6 +266,7 @@ class RunDialog extends ModalDialog.ModalDialog {

    open() {
        this._history.lastItem();
+        this._errorBox.hide();
        this._entryText.set_text('');
        this._commandError = false;

--- a/js/ui/screenShield.js
+++ b/js/ui/screenShield.js
@@ -777,7 +777,7 @@ var ScreenShield = class {
        let newY = currentY - origY;
        newY = clamp(newY, -global.stage.height, 0);

-        this._lockScreenGroup.translation_y = newY;
+        this._lockScreenGroup.y = newY;

        return true;
    }
@@ -785,7 +785,7 @@ var ScreenShield = class {
    _onDragEnd(_action, _actor, _eventX, _eventY, _modifiers) {
        if (this._lockScreenState != MessageTray.State.HIDING)
            return;
-        if (this._lockScreenGroup.translation_y < -(ARROW_DRAG_THRESHOLD * global.stage.height)) {
+        if (this._lockScreenGroup.y < -(ARROW_DRAG_THRESHOLD * global.stage.height)) {
            // Complete motion automatically
            let [velocity_, velocityX_, velocityY] = this._dragAction.get_velocity(0);
            this._liftShield(true, -velocityY);
@@ -793,13 +793,14 @@ var ScreenShield = class {
            // restore the lock screen to its original place
            // try to use the same speed as the normal animation
            let h = global.stage.height;
-            let duration = MANUAL_FADE_TIME * -this._lockScreenGroup.translation_y / h;
+            let duration = MANUAL_FADE_TIME * -this._lockScreenGroup.y / h;
            this._lockScreenGroup.remove_all_transitions();
            this._lockScreenGroup.ease({
-                translation_y: 0,
+                y: 0,
                duration,
                mode: Clutter.AnimationMode.EASE_IN_QUAD,
                onComplete: () => {
+                    this._lockScreenGroup.fixed_position_set = false;
                    this._lockScreenState = MessageTray.State.SHOWN;
                },
            });
@@ -944,14 +945,14 @@ var ScreenShield = class {
            // use the same speed regardless of original position
            // if velocity is specified, it's in pixels per milliseconds
            let h = global.stage.height;
-            let delta = h + this._lockScreenGroup.translation_y;
+            let delta = h + this._lockScreenGroup.y;
            let minVelocity = global.stage.height / CURTAIN_SLIDE_TIME;

            velocity = Math.max(minVelocity, velocity);
            let duration = delta / velocity;

            this._lockScreenGroup.ease({
-                translation_y: -h,
+                y: -h,
                duration,
                mode: Clutter.AnimationMode.EASE_IN_QUAD,
                onComplete: () => this._hideLockScreenComplete(),
@@ -1013,10 +1014,10 @@ var ScreenShield = class {
        let fadeToBlack = params.fadeToBlack;

        if (params.animateLockScreen) {
-            this._lockScreenGroup.translation_y = -global.screen_height;
+            this._lockScreenGroup.y = -global.screen_height;
            this._lockScreenGroup.remove_all_transitions();
            this._lockScreenGroup.ease({
-                translation_y: 0,
+                y: 0,
                duration: MANUAL_FADE_TIME,
                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
                onComplete: () => {
@@ -1024,7 +1025,7 @@ var ScreenShield = class {
                },
            });
        } else {
-            this._lockScreenGroup.translation_y = 0;
+            this._lockScreenGroup.fixed_position_set = false;
            this._lockScreenShown({ fadeToBlack, animateFade: false });
        }

@@ -1102,6 +1103,7 @@ var ScreenShield = class {
        this._cursorTracker.set_pointer_visible(false);

        this._lockScreenState = MessageTray.State.SHOWN;
+        this._lockScreenGroup.fixed_position_set = false;
        this._lockScreenScrollCounter = 0;

        if (params.fadeToBlack && params.animateFade) {
--- a/js/ui/screenshot.js
+++ b/js/ui/screenshot.js
@@ -65,7 +65,8 @@ var ScreenshotService = class {
    }

    *_resolveRelativeFilename(filename) {
-        filename = filename.replace(/\.png$/, '');
+        if (GLib.str_has_suffix(filename, '.png'))
+            filename = filename.substr(0, -4);

        let path = [
            GLib.get_user_special_dir(GLib.UserDirectory.DIRECTORY_PICTURES),
--- a/js/ui/scripting.js
+++ b/js/ui/scripting.js
@@ -5,10 +5,8 @@

 const { Gio, GLib, Meta, Shell } = imports.gi;

-const Config = imports.misc.config;
 const Main = imports.ui.main;
 const Params = imports.misc.params;
-const Util = imports.misc.util;

 const { loadInterfaceXML } = imports.misc.fileUtils;

@@ -79,12 +77,6 @@ function _getPerfHelper() {
    return _perfHelper;
 }

-function _spawnPerfHelper() {
-    let path = Config.LIBEXECDIR;
-    let command = `${path}/gnome-shell-perf-helper`;
-    Util.trySpawnCommandLine(command);
-}
-
 function _callRemote(obj, method, ...args) {
    return new Promise((resolve, reject) => {
        args.push((result, excp) => {
@@ -284,25 +276,6 @@ function _collect(scriptModule, outputFile) {
    }
 }

-async function _runPerfScript(scriptModule, outputFile) {
-    for (let step of scriptModule.run()) {
-        try {
-            await step; // eslint-disable-line no-await-in-loop
-        } catch (err) {
-            log(`Script failed: ${err}\n${err.stack}`);
-            Meta.exit(Meta.ExitCode.ERROR);
-        }
-    }
-
-    try {
-        _collect(scriptModule, outputFile);
-    } catch (err) {
-        log(`Script failed: ${err}\n${err.stack}`);
-        Meta.exit(Meta.ExitCode.ERROR);
-    }
-    Meta.exit(Meta.ExitCode.SUCCESS);
-}
-
 /**
 * runPerfScript
 * @param {Object} scriptModule: module object with run and finish
@@ -344,13 +317,23 @@ async function _runPerfScript(scriptModule, outputFile) {
 * After running the script and collecting statistics from the
 * event log, GNOME Shell will exit.
 **/
-function runPerfScript(scriptModule, outputFile) {
+async function runPerfScript(scriptModule, outputFile) {
    Shell.PerfLog.get_default().set_enabled(true);
-    _spawnPerfHelper();

-    Gio.bus_watch_name(Gio.BusType.SESSION,
-        'org.gnome.Shell.PerfHelper',
-        Gio.BusNameWatcherFlags.NONE,
-        () => _runPerfScript(scriptModule, outputFile),
-        null);
+    for (let step of scriptModule.run()) {
+        try {
+            await step; // eslint-disable-line no-await-in-loop
+        } catch (err) {
+            log(`Script failed: ${err}\n${err.stack}`);
+            Meta.exit(Meta.ExitCode.ERROR);
+        }
+    }
+
+    try {
+        _collect(scriptModule, outputFile);
+    } catch (err) {
+        log(`Script failed: ${err}\n${err.stack}`);
+        Meta.exit(Meta.ExitCode.ERROR);
+    }
+    Meta.exit(Meta.ExitCode.SUCCESS);
 }
--- a/js/ui/shellEntry.js
+++ b/js/ui/shellEntry.js
@@ -1,17 +1,24 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported addContextMenu CapsLockWarning */

-const { Clutter, GObject, Pango, Shell, St } = imports.gi;
+const { Clutter, Gio, GObject, Pango, Shell, St } = imports.gi;

 const BoxPointer = imports.ui.boxpointer;
 const Main = imports.ui.main;
 const Params = imports.misc.params;
 const PopupMenu = imports.ui.popupMenu;

+const LOCKDOWN_SCHEMA = 'org.gnome.desktop.lockdown';
+const DISABLE_SHOW_PASSWORD_KEY = 'disable-show-password';
+
 var EntryMenu = class extends PopupMenu.PopupMenu {
    constructor(entry) {
        super(entry, 0, St.Side.TOP);

+        this._lockdownSettings = new Gio.Settings({ schema_id: LOCKDOWN_SCHEMA });
+        this._lockdownSettings.connect(`changed::${DISABLE_SHOW_PASSWORD_KEY}`,
+            this._applyLockdownSettings.bind(this));
+
        this._entry = entry;
        this._clipboard = St.Clipboard.get_default();

@@ -39,6 +46,20 @@ var EntryMenu = class extends PopupMenu.PopupMenu {
        item.connect('activate', this._onPasswordActivated.bind(this));
        this.addMenuItem(item);
        this._passwordItem = item;
+        this._applyLockdownSettings();
+    }
+
+    _applyLockdownSettings() {
+        if (!this._passwordItem)
+            return;
+
+        let passwordDisabled = this._lockdownSettings.get_boolean(DISABLE_SHOW_PASSWORD_KEY);
+
+        this._passwordItem.visible = !passwordDisabled;
+        this._entry.show_peek_icon = !passwordDisabled;
+
+        if (passwordDisabled)
+            this._entry.password_visible = false;
    }

    open(animate) {
@@ -116,8 +137,7 @@ function _onButtonPressEvent(actor, event, entry) {
 }

 function _onPopup(actor, entry) {
-    let cursorPosition = entry.clutter_text.get_cursor_position();
-    let [success, textX, textY_, lineHeight_] = entry.clutter_text.position_to_coords(cursorPosition);
+    let [success, textX, textY_, lineHeight_] = entry.clutter_text.position_to_coords(-1);
    if (success)
        entry.menu.setSourceAlignment(textX / entry.width);
    entry.menu.open(BoxPointer.PopupAnimation.FULL);
@@ -156,52 +176,36 @@ function addContextMenu(entry, params) {
 var CapsLockWarning = GObject.registerClass(
 class CapsLockWarning extends St.Label {
    _init(params) {
-        let defaultParams = { style_class: 'caps-lock-warning-label' };
+        let defaultParams = { style_class: 'prompt-dialog-error-label' };
        super._init(Object.assign(defaultParams, params));

        this.text = _('Caps lock is on.');

-        this.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
-        this.clutter_text.line_wrap = true;
-
-        let seat = Clutter.get_default_backend().get_default_seat();
-        this._keymap = seat.get_keymap();
+        this._keymap = Clutter.get_default_backend().get_keymap();

        this.connect('notify::mapped', () => {
            if (this.is_mapped()) {
-                this._stateChangedId = this._keymap.connect('state-changed',
-                    () => this._sync(true));
+                this.stateChangedId = this._keymap.connect('state-changed',
+                    this._updateCapsLockWarningOpacity.bind(this));
            } else {
-                this._keymap.disconnect(this._stateChangedId);
-                this._stateChangedId = 0;
+                this._keymap.disconnect(this.stateChangedId);
+                this.stateChangedId = 0;
            }

-            this._sync(false);
+            this._updateCapsLockWarningOpacity();
        });

        this.connect('destroy', () => {
-            if (this._stateChangedId)
-                this._keymap.disconnect(this._stateChangedId);
+            if (this.stateChangedId > 0)
+                this._keymap.disconnect(this.stateChangedId);
        });
+
+        this.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
+        this.clutter_text.line_wrap = true;
    }

-    _sync(animate) {
+    _updateCapsLockWarningOpacity() {
        let capsLockOn = this._keymap.get_caps_lock_state();
-
-        this.remove_all_transitions();
-
-        this.natural_height_set = false;
-        let [, height] = this.get_preferred_height(-1);
-        this.natural_height_set = true;
-
-        this.ease({
-            height: capsLockOn ? height : 0,
-            opacity: capsLockOn ? 255 : 0,
-            duration: animate ? 200 : 0,
-            onComplete: () => {
-                if (capsLockOn)
-                    this.height = -1;
-            },
-        });
+        this.opacity = capsLockOn ? 255 : 0;
    }
 });
--- a/js/ui/shellMountOperation.js
+++ b/js/ui/shellMountOperation.js
@@ -20,34 +20,64 @@ var WORK_SPINNER_ICON_SIZE = 16;
 const REMEMBER_MOUNT_PASSWORD_KEY = 'remember-mount-password';

 /* ------ Common Utils ------- */
-function _setButtonsForChoices(dialog, oldChoices, choices) {
+function _setButtonsForChoices(dialog, choices) {
    let buttons = [];
-    let buttonsChanged = oldChoices.length !== choices.length;

    for (let idx = 0; idx < choices.length; idx++) {
        let button = idx;
-
-        buttonsChanged = buttonsChanged || oldChoices[idx] !== choices[idx];
-
        buttons.unshift({
            label: choices[idx],
            action: () => dialog.emit('response', button),
        });
    }

-    if (buttonsChanged)
-        dialog.setButtons(buttons);
+    dialog.setButtons(buttons);
 }

 function _setLabelsForMessage(content, message) {
    let labels = message.split('\n');

    content.title = labels.shift();
-    content.description = labels.join('\n');
+    content.body = labels.join('\n');
 }

 /* -------------------------------------------------------- */

+var ListItem = GObject.registerClass({
+    Signals: { 'activate': {} },
+}, class ListItem extends St.Button {
+    _init(app) {
+        let layout = new St.BoxLayout({ vertical: false });
+        super._init({
+            style_class: 'mount-dialog-app-list-item',
+            can_focus: true,
+            child: layout,
+            reactive: true,
+        });
+
+        this._app = app;
+
+        this._icon = this._app.create_icon_texture(LIST_ITEM_ICON_SIZE);
+
+        let iconBin = new St.Bin({ style_class: 'mount-dialog-app-list-item-icon',
+                                   child: this._icon });
+        layout.add(iconBin);
+
+        this._nameLabel = new St.Label({
+            text: this._app.get_name(),
+            style_class: 'mount-dialog-app-list-item-name',
+            y_align: Clutter.ActorAlign.CENTER,
+        });
+        let labelBin = new St.Bin({ child: this._nameLabel });
+        layout.add(labelBin);
+    }
+
+    vfunc_clicked() {
+        this.emit('activate');
+        this._app.activate();
+    }
+});
+
 var ShellMountOperation = class {
    constructor(source, params) {
        params = Params.parse(params, { existingDialog: null });
@@ -69,6 +99,8 @@ var ShellMountOperation = class {
                             this.close.bind(this));
        this.mountOp.connect('show-unmount-progress',
                             this._onShowUnmountProgress.bind(this));
+
+        this._gicon = source.get_icon();
    }

    _closeExistingDialog() {
@@ -81,7 +113,7 @@ var ShellMountOperation = class {

    _onAskQuestion(op, message, choices) {
        this._closeExistingDialog();
-        this._dialog = new ShellMountQuestionDialog();
+        this._dialog = new ShellMountQuestionDialog(this._gicon);

        this._dialogId = this._dialog.connect('response',
            (object, choice) => {
@@ -100,7 +132,7 @@ var ShellMountOperation = class {
            this._dialog = this._existingDialog;
            this._dialog.reaskPassword();
        } else {
-            this._dialog = new ShellMountPasswordDialog(message, flags);
+            this._dialog = new ShellMountPasswordDialog(message, this._gicon, flags);
        }

        this._dialogId = this._dialog.connect('response',
@@ -146,7 +178,7 @@ var ShellMountOperation = class {
        let message = op.get_show_processes_message();

        if (!this._processesDialog) {
-            this._processesDialog = new ShellProcessesDialog();
+            this._processesDialog = new ShellProcessesDialog(this._gicon);
            this._dialog = this._processesDialog;

            this._dialogId = this._processesDialog.connect('response',
@@ -227,28 +259,16 @@ class ShellUnmountNotifier extends MessageTray.Source {
 var ShellMountQuestionDialog = GObject.registerClass({
    Signals: { 'response': { param_types: [GObject.TYPE_INT] } },
 }, class ShellMountQuestionDialog extends ModalDialog.ModalDialog {
-    _init() {
-        super._init({ styleClass: 'mount-question-dialog' });
+    _init(icon) {
+        super._init({ styleClass: 'mount-dialog' });

-        this._oldChoices = [];
-
-        this._content = new Dialog.MessageDialogContent();
+        this._content = new Dialog.MessageDialogContent({ icon });
        this.contentLayout.add_child(this._content);
    }

-    vfunc_key_release_event(event) {
-        if (event.keyval === Clutter.KEY_Escape) {
-            this.emit('response', -1);
-            return Clutter.EVENT_STOP;
-        }
-
-        return Clutter.EVENT_PROPAGATE;
-    }
-
    update(message, choices) {
        _setLabelsForMessage(this._content, message);
-        _setButtonsForChoices(this, this._oldChoices, choices);
-        this._oldChoices = choices;
+        _setButtonsForChoices(this, choices);
    }
 });

@@ -260,16 +280,17 @@ var ShellMountPasswordDialog = GObject.registerClass({
                                           GObject.TYPE_BOOLEAN,
                                           GObject.TYPE_UINT] } },
 }, class ShellMountPasswordDialog extends ModalDialog.ModalDialog {
-    _init(message, flags) {
+    _init(message, icon, flags) {
        let strings = message.split('\n');
        let title = strings.shift() || null;
-        let description = strings.shift() || null;
+        let body = strings.shift() || null;
        super._init({ styleClass: 'prompt-dialog' });

        let disksApp = Shell.AppSystem.get_default().lookup_app('org.gnome.DiskUtility.desktop');

-        let content = new Dialog.MessageDialogContent({ title, description });
+        let content = new Dialog.MessageDialogContent({ icon, title, body });
        this.contentLayout.add_actor(content);
+        content._body.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;

        let layout = new Clutter.GridLayout({ orientation: Clutter.Orientation.VERTICAL });
        let grid = new St.Widget({ style_class: 'prompt-dialog-grid',
@@ -285,14 +306,14 @@ var ShellMountPasswordDialog = GObject.registerClass({
            });

            this._hiddenVolume = new CheckBox.CheckBox(_("Hidden Volume"));
-            content.add_child(this._hiddenVolume);
+            content.messageBox.add(this._hiddenVolume);

            this._systemVolume = new CheckBox.CheckBox(_("Windows System Volume"));
-            content.add_child(this._systemVolume);
+            content.messageBox.add(this._systemVolume);

            this._keyfilesCheckbox = new CheckBox.CheckBox(_("Uses Keyfiles"));
            this._keyfilesCheckbox.connect("clicked", this._onKeyfilesCheckboxClicked.bind(this));
-            content.add_child(this._keyfilesCheckbox);
+            content.messageBox.add(this._keyfilesCheckbox);

            this._keyfilesLabel.clutter_text.set_markup(
                /* Translators: %s is the Disks application */
@@ -300,7 +321,7 @@ var ShellMountPasswordDialog = GObject.registerClass({
            );
            this._keyfilesLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
            this._keyfilesLabel.clutter_text.line_wrap = true;
-            content.add_child(this._keyfilesLabel);
+            content.messageBox.add_child(this._keyfilesLabel);

            this._pimLabel = new St.Label({ style_class: 'prompt-dialog-password-label',
                                            text: _("PIM Number"),
@@ -359,20 +380,20 @@ var ShellMountPasswordDialog = GObject.registerClass({
            layout.attach(this._capsLockWarningLabel, 1, 2, 1, 1);
        }

-        content.add_child(grid);
+        content.messageBox.add(grid);

        this._errorMessageLabel = new St.Label({ style_class: 'prompt-dialog-error-label',
                                                 text: _("Sorry, that didn’t work. Please try again.") });
        this._errorMessageLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
        this._errorMessageLabel.clutter_text.line_wrap = true;
        this._errorMessageLabel.hide();
-        content.add_child(this._errorMessageLabel);
+        content.messageBox.add(this._errorMessageLabel);

        if (flags & Gio.AskPasswordFlags.SAVING_SUPPORTED) {
            this._rememberChoice = new CheckBox.CheckBox(_("Remember Password"));
            this._rememberChoice.checked =
                global.settings.get_boolean(REMEMBER_MOUNT_PASSWORD_KEY);
-            content.add_child(this._rememberChoice);
+            content.messageBox.add(this._rememberChoice);
        } else {
            this._rememberChoice = null;
        }
@@ -477,31 +498,39 @@ var ShellMountPasswordDialog = GObject.registerClass({
 var ShellProcessesDialog = GObject.registerClass({
    Signals: { 'response': { param_types: [GObject.TYPE_INT] } },
 }, class ShellProcessesDialog extends ModalDialog.ModalDialog {
-    _init() {
-        super._init({ styleClass: 'processes-dialog' });
+    _init(icon) {
+        super._init({ styleClass: 'mount-dialog' });

-        this._oldChoices = [];
-
-        this._content = new Dialog.MessageDialogContent();
+        this._content = new Dialog.MessageDialogContent({ icon });
        this.contentLayout.add_child(this._content);

-        this._applicationSection = new Dialog.ListSection();
-        this._applicationSection.hide();
-        this.contentLayout.add_child(this._applicationSection);
-    }
+        let scrollView = new St.ScrollView({
+            style_class: 'mount-dialog-app-list',
+            x_expand: true,
+            y_expand: true,
+        });
+        scrollView.set_policy(St.PolicyType.NEVER,
+                              St.PolicyType.AUTOMATIC);
+        this.contentLayout.add_child(scrollView);
+        scrollView.hide();

-    vfunc_key_release_event(event) {
-        if (event.keyval === Clutter.KEY_Escape) {
-            this.emit('response', -1);
-            return Clutter.EVENT_STOP;
-        }
+        this._applicationList = new St.BoxLayout({ vertical: true });
+        scrollView.add_actor(this._applicationList);

-        return Clutter.EVENT_PROPAGATE;
+        this._applicationList.connect('actor-added', () => {
+            if (this._applicationList.get_n_children() == 1)
+                scrollView.show();
+        });
+
+        this._applicationList.connect('actor-removed', () => {
+            if (this._applicationList.get_n_children() == 0)
+                scrollView.hide();
+        });
    }

    _setAppsForPids(pids) {
        // remove all the items
-        this._applicationSection.list.destroy_all_children();
+        this._applicationList.destroy_all_children();

        pids.forEach(pid => {
            let tracker = Shell.WindowTracker.get_default();
@@ -510,22 +539,20 @@ var ShellProcessesDialog = GObject.registerClass({
            if (!app)
                return;

-            let listItem = new Dialog.ListSectionItem({
-                icon_actor: app.create_icon_texture(LIST_ITEM_ICON_SIZE),
-                title: app.get_name(),
-            });
-            this._applicationSection.list.add_child(listItem);
-        });
+            let item = new ListItem(app);
+            this._applicationList.add_child(item);

-        this._applicationSection.visible =
-            this._applicationSection.list.get_n_children() > 0;
+            item.connect('activate', () => {
+                // use -1 to indicate Cancel
+                this.emit('response', -1);
+            });
+        });
    }

    update(message, processes, choices) {
        this._setAppsForPids(processes);
        _setLabelsForMessage(this._content, message);
-        _setButtonsForChoices(this, this._oldChoices, choices);
-        this._oldChoices = choices;
+        _setButtonsForChoices(this, choices);
    }
 });

@@ -590,6 +617,12 @@ var GnomeShellMountOpHandler = class {
        }
    }

+    _createGIcon(iconName) {
+        let realIconName = iconName ? iconName : 'drive-harddisk';
+        return new Gio.ThemedIcon({ name: realIconName,
+                                    use_default_fallbacks: true });
+    }
+
    /**
     * AskPassword:
     * @param {Array} params
@@ -616,7 +649,7 @@ var GnomeShellMountOpHandler = class {
     * attempt went wrong.
     */
    AskPasswordAsync(params, invocation) {
-        let [id, message, iconName_, defaultUser_, defaultDomain_, flags] = params;
+        let [id, message, iconName, defaultUser_, defaultDomain_, flags] = params;

        if (this._setCurrentRequest(invocation, id, ShellMountOperationType.ASK_PASSWORD)) {
            this._dialog.reaskPassword();
@@ -625,7 +658,7 @@ var GnomeShellMountOpHandler = class {

        this._closeDialog();

-        this._dialog = new ShellMountPasswordDialog(message, flags);
+        this._dialog = new ShellMountPasswordDialog(message, this._createGIcon(iconName), flags);
        this._dialog.connect('response',
            (object, choice, password, remember, hiddenVolume, systemVolume, pim) => {
                let details = {};
@@ -666,7 +699,7 @@ var GnomeShellMountOpHandler = class {
     * update the dialog with the new question.
     */
    AskQuestionAsync(params, invocation) {
-        let [id, message, iconName_, choices] = params;
+        let [id, message, iconName, choices] = params;

        if (this._setCurrentRequest(invocation, id, ShellMountOperationType.ASK_QUESTION)) {
            this._dialog.update(message, choices);
@@ -675,19 +708,10 @@ var GnomeShellMountOpHandler = class {

        this._closeDialog();

-        this._dialog = new ShellMountQuestionDialog(message);
+        this._dialog = new ShellMountQuestionDialog(this._createGIcon(iconName), message);
        this._dialog.connect('response', (object, choice) => {
-            let response;
-            let details = {};
-
-            if (choice == -1) {
-                response = Gio.MountOperationResult.ABORTED;
-            } else {
-                response = Gio.MountOperationResult.HANDLED;
-                details['choice'] = GLib.Variant.new('i', choice);
-            }
-
-            this._clearCurrentRequest(response, details);
+            this._clearCurrentRequest(Gio.MountOperationResult.HANDLED,
+                                      { choice: GLib.Variant.new('i', choice) });
        });

        this._dialog.update(message, choices);
@@ -713,7 +737,7 @@ var GnomeShellMountOpHandler = class {
     * of processes.
     */
    ShowProcessesAsync(params, invocation) {
-        let [id, message, iconName_, applicationPids, choices] = params;
+        let [id, message, iconName, applicationPids, choices] = params;

        if (this._setCurrentRequest(invocation, id, ShellMountOperationType.SHOW_PROCESSES)) {
            this._dialog.update(message, applicationPids, choices);
@@ -722,7 +746,7 @@ var GnomeShellMountOpHandler = class {

        this._closeDialog();

-        this._dialog = new ShellProcessesDialog();
+        this._dialog = new ShellProcessesDialog(this._createGIcon(iconName));
        this._dialog.connect('response', (object, choice) => {
            let response;
            let details = {};
--- a/js/ui/status/dwellClick.js
+++ b/js/ui/status/dwellClick.js
@@ -48,8 +48,8 @@ class DwellClickIndicator extends PanelMenu.Button {
        this._a11ySettings.connect(`changed::${KEY_DWELL_CLICK_ENABLED}`, this._syncMenuVisibility.bind(this));
        this._a11ySettings.connect(`changed::${KEY_DWELL_MODE}`, this._syncMenuVisibility.bind(this));

-        this._seat = Clutter.get_default_backend().get_default_seat();
-        this._seat.connect('ptr-a11y-dwell-click-type-changed', this._updateClickType.bind(this));
+        this._deviceManager = Clutter.DeviceManager.get_default();
+        this._deviceManager.connect('ptr-a11y-dwell-click-type-changed', this._updateClickType.bind(this));

        this._addDwellAction(DWELL_CLICK_MODES.primary);
        this._addDwellAction(DWELL_CLICK_MODES.double);
@@ -80,7 +80,7 @@ class DwellClickIndicator extends PanelMenu.Button {
    }

    _setClickType(mode) {
-        this._seat.set_pointer_a11y_dwell_click_type(mode.type);
+        this._deviceManager.set_pointer_a11y_dwell_click_type(mode.type);
        this._icon.icon_name = mode.icon;
    }
 });
--- a/js/ui/status/keyboard.js
+++ b/js/ui/status/keyboard.js
@@ -117,18 +117,11 @@ class InputSourceSwitcher extends SwitcherPopup.SwitcherList {
        let box = new St.BoxLayout({ vertical: true });

        let bin = new St.Bin({ style_class: 'input-source-switcher-symbol' });
-        let symbol = new St.Label({
-            text: item.shortName,
-            x_align: Clutter.ActorAlign.CENTER,
-            y_align: Clutter.ActorAlign.CENTER,
-        });
+        let symbol = new St.Label({ text: item.shortName });
        bin.set_child(symbol);
        box.add_child(bin);

-        let text = new St.Label({
-            text: item.displayName,
-            x_align: Clutter.ActorAlign.CENTER,
-        });
+        let text = new St.Label({ text: item.displayName });
        box.add_child(text);

        this.addItem(box, text);
--- a/js/ui/status/location.js
+++ b/js/ui/status/location.js
@@ -1,7 +1,7 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported Indicator */

-const { Clutter, Gio, GLib, GObject, Shell, St } = imports.gi;
+const { Clutter, Gio, GLib, GObject, Shell } = imports.gi;

 const Dialog = imports.ui.dialog;
 const Main = imports.ui.main;
@@ -347,29 +347,19 @@ var AppAuthorizer = class {
 var GeolocationDialog = GObject.registerClass({
    Signals: { 'response': { param_types: [GObject.TYPE_UINT] } },
 }, class GeolocationDialog extends ModalDialog.ModalDialog {
-    _init(name, reason, reqAccuracyLevel) {
+    _init(name, subtitle, reqAccuracyLevel) {
        super._init({ styleClass: 'geolocation-dialog' });
        this.reqAccuracyLevel = reqAccuracyLevel;

-        let content = new Dialog.MessageDialogContent({
-            title: _('Allow location access'),
-            /* Translators: %s is an application name */
-            description: _('The app %s wants to access your location').format(name),
-        });
+        let icon = new Gio.ThemedIcon({ name: 'find-location-symbolic' });

-        let reasonLabel = new St.Label({
-            text: reason,
-            style_class: 'message-dialog-description',
-        });
-        content.add_child(reasonLabel);
+        /* Translators: %s is an application name */
+        let title = _("Give %s access to your location?").format(name);
+        let body = _("Location access can be changed at any time from the privacy settings.");

-        let infoLabel = new St.Label({
-            text: _('Location access can be changed at any time from the privacy settings.'),
-            style_class: 'message-dialog-description',
-        });
-        content.add_child(infoLabel);
-
-        this.contentLayout.add_child(content);
+        let contentParams = { icon, title, subtitle, body };
+        let content = new Dialog.MessageDialogContent(contentParams);
+        this.contentLayout.add_actor(content);

        let button = this.addButton({ label: _("Deny Access"),
                                      action: this._onDenyClicked.bind(this),
--- a/js/ui/status/network.js
+++ b/js/ui/status/network.js
@@ -2069,6 +2069,6 @@ class Indicator extends PanelMenu.SystemIndicator {
        }

        this._vpnIndicator.icon_name = this._vpnSection.getIndicatorIcon();
-        this._vpnIndicator.visible = this._vpnIndicator.icon_name !== null;
+        this._vpnIndicator.visible = this._vpnIndicator.icon_name != '';
    }
 });
--- a/js/ui/status/system.js
+++ b/js/ui/status/system.js
@@ -54,10 +54,8 @@ class Indicator extends PanelMenu.SystemIndicator {
        let bindFlags = GObject.BindingFlags.DEFAULT | GObject.BindingFlags.SYNC_CREATE;
        let item;

-        item = new PopupMenu.PopupImageMenuItem(
-            this._systemActions.getName('lock-orientation'),
+        item = new PopupMenu.PopupImageMenuItem(_('Lock Screen Rotation'),
            this._systemActions.orientation_lock_icon);
-
        item.connect('activate', () => {
            this.menu.itemActivated(BoxPointer.PopupAnimation.NONE);
            this._systemActions.activateLockOrientation();
@@ -70,10 +68,7 @@ class Indicator extends PanelMenu.SystemIndicator {
                                          bindFlags);
        this._systemActions.connect('notify::orientation-lock-icon', () => {
            let iconName = this._systemActions.orientation_lock_icon;
-            let labelText = this._systemActions.getName("lock-orientation");
-
            this._orientationLockItem.setIcon(iconName);
-            this._orientationLockItem.label.text = labelText;
        });

        let app = this._settingsApp = Shell.AppSystem.get_default().lookup_app(
--- a/js/ui/swipeTracker.js
+++ b/js/ui/swipeTracker.js
@@ -1,648 +0,0 @@
-// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported SwipeTracker */
-
-const { Clutter, Gio, GObject, Meta } = imports.gi;
-
-const Main = imports.ui.main;
-const Params = imports.misc.params;
-
-// FIXME: ideally these values matches physical touchpad size. We can get the
-// correct values for gnome-shell specifically, since mutter uses libinput
-// directly, but GTK apps cannot get it, so use an arbitrary value so that
-// it's consistent with apps.
-const TOUCHPAD_BASE_HEIGHT = 300;
-const TOUCHPAD_BASE_WIDTH = 400;
-
-const SCROLL_MULTIPLIER = 10;
-const SWIPE_MULTIPLIER = 0.5;
-
-const MIN_ANIMATION_DURATION = 100;
-const MAX_ANIMATION_DURATION = 400;
-const VELOCITY_THRESHOLD = 0.4;
-// Derivative of easeOutCubic at t=0
-const DURATION_MULTIPLIER = 3;
-const ANIMATION_BASE_VELOCITY = 0.002;
-
-const State = {
-    NONE: 0,
-    SCROLLING: 1,
-};
-
-function clamp(value, min, max) {
-    return Math.max(min, Math.min(max, value));
-}
-
-const TouchpadSwipeGesture = GObject.registerClass({
-    Properties: {
-        'enabled': GObject.ParamSpec.boolean(
-            'enabled', 'enabled', 'enabled',
-            GObject.ParamFlags.READWRITE,
-            true),
-        'orientation': GObject.ParamSpec.enum(
-            'orientation', 'orientation', 'orientation',
-            GObject.ParamFlags.READWRITE,
-            Clutter.Orientation, Clutter.Orientation.VERTICAL),
-    },
-    Signals: {
-        'begin':  { param_types: [GObject.TYPE_UINT, GObject.TYPE_DOUBLE, GObject.TYPE_DOUBLE] },
-        'update': { param_types: [GObject.TYPE_UINT, GObject.TYPE_DOUBLE] },
-        'end':    { param_types: [GObject.TYPE_UINT] },
-    },
-}, class TouchpadSwipeGesture extends GObject.Object {
-    _init(allowedModes) {
-        super._init();
-        this._allowedModes = allowedModes;
-        this._touchpadSettings = new Gio.Settings({
-            schema_id: 'org.gnome.desktop.peripherals.touchpad',
-        });
-        this._orientation = Clutter.Orientation.VERTICAL;
-        this._enabled = true;
-
-        global.stage.connect('captured-event', this._handleEvent.bind(this));
-    }
-
-    get enabled() {
-        return this._enabled;
-    }
-
-    set enabled(enabled) {
-        if (this._enabled === enabled)
-            return;
-
-        this._enabled = enabled;
-        this.notify('enabled');
-    }
-
-    get orientation() {
-        return this._orientation;
-    }
-
-    set orientation(orientation) {
-        if (this._orientation === orientation)
-            return;
-
-        this._orientation = orientation;
-        this.notify('orientation');
-    }
-
-    _handleEvent(actor, event) {
-        if (event.type() !== Clutter.EventType.TOUCHPAD_SWIPE)
-            return Clutter.EVENT_PROPAGATE;
-
-        if (event.get_touchpad_gesture_finger_count() !== 4)
-            return Clutter.EVENT_PROPAGATE;
-
-        if ((this._allowedModes & Main.actionMode) === 0)
-            return Clutter.EVENT_PROPAGATE;
-
-        if (!this.enabled)
-            return Clutter.EVENT_PROPAGATE;
-
-        let time = event.get_time();
-
-        let [x, y] = event.get_coords();
-        let [dx, dy] = event.get_gesture_motion_delta();
-
-        let delta;
-        if (this._orientation === Clutter.Orientation.VERTICAL)
-            delta = dy / TOUCHPAD_BASE_HEIGHT;
-        else
-            delta = dx / TOUCHPAD_BASE_WIDTH;
-
-        switch (event.get_gesture_phase()) {
-        case Clutter.TouchpadGesturePhase.BEGIN:
-            this.emit('begin', time, x, y);
-            break;
-
-        case Clutter.TouchpadGesturePhase.UPDATE:
-            if (this._touchpadSettings.get_boolean('natural-scroll'))
-                delta = -delta;
-
-            this.emit('update', time, delta * SWIPE_MULTIPLIER);
-            break;
-
-        case Clutter.TouchpadGesturePhase.END:
-        case Clutter.TouchpadGesturePhase.CANCEL:
-            this.emit('end', time);
-            break;
-        }
-
-        return Clutter.EVENT_STOP;
-    }
-});
-
-const TouchSwipeGesture = GObject.registerClass({
-    Properties: {
-        'distance': GObject.ParamSpec.double(
-            'distance', 'distance', 'distance',
-            GObject.ParamFlags.READWRITE,
-            0, Infinity, 0),
-        'orientation': GObject.ParamSpec.enum(
-            'orientation', 'orientation', 'orientation',
-            GObject.ParamFlags.READWRITE,
-            Clutter.Orientation, Clutter.Orientation.VERTICAL),
-    },
-    Signals: {
-        'begin':  { param_types: [GObject.TYPE_UINT, GObject.TYPE_DOUBLE, GObject.TYPE_DOUBLE] },
-        'update': { param_types: [GObject.TYPE_UINT, GObject.TYPE_DOUBLE] },
-        'end':    { param_types: [GObject.TYPE_UINT] },
-        'cancel': { param_types: [GObject.TYPE_UINT] },
-    },
-}, class TouchSwipeGesture extends Clutter.GestureAction {
-    _init(allowedModes, nTouchPoints, thresholdTriggerEdge) {
-        super._init();
-        this.set_n_touch_points(nTouchPoints);
-        this.set_threshold_trigger_edge(thresholdTriggerEdge);
-
-        this._allowedModes = allowedModes;
-        this._distance = global.screen_height;
-        this._orientation = Clutter.Orientation.VERTICAL;
-
-        global.display.connect('grab-op-begin', () => {
-            this.cancel();
-        });
-
-        this._lastPosition = 0;
-    }
-
-    get distance() {
-        return this._distance;
-    }
-
-    set distance(distance) {
-        if (this._distance === distance)
-            return;
-
-        this._distance = distance;
-        this.notify('distance');
-    }
-
-    get orientation() {
-        return this._orientation;
-    }
-
-    set orientation(orientation) {
-        if (this._orientation === orientation)
-            return;
-
-        this._orientation = orientation;
-        this.notify('orientation');
-    }
-
-    vfunc_gesture_prepare(actor) {
-        if (!super.vfunc_gesture_prepare(actor))
-            return false;
-
-        if ((this._allowedModes & Main.actionMode) === 0)
-            return false;
-
-        let time = this.get_last_event(0).get_time();
-        let [xPress, yPress] = this.get_press_coords(0);
-        let [x, y] = this.get_motion_coords(0);
-
-        this._lastPosition =
-            this._orientation === Clutter.Orientation.VERTICAL ? y : x;
-
-        this.emit('begin', time, xPress, yPress);
-        return true;
-    }
-
-    vfunc_gesture_progress(_actor) {
-        let [x, y] = this.get_motion_coords(0);
-        let pos = this._orientation === Clutter.Orientation.VERTICAL ? y : x;
-
-        let delta = pos - this._lastPosition;
-        this._lastPosition = pos;
-
-        let time = this.get_last_event(0).get_time();
-
-        this.emit('update', time, -delta / this._distance);
-
-        return true;
-    }
-
-    vfunc_gesture_end(_actor) {
-        let time = this.get_last_event(0).get_time();
-
-        this.emit('end', time);
-    }
-
-    vfunc_gesture_cancel(_actor) {
-        let time = Clutter.get_current_event_time();
-
-        this.emit('cancel', time);
-    }
-});
-
-const ScrollGesture = GObject.registerClass({
-    Properties: {
-        'enabled': GObject.ParamSpec.boolean(
-            'enabled', 'enabled', 'enabled',
-            GObject.ParamFlags.READWRITE,
-            true),
-        'orientation': GObject.ParamSpec.enum(
-            'orientation', 'orientation', 'orientation',
-            GObject.ParamFlags.READWRITE,
-            Clutter.Orientation, Clutter.Orientation.VERTICAL),
-    },
-    Signals: {
-        'begin':  { param_types: [GObject.TYPE_UINT, GObject.TYPE_DOUBLE, GObject.TYPE_DOUBLE] },
-        'update': { param_types: [GObject.TYPE_UINT, GObject.TYPE_DOUBLE] },
-        'end':    { param_types: [GObject.TYPE_UINT] },
-    },
-}, class ScrollGesture extends GObject.Object {
-    _init(actor, allowedModes) {
-        super._init();
-        this._allowedModes = allowedModes;
-        this._began = false;
-        this._enabled = true;
-        this._orientation = Clutter.Orientation.VERTICAL;
-
-        actor.connect('scroll-event', this._handleEvent.bind(this));
-    }
-
-    get enabled() {
-        return this._enabled;
-    }
-
-    set enabled(enabled) {
-        if (this._enabled === enabled)
-            return;
-
-        this._enabled = enabled;
-        this.notify('enabled');
-    }
-
-    get orientation() {
-        return this._orientation;
-    }
-
-    set orientation(orientation) {
-        if (this._orientation === orientation)
-            return;
-
-        this._orientation = orientation;
-        this.notify('orientation');
-    }
-
-    canHandleEvent(event) {
-        if (event.type() !== Clutter.EventType.SCROLL)
-            return false;
-
-        if (event.get_scroll_source() !== Clutter.ScrollSource.FINGER &&
-            event.get_source_device().get_device_type() !== Clutter.InputDeviceType.TOUCHPAD_DEVICE)
-            return false;
-
-        if (!this.enabled)
-            return false;
-
-        if ((this._allowedModes & Main.actionMode) === 0)
-            return false;
-
-        return true;
-    }
-
-    _handleEvent(actor, event) {
-        if (!this.canHandleEvent(event))
-            return Clutter.EVENT_PROPAGATE;
-
-        if (event.get_scroll_direction() !== Clutter.ScrollDirection.SMOOTH)
-            return Clutter.EVENT_PROPAGATE;
-
-        let time = event.get_time();
-        let [dx, dy] = event.get_scroll_delta();
-        if (dx === 0 && dy === 0) {
-            this.emit('end', time);
-            this._began = false;
-            return Clutter.EVENT_STOP;
-        }
-
-        if (!this._began) {
-            let [x, y] = event.get_coords();
-            this.emit('begin', time, x, y);
-            this._began = true;
-        }
-
-        let delta;
-        if (this._orientation === Clutter.Orientation.VERTICAL)
-            delta = dy / TOUCHPAD_BASE_HEIGHT;
-        else
-            delta = dx / TOUCHPAD_BASE_WIDTH;
-
-        this.emit('update', time, delta * SCROLL_MULTIPLIER);
-
-        return Clutter.EVENT_STOP;
-    }
-});
-
-// USAGE:
-//
-// To correctly implement the gesture, there must be handlers for the following
-// signals:
-//
-// begin(tracker, monitor)
-//   The handler should check whether a deceleration animation is currently
-//   running. If it is, it should stop the animation (without resetting
-//   progress). Then it should call:
-//   tracker.confirmSwipe(distance, snapPoints, currentProgress, cancelProgress)
-//   If it's not called, the swipe would be ignored.
-//   The parameters are:
-//    * distance: the page size;
-//    * snapPoints: an (sorted with ascending order) array of snap points;
-//    * currentProgress: the current progress;
-//    * cancelprogress: a non-transient value that would be used if the gesture
-//      is cancelled.
-//   If no animation was running, currentProgress and cancelProgress should be
-//   same. The handler may set 'orientation' property here.
-//
-// update(tracker, progress)
-//   The handler should set the progress to the given value.
-//
-// end(tracker, duration, endProgress)
-//   The handler should animate the progress to endProgress. If endProgress is
-//   0, it should do nothing after the animation, otherwise it should change the
-//   state, e.g. change the current page or switch workspace.
-//   NOTE: duration can be 0 in some cases, in this case it should finish
-//   instantly.
-
-/** A class for handling swipe gestures */
-var SwipeTracker = GObject.registerClass({
-    Properties: {
-        'enabled': GObject.ParamSpec.boolean(
-            'enabled', 'enabled', 'enabled',
-            GObject.ParamFlags.READWRITE,
-            true),
-        'orientation': GObject.ParamSpec.enum(
-            'orientation', 'orientation', 'orientation',
-            GObject.ParamFlags.READWRITE,
-            Clutter.Orientation, Clutter.Orientation.VERTICAL),
-        'distance': GObject.ParamSpec.double(
-            'distance', 'distance', 'distance',
-            GObject.ParamFlags.READWRITE,
-            0, Infinity, 0),
-    },
-    Signals: {
-        'begin':  { param_types: [GObject.TYPE_UINT] },
-        'update': { param_types: [GObject.TYPE_DOUBLE] },
-        'end':    { param_types: [GObject.TYPE_UINT64, GObject.TYPE_DOUBLE] },
-    },
-}, class SwipeTracker extends GObject.Object {
-    _init(actor, allowedModes, params) {
-        super._init();
-        params = Params.parse(params, { allowDrag: true, allowScroll: true });
-
-        this._allowedModes = allowedModes;
-        this._enabled = true;
-        this._orientation = Clutter.Orientation.VERTICAL;
-        this._distance = global.screen_height;
-
-        this._reset();
-
-        this._touchpadGesture = new TouchpadSwipeGesture(allowedModes);
-        this._touchpadGesture.connect('begin', this._beginGesture.bind(this));
-        this._touchpadGesture.connect('update', this._updateGesture.bind(this));
-        this._touchpadGesture.connect('end', this._endGesture.bind(this));
-        this.bind_property('enabled', this._touchpadGesture, 'enabled', 0);
-        this.bind_property('orientation', this._touchpadGesture, 'orientation', 0);
-
-        this._touchGesture = new TouchSwipeGesture(allowedModes, 4,
-            Clutter.GestureTriggerEdge.NONE);
-        this._touchGesture.connect('begin', this._beginTouchSwipe.bind(this));
-        this._touchGesture.connect('update', this._updateGesture.bind(this));
-        this._touchGesture.connect('end', this._endGesture.bind(this));
-        this._touchGesture.connect('cancel', this._cancelGesture.bind(this));
-        this.bind_property('enabled', this._touchGesture, 'enabled', 0);
-        this.bind_property('orientation', this._touchGesture, 'orientation', 0);
-        this.bind_property('distance', this._touchGesture, 'distance', 0);
-        global.stage.add_action(this._touchGesture);
-
-        if (params.allowDrag) {
-            this._dragGesture = new TouchSwipeGesture(allowedModes, 1,
-                Clutter.GestureTriggerEdge.AFTER);
-            this._dragGesture.connect('begin', this._beginGesture.bind(this));
-            this._dragGesture.connect('update', this._updateGesture.bind(this));
-            this._dragGesture.connect('end', this._endGesture.bind(this));
-            this._dragGesture.connect('cancel', this._cancelGesture.bind(this));
-            this.bind_property('enabled', this._dragGesture, 'enabled', 0);
-            this.bind_property('orientation', this._dragGesture, 'orientation', 0);
-            this.bind_property('distance', this._dragGesture, 'distance', 0);
-            actor.add_action(this._dragGesture);
-        } else {
-            this._dragGesture = null;
-        }
-
-        if (params.allowScroll) {
-            this._scrollGesture = new ScrollGesture(actor, allowedModes);
-            this._scrollGesture.connect('begin', this._beginGesture.bind(this));
-            this._scrollGesture.connect('update', this._updateGesture.bind(this));
-            this._scrollGesture.connect('end', this._endGesture.bind(this));
-            this.bind_property('enabled', this._scrollGesture, 'enabled', 0);
-            this.bind_property('orientation', this._scrollGesture, 'orientation', 0);
-        } else {
-            this._scrollGesture = null;
-        }
-    }
-
-    /**
-     * canHandleScrollEvent:
-     * @param {Clutter.Event} scrollEvent: an event to check
-     * @returns {bool} whether the event can be handled by the tracker
-     *
-     * This function can be used to combine swipe gesture and mouse
-     * scrolling.
-     */
-    canHandleScrollEvent(scrollEvent) {
-        if (!this.enabled || this._scrollGesture === null)
-            return false;
-
-        return this._scrollGesture.canHandleEvent(scrollEvent);
-    }
-
-    get enabled() {
-        return this._enabled;
-    }
-
-    set enabled(enabled) {
-        if (this._enabled === enabled)
-            return;
-
-        this._enabled = enabled;
-        if (!enabled && this._state === State.SCROLLING)
-            this._interrupt();
-        this.notify('enabled');
-    }
-
-    get orientation() {
-        return this._orientation;
-    }
-
-    set orientation(orientation) {
-        if (this._orientation === orientation)
-            return;
-
-        this._orientation = orientation;
-        this.notify('orientation');
-    }
-
-    get distance() {
-        return this._distance;
-    }
-
-    set distance(distance) {
-        if (this._distance === distance)
-            return;
-
-        this._distance = distance;
-        this.notify('distance');
-    }
-
-    _reset() {
-        this._state = State.NONE;
-
-        this._snapPoints = [];
-        this._initialProgress = 0;
-        this._cancelProgress = 0;
-
-        this._prevOffset = 0;
-        this._progress = 0;
-
-        this._prevTime = 0;
-        this._velocity = 0;
-
-        this._cancelled = false;
-    }
-
-    _interrupt() {
-        this.emit('end', 0, this._cancelProgress);
-        this._reset();
-    }
-
-    _beginTouchSwipe(gesture, time, x, y) {
-        if (this._dragGesture)
-            this._dragGesture.cancel();
-
-        this._beginGesture(gesture, time, x, y);
-    }
-
-    _beginGesture(gesture, time, x, y) {
-        if (this._state === State.SCROLLING)
-            return;
-
-        this._prevTime = time;
-
-        let rect = new Meta.Rectangle({ x, y, width: 1, height: 1 });
-        let monitor = global.display.get_monitor_index_for_rect(rect);
-
-        this.emit('begin', monitor);
-    }
-
-    _updateGesture(gesture, time, delta) {
-        if (this._state !== State.SCROLLING)
-            return;
-
-        if ((this._allowedModes & Main.actionMode) === 0 || !this.enabled) {
-            this._interrupt();
-            return;
-        }
-
-        if (this.orientation === Clutter.Orientation.HORIZONTAL &&
-            Clutter.get_default_text_direction() === Clutter.TextDirection.RTL)
-            delta = -delta;
-
-        this._progress += delta;
-
-        if (time !== this._prevTime)
-            this._velocity = delta / (time - this._prevTime);
-
-        let firstPoint = this._snapPoints[0];
-        let lastPoint = this._snapPoints[this._snapPoints.length - 1];
-        this._progress = clamp(this._progress, firstPoint, lastPoint);
-        this._progress = clamp(this._progress,
-            this._initialProgress - 1, this._initialProgress + 1);
-
-        this.emit('update', this._progress);
-
-        this._prevTime = time;
-    }
-
-    _getClosestSnapPoints() {
-        let upper = this._snapPoints.find(p => p >= this._progress);
-        let lower = this._snapPoints.slice().reverse().find(p => p <= this._progress);
-        return [lower, upper];
-    }
-
-    _getEndProgress() {
-        if (this._cancelled)
-            return this._cancelProgress;
-
-        let [lower, upper] = this._getClosestSnapPoints();
-        let middle = (upper + lower) / 2;
-
-        if (this._progress > middle) {
-            let thresholdMet = this._velocity * this._distance > -VELOCITY_THRESHOLD;
-            return thresholdMet || this._initialProgress > upper ? upper : lower;
-        } else {
-            let thresholdMet = this._velocity * this._distance < VELOCITY_THRESHOLD;
-            return thresholdMet || this._initialProgress < lower ? lower : upper;
-        }
-    }
-
-    _endGesture(_gesture, _time) {
-        if (this._state !== State.SCROLLING)
-            return;
-
-        if ((this._allowedModes & Main.actionMode) === 0 || !this.enabled) {
-            this._interrupt();
-            return;
-        }
-
-        let endProgress = this._getEndProgress();
-
-        let velocity = ANIMATION_BASE_VELOCITY;
-        if ((endProgress - this._progress) * this._velocity > 0)
-            velocity = this._velocity;
-
-        let duration = Math.abs((this._progress - endProgress) / velocity * DURATION_MULTIPLIER);
-        if (duration > 0) {
-            duration = clamp(duration,
-                MIN_ANIMATION_DURATION, MAX_ANIMATION_DURATION);
-        }
-
-        this.emit('end', duration, endProgress);
-        this._reset();
-    }
-
-    _cancelGesture(gesture, time) {
-        if (this._state !== State.SCROLLING)
-            return;
-
-        this._cancelled = true;
-        this._endGesture(gesture, time);
-    }
-
-    /**
-     * confirmSwipe:
-     * @param {number} distance: swipe distance in pixels
-     * @param {number[]} snapPoints:
-     *     An array of snap points, sorted in ascending order
-     * @param {number} currentProgress: initial progress value
-     * @param {number} cancelProgress: the value to be used on cancelling
-     *
-     * Confirms a swipe. User has to call this in 'begin' signal handler,
-     * otherwise the swipe wouldn't start. If there's an animation running,
-     * it should be stopped first.
-     *
-     * @cancel_progress must always be a snap point, or a value matching
-     * some other non-transient state.
-     */
-    confirmSwipe(distance, snapPoints, currentProgress, cancelProgress) {
-        this.distance = distance;
-        this._snapPoints = snapPoints;
-        this._initialProgress = currentProgress;
-        this._progress = currentProgress;
-        this._cancelProgress = cancelProgress;
-
-        this._velocity = 0;
-        this._state = State.SCROLLING;
-    }
-});
--- a/Show More
+++ b/Show More