Make the DisplayChange dialog a clutter dialog

js/ui/modalDialog.js

@@ -16,6 +16,7 @@ const Params = imports.misc.params;
 const Util = imports.misc.util;
 
 const Dialog = imports.ui.dialog;
+const Layout = imports.ui.layout;
 const Lightbox = imports.ui.lightbox;
 const Main = imports.ui.main;
 
@@ -82,8 +83,10 @@ var ModalDialog = GObject.registerClass({
 
         Main.uiGroup.add_actor(this);
 
-        let constraint = new Clutter.BindConstraint({ source: global.stage,
-                                                      coordinate: Clutter.BindCoordinate.POSITION | Clutter.BindCoordinate.SIZE });
+        let constraint = new Clutter.BindConstraint({
+            source: global.stage,
+            coordinate: Clutter.BindCoordinate.POSITION | Clutter.BindCoordinate.SIZE
+        });
         this.add_constraint(constraint);
 
         this.backgroundStack = new St.Widget({ layout_manager: new Clutter.BinLayout() });
@@ -92,6 +95,8 @@ var ModalDialog = GObject.registerClass({
             x_fill: true,
             y_fill: true
         });
+        this._monitorConstraint = new Layout.MonitorConstraint();
+        this._backgroundBin.add_constraint(this._monitorConstraint);
         this.add_actor(this._backgroundBin);
 
         this.dialogLayout = new Dialog.Dialog(this.backgroundStack, params.styleClass);
@@ -177,10 +182,7 @@ var ModalDialog = GObject.registerClass({
     }
 
     _fadeOpen() {
-        let monitor = Main.layoutManager.currentMonitor;
-
-        this._backgroundBin.set_position(monitor.x, monitor.y);
-        this._backgroundBin.set_size(monitor.width, monitor.height);
+        this._monitorConstraint.index = global.display.get_current_monitor();
 
         this._setState(State.OPENING);
 

js/ui/windowManager.js

@@ -11,6 +11,7 @@ const Main = imports.ui.main;
 const WindowMenu = imports.ui.windowMenu;
 const GObject = imports.gi.GObject;
 const AppSwitcher = imports.ui.appSwitcher.appSwitcher;
+const Dialog = imports.ui.dialog;
 const ModalDialog = imports.ui.modalDialog;
 const WmGtkDialogs = imports.ui.wmGtkDialogs;
 const CloseDialog = imports.ui.closeDialog;
@@ -28,6 +29,7 @@ const WINDOW_ANIMATION_TIME_MULTIPLIERS = [
 ]
 
 const EASING_MULTIPLIER = 1000; // multiplier for tweening.time ---> easing.duration
+var ONE_SECOND = 1000; // in ms
 
 const DIM_TIME = 0.500;
 const DIM_BRIGHTNESS = -0.2;
@@ -62,6 +64,75 @@ const ZONE_TR = 5;
 const ZONE_BR = 6;
 const ZONE_BL = 7;
 
+var DisplayChangeDialog = GObject.registerClass(
+class DisplayChangeDialog extends ModalDialog.ModalDialog {
+    _init(wm) {
+        super._init();
+
+        this._wm = wm;
+
+        this._countDown = Meta.MonitorManager.get_display_configuration_timeout();
+
+        // Translators: This string should be shorter than 30 characters
+        let title = _("Keep these display settings?");
+        let description = this._formatCountDown();
+
+        this._content = new Dialog.MessageDialogContent({ title, description });
+        this.contentLayout.add_child(this._content);
+
+        /* Translators: this and the following message should be limited in length,
+           to avoid ellipsizing the labels.
+        */
+        this._cancelButton = this.addButton({ label: _("Revert Settings"),
+                                              action: this._onFailure.bind(this),
+                                              key: Clutter.KEY_Escape });
+        this._okButton = this.addButton({ label: _("Keep Changes"),
+                                          action: this._onSuccess.bind(this),
+                                          default: true });
+
+        this._timeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, ONE_SECOND, this._tick.bind(this));
+        GLib.Source.set_name_by_id(this._timeoutId, '[cinnamon] this._tick');
+    }
+
+    close(timestamp) {
+        if (this._timeoutId > 0) {
+            GLib.source_remove(this._timeoutId);
+            this._timeoutId = 0;
+        }
+
+        super.close(timestamp);
+    }
+
+    _formatCountDown() {
+        let fmt = ngettext("Settings changes will revert in %d second",
+                           "Settings changes will revert in %d seconds");
+        return fmt.format(this._countDown);
+    }
+
+    _tick() {
+        this._countDown--;
+        if (this._countDown == 0) {
+            /* muffin already takes care of failing at timeout */
+            this._timeoutId = 0;
+            this.close();
+            return GLib.SOURCE_REMOVE;
+        }
+
+        this._content.description = this._formatCountDown();
+        return GLib.SOURCE_CONTINUE;
+    }
+
+    _onFailure() {
+        this._wm.complete_display_change(false);
+        this.close();
+    }
+
+    _onSuccess() {
+        this._wm.complete_display_change(true);
+        this.close();
+    }
+});
+
 class WindowDimmer {
     constructor(actor) {
         this._brightnessEffect = new Clutter.BrightnessContrastEffect({
@@ -1398,7 +1469,7 @@ var WindowManager = class WindowManager {
     }
 
     _confirmDisplayChange() {
-        let dialog = new WmGtkDialogs.DisplayChangesDialog(this._cinnamonwm);
+        let dialog = new DisplayChangeDialog(this._cinnamonwm);
         dialog.open();
     }
 };

js/ui/wmGtkDialogs.js

@@ -1,59 +1,9 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 
-const { Clutter, Gio, GLib, GObject, Meta, St } = imports.gi;
+const Gio = imports.gi.Gio;
 
 const SIGTERM = 15;
 
-var DisplayChangesDialog = class {
-    constructor(wm) {
-        this._wm = wm;
-        this._countDown = Meta.MonitorManager.get_display_configuration_timeout();
-    }
-
-    open() {
-        try {
-            this.proc = Gio.Subprocess.new(
-                [
-                "cinnamon-display-changes-dialog",
-                 this._countDown.toString()
-                ],
-                0);
-
-            this.proc.wait_async(null, this._wait_finish.bind(this));
-        } catch (e) {
-            global.logWarning(`Could not spawn display dialog: ${e}`);
-
-            this.proc = null;
-            this._revert();
-        }
-    }
-
-    _wait_finish(proc, result) {
-        try {
-            this.proc.wait_finish(result);
-        } catch (e) {
-            global.logWarning(`Something went wrong with display dialog: ${e}`);
-            this._revert();
-        }
-
-        if (this.proc.get_status() == 0) {
-            this._keep();
-        } else {
-            this._revert()
-        }
-    }
-
-    _revert() {
-        log("Reverting display changes");
-        this._wm.complete_display_change(false);
-    }
-
-    _keep() {
-        log("Confirm display changes");
-        this._wm.complete_display_change(true);
-    }
-};
-
 var HoverClickHelper = class {
     constructor(wm) {
         this.proc = null;