magnifier: Use core idletime monitor

As it's getting the idletime monitor for the seat pointer, boils
down to about the same thing. We are moving away from per-device
idletime monitors though.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/978

.gitignore

@@ -21,6 +21,8 @@ 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

.gitlab/issue_templates/Bug.md

@@ -0,0 +1,55 @@
+<!-- 
+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"

.gitlab/issue_templates/Feature.md

@@ -0,0 +1,30 @@
+<!-- 
+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"

HACKING.md

@@ -29,9 +29,8 @@ 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);
         }
@@ -102,9 +101,8 @@ 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) {
@@ -252,7 +250,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);
 ```
 

NEWS

@@ -1,3 +1,22 @@
+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]

data/gnome-shell-extension-prefs.desktop.in.in

@@ -1,12 +0,0 @@
-[Desktop Entry]
-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

data/icons/hicolor/scalable/apps/org.gnome.Extensions.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128px" height="128px" viewBox="0 0 128 128" version="1.1">
+<g id="surface43907">
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(10.196079%,37.254903%,70.588237%);fill-opacity:1;" d="M 58.847656 15.683594 L 49.074219 30.632812 C 46.921875 33.84375 42.480469 36.65625 39.378906 35.300781 C 34.488281 33.164062 35.859375 28.144531 31.28125 25.292969 C 28.070312 23.292969 16.839844 20.449219 14.804688 27.644531 C 13.761719 31.339844 14.480469 37.410156 17.398438 41.019531 C 20.164062 44.441406 26.8125 43.355469 28.898438 47.230469 C 30.34375 49.925781 29.738281 51.628906 28.347656 54.351562 C 26.796875 57.375 22.839844 61.359375 19.265625 64.585938 C 17.480469 66.199219 13.273438 65.710938 12.03125 66.730469 C 11.753906 66.949219 12.511719 70.285156 12.511719 70.285156 C 12.511719 70.285156 19.90625 82.707031 25.539062 87.285156 C 27.773438 89.101562 30.089844 91.808594 32.742188 90.695312 C 36.035156 89.316406 35.304688 82.289062 37.644531 79.597656 C 41.976562 74.605469 50.292969 73.761719 55.582031 78.144531 C 61.277344 82.867188 60.882812 89.472656 57.941406 94.683594 C 55.175781 99.578125 49.472656 98.453125 47.484375 102.28125 C 46.730469 103.730469 47.578125 105.664062 48.765625 106.785156 C 54.628906 112.335938 71.210938 118.988281 71.210938 118.988281 L 81.605469 102.429688 C 83.757812 99.222656 86.707031 97.742188 90.011719 98.46875 C 94.605469 99.472656 95.160156 105.945312 98.914062 108.785156 C 103.195312 112.019531 110.546875 111.765625 114.351562 105.753906 C 117.128906 101.371094 116.761719 97.449219 113.765625 91.414062 C 111.808594 87.476562 103.253906 89.382812 101.171875 85.507812 C 99.722656 82.8125 99.992188 80.214844 101.859375 77.796875 C 106.332031 72 117.003906 62.699219 117.003906 62.699219 C 117.003906 62.699219 117.144531 60.824219 116.246094 59.363281 C 115.15625 57.589844 107.472656 49.273438 104.65625 46.984375 C 102.421875 45.167969 99.6875 41.921875 97.03125 43.035156 C 93.742188 44.414062 94.417969 51.058594 92.082031 53.753906 C 86.5 60.179688 78.4375 59.101562 73.914062 54.648438 C 68.644531 49.453125 68.511719 44.488281 71.453125 39.277344 C 74.222656 34.382812 79.921875 35.3125 81.910156 31.484375 C 82.664062 30.035156 81.484375 27.070312 80.597656 25.390625 C 79.277344 22.890625 65.976562 18.902344 58.847656 15.683594 Z M 58.847656 15.683594 "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(20.784314%,51.764709%,89.411765%);fill-opacity:1;" d="M 58.089844 12.347656 L 48.316406 27.300781 C 46.164062 30.507812 41.726562 33.320312 38.625 31.964844 C 33.734375 29.828125 35.101562 24.808594 30.523438 21.960938 C 27.3125 19.957031 19.445312 19.160156 15.683594 25.625 C 13.730469 28.976562 13.722656 34.074219 16.644531 37.6875 C 19.410156 41.105469 26.058594 40.023438 28.140625 43.898438 C 29.589844 46.589844 28.984375 48.292969 27.589844 51.015625 C 24.492188 57.066406 11.753906 66.949219 11.753906 66.949219 C 11.753906 66.949219 19.148438 79.371094 24.785156 83.949219 C 27.019531 85.765625 29.332031 88.472656 31.988281 87.363281 C 35.277344 85.984375 34.550781 78.957031 36.886719 76.261719 C 41.21875 71.273438 49.535156 70.425781 54.824219 74.8125 C 60.519531 79.53125 60.125 86.140625 57.183594 91.347656 C 54.417969 96.242188 48.714844 95.117188 46.726562 98.949219 C 45.976562 100.398438 46.824219 102.328125 48.011719 103.449219 C 53.871094 109 70.457031 115.652344 70.457031 115.652344 L 80.847656 99.097656 C 83 95.886719 85.953125 94.40625 89.257812 95.132812 C 93.847656 96.140625 94.402344 102.609375 98.160156 105.449219 C 102.4375 108.683594 109.789062 108.433594 113.597656 102.421875 C 116.375 98.035156 116.152344 94.195312 112.175781 89.128906 C 109.460938 85.667969 102.496094 86.046875 100.414062 82.171875 C 98.96875 79.480469 99.234375 76.878906 101.101562 74.460938 C 105.578125 68.667969 116.246094 59.363281 116.246094 59.363281 C 116.246094 59.363281 109.535156 48.226562 103.898438 43.648438 C 101.664062 41.835938 98.929688 38.585938 96.277344 39.699219 C 92.988281 41.078125 93.660156 47.726562 91.324219 50.417969 C 85.746094 56.84375 77.679688 55.769531 73.15625 51.3125 C 67.886719 46.121094 67.757812 41.152344 70.699219 35.945312 C 73.464844 31.046875 79.164062 31.980469 81.152344 28.148438 C 81.90625 26.699219 80.066406 24.476562 78.878906 23.355469 C 73.015625 17.804688 58.089844 12.347656 58.089844 12.347656 Z M 58.089844 12.347656 "/>
+</g>
+</svg>

data/icons/hicolor/symbolic/apps/org.gnome.Extensions-symbolic.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M6.5 1C5.669 1 5 1.669 5 2.5V4H2c-.554 0-1 .446-1 1v3h1.5C3.331 8 4 8.669 4 9.5S3.331 11 2.5 11H1v3c0 .554.446 1 1 1h3v-1.5c0-.831.669-1.5 1.5-1.5s1.5.669 1.5 1.5V15h3c.554 0 1-.446 1-1v-3h1.5c.831 0 1.5-.669 1.5-1.5S14.331 8 13.5 8H12V5c0-.554-.446-1-1-1H8V2.5C8 1.669 7.331 1 6.5 1z" style="isolation:auto;mix-blend-mode:normal;marker:none" color="#000" overflow="visible" fill="#474747"/></svg>

data/icons/meson.build

@@ -0,0 +1 @@
+install_subdir('hicolor', install_dir: icondir)

data/meson.build

@@ -1,6 +1,6 @@
 desktop_files = [
   'org.gnome.Shell.desktop',
-  'gnome-shell-extension-prefs.desktop'
+  'org.gnome.Extensions.desktop',
 ]
 service_files = []
 
@@ -13,7 +13,6 @@ 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
@@ -44,6 +43,7 @@ endforeach
 
 
 subdir('dbus-interfaces')
+subdir('icons')
 subdir('theme')
 
 data_resources = [

data/org.gnome.Extensions.desktop.in.in

@@ -0,0 +1,8 @@
+[Desktop Entry]
+Type=Application
+Name=Extensions
+Icon=org.gnome.Extensions
+Comment=Configure GNOME Shell Extensions
+Exec=@bindir@/gnome-shell-extension-prefs %u
+Categories=GNOME;GTK;
+OnlyShowIn=GNOME;

data/org.gnome.Shell.desktop.in.in

@@ -3,10 +3,6 @@ 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

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.Evolution.desktop', 'rhythmbox.desktop', 'org.gnome.Shotwell.desktop', 'org.gnome.Nautilus.desktop', 'org.gnome.Software.desktop' ]</default>
+      <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>
       <summary>List of desktop file IDs for favorite applications</summary>
       <description>
         The applications corresponding to these identifiers

data/theme/gnome-shell-high-contrast.scss

@@ -1,16 +1,17 @@
-$variant: 'light';
+$variant: 'dark';
 
 @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"); }
 }

data/theme/gnome-shell-sass/_colors.scss

@@ -1,16 +1,15 @@
 // When color definition differs for dark and light variant,
 // it gets @if ed depending on $variant
 
-
-$base_color: if($variant == 'light', #ffffff, lighten(desaturate(#241f31, 20%), 2%));
+$base_color: if($variant == 'light', #fff, 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: #ffffff;
+$selected_fg_color: #fff;
 $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, 10%));
-$borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93));
+$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));
 $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;
@@ -20,21 +19,20 @@ $error_color: #ff8080;
 $success_color: if($variant == 'light', #33d17a, darken(#33d17a, 10%));
 $destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%));
 
-$osd_fg_color: #eeeeec;
-$osd_text_color: white;
-$osd_bg_color: transparentize(darken(desaturate(#3d3846, 100%), 12%),0.04);
+$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_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: transparentize(black, 0.3);
-$osd_outer_borders_color: transparentize(white, 0.84);
+$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%));
 
-$tooltip_borders_color: $osd_outer_borders_color;
-$shadow_color: transparentize(black, 0.9);
+$shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2));
 
 //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: $borders_color;
+$insensitive_borders_color: mix($borders_color, $base_color, 60%);
 
 //colors for the backdrop state, derived from the main colors.
 $backdrop_base_color: if($variant =='light', darken($base_color,1%), lighten($base_color,1%));
@@ -42,4 +40,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%);

data/theme/gnome-shell-sass/_drawing.scss

@@ -2,7 +2,7 @@
 
 // generic drawing of more complex things
 
-@function _widget_edge($c:$borders_edge) {
+@function draw_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 _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
+@mixin draw_shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
 //
 // Helper function to stack up to 4 box-shadows;
 //
@@ -31,8 +31,7 @@
 //
 // $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
@@ -45,8 +44,9 @@
   }
   @if $t==focus {
     border-color: if($fc==$selected_bg_color,
-                     $selected_borders_color,
-                     darken($fc,35%));
+              $selected_borders_color,
+              darken($fc,35%));
+    box-shadow: inset 0 0 0 1px $fc;
   }
   @if $t==hover { }
   @if $t==insensitive {
@@ -58,36 +58,39 @@
 
 // buttons
 
-@function _border_color ($c) { @return darken($c,25%); } // colored buttons want
-                                                         // the border form the
-                                                         // base color
+@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 _text_shadow_color ($tc:$fg_color, $bg:$bg_color) {
+@function draw_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 transparentize(white,1-$_lbg/($_lbg*1.3)); }
-  @else { @return transparentize(black,$_lbg*0.8); }
+  $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); }
 }
 
-@function _button_hilight_color($c) {
+@function draw_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 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); }
+  @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); }
 }
 
-@mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
+@mixin draw_button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
 //
 // helper function for the text emboss effect
 //
@@ -96,19 +99,19 @@
 // TODO: this functions needs a way to deal with special cases
 //
 
-  $_shadow: _text_shadow_color($tc, $bg);
+  $shadow: draw_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) {
+@mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_edge, $shadow: $shadow_color) {
 //
 // Button drawing function
 //
@@ -117,6 +120,8 @@
 // $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,
@@ -124,79 +129,68 @@
 // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
 //
 
-  $_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);
+  $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);
 
-  @if $t==normal {
-  //
   // normal button
-  //
-
+  @if $t==normal {
     color: $tc;
-    background-color: $c;
-    border-color: $borders_color;
-    box-shadow: $_button_shadow;
-    text-shadow: 0 1px black;
-    icon-shadow: 0 1px black;
+    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;
   }
-  @if $t==focus {
-  //
+
   // focused button
-  //  
+  @if $t==focus {
     color: $tc;
-    text-shadow: 0 1px black;
-    icon-shadow: 0 1px black;
-    box-shadow: inset 0px 0px 0px 2px $selected_bg_color;
+    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);
     //border-color: $selected_bg_color;
   }
 
+  // hover button
   @else if $t==hover {
-  //
-  // active osd button
-  //
     color: $tc;
-    border-color: $borders_color;
-    background-color: $c;
-    box-shadow: $_button_shadow;
-    text-shadow: 0 1px black;
-    icon-shadow: 0 1px black;
-
+    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;
   }
+
+  // active button
   @else if $t==active {
-  //
-  // active osd button
-  //
     color: $tc;
-    border-color: $borders_color;
-    background-color: $c;
+    background-color: darken($c,3%) !important;
+    border-color: draw_border_color(if($variant == 'light', $c, darken($c,7%)));
     text-shadow: none;
     icon-shadow: none;
     box-shadow: none;
   }
-  @else if $t==insensitive {
 
+  // insensitive button
+  @else if $t==insensitive {
     color: $insensitive_fg_color;
     border-color: $insensitive_borders_color;
-    background-color: $insensitive_bg_color;
+    background-color: $insensitive_bg_color !important;
     box-shadow: none;
     text-shadow: none;
     icon-shadow: none;
   }
-  @else if $t==undecorated {
-  //
+
   // reset
-  //
+  @else if $t==undecorated {
     border-color: transparent;
     background-color: transparent;
     background-image: none;
-
-    @include _shadows(inset 0 1px transparentize(white,1),
-                      $_blank_edge);
-
+    @include draw_shadows(inset 0 1px rgba(255,255,255,0),$blank_edge);
     text-shadow: none;
     icon-shadow: none;
   }
 }
-

data/theme/gnome-shell-sass/_high-contrast-colors.scss

@@ -22,11 +22,10 @@ $destructive_color: darken(#ef2929,10%);
 
 $osd_fg_color: #eeeeec;
 $osd_bg_color: #2e3436;
-$osd_borders_color: transparentize(black, 0.3);
-$osd_outer_borders_color: transparentize(white, 0.9);
+$osd_borders_color: rgba(0,0,0, 0.7);
+$osd_outer_borders_color: rgba(255,255,255, 0.1);
 
-$tooltip_borders_color: $osd_outer_borders_color;
-$shadow_color: transparentize(black, 0.9);
+$shadow_color: rgba(0,0,0, 0.1);
 
 //insensitive state derived colors
 $insensitive_fg_color: mix($fg_color, $bg_color, 50%);

data/theme/gnome-shell-sass/_widgets.scss

@@ -0,0 +1,38 @@
+//
+// 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';

data/theme/gnome-shell-sass/widgets/_app-grid.scss

@@ -0,0 +1,242 @@
+/* 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: $modal_radius * 1.5;
+  border: 1px solid $osd_outer_borders_color;
+  spacing: 12px;
+  background-color: transparentize(darken($osd_bg_color,10%), 0.05);
+
+  & .folder-name-container {
+    padding: 24px 36px 0;
+    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 }
+    }
+  }
+
+  & StButton#vhandle,
+  & StButton#vhandle:hover,
+  & StButton#vhandle:active { background-color: transparent; }
+}
+.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;
+  }
+}

data/theme/gnome-shell-sass/widgets/_app-switcher.scss

@@ -0,0 +1,55 @@
+/* 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;
+  }
+}

data/theme/gnome-shell-sass/widgets/_buttons.scss

@@ -0,0 +1,5 @@
+/* Buttons */
+
+.button {
+  @extend %button; // that's it
+}

data/theme/gnome-shell-sass/widgets/_calendar.scss

@@ -0,0 +1,268 @@
+/* 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);
+  }
+}

data/theme/gnome-shell-sass/widgets/_check-box.scss

@@ -0,0 +1,18 @@
+/* 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"); }
+}

data/theme/gnome-shell-sass/widgets/_corner-ripple.scss

@@ -0,0 +1,24 @@
+/* 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%);
+}

data/theme/gnome-shell-sass/widgets/_dash.scss

@@ -0,0 +1,85 @@
+/* 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;
+    }
+  }
+}
+

data/theme/gnome-shell-sass/widgets/_dialogs.scss

@@ -0,0 +1,169 @@
+/* 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 {
+  width: 28em;
+
+  .modal-dialog-content-box {
+    margin-bottom: 24px;
+  }
+}
+
+.prompt-dialog-password-grid {
+  spacing-rows: 8px;
+  spacing-columns: 4px;
+
+  .prompt-dialog-password-entry {
+    width: auto;
+
+    // 4px (spacing) + 16px (spinner-width)
+    &:ltr { margin-left: 20px; }
+    &:rtl { margin-right: 20px; }
+  }
+}
+
+.prompt-dialog-password-layout {
+  spacing: 8px;
+}
+
+.prompt-dialog-password-entry {
+  width: 20em;
+}
+
+.prompt-dialog-error-label,
+.prompt-dialog-info-label,
+.prompt-dialog-null-label {
+  text-align: center;
+  @include fontsize($base_font_size - 1);
+}
+
+.prompt-dialog-error-label {
+  color: $warning_color;
+}
+
+
+/* Polkit Dialog */
+
+.polkit-dialog-user-layout {
+  text-align: center;
+  spacing: 8px;
+  margin-bottom: 6px;
+
+  .polkit-dialog-user-icon {
+    border-radius: 99px;
+    background-size: contain;
+  }
+  .polkit-dialog-user-root-label { color: $warning_color; }
+}
+
+/* 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;
+}

data/theme/gnome-shell-sass/widgets/_entries.scss

@@ -0,0 +1,27 @@
+/* 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);
+  }
+}

data/theme/gnome-shell-sass/widgets/_hotplug.scss

@@ -0,0 +1,10 @@
+// hotplug
+
+.hotplug-notification-item {
+  @extend %bubble_button;
+}
+
+.hotplug-notification-item-icon {
+  icon-size: 24px;
+  padding: 0 4px;
+}

data/theme/gnome-shell-sass/widgets/_ibus-popup.scss

@@ -0,0 +1,30 @@
+// 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; }

data/theme/gnome-shell-sass/widgets/_keyboard.scss

@@ -0,0 +1,124 @@
+/* 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;
+}

data/theme/gnome-shell-sass/widgets/_login-dialog.scss

@@ -0,0 +1,151 @@
+/* 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%); }
+}

data/theme/gnome-shell-sass/widgets/_looking-glass.scss

@@ -0,0 +1,97 @@
+/* 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;
+}

data/theme/gnome-shell-sass/widgets/_message-list.scss

@@ -0,0 +1,147 @@
+/* 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;
+  }
+}

data/theme/gnome-shell-sass/widgets/_misc.scss

@@ -0,0 +1,67 @@
+// 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 {
+  text-align: center;
+  padding-bottom: 8px;
+  @include fontsize($base_font_size - 1);
+  color: $warning_color;
+}

data/theme/gnome-shell-sass/widgets/_network-dialog.scss

@@ -0,0 +1,56 @@
+/* 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; }

data/theme/gnome-shell-sass/widgets/_notifications.scss

@@ -0,0 +1,90 @@
+/* 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; }
+}

data/theme/gnome-shell-sass/widgets/_osd.scss

@@ -0,0 +1,45 @@
+/* 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;
+}

data/theme/gnome-shell-sass/widgets/_overview.scss

@@ -0,0 +1,10 @@
+/* OVERVIEW */
+
+#overview {
+  spacing: 24px;
+  background-color: transparent;
+}
+
+.overview-controls {
+  padding-bottom: 32px;
+}

data/theme/gnome-shell-sass/widgets/_panel.scss

@@ -0,0 +1,106 @@
+/* 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; }
+}

data/theme/gnome-shell-sass/widgets/_popovers.scss

@@ -0,0 +1,121 @@
+/* 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;
+    }
+  }
+}

data/theme/gnome-shell-sass/widgets/_screen-shield.scss

@@ -0,0 +1,83 @@
+/* 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); }
+  }
+}

data/theme/gnome-shell-sass/widgets/_scrollbars.scss

@@ -0,0 +1,29 @@
+/* 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; }
+  }
+}

data/theme/gnome-shell-sass/widgets/_search-entry.scss

@@ -0,0 +1,35 @@
+// 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;
+  }
+}

data/theme/gnome-shell-sass/widgets/_search-results.scss

@@ -0,0 +1,151 @@
+/* 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%);
+  }
+}

data/theme/gnome-shell-sass/widgets/_slider.scss

@@ -0,0 +1,27 @@
+/* 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; }
+}

data/theme/gnome-shell-sass/widgets/_switches.scss

@@ -0,0 +1,16 @@
+/* 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"));
+  }
+}

data/theme/gnome-shell-sass/widgets/_tiled-previews.scss

@@ -0,0 +1,19 @@
+
+/* 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;
+}

data/theme/gnome-shell-sass/widgets/_window-picker.scss

@@ -0,0 +1,66 @@
+/* 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%);
+  }
+}

data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss

@@ -0,0 +1,72 @@
+/* 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);
+}

data/theme/gnome-shell.scss

@@ -3,3 +3,4 @@ $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";

data/theme/key-enter.svg

@@ -1,109 +1,4 @@
-<?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 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"/>
 </svg>

data/theme/key-hide.svg

@@ -1,114 +1,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-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 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"/>
 </svg>

data/theme/key-layout.svg

@@ -1,129 +1,5 @@
-<?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 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"/>
 </svg>

data/theme/key-shift-latched-uppercase.svg

@@ -1,109 +1,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-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 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"/>
 </svg>

data/theme/key-shift-uppercase.svg

@@ -1,104 +1,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-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 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"/>
 </svg>

data/theme/key-shift.svg

@@ -1,108 +1,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-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 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"/>
 </svg>

data/theme/meson.build

@@ -4,7 +4,39 @@ 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/_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'
 ])
 
 styles = [
@@ -23,3 +55,4 @@ foreach style: styles
                               ],
                               depend_files: theme_sources)
 endforeach
+

js/extensionPrefs/css/application.css

@@ -0,0 +1,11 @@
+.details-button image {
+  transition: 250ms;
+}
+.details-button.expanded:dir(ltr) image {
+  -gtk-icon-transform: rotate(0.25turn);
+}
+.details-button.expanded:dir(rtl) image {
+  -gtk-icon-transform: rotate(-0.25turn);
+}
+
+image.warning { color: @warning_color; }

js/extensionPrefs/main.js

@@ -3,7 +3,7 @@ imports.gi.versions.Gdk = '3.0';
 imports.gi.versions.Gtk = '3.0';
 
 const Gettext = imports.gettext;
-const { Gdk, GLib, Gio, GObject, Gtk, Pango } = imports.gi;
+const { Gdk, GLib, Gio, GObject, Gtk } = imports.gi;
 const Format = imports.format;
 
 const _ = Gettext.gettext;
@@ -12,7 +12,7 @@ const Config = imports.misc.config;
 const ExtensionUtils = imports.misc.extensionUtils;
 const { loadInterfaceXML } = imports.misc.fileUtils;
 
-const { ExtensionState } = ExtensionUtils;
+const { ExtensionState, ExtensionType } = ExtensionUtils;
 
 const GnomeShellIface = loadInterfaceXML('org.gnome.Shell.Extensions');
 const GnomeShellProxy = Gio.DBusProxy.makeProxyWrapper(GnomeShellIface);
@@ -28,26 +28,144 @@ class Application extends Gtk.Application {
     _init() {
         GLib.set_prgname('gnome-shell-extension-prefs');
         super._init({
-            application_id: 'org.gnome.shell.ExtensionPrefs',
+            application_id: 'org.gnome.Extensions',
             flags: Gio.ApplicationFlags.HANDLES_COMMAND_LINE,
         });
-
-        this._startupUuid = null;
-        this._loaded = false;
-        this._skipMainWindow = false;
-        this._shellProxy = null;
     }
 
     get shellProxy() {
         return this._shellProxy;
     }
 
-    _showPrefs(uuid) {
-        let row = this._extensionSelector.get_children().find(c => {
-            return c.uuid === uuid && c.hasPrefs;
+    vfunc_activate() {
+        this._shellProxy.CheckForUpdatesRemote();
+        this._window.present();
+    }
+
+    vfunc_startup() {
+        super.vfunc_startup();
+
+        let provider = new Gtk.CssProvider();
+        let uri = 'resource:///org/gnome/shell/css/application.css';
+        try {
+            provider.load_from_file(Gio.File.new_for_uri(uri));
+        } catch (e) {
+            logError(e, 'Failed to add application style');
+        }
+        Gtk.StyleContext.add_provider_for_screen(Gdk.Screen.get_default(),
+            provider,
+            Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+
+        this._shellProxy = new GnomeShellProxy(Gio.DBus.session, 'org.gnome.Shell', '/org/gnome/Shell');
+        this._window = new ExtensionsWindow({ application: this });
+    }
+
+    vfunc_command_line(commandLine) {
+        let args = commandLine.get_arguments();
+
+        if (args.length) {
+            let uuid = args[0];
+
+            // Strip off "extension:///" prefix which fakes a URI, if it exists
+            uuid = stripPrefix(uuid, 'extension:///');
+
+            this._window.openPrefs(uuid);
+        } else {
+            this.activate();
+        }
+        return 0;
+    }
+});
+
+var ExtensionsWindow = GObject.registerClass({
+    GTypeName: 'ExtensionsWindow',
+    Template: 'resource:///org/gnome/shell/ui/extensions-window.ui',
+    InternalChildren: [
+        'userList',
+        'systemList',
+        'killSwitch',
+        'mainBox',
+        'mainStack',
+        'scrolledWindow',
+        'updatesBar',
+        'updatesLabel',
+    ],
+}, class ExtensionsWindow extends Gtk.ApplicationWindow {
+    _init(params) {
+        super._init(params);
+
+        this._startupUuid = null;
+        this._loaded = false;
+        this._prefsDialog = null;
+        this._updatesCheckId = 0;
+
+        this._mainBox.set_focus_vadjustment(this._scrolledWindow.vadjustment);
+
+        let action;
+        action = new Gio.SimpleAction({ name: 'show-about' });
+        action.connect('activate', this._showAbout.bind(this));
+        this.add_action(action);
+
+        action = new Gio.SimpleAction({ name: 'logout' });
+        action.connect('activate', this._logout.bind(this));
+        this.add_action(action);
+
+        this._settings = new Gio.Settings({ schema_id: 'org.gnome.shell' });
+        this._settings.bind('disable-user-extensions',
+            this._killSwitch, 'active',
+            Gio.SettingsBindFlags.DEFAULT | Gio.SettingsBindFlags.INVERT_BOOLEAN);
+
+        this._userList.set_sort_func(this._sortList.bind(this));
+        this._userList.set_header_func(this._updateHeader.bind(this));
+
+        this._systemList.set_sort_func(this._sortList.bind(this));
+        this._systemList.set_header_func(this._updateHeader.bind(this));
+
+        this._shellProxy.connectSignal('ExtensionStateChanged',
+            this._onExtensionStateChanged.bind(this));
+
+        this._scanExtensions();
+    }
+
+    get _shellProxy() {
+        return this.application.shellProxy;
+    }
+
+    uninstall(uuid) {
+        let row = this._findExtensionRow(uuid);
+
+        let dialog = new Gtk.MessageDialog({
+            transient_for: this,
+            modal: true,
+            text: _('Remove “%s”?').format(row.name),
+            secondary_text: _('If you remove the extension, you need to return to download it if you want to enable it again'),
         });
 
-        if (!row)
+        dialog.add_button(_('Cancel'), Gtk.ResponseType.CANCEL);
+        dialog.add_button(_('Remove'), Gtk.ResponseType.ACCEPT)
+            .get_style_context().add_class('destructive-action');
+
+        dialog.connect('response', (dlg, response) => {
+            if (response === Gtk.ResponseType.ACCEPT)
+                this._shellProxy.UninstallExtensionRemote(uuid);
+            dialog.destroy();
+        });
+        dialog.present();
+    }
+
+    openPrefs(uuid) {
+        if (!this._loaded)
+            this._startupUuid = uuid;
+        else if (!this._showPrefs(uuid))
+            this.present();
+    }
+
+    _showPrefs(uuid) {
+        if (this._prefsDialog)
+            return false;
+
+        let row = this._findExtensionRow(uuid);
+        if (!row || !row.hasPrefs)
             return false;
 
         let widget;
@@ -58,33 +176,73 @@ class Application extends Gtk.Application {
             widget = this._buildErrorUI(row, e);
         }
 
-        let dialog = new Gtk.Window({
-            modal: !this._skipMainWindow,
+        this._prefsDialog = new Gtk.Window({
+            application: this.application,
+            default_width: 600,
+            default_height: 400,
+            modal: this.visible,
             type_hint: Gdk.WindowTypeHint.DIALOG,
+            window_position: Gtk.WindowPosition.CENTER,
         });
-        dialog.set_titlebar(new Gtk.HeaderBar({
+
+        this._prefsDialog.set_titlebar(new Gtk.HeaderBar({
             show_close_button: true,
             title: row.name,
             visible: true,
         }));
 
-        if (this._skipMainWindow) {
-            this.add_window(dialog);
-            if (this._window)
-                this._window.destroy();
-            this._window = dialog;
-            this._window.window_position = Gtk.WindowPosition.CENTER;
-        } else {
-            dialog.transient_for = this._window;
-        }
+        if (this.visible)
+            this._prefsDialog.transient_for = this;
 
-        dialog.set_default_size(600, 400);
-        dialog.add(widget);
-        dialog.show();
+        this._prefsDialog.connect('destroy', () => {
+            this._prefsDialog = null;
+
+            if (!this.visible)
+                this.destroy();
+        });
+
+        this._prefsDialog.add(widget);
+        this._prefsDialog.show();
 
         return true;
     }
 
+    _showAbout() {
+        let aboutDialog = new Gtk.AboutDialog({
+            authors: [
+                'Florian Müllner <fmuellner@gnome.org>',
+                'Jasper St. Pierre <jstpierre@mecheye.net>',
+                'Didier Roche <didrocks@ubuntu.com>',
+            ],
+            translator_credits: _('translator-credits'),
+            program_name: _('Extensions'),
+            comments: _('Manage your GNOME Extensions'),
+            license_type: Gtk.License.GPL_2_0,
+            logo_icon_name: 'org.gnome.Extensions',
+            version: Config.PACKAGE_VERSION,
+
+            transient_for: this,
+            modal: true,
+        });
+        aboutDialog.present();
+    }
+
+    _logout() {
+        this.application.get_dbus_connection().call(
+            'org.gnome.SessionManager',
+            '/org/gnome/SessionManager',
+            'org.gnome.SessionManager',
+            'Logout',
+            new GLib.Variant('(u)', [0]),
+            null,
+            Gio.DBusCallFlags.NONE,
+            -1,
+            null,
+            (o, res) => {
+                o.call_finish(res);
+            });
+    }
+
     _buildErrorUI(row, exc) {
         let scroll = new Gtk.ScrolledWindow({
             hscrollbar_policy: Gtk.PolicyType.NEVER,
@@ -179,7 +337,7 @@ class Application extends Gtk.Application {
             label: _("Homepage"),
             tooltip_text: _("Visit extension homepage"),
             no_show_all: true,
-            visible: row.url != null,
+            visible: row.url !== '',
         });
         toolbar.add(urlButton);
 
@@ -200,47 +358,6 @@ class Application extends Gtk.Application {
         return scroll;
     }
 
-    _buildUI() {
-        this._window = new Gtk.ApplicationWindow({ application: this,
-                                                   window_position: Gtk.WindowPosition.CENTER });
-
-        this._window.set_default_size(800, 500);
-
-        this._titlebar = new Gtk.HeaderBar({ show_close_button: true,
-                                             title: _("Shell Extensions") });
-        this._window.set_titlebar(this._titlebar);
-
-        let killSwitch = new Gtk.Switch({ valign: Gtk.Align.CENTER });
-        this._titlebar.pack_end(killSwitch);
-
-        this._settings = new Gio.Settings({ schema_id: 'org.gnome.shell' });
-        this._settings.bind('disable-user-extensions', killSwitch, 'active',
-                            Gio.SettingsBindFlags.DEFAULT |
-                            Gio.SettingsBindFlags.INVERT_BOOLEAN);
-
-        this._mainStack = new Gtk.Stack({
-            transition_type: Gtk.StackTransitionType.CROSSFADE,
-        });
-        this._window.add(this._mainStack);
-
-        let scroll = new Gtk.ScrolledWindow({ hscrollbar_policy: Gtk.PolicyType.NEVER });
-
-        this._extensionSelector = new Gtk.ListBox({ selection_mode: Gtk.SelectionMode.NONE });
-        this._extensionSelector.set_sort_func(this._sortList.bind(this));
-        this._extensionSelector.set_header_func(this._updateHeader.bind(this));
-
-        scroll.add(this._extensionSelector);
-
-        this._mainStack.add_named(scroll, 'listing');
-        this._mainStack.add_named(new EmptyPlaceholder(), 'placeholder');
-
-        this._shellProxy = new GnomeShellProxy(Gio.DBus.session, 'org.gnome.Shell', '/org/gnome/Shell');
-        this._shellProxy.connectSignal('ExtensionStateChanged',
-            this._onExtensionStateChanged.bind(this));
-
-        this._window.show_all();
-    }
-
     _sortList(row1, row2) {
         return row1.name.localeCompare(row2.name);
     }
@@ -254,13 +371,26 @@ class Application extends Gtk.Application {
     }
 
     _findExtensionRow(uuid) {
-        return this._extensionSelector.get_children().find(c => c.uuid === uuid);
+        return [
+            ...this._userList.get_children(),
+            ...this._systemList.get_children(),
+        ].find(c => c.uuid === uuid);
     }
 
     _onExtensionStateChanged(proxy, senderName, [uuid, newState]) {
         let extension = ExtensionUtils.deserializeExtension(newState);
         let row = this._findExtensionRow(uuid);
 
+        this._queueUpdatesCheck();
+
+        // the extension's type changed; remove the corresponding row
+        // and reset the variable to null so that we create a new row
+        // below and add it to the appropriate list
+        if (row && row.type !== extension.type) {
+            row.destroy();
+            row = null;
+        }
+
         if (row) {
             if (extension.state === ExtensionState.UNINSTALLED)
                 row.destroy();
@@ -274,7 +404,6 @@ class Application extends Gtk.Application {
             if (e) {
                 if (e instanceof Gio.DBusError) {
                     log(`Failed to connect to shell proxy: ${e}`);
-                    this._mainStack.add_named(new NoShellPlaceholder(), 'noshell');
                     this._mainStack.visible_child_name = 'noshell';
                 } else {
                     throw e;
@@ -292,58 +421,53 @@ class Application extends Gtk.Application {
 
     _addExtensionRow(extension) {
         let row = new ExtensionRow(extension);
-
-        row.prefsButton.connect('clicked', () => {
-            this._showPrefs(row.uuid);
-        });
-
         row.show_all();
-        this._extensionSelector.add(row);
+
+        if (row.type === ExtensionType.PER_USER)
+            this._userList.add(row);
+        else
+            this._systemList.add(row);
+    }
+
+    _queueUpdatesCheck() {
+        if (this._updatesCheckId)
+            return;
+
+        this._updatesCheckId = GLib.timeout_add_seconds(
+            GLib.PRIORITY_DEFAULT, 1, () => {
+                this._checkUpdates();
+
+                this._updatesCheckId = 0;
+                return GLib.SOURCE_REMOVE;
+            });
+    }
+
+    _checkUpdates() {
+        let nUpdates = this._userList.get_children().filter(c => c.hasUpdate).length;
+
+        this._updatesLabel.label = Gettext.ngettext(
+            '%d extension will be updated on next login.',
+            '%d extensions will be updated on next login.',
+            nUpdates).format(nUpdates);
+        this._updatesBar.visible = nUpdates > 0;
     }
 
     _extensionsLoaded() {
-        if (this._extensionSelector.get_children().length > 0)
-            this._mainStack.visible_child_name = 'listing';
+        this._userList.visible = this._userList.get_children().length > 0;
+        this._systemList.visible = this._systemList.get_children().length > 0;
+
+        if (this._userList.visible || this._systemList.visible)
+            this._mainStack.visible_child_name = 'main';
         else
             this._mainStack.visible_child_name = 'placeholder';
 
+        this._checkUpdates();
+
         if (this._startupUuid)
             this._showPrefs(this._startupUuid);
         this._startupUuid = null;
-        this._skipMainWindow = false;
         this._loaded = true;
     }
-
-    vfunc_activate() {
-        this._window.present();
-    }
-
-    vfunc_startup() {
-        super.vfunc_startup();
-
-        this._buildUI();
-        this._scanExtensions();
-    }
-
-    vfunc_command_line(commandLine) {
-        this.activate();
-        let args = commandLine.get_arguments();
-
-        if (args.length) {
-            let uuid = args[0];
-
-            this._skipMainWindow = true;
-
-            // Strip off "extension:///" prefix which fakes a URI, if it exists
-            uuid = stripPrefix(uuid, "extension:///");
-
-            if (!this._loaded)
-                this._startupUuid = uuid;
-            else if (!this._showPrefs(uuid))
-                this._skipMainWindow = false;
-        }
-        return 0;
-    }
 });
 
 var Expander = GObject.registerClass({
@@ -445,113 +569,19 @@ var Expander = GObject.registerClass({
     }
 });
 
-var EmptyPlaceholder = GObject.registerClass(
-class EmptyPlaceholder extends Gtk.Box {
-    _init() {
-        super._init({
-            orientation: Gtk.Orientation.VERTICAL,
-            spacing: 6,
-            margin: 32,
-        });
-
-        let image = new Gtk.Image({
-            icon_name: 'application-x-addon-symbolic',
-            pixel_size: 96,
-            visible: true,
-            vexpand: true,
-            valign: Gtk.Align.END,
-        });
-        image.get_style_context().add_class(Gtk.STYLE_CLASS_DIM_LABEL);
-        this.add(image);
-
-        let label = new Gtk.Label({
-            label: `<b><span size="x-large">${_("No Extensions Installed")}</span></b>`,
-            use_markup: true,
-            visible: true,
-        });
-        label.get_style_context().add_class(Gtk.STYLE_CLASS_DIM_LABEL);
-        this.add(label);
-
-        let appInfo = Gio.DesktopAppInfo.new('org.gnome.Software.desktop');
-
-        let desc = new Gtk.Label({
-            label: _("Extensions can be installed through Software or <a href=\"https://extensions.gnome.org\">extensions.gnome.org</a>."),
-            use_markup: true,
-            wrap: true,
-            justify: Gtk.Justification.CENTER,
-            visible: true,
-            max_width_chars: 50,
-            hexpand: true,
-            vexpand: appInfo == null,
-            halign: Gtk.Align.CENTER,
-            valign: Gtk.Align.START,
-        });
-        this.add(desc);
-
-        if (appInfo) {
-            let button = new Gtk.Button({
-                label: _("Browse in Software"),
-                image: new Gtk.Image({
-                    icon_name: "org.gnome.Software-symbolic",
-                }),
-                always_show_image: true,
-                margin_top: 12,
-                visible: true,
-                halign: Gtk.Align.CENTER,
-                valign: Gtk.Align.START,
-                vexpand: true,
-            });
-            this.add(button);
-
-            button.connect('clicked', w => {
-                let context = w.get_display().get_app_launch_context();
-                appInfo.launch([], context);
-            });
-        }
-    }
-});
-
-var NoShellPlaceholder = GObject.registerClass(
-class NoShellPlaceholder extends Gtk.Box {
-    _init() {
-        super._init({
-            orientation: Gtk.Orientation.VERTICAL,
-            spacing: 12,
-            margin: 100,
-            margin_bottom: 60,
-        });
-
-        let label = new Gtk.Label({
-            label: '<span size="x-large">%s</span>'.format(
-                _("Something’s gone wrong")),
-            use_markup: true,
-        });
-        label.get_style_context().add_class(Gtk.STYLE_CLASS_DIM_LABEL);
-        this.add(label);
-
-        label = new Gtk.Label({
-            label: _("We’re very sorry, but it was not possible to get the list of installed extensions. Make sure you are logged into GNOME and try again."),
-            justify: Gtk.Justification.CENTER,
-            wrap: true,
-        });
-        this.add(label);
-
-        this.show_all();
-    }
-});
-
-var DescriptionLabel = GObject.registerClass(
-class DescriptionLabel extends Gtk.Label {
-    vfunc_get_preferred_height_for_width(width) {
-        // Hack: Request the maximum height allowed by the line limit
-        if (this.lines > 0)
-            return super.vfunc_get_preferred_height_for_width(0);
-        return super.vfunc_get_preferred_height_for_width(width);
-    }
-});
-
-var ExtensionRow = GObject.registerClass(
-class ExtensionRow extends Gtk.ListBoxRow {
+var ExtensionRow = GObject.registerClass({
+    GTypeName: 'ExtensionRow',
+    Template: 'resource:///org/gnome/shell/ui/extension-row.ui',
+    InternalChildren: [
+        'nameLabel',
+        'descriptionLabel',
+        'versionLabel',
+        'authorLabel',
+        'updatesIcon',
+        'revealButton',
+        'revealer',
+    ],
+}, class ExtensionRow extends Gtk.ListBoxRow {
     _init(extension) {
         super._init();
 
@@ -559,9 +589,67 @@ class ExtensionRow extends Gtk.ListBoxRow {
         this._extension = extension;
         this._prefsModule = null;
 
-        this.connect('destroy', this._onDestroy.bind(this));
+        this._actionGroup = new Gio.SimpleActionGroup();
+        this.insert_action_group('row', this._actionGroup);
 
-        this._buildUI();
+        let action;
+        action = new Gio.SimpleAction({
+            name: 'show-prefs',
+            enabled: this.hasPrefs,
+        });
+        action.connect('activate', () => this.get_toplevel().openPrefs(this.uuid));
+        this._actionGroup.add_action(action);
+
+        action = new Gio.SimpleAction({
+            name: 'show-url',
+            enabled: this.url !== '',
+        });
+        action.connect('activate', () => {
+            Gio.AppInfo.launch_default_for_uri(
+                this.url, this.get_display().get_app_launch_context());
+        });
+        this._actionGroup.add_action(action);
+
+        action = new Gio.SimpleAction({
+            name: 'uninstall',
+            enabled: this.type === ExtensionType.PER_USER,
+        });
+        action.connect('activate', () => this.get_toplevel().uninstall(this.uuid));
+        this._actionGroup.add_action(action);
+
+        action = new Gio.SimpleAction({
+            name: 'enabled',
+            state: new GLib.Variant('b', false),
+        });
+        action.connect('activate', () => {
+            let state = action.get_state();
+            action.change_state(new GLib.Variant('b', !state.get_boolean()));
+        });
+        action.connect('change-state', (a, state) => {
+            if (state.get_boolean())
+                this._app.shellProxy.EnableExtensionRemote(this.uuid);
+            else
+                this._app.shellProxy.DisableExtensionRemote(this.uuid);
+        });
+        this._actionGroup.add_action(action);
+
+        let name = GLib.markup_escape_text(this.name, -1);
+        this._nameLabel.label = name;
+
+        let desc = this._extension.metadata.description.split('\n')[0];
+        this._descriptionLabel.label = desc;
+
+        this._revealButton.connect('clicked', () => {
+            this._revealer.reveal_child = !this._revealer.reveal_child;
+        });
+        this._revealer.connect('notify::reveal-child', () => {
+            if (this._revealer.reveal_child)
+                this._revealButton.get_style_context().add_class('expanded');
+            else
+                this._revealButton.get_style_context().remove_class('expanded');
+        });
+
+        this.connect('destroy', this._onDestroy.bind(this));
 
         this._extensionStateChangedId = this._app.shellProxy.connectSignal(
             'ExtensionStateChanged', (p, sender, [uuid, newState]) => {
@@ -569,14 +657,9 @@ class ExtensionRow extends Gtk.ListBoxRow {
                     return;
 
                 this._extension = ExtensionUtils.deserializeExtension(newState);
-                let state = this._extension.state == ExtensionState.ENABLED;
-
-                this._switch.block_signal_handler(this._notifyActiveId);
-                this._switch.state = state;
-                this._switch.unblock_signal_handler(this._notifyActiveId);
-
-                this._switch.sensitive = this._canToggle();
+                this._updateState();
             });
+        this._updateState();
     }
 
     get uuid() {
@@ -591,8 +674,40 @@ class ExtensionRow extends Gtk.ListBoxRow {
         return this._extension.hasPrefs;
     }
 
+    get hasUpdate() {
+        return this._extension.hasUpdate || false;
+    }
+
+    get type() {
+        return this._extension.type;
+    }
+
+    get creator() {
+        return this._extension.metadata.creator || '';
+    }
+
     get url() {
-        return this._extension.metadata.url;
+        return this._extension.metadata.url || '';
+    }
+
+    get version() {
+        return this._extension.metadata.version || '';
+    }
+
+    _updateState() {
+        let state = this._extension.state === ExtensionState.ENABLED;
+
+        let action = this._actionGroup.lookup('enabled');
+        action.set_state(new GLib.Variant('b', state));
+        action.enabled = this._canToggle();
+
+        this._updatesIcon.visible = this.hasUpdate;
+
+        this._versionLabel.label = `${this.version}`;
+        this._versionLabel.visible = this.version !== '';
+
+        this._authorLabel.label = `${this.creator}`;
+        this._authorLabel.visible = this.creator !== '';
     }
 
     _onDestroy() {
@@ -604,54 +719,6 @@ class ExtensionRow extends Gtk.ListBoxRow {
         this._extensionStateChangedId = 0;
     }
 
-    _buildUI() {
-        let hbox = new Gtk.Box({ orientation: Gtk.Orientation.HORIZONTAL,
-                                 hexpand: true, margin_end: 24, spacing: 24,
-                                 margin: 12 });
-        this.add(hbox);
-
-        let vbox = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL,
-                                 spacing: 6, hexpand: true });
-        hbox.add(vbox);
-
-        let name = GLib.markup_escape_text(this.name, -1);
-        let label = new Gtk.Label({ label: '<b>' + name + '</b>',
-                                    use_markup: true,
-                                    halign: Gtk.Align.START });
-        vbox.add(label);
-
-        let desc = this._extension.metadata.description.split('\n')[0];
-        label = new DescriptionLabel({ label: desc, wrap: true, lines: 2,
-                                       ellipsize: Pango.EllipsizeMode.END,
-                                       xalign: 0, yalign: 0 });
-        vbox.add(label);
-
-        let button = new Gtk.Button({ valign: Gtk.Align.CENTER,
-                                      visible: this.hasPrefs,
-                                      no_show_all: true });
-        button.set_image(new Gtk.Image({ icon_name: 'emblem-system-symbolic',
-                                         icon_size: Gtk.IconSize.BUTTON,
-                                         visible: true }));
-        button.get_style_context().add_class('circular');
-        hbox.add(button);
-
-        this.prefsButton = button;
-
-        this._switch = new Gtk.Switch({
-            valign: Gtk.Align.CENTER,
-            sensitive: this._canToggle(),
-            state: this._extension.state === ExtensionState.ENABLED,
-        });
-        this._notifyActiveId = this._switch.connect('notify::active', () => {
-            if (this._switch.active)
-                this._app.shellProxy.EnableExtensionRemote(this.uuid);
-            else
-                this._app.shellProxy.DisableExtensionRemote(this.uuid);
-        });
-        this._switch.connect('state-set', () => true);
-        hbox.add(this._switch);
-    }
-
     _canToggle() {
         return this._extension.canChange;
     }
@@ -692,8 +759,5 @@ function initEnvironment() {
 function main(argv) {
     initEnvironment();
 
-    Gettext.bindtextdomain(Config.GETTEXT_PACKAGE, Config.LOCALEDIR);
-    Gettext.textdomain(Config.GETTEXT_PACKAGE);
-
     new Application().run(argv);
 }

js/extensionPrefs/ui/extension-row.ui

@@ -0,0 +1,218 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated with glade 3.22.0 -->
+<interface>
+  <requires lib="gtk+" version="3.20"/>
+  <template class="ExtensionRow" parent="GtkListBoxRow">
+    <property name="visible">True</property>
+    <property name="activatable">False</property>
+    <child>
+      <object class="GtkGrid">
+        <property name="visible">True</property>
+        <property name="margin">12</property>
+        <property name="column_spacing">12</property>
+        <child>
+          <object class="GtkLabel" id="nameLabel">
+            <property name="visible">True</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkImage" id="updatesIcon">
+            <property name="no_show_all">True</property>
+            <property name="icon_name">software-update-available-symbolic</property>
+            <style>
+              <class name="warning"/>>
+            </style>
+          </object>
+        </child>
+        <child>
+          <object class="GtkLabel">
+            <property name="visible">True</property>
+            <property name="hexpand">True</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton" id="prefsButton">
+            <property name="no_show_all">True</property>
+            <property name="visible"
+                      bind-source="prefsButton"
+                      bind-property="sensitive"
+                      bind-flags="sync-create"/>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="valign">center</property>
+            <property name="action-name">row.show-prefs</property>
+            <style>
+              <class name="circular"/>>
+              <class name="image-button"/>>
+            </style>
+            <child>
+              <object class="GtkImage">
+                <property name="visible">True</property>
+                <property name="icon_name">emblem-system-symbolic</property>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="GtkSwitch">
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="valign">center</property>
+            <property name="action-name">row.enabled</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkSeparator">
+            <property name="visible">True</property>
+          </object>
+        </child>
+         <child>
+          <object class="GtkButton" id="revealButton">
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="valign">center</property>
+            <style>
+              <class name="details-button"/>
+              <class name="image-button"/>
+              <class name="flat"/>
+            </style>
+            <child>
+              <object class="GtkImage">
+                <property name="visible">True</property>
+                <property name="icon_name">pan-end-symbolic</property>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="GtkRevealer" id="revealer">
+            <property name="visible">True</property>
+            <child>
+              <object class="GtkGrid">
+                <property name="visible">True</property>
+                <property name="margin_top">12</property>
+                <property name="row_spacing">6</property>
+                <property name="column_spacing">12</property>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="visible">True</property>
+                    <property name="label" translatable="yes">Description</property>
+                    <property name="xalign">0</property>
+                    <style>
+                      <class name="dim-label"/>
+                    </style>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkLabel" id="descriptionLabel">
+                    <property name="visible">True</property>
+                    <property name="ellipsize">end</property>
+                    <property name="max_width_chars">60</property>
+                    <property name="xalign">0</property>
+                    <property name="yalign">0</property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="visible"
+                              bind-source="versionLabel"
+                              bind-property="visible"
+                              bind-flags="sync-create"/>
+                    <property name="no_show_all">True</property>
+                    <property name="label" translatable="yes">Version</property>
+                    <property name="xalign">0</property>
+                    <style>
+                      <class name="dim-label"/>
+                    </style>
+                  </object>
+                  <packing>
+                    <property name="left_attach">0</property>
+                    <property name="top_attach">1</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkLabel" id="versionLabel">
+                    <property name="no_show_all">True</property>
+                    <property name="xalign">0</property>
+                  </object>
+                  <packing>
+                    <property name="left_attach">1</property>
+                    <property name="top_attach">1</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="visible"
+                              bind-source="authorLabel"
+                              bind-property="visible"
+                              bind-flags="sync-create"/>
+                    <property name="no_show_all">True</property>
+                    <property name="label" translatable="yes">Author</property>
+                    <property name="xalign">0</property>
+                    <style>
+                      <class name="dim-label"/>
+                    </style>
+                  </object>
+                  <packing>
+                    <property name="left_attach">0</property>
+                    <property name="top_attach">2</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkLabel" id="authorLabel">
+                    <property name="no_show_all">True</property>
+                    <property name="xalign">0</property>
+                  </object>
+                  <packing>
+                    <property name="left_attach">1</property>
+                    <property name="top_attach">2</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkButton">
+                    <property name="visible">True</property>
+                    <property name="label" translatable="yes">Website</property>
+                    <property name="action_name">row.show-url</property>
+                    <property name="valign">end</property>
+                    <property name="margin-top">12</property>
+                  </object>
+                  <packing>
+                    <property name="left_attach">0</property>
+                    <property name="top_attach">3</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkButton" id="removeButton">
+                    <property name="visible"
+                              bind-source="removeButton"
+                              bind-property="sensitive"
+                              bind-flags="sync-create"/>
+                    <property name="no_show_all">True</property>
+                    <property name="label" translatable="yes">Remove…</property>
+                    <property name="action_name">row.uninstall</property>
+                    <property name="hexpand">True</property>
+                    <property name="halign">end</property>
+                    <property name="valign">end</property>
+                    <style>
+                      <class name="destructive-action"/>
+                    </style>
+                  </object>
+                  <packing>
+                    <property name="left_attach">1</property>
+                    <property name="top_attach">3</property>
+                  </packing>
+                </child>
+              </object>
+            </child>
+          </object>
+          <packing>
+            <property name="left_attach">0</property>
+            <property name="top_attach">1</property>
+            <property name="width">7</property>
+          </packing>
+        </child>
+      </object>
+    </child>
+  </template>
+</interface>

js/extensionPrefs/ui/extensions-window.ui

@@ -0,0 +1,305 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated with glade 3.22.0 -->
+<interface>
+  <requires lib="gtk+" version="3.20"/>
+  <menu id="primary-menu">
+    <section>
+      <item>
+        <attribute name="label" translatable="yes">Help</attribute>
+        <attribute name="action">win.show-help</attribute>
+      </item>
+      <item>
+        <attribute name="label" translatable="yes">About Extensions</attribute>
+        <attribute name="action">win.show-about</attribute>
+      </item>
+    </section>
+  </menu>
+  <object class="GtkPopover" id="infoPopover">
+    <child>
+      <object class="GtkBox">
+        <property name="visible">True</property>
+        <property name="orientation">vertical</property>
+        <property name="margin">12</property>
+        <property name="spacing">6</property>
+        <child>
+          <object class="GtkLabel">
+            <property name="visible">True</property>
+            <property name="label" translatable="yes">To find and add extensions, visit &lt;a href="https://extensions.gnome.org"&gt;extensions.gnome.org&lt;/a&gt;.</property>
+            <property name="use_markup">True</property>
+            <property name="xalign">0</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkLabel">
+            <property name="visible">True</property>
+            <property name="label" translatable="yes">Warning</property>
+            <property name="xalign">0</property>
+            <property name="margin_top">6</property>
+            <attributes>
+              <attribute name="weight" value="bold"/>
+            </attributes>
+          </object>
+        </child>
+        <child>
+          <object class="GtkLabel">
+            <property name="visible">True</property>
+            <property name="label" translatable="yes">Extensions can cause system issues, including performance problems. If you encounter problems with your system, it is recommended to disable all extensions.</property>
+            <property name="wrap">True</property>
+            <property name="max_width_chars">40</property>
+            <property name="xalign">0</property>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+  <template class="ExtensionsWindow" parent="GtkApplicationWindow">
+    <property name="default_width">800</property>
+    <property name="default_height">500</property>
+    <child type="titlebar">
+      <object class="GtkHeaderBar">
+        <property name="visible">True</property>
+        <property name="title" translatable="yes">Extensions</property>
+        <property name="show_close_button">True</property>
+        <child>
+          <object class="GtkMenuButton">
+            <property name="visible">True</property>
+            <property name="popover">infoPopover</property>
+            <child>
+              <object class="GtkImage">
+                <property name="visible">True</property>
+                <property name="icon_name">dialog-information-symbolic</property>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="GtkMenuButton" id="menuButton">
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="menu_model">primary-menu</property>
+            <child>
+              <object class="GtkImage">
+                <property name="visible">True</property>
+                <property name="icon_name">open-menu-symbolic</property>
+              </object>
+            </child>
+          </object>
+          <packing>
+            <property name="pack_type">end</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkSwitch" id="killSwitch">
+            <property name="visible">True</property>
+          </object>
+          <packing>
+            <property name="pack_type">end</property>
+          </packing>
+        </child>
+      </object>
+    </child>
+    <child>
+      <object class="GtkBox">
+        <property name="visible">True</property>
+        <property name="orientation">vertical</property>
+        <child>
+          <object class="GtkStack" id="mainStack">
+            <property name="visible">True</property>
+            <property name="transition_type">crossfade</property>
+            <property name="vexpand">True</property>
+            <child>
+              <object class="GtkScrolledWindow" id="scrolledWindow">
+                <property name="visible">True</property>
+                <property name="hscrollbar_policy">never</property>
+                <child>
+                  <object class="GtkViewport">
+                    <property name="visible">True</property>
+                    <child>
+                      <object class="GtkBox" id="mainBox">
+                        <property name="visible">True</property>
+                        <property name="orientation">vertical</property>
+                        <property name="halign">center</property>
+                        <property name="margin">36</property>
+                        <property name="spacing">12</property>
+                        <child>
+                          <object class="GtkLabel">
+                            <property name="visible"
+                                      bind-source="userList"
+                                      bind-property="visible"
+                                      bind-flags="sync-create"/>
+                            <property name="halign">start</property>
+                            <property name="hexpand">True</property>
+                            <property name="label" translatable="yes">Manually Installed</property>
+                            <attributes>
+                              <attribute name="weight" value="bold"/>
+                            </attributes>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkListBox" id="userList">
+                            <property name="visible">True</property>
+                            <property name="selection_mode">none</property>
+                            <property name="margin_bottom">24</property>
+                            <style>
+                              <class name="frame"/>
+                            </style>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkLabel">
+                            <property name="visible"
+                                      bind-source="systemList"
+                                      bind-property="visible"
+                                      bind-flags="sync-create"/>
+                            <property name="halign">start</property>
+                            <property name="hexpand">True</property>
+                            <property name="label" translatable="yes">Built-In</property>
+                            <attributes>
+                              <attribute name="weight" value="bold"/>
+                            </attributes>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkListBox" id="systemList">
+                            <property name="visible">True</property>
+                            <property name="selection_mode">none</property>
+                            <style>
+                              <class name="frame"/>
+                            </style>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+              <packing>
+                <property name="name">main</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkBox">
+                <property name="visible">True</property>
+                <property name="orientation">vertical</property>
+                <property name="margin">32</property>
+                <property name="spacing">6</property>
+                <property name="valign">center</property>
+                <child>
+                  <object class="GtkImage">
+                    <property name="visible">True</property>
+                    <property name="pixel_size">96</property>
+                    <property name="icon_name">org.gnome.Extensions-symbolic</property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="visible">True</property>
+                    <property name="label" translatable="yes">No Installed Extensions</property>
+                    <attributes>
+                      <attribute name="weight" value="bold"/>
+                      <attribute name="scale" value="1.44"/>
+                    </attributes>
+                  </object>
+                </child>
+              </object>
+              <packing>
+                <property name="name">placeholder</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkBox">
+                <property name="visible">True</property>
+                <property name="margin_left">100</property>
+                <property name="margin_right">100</property>
+                <property name="margin_top">100</property>
+                <property name="margin_bottom">60</property>
+                <property name="orientation">vertical</property>
+                <property name="spacing">12</property>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="visible">True</property>
+                    <property name="label" translatable="yes">Something’s gone wrong</property>
+                    <attributes>
+                      <attribute name="scale" value="1.44"/>
+                    </attributes>
+                    <style>
+                      <class name="dim-label"/>
+                    </style>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="visible">True</property>
+                    <property name="label" translatable="yes">We’re very sorry, but it was not possible to get the list of installed extensions. Make sure you are logged into GNOME and try again.</property>
+                    <property name="justify">center</property>
+                    <property name="wrap">True</property>
+                    <style>
+                      <class name="dim-label"/>
+                    </style>
+                  </object>
+                </child>
+              </object>
+              <packing>
+                <property name="name">noshell</property>
+              </packing>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="GtkActionBar" id="updatesBar">
+            <property name="no_show_all">True</property>
+            <child>
+              <object class="GtkImage">
+                <property name="visible">True</property>
+                <property name="pixel-size">24</property>
+                <property name="margin">6</property>
+                <property name="icon_name">software-update-available-symbolic</property>
+                <style>
+                  <class name="warning"/>>
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkBox">
+                <property name="visible">True</property>
+                <property name="orientation">vertical</property>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="visible">True</property>
+                    <property name="halign">start</property>
+                    <property name="label">Extension Updates Ready</property>
+                    <attributes>
+                      <attribute name="weight" value="bold"/>
+                    </attributes>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkLabel" id="updatesLabel">
+                    <property name="visible">True</property>
+                    <property name="halign">start</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+            <child>
+              <object class="GtkButton">
+                <property name="label" translatable="yes">Logout…</property>
+                <property name="visible">True</property>
+                <property name="valign">center</property>
+                <property name="action-name">win.logout</property>
+                <property name="receives_default">True</property>
+                <style>
+                  <class name="suggested-action"/>
+                </style>
+              </object>
+              <packing>
+                <property name="pack_type">end</property>
+              </packing>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </template>
+</interface>

js/gdm/authPrompt.js

@@ -17,10 +17,6 @@ var DEFAULT_BUTTON_WELL_ANIMATION_TIME = 300;
 
 var MESSAGE_FADE_OUT_ANIMATION_TIME = 500;
 
-const WIGGLE_OFFSET = 6;
-const WIGGLE_DURATION = 65;
-const N_WIGGLES = 3;
-
 var AuthPromptMode = {
     UNLOCK_ONLY: 0,
     UNLOCK_OR_LOG_IN: 1,
@@ -282,11 +278,7 @@ var AuthPrompt = GObject.registerClass({
         this.setActorInDefaultButtonWell(null);
         this.verificationStatus = AuthPromptStatus.VERIFICATION_FAILED;
 
-        Util.wiggle(this._entry, {
-            offset: WIGGLE_OFFSET,
-            duration: WIGGLE_DURATION,
-            wiggleCount: N_WIGGLES,
-        });
+        Util.wiggle(this._entry);
     }
 
     _onVerificationComplete() {

js/js-resources.gresource.xml

@@ -98,6 +98,7 @@
     <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>

js/misc/extensionUtils.js

@@ -31,7 +31,15 @@ var ExtensionState = {
     UNINSTALLED: 99,
 };
 
-const SERIALIZED_PROPERTIES = ['type', 'state', 'path', 'error', 'hasPrefs', 'canChange'];
+const SERIALIZED_PROPERTIES = [
+    'type',
+    'state',
+    'path',
+    'error',
+    'hasPrefs',
+    'hasUpdate',
+    'canChange',
+];
 
 /**
  * getCurrentExtension:

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").split(/[; ]/),
+            keywords: _('power off;shutdown;reboot;restart;halt;stop').split(/[; ]/),
             available: false,
         });
         this._actions.set(LOCK_SCREEN_ACTION_ID, {
@@ -125,11 +125,10 @@ const SystemActions = GObject.registerClass({
             available: false,
         });
         this._actions.set(LOCK_ORIENTATION_ACTION_ID, {
-            // Translators: The name of the lock orientation action in search
-            name: C_("search-result", "Lock Orientation"),
+            name: '',
             iconName: '',
             // Translators: A list of keywords that match the lock orientation action, separated by semicolons
-            keywords: _("lock orientation;screen;rotation").split(/[; ]/),
+            keywords: _("lock orientation;unlock orientation;screen;rotation").split(/[; ]/),
             available: false,
         });
 
@@ -167,11 +166,10 @@ const SystemActions = GObject.registerClass({
 
         this.forceUpdate();
 
-        this._orientationSettings.connect('changed::orientation-lock',
-                                          () => {
-                                              this._updateOrientationLock();
-                                              this._updateOrientationLockIcon();
-                                          });
+        this._orientationSettings.connect('changed::orientation-lock', () => {
+            this._updateOrientationLock();
+            this._updateOrientationLockStatus();
+        });
         Main.layoutManager.connect('monitors-changed',
                                    () => this._updateOrientationLock());
         this._sensorProxy = new SensorProxy(Gio.DBus.system,
@@ -190,7 +188,7 @@ const SystemActions = GObject.registerClass({
             this._updateOrientationLock();
         });
         this._updateOrientationLock();
-        this._updateOrientationLockIcon();
+        this._updateOrientationLockStatus();
 
         Main.sessionMode.connect('updated', () => this._sessionUpdated());
         this._sessionUpdated();
@@ -243,12 +241,21 @@ const SystemActions = GObject.registerClass({
         this.notify('can-lock-orientation');
     }
 
-    _updateOrientationLockIcon() {
+    _updateOrientationLockStatus() {
         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';
-        this._actions.get(LOCK_ORIENTATION_ACTION_ID).iconName = iconName;
+
+        action.name = name;
+        action.iconName = iconName;
 
         this.notify('orientation-lock-icon');
     }

js/misc/util.js

@@ -11,6 +11,10 @@ const Params = imports.misc.params;
 
 var SCROLL_TIME = 100;
 
+const WIGGLE_OFFSET = 6;
+const WIGGLE_DURATION = 65;
+const N_WIGGLES = 3;
+
 // http://daringfireball.net/2010/07/improved_regex_for_matching_urls
 const _balancedParens = '\\([^\\s()<>]+\\)';
 const _leadingJunk = '[\\s`(\\[{\'\\"<\u00AB\u201C\u2018]';
@@ -442,9 +446,9 @@ function ensureActorVisibleInScrollView(scrollView, actor) {
 
 function wiggle(actor, params) {
     params = Params.parse(params, {
-        offset: 0,
-        duration: 0,
-        wiggleCount: 0,
+        offset: WIGGLE_OFFSET,
+        duration: WIGGLE_DURATION,
+        wiggleCount: N_WIGGLES,
     });
     actor.translation_x = 0;
 

js/portalHelper/main.js

@@ -1,4 +1,6 @@
 /* exported main */
+imports.gi.versions.Gtk = '3.0';
+
 const Format = imports.format;
 const Gettext = imports.gettext;
 const { Gio, GLib, GObject, Gtk, Pango, Soup, WebKit2: WebKit } = imports.gi;

js/prefs-resources.gresource.xml

@@ -7,5 +7,10 @@
     <file>misc/extensionUtils.js</file>
     <file>misc/fileUtils.js</file>
     <file>misc/params.js</file>
+
+    <file alias="css/application.css">extensionPrefs/css/application.css</file>
+
+    <file alias="ui/extension-row.ui">extensionPrefs/ui/extension-row.ui</file>
+    <file alias="ui/extensions-window.ui">extensionPrefs/ui/extensions-window.ui</file>
   </gresource>
 </gresources>

js/ui/accessDialog.js

@@ -1,5 +1,5 @@
 /* exported AccessDialogDBus */
-const { Clutter, Gio, GLib, GObject, Shell } = imports.gi;
+const { Clutter, Gio, GLib, GObject, Shell, St } = 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, subtitle, body, options) {
+    _init(invocation, handle, title, description, body, options) {
         super._init({ styleClass: 'access-dialog' });
 
         this._invocation = invocation;
@@ -30,21 +30,17 @@ class AccessDialog extends ModalDialog.ModalDialog {
         for (let option in options)
             options[option] = options[option].deep_unpack();
 
-        this._buildLayout(title, subtitle, body, options);
+        this._buildLayout(title, description, body, options);
     }
 
-    _buildLayout(title, subtitle, body, options) {
+    _buildLayout(title, description, 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 contentParams = { title, subtitle, body };
-        if (iconName)
-            contentParams.icon = new Gio.ThemedIcon({ name: iconName });
-        let content = new Dialog.MessageDialogContent(contentParams);
+        let content = new Dialog.MessageDialogContent({ title, description });
         this.contentLayout.add_actor(content);
 
         this._choices = new Map();
@@ -57,11 +53,17 @@ class AccessDialog extends ModalDialog.ModalDialog {
             let check = new CheckBox.CheckBox();
             check.getLabelActor().text = name;
             check.checked = selected == "true";
-            content.insertBeforeBody(check);
+            content.add_child(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);
@@ -133,7 +135,7 @@ var AccessDialogDBus = class {
             return;
         }
 
-        let [handle, appId, parentWindow_, title, subtitle, body, options] = params;
+        let [handle, appId, parentWindow_, title, description, 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) {
@@ -143,8 +145,8 @@ var AccessDialogDBus = class {
             return;
         }
 
-        let dialog = new AccessDialog(invocation, handle, title,
-                                      subtitle, body, options);
+        let dialog = new AccessDialog(
+            invocation, handle, title, description, body, options);
         dialog.open();
 
         dialog.connect('closed', () => (this._accessDialog = null));

js/ui/altTab.js

@@ -64,9 +64,6 @@ 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;
     }
@@ -178,7 +175,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) {
+        } else if (keysym == Clutter.KEY_q || keysym === Clutter.KEY_Q) {
             this._quitApplication(this._selectedIndex);
         } else if (this._thumbnailsFocused) {
             if (keysym === Clutter.KEY_Left)
@@ -187,7 +184,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_F4)
+            else if (keysym === Clutter.KEY_w || keysym === Clutter.KEY_W || keysym === Clutter.KEY_F4)
                 this._closeAppWindow(this._selectedIndex, this._currentWindow);
             else
                 return Clutter.EVENT_PROPAGATE;
@@ -248,20 +245,20 @@ class AppSwitcherPopup extends SwitcherPopup.SwitcherPopup {
         this._select(n);
     }
 
-    _windowActivated(thumbnailList, n) {
+    _windowActivated(thumbnailSwitcher, n) {
         let appIcon = this._items[this._selectedIndex];
         Main.activateWindow(appIcon.cachedWindows[n]);
         this.fadeAndDestroy();
     }
 
-    _windowEntered(thumbnailList, n) {
+    _windowEntered(thumbnailSwitcher, n) {
         if (!this.mouseActive)
             return;
 
         this._select(this._selectedIndex, n);
     }
 
-    _windowRemoved(thumbnailList, n) {
+    _windowRemoved(thumbnailSwitcher, n) {
         let appIcon = this._items[this._selectedIndex];
         if (!appIcon)
             return;
@@ -373,7 +370,7 @@ class AppSwitcherPopup extends SwitcherPopup.SwitcherPopup {
     }
 
     _createThumbnails() {
-        this._thumbnails = new ThumbnailList(this._items[this._selectedIndex].cachedWindows);
+        this._thumbnails = new ThumbnailSwitcher(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));
@@ -481,9 +478,6 @@ 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);
 
@@ -559,11 +553,8 @@ 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 WindowList(windows, mode);
+        this._switcherList = new WindowSwitcher(windows, mode);
         this._items = this._switcherList.icons;
     }
 
@@ -596,7 +587,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_F4)
+        else if (keysym === Clutter.KEY_w || keysym === Clutter.KEY_W || keysym === Clutter.KEY_F4)
             this._closeWindow(this._selectedIndex);
         else
             return Clutter.EVENT_PROPAGATE;
@@ -811,7 +802,7 @@ class AppSwitcher extends SwitcherPopup.SwitcherList {
     }
 
     // We override SwitcherList's highlight() method to also deal with
-    // the AppSwitcher->ThumbnailList arrows. Apps with only 1 window
+    // the AppSwitcher->ThumbnailSwitcher 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
@@ -868,8 +859,8 @@ class AppSwitcher extends SwitcherPopup.SwitcherList {
     }
 });
 
-var ThumbnailList = GObject.registerClass(
-class ThumbnailList extends SwitcherPopup.SwitcherList {
+var ThumbnailSwitcher = GObject.registerClass(
+class ThumbnailSwitcher extends SwitcherPopup.SwitcherList {
     _init(windows) {
         super._init(false);
 
@@ -1022,8 +1013,8 @@ class WindowIcon extends St.BoxLayout {
     }
 });
 
-var WindowList = GObject.registerClass(
-class WindowList extends SwitcherPopup.SwitcherList {
+var WindowSwitcher = GObject.registerClass(
+class WindowSwitcher extends SwitcherPopup.SwitcherList {
     _init(windows, mode) {
         super._init(true);
 

js/ui/animation.js

@@ -12,14 +12,22 @@ var SPINNER_ANIMATION_DELAY = 1000;
 var Animation = GObject.registerClass(
 class Animation extends St.Bin {
     _init(file, width, height, speed) {
-        super._init({ width, height });
+        const themeContext = St.ThemeContext.get_for_stage(global.stage);
+
+        super._init({
+            width: width * themeContext.scale_factor,
+            height: height * themeContext.scale_factor,
+        });
+
         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.bind(this, file, width, height));
+            () => {
+                this._loadFile(file, width, height);
+                this.set_size(width * themeContext.scale_factor, height * themeContext.scale_factor);
+            });
 
         this._speed = speed;
 

js/ui/audioDeviceSelection.js

@@ -1,6 +1,7 @@
 /* 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;
 
@@ -36,18 +37,17 @@ var AudioDeviceSelectionDialog = GObject.registerClass({
     }
 
     _buildLayout() {
-        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);
+        let content = new Dialog.MessageDialogContent({
+            title: _('Select Audio Device'),
+        });
 
         this._selectionBox = new St.BoxLayout({
             style_class: 'audio-selection-box',
             x_expand: true,
         });
-        this.contentLayout.add_child(this._selectionBox);
+        content.add_child(this._selectionBox);
+
+        this.contentLayout.add_child(content);
 
         if (Main.sessionMode.allowSettings) {
             this.addButton({ action: this._openSettings.bind(this),

js/ui/calendar.js

@@ -7,6 +7,7 @@ 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;
@@ -863,12 +864,10 @@ 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);
     }
@@ -1102,6 +1101,26 @@ 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() {
@@ -1127,16 +1146,33 @@ 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());
         });
-        box.add_actor(this._clearButton);
+        hbox.add_actor(this._clearButton);
 
         this._placeholder.bind_property('visible',
             this._clearButton, 'visible',

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();
+        this._label = new St.Label({ y_align: Clutter.ActorAlign.CENTER });
         this._label.clutter_text.set_line_wrap(true);
         this._label.clutter_text.set_ellipsize(Pango.EllipsizeMode.NONE);
         container.add_actor(this._label);

js/ui/closeDialog.js

@@ -1,7 +1,7 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported CloseDialog */
 
-const { Clutter, Gio, GLib, GObject, Meta, Shell, St } = imports.gi;
+const { Clutter, GLib, GObject, Meta, Shell, St } = imports.gi;
 
 const Dialog = imports.ui.dialog;
 const Main = imports.ui.main;
@@ -40,10 +40,9 @@ var CloseDialog = GObject.registerClass({
 
         /* Translators: %s is an application name */
         let title = _("“%s” is not responding.").format(windowApp.get_name());
-        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 });
+        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 });
     }
 
     _updateScale() {
@@ -67,7 +66,7 @@ var CloseDialog = GObject.registerClass({
         this._dialog.width = windowActor.width;
         this._dialog.height = windowActor.height;
 
-        this._dialog.addContent(this._createDialogContent());
+        this._dialog.contentLayout.add_child(this._createDialogContent());
         this._dialog.addButton({ label: _('Force Quit'),
                                  action: this._onClose.bind(this),
                                  default: true });

js/ui/components/keyring.js

@@ -3,13 +3,11 @@
 
 const { Clutter, Gcr, Gio, GObject, Pango, Shell, St } = imports.gi;
 
-const Animation = imports.ui.animation;
 const Dialog = imports.ui.dialog;
 const ModalDialog = imports.ui.modalDialog;
 const ShellEntry = imports.ui.shellEntry;
 const CheckBox = imports.ui.checkBox;
-
-var WORK_SPINNER_ICON_SIZE = 16;
+const Util = imports.misc.util;
 
 var KeyringDialog = GObject.registerClass(
 class KeyringDialog extends ModalDialog.ModalDialog {
@@ -21,142 +19,97 @@ class KeyringDialog extends ModalDialog.ModalDialog {
         this.prompt.connect('show-confirm', this._onShowConfirm.bind(this));
         this.prompt.connect('prompt-close', this._onHidePrompt.bind(this));
 
-        let icon = new Gio.ThemedIcon({ name: 'dialog-password-symbolic' });
-        this._content = new Dialog.MessageDialogContent({ icon });
-        this.contentLayout.add(this._content);
+        let content = new Dialog.MessageDialogContent();
 
-        this.prompt.bind_property('message', this._content, 'title', GObject.BindingFlags.SYNC_CREATE);
-        this.prompt.bind_property('description', this._content, 'body', GObject.BindingFlags.SYNC_CREATE);
+        this.prompt.bind_property('message',
+            content, 'title', GObject.BindingFlags.SYNC_CREATE);
+        this.prompt.bind_property('description',
+            content, 'description', GObject.BindingFlags.SYNC_CREATE);
 
-        this._workSpinner = null;
-        this._controlTable = null;
+        let passwordBox = new St.BoxLayout({
+            style_class: 'prompt-dialog-password-layout',
+            vertical: true,
+        });
 
-        this._cancelButton = this.addButton({ label: '',
-                                              action: this._onCancelButton.bind(this),
-                                              key: Clutter.KEY_Escape });
-        this._continueButton = this.addButton({ label: '',
-                                                action: this._onContinueButton.bind(this),
-                                                default: true });
+        this._passwordEntry = new St.PasswordEntry({
+            style_class: 'prompt-dialog-password-entry',
+            can_focus: true,
+            x_align: Clutter.ActorAlign.CENTER,
+        });
+        ShellEntry.addContextMenu(this._passwordEntry);
+        this._passwordEntry.clutter_text.connect('activate', this._onPasswordActivate.bind(this));
+        this.prompt.bind_property('password-visible',
+            this._passwordEntry, 'visible', GObject.BindingFlags.SYNC_CREATE);
+        passwordBox.add_child(this._passwordEntry);
+
+        this._confirmEntry = new St.PasswordEntry({
+            style_class: 'prompt-dialog-password-entry',
+            can_focus: true,
+            x_align: Clutter.ActorAlign.CENTER,
+        });
+        ShellEntry.addContextMenu(this._confirmEntry);
+        this._confirmEntry.clutter_text.connect('activate', this._onConfirmActivate.bind(this));
+        this.prompt.bind_property('confirm-visible',
+            this._confirmEntry, 'visible', GObject.BindingFlags.SYNC_CREATE);
+        passwordBox.add_child(this._confirmEntry);
+
+        this.prompt.set_password_actor(this._passwordEntry.clutter_text);
+        this.prompt.set_confirm_actor(this._confirmEntry.clutter_text);
+
+        let warningBox = new St.BoxLayout({ vertical: true });
+
+        let capsLockWarning = new ShellEntry.CapsLockWarning();
+        let syncCapsLockWarningVisibility = () => {
+            capsLockWarning.visible =
+                this.prompt.password_visible || this.prompt.confirm_visible;
+        };
+        this.prompt.connect('notify::password-visible', syncCapsLockWarningVisibility);
+        this.prompt.connect('notify::confirm-visible', syncCapsLockWarningVisibility);
+        warningBox.add_child(capsLockWarning);
+
+        let warning = new St.Label({ style_class: 'prompt-dialog-error-label' });
+        warning.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
+        warning.clutter_text.line_wrap = true;
+        this.prompt.bind_property('warning',
+            warning, 'text', GObject.BindingFlags.SYNC_CREATE);
+        this.prompt.connect('notify::warning-visible', () => {
+            warning.opacity = this.prompt.warning_visible ? 255 : 0;
+        });
+        this.prompt.connect('notify::warning', () => {
+            if (this._passwordEntry && warning !== '')
+                Util.wiggle(this._passwordEntry);
+        });
+        warningBox.add_child(warning);
+
+        passwordBox.add_child(warningBox);
+        content.add_child(passwordBox);
+
+        this._choice = new CheckBox.CheckBox();
+        this.prompt.bind_property('choice-label', this._choice.getLabelActor(),
+            'text', GObject.BindingFlags.SYNC_CREATE);
+        this.prompt.bind_property('choice-chosen', this._choice,
+            'checked', GObject.BindingFlags.SYNC_CREATE | GObject.BindingFlags.BIDIRECTIONAL);
+        this.prompt.bind_property('choice-visible', this._choice,
+            'visible', GObject.BindingFlags.SYNC_CREATE);
+        content.add_child(this._choice);
+
+        this.contentLayout.add_child(content);
+
+        this._cancelButton = this.addButton({
+            label: '',
+            action: this._onCancelButton.bind(this),
+            key: Clutter.KEY_Escape,
+        });
+        this._continueButton = this.addButton({
+            label: '',
+            action: this._onContinueButton.bind(this),
+            default: true,
+        });
 
         this.prompt.bind_property('cancel-label', this._cancelButton, 'label', GObject.BindingFlags.SYNC_CREATE);
         this.prompt.bind_property('continue-label', this._continueButton, 'label', GObject.BindingFlags.SYNC_CREATE);
     }
 
-    _setWorking(working) {
-        if (!this._workSpinner)
-            return;
-
-        if (working)
-            this._workSpinner.play();
-        else
-            this._workSpinner.stop();
-    }
-
-    _buildControlTable() {
-        let layout = new Clutter.GridLayout({ orientation: Clutter.Orientation.VERTICAL });
-        let table = new St.Widget({
-            style_class: 'keyring-dialog-control-table',
-            layout_manager: layout,
-            x_expand: true,
-            y_expand: true,
-        });
-        layout.hookup_style(table);
-        let rtl = table.get_text_direction() == Clutter.TextDirection.RTL;
-        let row = 0;
-
-        if (this.prompt.password_visible) {
-            let label = new St.Label({ style_class: 'prompt-dialog-password-label',
-                                       x_align: Clutter.ActorAlign.START,
-                                       y_align: Clutter.ActorAlign.CENTER });
-            label.set_text(_("Password:"));
-            label.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
-            this._passwordEntry = new St.PasswordEntry({
-                style_class: 'prompt-dialog-password-entry',
-                text: '',
-                can_focus: true,
-                x_expand: true,
-            });
-            ShellEntry.addContextMenu(this._passwordEntry);
-            this._passwordEntry.clutter_text.connect('activate', this._onPasswordActivate.bind(this));
-
-            this._workSpinner = new Animation.Spinner(WORK_SPINNER_ICON_SIZE, {
-                animate: true,
-            });
-
-            if (rtl) {
-                layout.attach(this._workSpinner, 0, row, 1, 1);
-                layout.attach(this._passwordEntry, 1, row, 1, 1);
-                layout.attach(label, 2, row, 1, 1);
-            } else {
-                layout.attach(label, 0, row, 1, 1);
-                layout.attach(this._passwordEntry, 1, row, 1, 1);
-                layout.attach(this._workSpinner, 2, row, 1, 1);
-            }
-            row++;
-        } else {
-            this._workSpinner = null;
-            this._passwordEntry = null;
-        }
-
-        if (this.prompt.confirm_visible) {
-            var label = new St.Label({ style_class: 'prompt-dialog-password-label',
-                                       x_align: Clutter.ActorAlign.START,
-                                       y_align: Clutter.ActorAlign.CENTER });
-            label.set_text(_("Type again:"));
-            this._confirmEntry = new St.PasswordEntry({
-                style_class: 'prompt-dialog-password-entry',
-                text: '',
-                can_focus: true,
-                x_expand: true,
-            });
-            ShellEntry.addContextMenu(this._confirmEntry);
-            this._confirmEntry.clutter_text.connect('activate', this._onConfirmActivate.bind(this));
-            if (rtl) {
-                layout.attach(this._confirmEntry, 0, row, 1, 1);
-                layout.attach(label, 1, row, 1, 1);
-            } else {
-                layout.attach(label, 0, row, 1, 1);
-                layout.attach(this._confirmEntry, 1, row, 1, 1);
-            }
-            row++;
-        } else {
-            this._confirmEntry = null;
-        }
-
-        this.prompt.set_password_actor(this._passwordEntry ? this._passwordEntry.clutter_text : null);
-        this.prompt.set_confirm_actor(this._confirmEntry ? this._confirmEntry.clutter_text : null);
-
-        if (this._passwordEntry || this._confirmEntry) {
-            this._capsLockWarningLabel = new ShellEntry.CapsLockWarning();
-            layout.attach(this._capsLockWarningLabel, 1, row, 1, 1);
-            row++;
-        }
-
-        if (this.prompt.choice_visible) {
-            let choice = new CheckBox.CheckBox();
-            this.prompt.bind_property('choice-label', choice.getLabelActor(), 'text', GObject.BindingFlags.SYNC_CREATE);
-            this.prompt.bind_property('choice-chosen', choice, 'checked', GObject.BindingFlags.SYNC_CREATE | GObject.BindingFlags.BIDIRECTIONAL);
-            layout.attach(choice, rtl ? 0 : 1, row, 1, 1);
-            row++;
-        }
-
-        let warning = new St.Label({ style_class: 'prompt-dialog-error-label',
-                                     x_align: Clutter.ActorAlign.START });
-        warning.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
-        warning.clutter_text.line_wrap = true;
-        layout.attach(warning, rtl ? 0 : 1, row, 1, 1);
-        this.prompt.bind_property('warning-visible', warning, 'visible', GObject.BindingFlags.SYNC_CREATE);
-        this.prompt.bind_property('warning', warning, 'text', GObject.BindingFlags.SYNC_CREATE);
-
-        if (this._controlTable) {
-            this._controlTable.destroy_all_children();
-            this._controlTable.destroy();
-        }
-
-        this._controlTable = table;
-        this._content.messageBox.add_child(table);
-    }
-
     _updateSensitivity(sensitive) {
         if (this._passwordEntry) {
             this._passwordEntry.reactive = sensitive;
@@ -170,7 +123,6 @@ class KeyringDialog extends ModalDialog.ModalDialog {
 
         this._continueButton.can_focus = sensitive;
         this._continueButton.reactive = sensitive;
-        this._setWorking(!sensitive);
     }
 
     _ensureOpen() {
@@ -192,16 +144,16 @@ class KeyringDialog extends ModalDialog.ModalDialog {
     }
 
     _onShowPassword() {
-        this._buildControlTable();
         this._ensureOpen();
         this._updateSensitivity(true);
+        this._passwordEntry.text = '';
         this._passwordEntry.grab_key_focus();
     }
 
     _onShowConfirm() {
-        this._buildControlTable();
         this._ensureOpen();
         this._updateSensitivity(true);
+        this._confirmEntry.text = '';
         this._continueButton.grab_key_focus();
     }
 

js/ui/components/networkAgent.js

@@ -29,43 +29,30 @@ class NetworkSecretDialog extends ModalDialog.ModalDialog {
         else
             this._content = this._getContent();
 
-        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 contentBox = new Dialog.MessageDialogContent({
+            title: this._content.title,
+            description: this._content.message,
+        });
 
-        let layout = new Clutter.GridLayout({ orientation: Clutter.Orientation.VERTICAL });
-        let secretTable = new St.Widget({ style_class: 'network-dialog-secret-table',
-                                          layout_manager: layout });
-        layout.hookup_style(secretTable);
-
-        let rtl = secretTable.get_text_direction() == Clutter.TextDirection.RTL;
         let initialFocusSet = false;
-        let pos = 0;
         for (let i = 0; i < this._content.secrets.length; i++) {
             let secret = this._content.secrets[i];
-            let label = new St.Label({ style_class: 'prompt-dialog-password-label',
-                                       text: secret.label,
-                                       x_align: Clutter.ActorAlign.START,
-                                       y_align: Clutter.ActorAlign.CENTER });
-            label.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
-
             let reactive = secret.key != null;
 
             let entryParams = {
                 style_class: 'prompt-dialog-password-entry',
+                hint_text: secret.label,
                 text: secret.value,
                 can_focus: reactive,
                 reactive,
-                x_expand: true,
+                x_align: Clutter.ActorAlign.CENTER,
             };
             if (secret.password)
                 secret.entry = new St.PasswordEntry(entryParams);
             else
                 secret.entry = new St.Entry(entryParams);
             ShellEntry.addContextMenu(secret.entry);
+            contentBox.add_child(secret.entry);
 
             if (secret.validate)
                 secret.valid = secret.validate(secret);
@@ -90,36 +77,26 @@ class NetworkSecretDialog extends ModalDialog.ModalDialog {
             } else {
                 secret.valid = true;
             }
-
-            if (rtl) {
-                layout.attach(secret.entry, 0, pos, 1, 1);
-                layout.attach(label, 1, pos, 1, 1);
-            } else {
-                layout.attach(label, 0, pos, 1, 1);
-                layout.attach(secret.entry, 1, pos, 1, 1);
-            }
-            pos++;
         }
 
         if (this._content.secrets.some(s => s.password)) {
-            this._capsLockWarningLabel = new ShellEntry.CapsLockWarning();
-            if (rtl)
-                layout.attach(this._capsLockWarningLabel, 0, pos, 1, 1);
-            else
-                layout.attach(this._capsLockWarningLabel, 1, pos, 1, 1);
+            let capsLockWarning = new ShellEntry.CapsLockWarning();
+            contentBox.add_child(capsLockWarning);
         }
 
-        contentBox.messageBox.add(secretTable);
-
         if (flags & NM.SecretAgentGetSecretsFlags.WPS_PBC_ACTIVE) {
-            let descriptionLabel = new St.Label({ style_class: 'prompt-dialog-description',
-                                                  text: _("Alternatively you can connect by pushing the “WPS” button on your router.") });
+            let descriptionLabel = new St.Label({
+                text: _('Alternatively you can connect by pushing the “WPS” button on your router.'),
+                style_class: 'message-dialog-description',
+            });
             descriptionLabel.clutter_text.line_wrap = true;
             descriptionLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
 
-            contentBox.messageBox.add_child(descriptionLabel);
+            contentBox.add_child(descriptionLabel);
         }
 
+        this.contentLayout.add_child(contentBox);
+
         this._okButton = {
             label: _("Connect"),
             action: this._onOk.bind(this),
@@ -326,7 +303,7 @@ class NetworkSecretDialog extends ModalDialog.ModalDialog {
         case '802-11-wireless':
             wirelessSetting = this._connection.get_setting_wireless();
             ssid = NM.utils_ssid_to_utf8(wirelessSetting.get_ssid().get_data());
-            content.title = _("Authentication required by wireless network");
+            content.title = _('Authentication required');
             content.message = _("Passwords or encryption keys are required to access the wireless network “%s”.").format(ssid);
             this._getWirelessSecrets(content.secrets, wirelessSetting);
             break;
@@ -354,7 +331,7 @@ class NetworkSecretDialog extends ModalDialog.ModalDialog {
             // fall through
         case 'cdma':
         case 'bluetooth':
-            content.title = _("Mobile broadband network password");
+            content.title = _('Authentication required');
             content.message = _("A password is required to connect to “%s”.").format(connectionSetting.get_id());
             this._getMobileSecrets(content.secrets, connectionType);
             break;
@@ -701,7 +678,7 @@ var NetworkAgent = class {
         case '802-11-wireless': {
             let wirelessSetting = connection.get_setting_wireless();
             let ssid = NM.utils_ssid_to_utf8(wirelessSetting.get_ssid().get_data());
-            title = _("Authentication required by wireless network");
+            title = _('Authentication required');
             body = _("Passwords or encryption keys are required to access the wireless network “%s”.").format(ssid);
             break;
         }
@@ -722,7 +699,11 @@ var NetworkAgent = class {
             // fall through
         case 'cdma':
         case 'bluetooth':
-            title = _("Mobile broadband network password");
+            title = _('Authentication required');
+            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:

js/ui/components/polkitAgent.js

@@ -1,35 +1,33 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported Component */
 
-const { AccountsService, Clutter, Gio, GLib,
+const { AccountsService, Clutter, GLib,
         GObject, Pango, PolkitAgent, Polkit, Shell, St } = imports.gi;
 
-const Animation = imports.ui.animation;
 const Dialog = imports.ui.dialog;
 const Main = imports.ui.main;
 const ModalDialog = imports.ui.modalDialog;
 const ShellEntry = imports.ui.shellEntry;
 const UserWidget = imports.ui.userWidget;
+const Util = imports.misc.util;
 
 const DialogMode = {
     AUTH: 0,
     CONFIRM: 1,
 };
 
-var DIALOG_ICON_SIZE = 48;
-
-var WORK_SPINNER_ICON_SIZE = 16;
+const DIALOG_ICON_SIZE = 64;
 
 const DELAYED_RESET_TIMEOUT = 200;
 
 var AuthenticationDialog = GObject.registerClass({
     Signals: { 'done': { param_types: [GObject.TYPE_BOOLEAN] } },
 }, class AuthenticationDialog extends ModalDialog.ModalDialog {
-    _init(actionId, body, cookie, userNames) {
+    _init(actionId, description, cookie, userNames) {
         super._init({ styleClass: 'prompt-dialog' });
 
         this.actionId = actionId;
-        this.message = body;
+        this.message = description;
         this.userNames = userNames;
 
         this._sessionUpdatedId = Main.sessionMode.connect('updated', () => {
@@ -38,11 +36,12 @@ 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({ icon, title, body });
-        this.contentLayout.add_actor(content);
+        let headerContent = new Dialog.MessageDialogContent({ title, description });
+        this.contentLayout.add_child(headerContent);
+
+        let bodyContent = new Dialog.MessageDialogContent();
 
         if (userNames.length > 1) {
             log(`polkitAuthenticationAgent: Received ${userNames.length} ` +
@@ -60,22 +59,21 @@ var AuthenticationDialog = GObject.registerClass({
 
         let userBox = new St.BoxLayout({
             style_class: 'polkit-dialog-user-layout',
-            vertical: false,
+            vertical: true,
         });
-        content.messageBox.add(userBox);
+        bodyContent.add_child(userBox);
 
         this._userAvatar = new UserWidget.Avatar(this._user, {
             iconSize: DIALOG_ICON_SIZE,
             styleClass: 'polkit-dialog-user-icon',
         });
+        this._userAvatar.x_align = Clutter.ActorAlign.CENTER;
         userBox.add_child(this._userAvatar);
 
         this._userLabel = new St.Label({
             style_class: userName === 'root'
                 ? 'polkit-dialog-user-root-label'
                 : 'polkit-dialog-user-label',
-            x_expand: true,
-            y_align: Clutter.ActorAlign.CENTER,
         });
 
         if (userName === 'root')
@@ -83,58 +81,60 @@ var AuthenticationDialog = GObject.registerClass({
 
         userBox.add_child(this._userLabel);
 
-        this._passwordBox = new St.BoxLayout({ vertical: false, style_class: 'prompt-dialog-password-box' });
-        content.messageBox.add(this._passwordBox);
-        this._passwordLabel = new St.Label({
-            style_class: 'prompt-dialog-password-label',
-            y_align: Clutter.ActorAlign.CENTER,
+        let passwordBox = new St.BoxLayout({
+            style_class: 'prompt-dialog-password-layout',
+            vertical: true,
         });
-        this._passwordBox.add_child(this._passwordLabel);
+
         this._passwordEntry = new St.PasswordEntry({
             style_class: 'prompt-dialog-password-entry',
             text: "",
             can_focus: true,
-            x_expand: true,
+            visible: false,
+            x_align: Clutter.ActorAlign.CENTER,
         });
         ShellEntry.addContextMenu(this._passwordEntry);
         this._passwordEntry.clutter_text.connect('activate', this._onEntryActivate.bind(this));
         this._passwordEntry.bind_property('reactive',
             this._passwordEntry.clutter_text, 'editable',
             GObject.BindingFlags.SYNC_CREATE);
-        this._passwordBox.add_child(this._passwordEntry);
+        passwordBox.add_child(this._passwordEntry);
 
-        this._workSpinner = new Animation.Spinner(WORK_SPINNER_ICON_SIZE, {
-            animate: true,
+        let warningBox = new St.BoxLayout({ vertical: true });
+
+        let capsLockWarning = new ShellEntry.CapsLockWarning();
+        this._passwordEntry.bind_property('visible',
+            capsLockWarning, 'visible',
+            GObject.BindingFlags.SYNC_CREATE);
+        warningBox.add_child(capsLockWarning);
+
+        this._errorMessageLabel = new St.Label({
+            style_class: 'prompt-dialog-error-label',
+            visible: false,
         });
-        this._passwordBox.add(this._workSpinner);
-
-        this._passwordBox.hide();
-        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.messageBox.add_child(this._errorMessageLabel);
-        this._errorMessageLabel.hide();
+        warningBox.add_child(this._errorMessageLabel);
 
-        this._infoMessageLabel = new St.Label({ style_class: 'prompt-dialog-info-label' });
+        this._infoMessageLabel = new St.Label({
+            style_class: 'prompt-dialog-info-label',
+            visible: false,
+        });
         this._infoMessageLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
         this._infoMessageLabel.clutter_text.line_wrap = true;
-        content.messageBox.add(this._infoMessageLabel);
-        this._infoMessageLabel.hide();
+        warningBox.add_child(this._infoMessageLabel);
 
         /* text is intentionally non-blank otherwise the height is not the same as for
          * infoMessage and errorMessageLabel - but it is still invisible because
          * gnome-shell.css sets the color to be transparent
          */
-        this._nullMessageLabel = new St.Label({ style_class: 'prompt-dialog-null-label',
-                                                text: 'abc' });
-        this._nullMessageLabel.add_style_class_name('hidden');
+        this._nullMessageLabel = new St.Label({ style_class: 'prompt-dialog-null-label' });
         this._nullMessageLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
         this._nullMessageLabel.clutter_text.line_wrap = true;
-        content.messageBox.add(this._nullMessageLabel);
-        this._nullMessageLabel.show();
+        warningBox.add_child(this._nullMessageLabel);
+
+        passwordBox.add_child(warningBox);
+        bodyContent.add_child(passwordBox);
 
         this._cancelButton = this.addButton({ label: _("Cancel"),
                                               action: this.cancel.bind(this),
@@ -150,6 +150,8 @@ var AuthenticationDialog = GObject.registerClass({
             this._okButton.reactive = text.get_text().length > 0;
         });
 
+        this.contentLayout.add_child(bodyContent);
+
         this._doneEmitted = false;
 
         this._mode = -1;
@@ -164,13 +166,6 @@ var AuthenticationDialog = GObject.registerClass({
         this._onUserChanged();
     }
 
-    _setWorking(working) {
-        if (working)
-            this._workSpinner.play();
-        else
-            this._workSpinner.stop();
-    }
-
     _initiateSession() {
         this._destroySession(DELAYED_RESET_TIMEOUT);
 
@@ -219,7 +214,6 @@ var AuthenticationDialog = GObject.registerClass({
 
         this._passwordEntry.reactive = false;
         this._okButton.reactive = false;
-        this._setWorking(true);
 
         this._session.response(response);
         // When the user responds, dismiss already shown info and
@@ -261,6 +255,8 @@ var AuthenticationDialog = GObject.registerClass({
                 this._errorMessageLabel.show();
                 this._infoMessageLabel.hide();
                 this._nullMessageLabel.hide();
+
+                Util.wiggle(this._passwordEntry);
             }
 
             /* Try and authenticate again */
@@ -274,19 +270,20 @@ var AuthenticationDialog = GObject.registerClass({
             this._sessionRequestTimeoutId = 0;
         }
 
-        // Cheap localization trick
-        if (request == 'Password:' || request == 'Password: ')
-            this._passwordLabel.set_text(_("Password:"));
+        // Hack: The request string comes directly from PAM, if it's "Password:"
+        // we replace it with our own, if it's something else we replace the
+        // last colon and any trailing spaces with a "…".
+        if (request === 'Password:' || request === 'Password: ')
+            this._passwordEntry.hint_text = _('Enter Password…');
         else
-            this._passwordLabel.set_text(request);
+            this._passwordEntry.hint_text = request.replace(/: *$/, '…');
 
         this._passwordEntry.password_visible = echoOn;
 
-        this._passwordBox.show();
+        this._passwordEntry.show();
         this._passwordEntry.set_text('');
         this._passwordEntry.reactive  = true;
         this._okButton.reactive = false;
-        this._setWorking(false);
 
         this._ensureOpen();
         this._passwordEntry.grab_key_focus();
@@ -333,7 +330,7 @@ var AuthenticationDialog = GObject.registerClass({
             if (this.state != ModalDialog.State.OPENED)
                 return;
 
-            this._passwordBox.hide();
+            this._passwordEntry.hide();
             this._cancelButton.grab_key_focus();
             this._okButton.reactive = false;
         };

js/ui/dateMenu.js

@@ -348,7 +348,14 @@ 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(),
@@ -357,21 +364,16 @@ class WeatherSection extends St.Button {
             });
             let temp = new St.Label({
                 style_class: 'weather-forecast-temp',
-                text: fc.get_temp_summary(),
-                x_align: Clutter.ActorAlign.CENTER,
-            });
-            let time = new St.Label({
-                style_class: 'weather-forecast-time',
-                text: timeStr,
+                text: '%s%.0f°'.format(tempPrefix, tempValue),
                 x_align: Clutter.ActorAlign.CENTER,
             });
 
             temp.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
             time.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
 
-            layout.attach(icon, col, 0, 1, 1);
-            layout.attach(temp, col, 1, 1, 1);
-            layout.attach(time, col, 2, 1, 1);
+            layout.attach(time, col, 0, 1, 1);
+            layout.attach(icon, col, 1, 1, 1);
+            layout.attach(temp, col, 2, 1, 1);
             col++;
         });
     }
@@ -430,7 +432,6 @@ 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,
@@ -438,6 +439,13 @@ 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));
@@ -445,6 +453,11 @@ 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) {
@@ -461,9 +474,17 @@ class MessagesIndicator extends St.Icon {
     _updateCount() {
         let count = 0;
         this._sources.forEach(source => (count += source.unseenCount));
-        count -= Main.messageTray.queueCount;
+        this._count = count - Main.messageTray.queueCount;
 
-        this.visible = count > 0;
+        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;
     }
 });
 
@@ -471,21 +492,19 @@ 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) {
-        if (this._source.visible)
-            return this._source.get_preferred_width(forHeight);
-        return [0, 0];
+        return this._source.get_preferred_width(forHeight);
     }
 
     vfunc_get_preferred_height(forWidth) {
-        if (this._source.visible)
-            return this._source.get_preferred_height(forWidth);
-        return [0, 0];
+        return this._source.get_preferred_height(forWidth);
     }
 });
 
@@ -557,7 +576,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();
+        let box = new St.BoxLayout({ style_class: 'clock-display-box' });
         box.add_actor(new IndicatorPad(this._indicator));
         box.add_actor(this._clockDisplay);
         box.add_actor(this._indicator);

js/ui/dialog.js

@@ -1,7 +1,14 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported Dialog, MessageDialogContent */
+/* exported Dialog, MessageDialogContent, ListSection, ListSectionItem */
 
-const { Clutter, Gio, GObject, Pango, St } = imports.gi;
+const { Clutter, GObject, Pango, St } = imports.gi;
+
+function _setLabel(label, value) {
+    label.set({
+        text: value || '',
+        visible: value !== null,
+    });
+}
 
 var Dialog = GObject.registerClass(
 class Dialog extends St.Widget {
@@ -25,10 +32,12 @@ 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
@@ -43,7 +52,9 @@ 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);
     }
 
@@ -95,10 +106,6 @@ 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'];
@@ -111,13 +118,15 @@ 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;
@@ -144,99 +153,170 @@ class Dialog extends St.Widget {
 
 var MessageDialogContent = GObject.registerClass({
     Properties: {
-        '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),
+        '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 MessageDialogContent extends St.BoxLayout {
     _init(params) {
-        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._title = new St.Label({ style_class: 'message-dialog-title' });
+        this._description = new St.Label({ style_class: 'message-dialog-description' });
 
-        ['icon', 'title', 'subtitle', 'body'].forEach(prop => {
-            this[`_${prop}`].add_style_class_name(`message-dialog-${prop}`);
-        });
+        this._description.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
+        this._description.clutter_text.line_wrap = 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' };
+        let defaultParams = {
+            style_class: 'message-dialog-content',
+            x_expand: true,
+            vertical: true,
+        };
         super._init(Object.assign(defaultParams, params));
 
-        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;
+        this.add_child(this._title);
+        this.add_child(this._description);
     }
 
     get title() {
         return this._title.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');
+    get description() {
+        return this._description.text;
     }
 
     set title(title) {
-        this._setLabel(this._title, 'title', title);
+        _setLabel(this._title, title);
+        this.notify('title');
     }
 
-    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);
+    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');
     }
 });

js/ui/dnd.js

@@ -313,8 +313,8 @@ var _Draggable = class _Draggable {
                 device = event.get_device();
 
             if (device == undefined) {
-                let manager = Clutter.DeviceManager.get_default();
-                device = manager.get_core_device(Clutter.InputDeviceType.POINTER_DEVICE);
+                let seat = Clutter.get_default_backend().get_default_seat();
+                device = seat.get_pointer();
             }
         }
 

js/ui/endSessionDialog.js

@@ -21,6 +21,7 @@ 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;
@@ -28,8 +29,7 @@ const UserWidget = imports.ui.userWidget;
 
 const { loadInterfaceXML } = imports.misc.fileUtils;
 
-const _ITEM_ICON_SIZE = 48;
-const _DIALOG_ICON_SIZE = 48;
+const _ITEM_ICON_SIZE = 64;
 
 const EndSessionDialogIface = loadInterfaceXML('org.gnome.SessionManager.EndSessionDialog');
 
@@ -49,7 +49,6 @@ const logoutDialogContent = {
     showBatteryWarning: false,
     confirmButtons: [{ signal: 'ConfirmedLogout',
                        label: C_("button", "Log Out") }],
-    iconStyleClass: 'end-session-dialog-logout-icon',
     showOtherSessions: false,
 };
 
@@ -68,7 +67,6 @@ const shutdownDialogContent = {
                      { signal: 'ConfirmedShutdown',
                        label: C_("button", "Power Off") }],
     iconName: 'system-shutdown-symbolic',
-    iconStyleClass: 'end-session-dialog-shutdown-icon',
     showOtherSessions: true,
 };
 
@@ -83,7 +81,6 @@ const restartDialogContent = {
     confirmButtons: [{ signal: 'ConfirmedReboot',
                        label: C_("button", "Restart") }],
     iconName: 'view-refresh-symbolic',
-    iconStyleClass: 'end-session-dialog-shutdown-icon',
     showOtherSessions: true,
 };
 
@@ -101,7 +98,6 @@ const restartUpdateDialogContent = {
     unusedFutureButtonForTranslation: C_("button", "Install & Power Off"),
     unusedFutureCheckBoxForTranslation: C_("checkbox", "Power off after updates are installed"),
     iconName: 'view-refresh-symbolic',
-    iconStyleClass: 'end-session-dialog-shutdown-icon',
     showOtherSessions: true,
 };
 
@@ -119,7 +115,6 @@ const restartUpgradeDialogContent = {
     confirmButtons: [{ signal: 'ConfirmedReboot',
                        label: C_("button", "Restart & Install") }],
     iconName: 'view-refresh-symbolic',
-    iconStyleClass: 'end-session-dialog-shutdown-icon',
     showOtherSessions: true,
 };
 
@@ -192,16 +187,6 @@ 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();
 
@@ -260,75 +245,34 @@ 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));
 
-        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._messageDialogContent = new Dialog.MessageDialogContent();
 
         this._checkBox = new CheckBox.CheckBox();
         this._checkBox.connect('clicked', this._sync.bind(this));
-        messageLayout.add(this._checkBox);
+        this._messageDialogContent.add_child(this._checkBox);
 
-        this._batteryWarning = new St.Label({ style_class: 'end-session-dialog-warning',
-                                              text: _("Running on battery power: please plug in before installing updates.") });
+        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.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
         this._batteryWarning.clutter_text.line_wrap = true;
-        messageLayout.add(this._batteryWarning);
+        this._messageDialogContent.add_child(this._batteryWarning);
 
-        this._scrollView = new St.ScrollView({
-            style_class: 'end-session-dialog-list',
-            x_expand: true,
-            y_expand: true,
+        this.contentLayout.add_child(this._messageDialogContent);
+
+        this._applicationSection = new Dialog.ListSection({
+            title: _('Some applications are busy or have unsaved work'),
         });
-        this._scrollView.set_policy(St.PolicyType.NEVER, St.PolicyType.AUTOMATIC);
-        this.contentLayout.add_child(this._scrollView);
-        this._scrollView.hide();
+        this.contentLayout.add_child(this._applicationSection);
 
-        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._sessionSection = new Dialog.ListSection({
+            title: _('Other users are logged in'),
+        });
+        this.contentLayout.add_child(this._sessionSection);
 
         this._dbusImpl = Gio.DBusExportedObject.wrapJSObject(EndSessionDialogIface, this);
         this._dbusImpl.export(Gio.DBus.session, '/org/gnome/SessionManager/EndSessionDialog');
@@ -379,11 +323,8 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
             subject = dialogContent.subjectWithUpdates;
 
         if (dialogContent.showBatteryWarning) {
-            // Warn when running on battery power
-            if (this._powerProxy.OnBattery && this._checkBox.checked)
-                this._batteryWarning.opacity = 255;
-            else
-                this._batteryWarning.opacity = 0;
+            this._batteryWarning.visible =
+                this._powerProxy.OnBattery && this._checkBox.checked;
         }
 
         let description;
@@ -417,26 +358,14 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
         if (!description)
             description = dialogContent.description(displayTime);
 
-        _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();
-        }
+        this._messageDialogContent.title = subject;
+        this._messageDialogContent.description = description;
 
         let hasApplications = this._applications.length > 0;
         let hasSessions = this._sessions.length > 0;
-        this._scrollView.visible = hasApplications || hasSessions;
-        this._applicationHeader.visible = hasApplications;
-        this._sessionHeader.visible = hasSessions;
+
+        this._applicationSection.visible = hasApplications;
+        this._sessionSection.visible = hasSessions;
     }
 
     _updateButtons() {
@@ -593,31 +522,6 @@ 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
@@ -627,8 +531,13 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
         let app = findAppFromInhibitor(inhibitor);
 
         if (app) {
-            let actor = this._constructListItemForApp(inhibitor, app);
-            this._applicationList.add(actor);
+            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);
         } else {
             // inhibiting app is a service, not an application
             this._applications.splice(this._applications.indexOf(inhibitor), 1);
@@ -637,36 +546,6 @@ 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;
@@ -697,8 +576,27 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
                                 remote: proxy.Remote };
                 this._sessions.push(session);
 
-                let actor = this._constructListItemForSession(session);
-                this._sessionList.add(actor);
+                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);
 
                 // limit the number of entries
                 n++;
@@ -724,10 +622,10 @@ class EndSessionDialog extends ModalDialog.ModalDialog {
         }
 
         this._applications = [];
-        this._applicationList.destroy_all_children();
+        this._applicationSection.list.destroy_all_children();
 
         this._sessions = [];
-        this._sessionList.destroy_all_children();
+        this._sessionSection.list.destroy_all_children();
 
         if (!(this._type in DialogContent)) {
             invocation.return_dbus_error('org.gnome.Shell.ModalDialog.TypeError',

js/ui/environment.js

@@ -247,8 +247,8 @@ function init() {
         origSetEasingDelay.call(this, adjustAnimationTime(msecs));
     };
 
-    Clutter.Actor.prototype.ease = function (props, easingParams) {
-        _easeActor(this, props, easingParams);
+    Clutter.Actor.prototype.ease = function (props) {
+        _easeActor(this, props);
     };
     Clutter.Actor.prototype.ease_property = function (propName, target, params) {
         _easeActorProperty(this, propName, target, params);

js/ui/extensionDownloader.js

@@ -1,6 +1,5 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported init, installExtension, uninstallExtension,
-            checkForUpdates, updateExtension */
+/* exported init, installExtension, uninstallExtension, checkForUpdates */
 
 const { Clutter, Gio, GLib, GObject, Soup } = imports.gi;
 
@@ -100,13 +99,9 @@ function gotExtensionZipFile(session, message, uuid, dir, callback, errback) {
     });
 }
 
-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');
+function downloadExtensionUpdate(uuid) {
+    let dir = Gio.File.new_for_path(
+        GLib.build_filenamev([global.userdatadir, 'extension-updates', uuid]));
 
     let params = { shell_version: Config.PACKAGE_VERSION };
 
@@ -114,39 +109,10 @@ function updateExtension(uuid) {
     let message = Soup.form_request_new_from_hash('GET', url, params);
 
     _httpSession.queue_message(message, session => {
-        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);
+        gotExtensionZipFile(session, message, uuid, dir, () => {
+            Main.extensionManager.notifyExtensionUpdate(uuid);
         }, (code, msg) => {
-            log(`Error while updating extension ${uuid}: ${code} (${msg})`);
+            log(`Error while downloading update for extension ${uuid}: ${code} (${msg})`);
         });
     });
 }
@@ -154,11 +120,21 @@ function updateExtension(uuid) {
 function checkForUpdates() {
     let metadatas = {};
     Main.extensionManager.getUuids().forEach(uuid => {
-        metadatas[uuid] = Main.extensionManager.extensions[uuid].metadata;
+        let extension = Main.extensionManager.lookup(uuid);
+        if (extension.type !== ExtensionUtils.ExtensionType.PER_USER)
+            return;
+        if (extension.hasUpdate)
+            return;
+        metadatas[uuid] = extension.metadata;
     });
 
-    let params = { shell_version: Config.PACKAGE_VERSION,
-                   installed: JSON.stringify(metadatas) };
+    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 url = REPOSITORY_URL_UPDATE;
     let message = Soup.form_request_new_from_hash('GET', url, params);
@@ -172,7 +148,7 @@ function checkForUpdates() {
             if (operation == 'blacklist')
                 uninstallExtension(uuid);
             else if (operation == 'upgrade' || operation == 'downgrade')
-                updateExtension(uuid);
+                downloadExtensionUpdate(uuid);
         }
     });
 }
@@ -197,10 +173,8 @@ class InstallExtensionDialog extends ModalDialog.ModalDialog {
         }]);
 
         let content = new Dialog.MessageDialogContent({
-            title: _("Download and install “%s” from extensions.gnome.org?").format(info.name),
-            icon: new Gio.FileIcon({
-                file: Gio.File.new_for_uri(`${REPOSITORY_URL_BASE}${info.icon}`),
-            }),
+            title: _('Install Extension'),
+            description: _('Download and install “%s” from extensions.gnome.org?').format(info.name),
         });
 
         this.contentLayout.add(content);

js/ui/extensionSystem.js

@@ -1,12 +1,14 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported init connect disconnect */
 
-const { GLib, Gio, St } = imports.gi;
+const { GLib, Gio, GObject, Shell, St } = imports.gi;
 const Signals = imports.signals;
 
+const ExtensionDownloader = imports.ui.extensionDownloader;
 const ExtensionUtils = imports.misc.extensionUtils;
 const FileUtils = imports.misc.fileUtils;
 const Main = imports.ui.main;
+const MessageTray = imports.ui.messageTray;
 
 const { ExtensionState, ExtensionType } = ExtensionUtils;
 
@@ -15,10 +17,13 @@ const DISABLED_EXTENSIONS_KEY = 'disabled-extensions';
 const DISABLE_USER_EXTENSIONS_KEY = 'disable-user-extensions';
 const EXTENSION_DISABLE_VERSION_CHECK_KEY = 'disable-extension-version-validation';
 
+const UPDATE_CHECK_TIMEOUT = 24 * 60 * 60; // 1 day in seconds
+
 var ExtensionManager = class {
     constructor() {
         this._initialized = false;
         this._enabled = false;
+        this._updateNotified = false;
 
         this._extensions = new Map();
         this._enabledExtensions = [];
@@ -45,7 +50,14 @@ var ExtensionManager = class {
             return GLib.SOURCE_REMOVE;
         });
 
+        this._installExtensionUpdates();
         this._sessionUpdated();
+
+        GLib.timeout_add_seconds(GLib.PRIORITY_DEFAULT, UPDATE_CHECK_TIMEOUT, () => {
+            ExtensionDownloader.checkForUpdates();
+            return GLib.SOURCE_CONTINUE;
+        });
+        ExtensionDownloader.checkForUpdates();
     }
 
     lookup(uuid) {
@@ -198,6 +210,27 @@ var ExtensionManager = class {
         return true;
     }
 
+    notifyExtensionUpdate(uuid) {
+        let extension = this.lookup(uuid);
+        if (!extension)
+            return;
+
+        extension.hasUpdate = true;
+        this.emit('extension-state-changed', extension);
+
+        if (!this._updateNotified) {
+            this._updateNotified = true;
+
+            let source = new ExtensionUpdateSource();
+            Main.messageTray.add(source);
+
+            let notification = new MessageTray.Notification(source,
+                _('Extension Updates Available'),
+                _('Extension updates are ready to be installed.'));
+            source.showNotification(notification);
+        }
+    }
+
     logExtensionError(uuid, error) {
         let extension = this.lookup(uuid);
         if (!extension)
@@ -253,6 +286,7 @@ 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);
@@ -446,6 +480,21 @@ 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));
@@ -531,3 +580,27 @@ var ExtensionManager = class {
     }
 };
 Signals.addSignalMethods(ExtensionManager.prototype);
+
+const ExtensionUpdateSource = GObject.registerClass(
+class ExtensionUpdateSource extends MessageTray.Source {
+    _init() {
+        let appSys = Shell.AppSystem.get_default();
+        this._app = appSys.lookup_app('org.gnome.Extensions.desktop');
+
+        super._init(this._app.get_name());
+    }
+
+    getIcon() {
+        return this._app.app_info.get_icon();
+    }
+
+    _createPolicy() {
+        return new MessageTray.NotificationApplicationPolicy(this._app.id);
+    }
+
+    open() {
+        this._app.activate();
+        Main.overview.hide();
+        Main.panel.closeCalendar();
+    }
+});

js/ui/iconGrid.js

@@ -9,8 +9,6 @@ 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;
@@ -28,6 +26,8 @@ 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,6 +194,23 @@ 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] } },
@@ -366,6 +383,7 @@ 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);
 
@@ -375,7 +393,9 @@ var IconGrid = GObject.registerClass({
             } else {
                 if (!animating)
                     children[i].opacity = 255;
-                children[i].allocate(childBox, flags);
+
+                if (animateIconPosition(children[i], childBox, flags, nChangedIcons))
+                    nChangedIcons++;
             }
 
             columnIndex++;
@@ -557,14 +577,14 @@ var IconGrid = GObject.registerClass({
 
                 actorClone.opacity = 0;
                 actorClone.set_scale(scaleX, scaleY);
-
-                actorClone.set_position(adjustedSourcePositionX, adjustedSourcePositionY);
+                actorClone.set_translation(
+                    adjustedSourcePositionX, adjustedSourcePositionY, 0);
 
                 let delay = (1 - (actor._distance - minDist) / normalization) * ANIMATION_MAX_DELAY_FOR_ITEM;
                 let [finalX, finalY]  = actor._transformedPosition;
                 movementParams = {
-                    x: finalX,
-                    y: finalY,
+                    translation_x: finalX,
+                    translation_y: finalY,
                     scale_x: 1,
                     scale_y: 1,
                     duration: ANIMATION_TIME_IN,
@@ -585,12 +605,12 @@ var IconGrid = GObject.registerClass({
                 let isLastItem = actor._distance == maxDist;
 
                 let [startX, startY]  = actor._transformedPosition;
-                actorClone.set_position(startX, startY);
+                actorClone.set_translation(startX, startY, 0);
 
                 let delay = (actor._distance - minDist) / normalization * ANIMATION_MAX_DELAY_OUT_FOR_ITEM;
                 movementParams = {
-                    x: adjustedSourcePositionX,
-                    y: adjustedSourcePositionY,
+                    translation_x: adjustedSourcePositionX,
+                    translation_y: adjustedSourcePositionY,
                     scale_x: scaleX,
                     scale_y: scaleY,
                     duration: ANIMATION_TIME_OUT,
@@ -824,10 +844,8 @@ var IconGrid = GObject.registerClass({
     }
 });
 
-var PaginatedIconGrid = GObject.registerClass({
-    Signals: { 'space-opened': {},
-               'space-closed': {} },
-}, class PaginatedIconGrid extends IconGrid {
+var PaginatedIconGrid = GObject.registerClass(
+class PaginatedIconGrid extends IconGrid {
     _init(params) {
         super._init(params);
         this._nPages = 0;
@@ -875,9 +893,13 @@ var PaginatedIconGrid = GObject.registerClass({
         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);
-            children[i].allocate(childBox, flags);
+
+            if (animateIconPosition(children[i], childBox, flags, nChangedIcons))
+                nChangedIcons++;
+
             children[i].show();
 
             columnIndex++;
@@ -955,94 +977,4 @@ var PaginatedIconGrid = GObject.registerClass({
             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'),
-            });
-        }
-    }
 });

js/ui/inhibitShortcutsDialog.js

@@ -1,5 +1,5 @@
 /* exported InhibitShortcutsDialog */
-const { Clutter, Gio, GLib, GObject, Gtk, Meta, Shell } = imports.gi;
+const { Clutter, Gio, GLib, GObject, Gtk, Meta, Shell, St } = imports.gi;
 
 const Dialog = imports.ui.dialog;
 const ModalDialog = imports.ui.modalDialog;
@@ -75,23 +75,25 @@ var InhibitShortcutsDialog = GObject.registerClass({
     _buildLayout() {
         let name = this._app ? this._app.get_name() : this._window.title;
 
-        /* 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 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'),
+        });
 
         let restoreAccel = this._getRestoreAccel();
         if (restoreAccel) {
-            contentParams.subtitle =
+            let restoreLabel = new St.Label({
                 /* Translators: %s is a keyboard shortcut like "Super+x" */
-                _("You can restore shortcuts by pressing %s.").format(restoreAccel);
+                text: _('You can restore shortcuts by pressing %s.').format(restoreAccel),
+                style_class: 'message-dialog-description',
+            });
+            content.add_child(restoreLabel);
         }
 
-        let content = new Dialog.MessageDialogContent(contentParams);
-        this._dialog.contentLayout.add_actor(content);
+        this._dialog.contentLayout.add_child(content);
 
         this._dialog.addButton({ label: _("Deny"),
                                  action: () => {

js/ui/kbdA11yDialog.js

@@ -15,14 +15,14 @@ class KbdA11yDialog extends GObject.Object {
 
         this._a11ySettings = new Gio.Settings({ schema_id: KEYBOARD_A11Y_SCHEMA });
 
-        let deviceManager = Clutter.DeviceManager.get_default();
-        deviceManager.connect('kbd-a11y-flags-changed',
-                              this._showKbdA11yDialog.bind(this));
+        let seat = Clutter.get_default_backend().get_default_seat();
+        seat.connect('kbd-a11y-flags-changed',
+                     this._showKbdA11yDialog.bind(this));
     }
 
-    _showKbdA11yDialog(deviceManager, newFlags, whatChanged) {
+    _showKbdA11yDialog(seat, newFlags, whatChanged) {
         let dialog = new ModalDialog.ModalDialog();
-        let title, body;
+        let title, description;
         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");
-            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.");
+            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.');
 
         } 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");
-            body = enabled
+            description = 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,11 +49,8 @@ class KbdA11yDialog extends GObject.Object {
             return;
         }
 
-        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);
+        let content = new Dialog.MessageDialogContent({ title, description });
+        dialog.contentLayout.add_child(content);
 
         dialog.addButton({ label: enabled ? _("Leave On") : _("Turn On"),
                            action: () => {

js/ui/keyboard.js

@@ -614,6 +614,7 @@ var EmojiPager = GObject.registerClass({
             layout_manager: new Clutter.BinLayout(),
             reactive: true,
             clip_to_allocation: true,
+            y_expand: true,
         });
         this._sections = sections;
         this._nCols = nCols;
@@ -934,7 +935,6 @@ var EmojiSelection = GObject.registerClass({
         this.add_child(bottomRow);
 
         this._curPage = 0;
-        this._emojiPager.setCurrentPage(0);
     }
 
     vfunc_map() {
@@ -942,11 +942,6 @@ 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);
@@ -1107,13 +1102,10 @@ var KeyboardManager = class KeyBoardManager {
         this._a11yApplicationsSettings = new Gio.Settings({ schema_id: A11Y_APPLICATIONS_SCHEMA });
         this._a11yApplicationsSettings.connect('changed', this._syncEnabled.bind(this));
 
-        this._lastDeviceId = null;
-        Meta.get_backend().connect('last-device-changed', (backend, deviceId) => {
-            let manager = Clutter.DeviceManager.get_default();
-            let device = manager.get_device(deviceId);
-
+        this._lastDevice = null;
+        Meta.get_backend().connect('last-device-changed', (backend, device) => {
             if (device.get_device_name().indexOf('XTEST') < 0) {
-                this._lastDeviceId = deviceId;
+                this._lastDevice = device;
                 this._syncEnabled();
             }
         });
@@ -1121,16 +1113,11 @@ var KeyboardManager = class KeyBoardManager {
     }
 
     _lastDeviceIsTouchscreen() {
-        if (!this._lastDeviceId)
+        if (!this._lastDevice)
             return false;
 
-        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;
+        let deviceType = this._lastDevice.get_device_type();
+        return deviceType == Clutter.InputDeviceType.TOUCHSCREEN_DEVICE;
     }
 
     _syncEnabled() {
@@ -1290,7 +1277,10 @@ class Keyboard extends St.BoxLayout {
         this._suggestions = new Suggestions();
         this.add_child(this._suggestions);
 
-        this._aspectContainer = new AspectContainer({ layout_manager: new Clutter.BinLayout() });
+        this._aspectContainer = new AspectContainer({
+            layout_manager: new Clutter.BinLayout(),
+            y_expand: true,
+        });
         this.add_child(this._aspectContainer);
 
         this._emojiSelection = new EmojiSelection();
@@ -1590,7 +1580,17 @@ class Keyboard extends St.BoxLayout {
 
         let maxHeight = monitor.height / 3;
         this.width = monitor.width;
-        this.height = maxHeight;
+
+        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));
+        }
     }
 
     _onGroupChanged() {
@@ -1829,8 +1829,8 @@ class Keyboard extends St.BoxLayout {
 
 var KeyboardController = class {
     constructor() {
-        let deviceManager = Clutter.DeviceManager.get_default();
-        this._virtualDevice = deviceManager.create_virtual_device(Clutter.InputDeviceType.KEYBOARD_DEVICE);
+        let seat = Clutter.get_default_backend().get_default_seat();
+        this._virtualDevice = seat.create_virtual_device(Clutter.InputDeviceType.KEYBOARD_DEVICE);
 
         this._inputSourceManager = InputSourceManager.getInputSourceManager();
         this._sourceChangedId = this._inputSourceManager.connect('current-source-changed',

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.2;
+var VIGNETTE_BRIGHTNESS = 0.5;
 var VIGNETTE_SHARPNESS = 0.7;
 
 const VIGNETTE_DECLARATIONS = '\

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 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);
+        let seat = Clutter.get_default_backend().get_default_seat();
+        this._pointerDevice = seat.get_pointer();
+        this._keyboardDevice = seat.get_keyboard();
 
         this._pointerDevice.grab(eventHandler);
         this._keyboardDevice.grab(eventHandler);

js/ui/magnifier.js

@@ -745,7 +745,7 @@ var ZoomRegion = class ZoomRegion {
         this._xCaret = 0;
         this._yCaret = 0;
 
-        this._pointerIdleMonitor = Meta.IdleMonitor.get_for_device(Meta.VIRTUAL_CORE_POINTER_ID);
+        this._pointerIdleMonitor = Meta.IdleMonitor.get_core();
         this._scrollContentsTimerId = 0;
     }
 

js/ui/overview.js

@@ -137,6 +137,7 @@ class OverviewActor extends St.BoxLayout {
 var Overview = class {
     constructor() {
         this._initCalled = false;
+        this._visible = false;
 
         Main.sessionMode.connect('updated', this._sessionUpdated.bind(this));
         this._sessionUpdated();
@@ -689,5 +690,9 @@ var Overview = class {
 
         return this.dash.showAppsButton;
     }
+
+    get searchEntry() {
+        return this._overview.searchEntry;
+    }
 };
 Signals.addSignalMethods(Overview.prototype);

js/ui/overviewControls.js

@@ -31,15 +31,10 @@ 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);
@@ -72,7 +67,7 @@ var SlideLayout = GObject.registerClass({
             : availWidth - natWidth * this._slideX;
 
         let actorBox = new Clutter.ActorBox();
-        actorBox.x1 = box.x1 + alignX + this._translationX;
+        actorBox.x1 = box.x1 + alignX;
         actorBox.x2 = actorBox.x1 + (child.x_expand ? availWidth : natWidth);
         actorBox.y1 = box.y1;
         actorBox.y2 = actorBox.y1 + availHeight;
@@ -102,20 +97,6 @@ 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(
@@ -184,11 +165,12 @@ class SlidingControl extends St.Widget {
         else
             translationEnd = translation;
 
-        if (this.layout.translation_x == translationEnd)
+        if (this.translation_x === translationEnd)
             return;
 
-        this.layout.translation_x = translationStart;
-        this.ease_property('@layout.translation-x', translationEnd, {
+        this.translation_x = translationStart;
+        this.ease({
+            translation_x: translationEnd,
             mode: Clutter.AnimationMode.EASE_OUT_QUAD,
             duration: SIDE_CONTROLS_ANIMATION_TIME,
         });
@@ -436,11 +418,28 @@ class ControlsManager extends St.Widget {
         this._dashSpacer = new DashSpacer();
         this._dashSpacer.setDashActor(this._dashSlider);
 
-        this._thumbnailsBox = new WorkspaceThumbnail.ThumbnailsBox();
+        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._thumbnailsSlider = new ThumbnailsSlider(this._thumbnailsBox);
 
         this.viewSelector = new ViewSelector.ViewSelector(searchEntry,
-                                                          this.dash.showAppsButton);
+            this._workspaceAdjustment, this.dash.showAppsButton);
         this.viewSelector.connect('page-changed', this._setVisibility.bind(this));
         this.viewSelector.connect('page-empty', this._onPageEmpty.bind(this));
 
@@ -457,6 +456,24 @@ 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() {

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 deviceManager = Clutter.DeviceManager.get_default();
-        this._deviceAddedId = deviceManager.connect('device-added', (manager, device) => {
+        let seat = Clutter.get_default_backend().get_default_seat();
+        this._deviceAddedId = seat.connect('device-added', (_seat, device) => {
             if (device.get_device_type() == Clutter.InputDeviceType.PAD_DEVICE &&
                 this.padDevice.is_grouped(device)) {
                 this._groupPads.push(device);
                 this._updatePadChooser();
             }
         });
-        this._deviceRemovedId = deviceManager.connect('device-removed', (manager, device) => {
+        this._deviceRemovedId = seat.connect('device-removed', (_seat, device) => {
             // If the device is being removed, destroy the padOsd.
             if (device == this.padDevice) {
                 this.destroy();
@@ -669,7 +669,7 @@ var PadOsd = GObject.registerClass({
             }
         });
 
-        deviceManager.list_devices().forEach(device => {
+        seat.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 deviceManager = Clutter.DeviceManager.get_default();
+        let seat = Clutter.get_default_backend().get_default_seat();
         if (this._deviceRemovedId != 0) {
-            deviceManager.disconnect(this._deviceRemovedId);
+            seat.disconnect(this._deviceRemovedId);
             this._deviceRemovedId = 0;
         }
         if (this._deviceAddedId != 0) {
-            deviceManager.disconnect(this._deviceAddedId);
+            seat.disconnect(this._deviceAddedId);
             this._deviceAddedId = 0;
         }
 
@@ -990,8 +990,8 @@ var PadOsdService = class {
 
     ShowAsync(params, invocation) {
         let [deviceNode, editionMode] = params;
-        let deviceManager = Clutter.DeviceManager.get_default();
-        let devices = deviceManager.list_devices();
+        let seat = Clutter.get_default_backend().get_default_seat();
+        let devices = seat.list_devices();
         let padDevice = null;
 
         devices.forEach(device => {

js/ui/pointerA11yTimeout.js

@@ -108,9 +108,9 @@ var PieTimer = GObject.registerClass({
 
 var PointerA11yTimeout = class PointerA11yTimeout {
     constructor() {
-        let manager = Clutter.DeviceManager.get_default();
+        let seat = Clutter.get_default_backend().get_default_seat();
 
-        manager.connect('ptr-a11y-timeout-started', (o, device, type, timeout) => {
+        seat.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);
         });
 
-        manager.connect('ptr-a11y-timeout-stopped', (o, device, type, clicked) => {
+        seat.connect('ptr-a11y-timeout-stopped', (o, device, type, clicked) => {
             if (!clicked)
                 this._pieTimer.destroy();
 

js/ui/popupMenu.js

@@ -305,25 +305,44 @@ class PopupSeparatorMenuItem extends PopupBaseMenuItem {
     }
 });
 
-var Switch = GObject.registerClass(
-class Switch extends St.Bin {
+var Switch = GObject.registerClass({
+    Properties: {
+        'state': GObject.ParamSpec.boolean(
+            'state', 'state', 'state',
+            GObject.ParamFlags.READWRITE,
+            false),
+    },
+}, class Switch extends St.Bin {
     _init(state) {
-        super._init({ style_class: 'toggle-switch',
-                      accessible_role: Atk.Role.CHECK_BOX,
-                      can_focus: true });
-        this.setToggleState(state);
+        this._state = false;
+
+        super._init({
+            style_class: 'toggle-switch',
+            accessible_role: Atk.Role.CHECK_BOX,
+            can_focus: true,
+            state,
+        });
     }
 
-    setToggleState(state) {
+    get state() {
+        return this._state;
+    }
+
+    set state(state) {
+        if (this._state === state)
+            return;
+
         if (state)
             this.add_style_pseudo_class('checked');
         else
             this.remove_style_pseudo_class('checked');
-        this.state = state;
+
+        this._state = state;
+        this.notify('state');
     }
 
     toggle() {
-        this.setToggleState(!this.state);
+        this.state = !this.state;
     }
 });
 
@@ -393,7 +412,7 @@ var PopupSwitchMenuItem = GObject.registerClass({
     }
 
     setToggleState(state) {
-        this._switch.setToggleState(state);
+        this._switch.state = state;
         this.checkAccessibleState();
     }
 

js/ui/runDialog.js

@@ -3,6 +3,7 @@
 
 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;
@@ -18,13 +19,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 });
@@ -54,58 +55,41 @@ class RunDialog extends ModalDialog.ModalDialog {
             },
         };
 
-        let label = new St.Label({ style_class: 'run-dialog-label',
-                                   text: _("Enter a Command") });
+        let title = _('Run a Command');
 
-        this.contentLayout.add_child(label);
+        let content = new Dialog.MessageDialogContent({ title });
+        this.contentLayout.add_actor(content);
 
-        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;
-        this.contentLayout.add_child(entry);
+        content.add_child(entry);
         this.setInitialKeyFocus(this._entryText);
 
-        this._errorBox = new St.BoxLayout({ style_class: 'run-dialog-error-box' });
+        let defaultDescriptionText = _('Press ESC to close');
 
-        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._descriptionLabel = new St.Label({
+            style_class: 'run-dialog-description',
+            text: defaultDescriptionText,
+        });
+        content.add_child(this._descriptionLabel);
 
         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();
@@ -128,6 +112,18 @@ 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) {
@@ -216,7 +212,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
@@ -234,24 +230,7 @@ class RunDialog extends ModalDialog.ModalDialog {
 
     _showError(message) {
         this._commandError = true;
-
-        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();
-                },
-            });
-        }
+        this._descriptionLabel.set_text(message);
     }
 
     _restart() {
@@ -266,7 +245,6 @@ class RunDialog extends ModalDialog.ModalDialog {
 
     open() {
         this._history.lastItem();
-        this._errorBox.hide();
         this._entryText.set_text('');
         this._commandError = false;