welcomeDialog: Add “welcome” dialog

As designed at:
https://gitlab.gnome.org/Teams/Design/os-mockups/-/blob/master/greeter/welcome-dialog.png

Closes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/3632
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1619>

js/js-resources.gresource.xml

@@ -106,6 +106,7 @@
     <file>ui/unlockDialog.js</file>
     <file>ui/userWidget.js</file>
     <file>ui/viewSelector.js</file>
+    <file>ui/welcomeDialog.js</file>
     <file>ui/windowAttentionHandler.js</file>
     <file>ui/windowMenu.js</file>
     <file>ui/windowManager.js</file>

js/ui/main.js

@@ -29,6 +29,7 @@ const PadOsd = imports.ui.padOsd;
 const Panel = imports.ui.panel;
 const Params = imports.misc.params;
 const RunDialog = imports.ui.runDialog;
+const WelcomeDialog = imports.ui.welcomeDialog;
 const Layout = imports.ui.layout;
 const LoginManager = imports.misc.loginManager;
 const LookingGlass = imports.ui.lookingGlass;
@@ -58,6 +59,7 @@ var panel = null;
 var overview = null;
 var runDialog = null;
 var lookingGlass = null;
+var welcomeDialog = null;
 var wm = null;
 var messageTray = null;
 var screenShield = null;
@@ -120,6 +122,8 @@ function _sessionUpdated() {
             runDialog.close();
         if (lookingGlass)
             lookingGlass.close();
+        if (welcomeDialog)
+            welcomeDialog.close();
     }
 
     let remoteAccessController = global.backend.get_remote_access_controller();
@@ -642,6 +646,13 @@ function openRunDialog() {
     runDialog.open();
 }
 
+function openWelcomeDialog() {
+    if (welcomeDialog === null)
+        welcomeDialog = new WelcomeDialog.WelcomeDialog();
+
+    welcomeDialog.open();
+}
+
 /**
  * activateWindow:
  * @param {Meta.Window} window: the window to activate

js/ui/welcomeDialog.js

@@ -0,0 +1,59 @@
+// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
+/* exported WelcomeDialog */
+
+const { Clutter, GObject, Shell, St } = imports.gi;
+
+const Config = imports.misc.config;
+const Dialog = imports.ui.dialog;
+const ModalDialog = imports.ui.modalDialog;
+
+var DialogResponse = {
+    NO_THANKS: 0,
+    TAKE_TOUR: 1,
+};
+
+var WelcomeDialog = GObject.registerClass(
+class WelcomeDialog extends ModalDialog.ModalDialog {
+    _init() {
+        super._init({ styleClass: 'welcome-dialog' });
+
+        const appSystem = Shell.AppSystem.get_default();
+        this._tourAppInfo = appSystem.lookup_app('org.gnome.Tour.desktop');
+
+        this._buildLayout();
+    }
+
+    open() {
+        if (!this._tourAppInfo)
+            return;
+
+        super.open();
+    }
+
+    _buildLayout() {
+        const [majorVersion] = Config.PACKAGE_VERSION.split('.');
+        const title = _('Welcome to GNOME %s'.format(majorVersion));
+        const description = _('If you want to learn your way around, check out the tour.');
+        const content = new Dialog.MessageDialogContent({ title, description });
+
+        const icon = new St.Widget({ style_class: 'welcome-dialog-image' });
+        content.insert_child_at_index(icon, 0);
+
+        this.contentLayout.add_child(content);
+
+        this.addButton({ label: _('No Thanks'),
+            action: () => {
+                this._sendResponse(DialogResponse.NO_THANKS);
+            },
+            key: Clutter.KEY_Escape });
+        this.addButton({ label: _('Take Tour'),
+            action: () => this._sendResponse(DialogResponse.TAKE_TOUR) });
+    }
+
+    _sendResponse(response) {
+        if (response === DialogResponse.TAKE_TOUR)
+            this._tourAppInfo.launch(0, -1, Shell.AppLaunchGpu.APP_PREF);
+
+        this.close();
+    }
+});