Add a confirmation dialog for display changes

Unfortunately, display configuration can and does fail, due
to unspecified HW constraints, drivers bugs, unsupported exotic
configurations or just bad luck.
So when the user makes a change in the control center, show
a dialog asking him if it looks OK, and revert back after 20 seconds
otherwise.

https://bugzilla.gnome.org/show_bug.cgi?id=706208

js/ui/windowManager.js

@@ -6,12 +6,14 @@ const Gio = imports.gi.Gio;
 const Lang = imports.lang;
 const Mainloop = imports.mainloop;
 const Meta = imports.gi.Meta;
+const Pango = imports.gi.Pango;
 const St = imports.gi.St;
 const Shell = imports.gi.Shell;
 
 const AltTab = imports.ui.altTab;
 const WorkspaceSwitcherPopup = imports.ui.workspaceSwitcherPopup;
 const Main = imports.ui.main;
+const ModalDialog = imports.ui.modalDialog;
 const Tweener = imports.ui.tweener;
 
 const SHELL_KEYBINDINGS_SCHEMA = 'org.gnome.shell.keybindings';
@@ -20,6 +22,107 @@ const DIM_BRIGHTNESS = -0.3;
 const DIM_TIME = 0.500;
 const UNDIM_TIME = 0.250;
 
+const DISPLAY_REVERT_TIMEOUT = 20; // in seconds - keep in sync with mutter
+const ONE_SECOND = 1000; // in ms
+
+const DisplayChangeDialog = new Lang.Class({
+    Name: 'DisplayChangeDialog',
+    Extends: ModalDialog.ModalDialog,
+
+    _init: function(wm) {
+        this.parent({ styleClass: 'prompt-dialog' });
+
+        this._wm = wm;
+
+        let mainContentBox = new St.BoxLayout({ style_class: 'prompt-dialog-main-layout',
+                                                vertical: false });
+        this.contentLayout.add(mainContentBox,
+                               { x_fill: true,
+                                 y_fill: true });
+
+        let icon = new St.Icon({ icon_name: 'preferences-desktop-display-symbolic' });
+        mainContentBox.add(icon,
+                           { x_fill:  true,
+                             y_fill:  false,
+                             x_align: St.Align.END,
+                             y_align: St.Align.START });
+
+        let messageBox = new St.BoxLayout({ style_class: 'prompt-dialog-message-layout',
+                                            vertical: true });
+        mainContentBox.add(messageBox,
+                           { expand: true, y_align: St.Align.START });
+
+        let subjectLabel = new St.Label({ style_class: 'prompt-dialog-headline',
+                                            text: _("Do you want to keep these display settings?") });
+        messageBox.add(subjectLabel,
+                       { y_fill:  false,
+                         y_align: St.Align.START });
+
+        this._countDown = DISPLAY_REVERT_TIMEOUT;
+        let message = this._formatCountDown();
+        this._descriptionLabel = new St.Label({ style_class: 'prompt-dialog-description',
+                                                text: this._formatCountDown() });
+        this._descriptionLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
+        this._descriptionLabel.clutter_text.line_wrap = true;
+
+        messageBox.add(this._descriptionLabel,
+                       { y_fill:  true,
+                         y_align: St.Align.START });
+
+        /* Translators: this and the following message should be limited in lenght,
+           to avoid ellipsizing the labels.
+        */
+        this._cancelButton = this.addButton({ label: _("Revert Settings"),
+                                              action: Lang.bind(this, this._onFailure),
+                                              key: Clutter.Escape },
+                                            { expand: true, x_fill: false, x_align: St.Align.START });
+        this._okButton = this.addButton({ label:  _("Keep Changes"),
+                                          action: Lang.bind(this, this._onSuccess),
+                                          default: true },
+                                        { expand: false, x_fill: false, x_align: St.Align.END });
+
+        this._timeoutId = Mainloop.timeout_add(ONE_SECOND, Lang.bind(this, this._tick));
+    },
+
+    close: function(timestamp) {
+        if (this._timeoutId > 0) {
+            Mainloop.source_remove(this._timeoutId);
+            this._timeoutId = 0;
+        }
+
+        this.parent(timestamp);
+    },
+
+    _formatCountDown: function() {
+        let fmt = ngettext("Settings changes will revert in %d second",
+                           "Settings changes will revert in %d seconds");
+        return fmt.format(this._countDown);
+    },
+
+    _tick: function() {
+        this._countDown--;
+
+        if (this._countDown == 0) {
+            /* mutter already takes care of failing at timeout */
+            this._timeoutId = 0;
+            this.close();
+            return false;
+        }
+
+        this._descriptionLabel.text = this._formatCountDown();
+        return true;
+    },
+
+    _onFailure: function() {
+        this._wm.complete_display_change(false);
+        this.close();
+    },
+
+    _onSuccess: function() {
+        this._wm.complete_display_change(true);
+        this.close();
+    },
+});
 
 const WindowDimmer = new Lang.Class({
     Name: 'WindowDimmer',
@@ -306,6 +409,7 @@ const WindowManager = new Lang.Class({
         this._shellwm.connect('map', Lang.bind(this, this._mapWindow));
         this._shellwm.connect('destroy', Lang.bind(this, this._destroyWindow));
         this._shellwm.connect('filter-keybinding', Lang.bind(this, this._filterKeybinding));
+        this._shellwm.connect('confirm-display-change', Lang.bind(this, this._confirmDisplayChange));
 
         this._workspaceSwitcherPopup = null;
         this.setCustomKeybindingHandler('switch-to-workspace-left',
@@ -1056,4 +1160,9 @@ const WindowManager = new Lang.Class({
             workspace.activate_with_focus (window, global.get_current_time());
         }
     },
+
+    _confirmDisplayChange: function() {
+        let dialog = new DisplayChangeDialog(this._shellwm);
+        dialog.open();
+    },
 });