Add scaffolding for the new screenshot UI

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1954>

data/org.gnome.shell.gschema.xml.in

@@ -230,6 +230,10 @@
       <default>["&lt;Super&gt;9"]</default>
       <summary>Switch to application 9</summary>
     </key>
+    <key name="show-screenshot-ui" type="as">
+      <default>["Print"]</default>
+      <summary>Show screenshot UI</summary>
+    </key>
   </schema>
 
   <schema id="org.gnome.shell.app-switcher"

js/ui/layout.js

@@ -256,6 +256,12 @@ var LayoutManager = GObject.registerClass({
         this.addTopChrome(this.keyboardBox);
         this._keyboardHeightNotifyId = 0;
 
+        this.screenshotUIGroup = new St.Widget({
+            name: 'screenshotUIGroup',
+            layout_manager: new Clutter.BinLayout(),
+        });
+        this.addTopChrome(this.screenshotUIGroup);
+
         // A dummy actor that tracks the mouse or text cursor, based on the
         // position and size set in setDummyCursorGeometry.
         this.dummyCursor = new St.Widget({ width: 0, height: 0, opacity: 0 });

js/ui/main.js

@@ -6,7 +6,7 @@
             screenSaverDBus, uiGroup, magnifier, xdndHandler, keyboard,
             kbdA11yDialog, introspectService, start, pushModal, popModal,
             activateWindow, createLookingGlass, initializeDeferredWork,
-            getThemeStylesheet, setThemeStylesheet */
+            getThemeStylesheet, setThemeStylesheet, screenshotUI */
 
 const { Clutter, Gio, GLib, GObject, Meta, Shell, St } = imports.gi;
 
@@ -35,6 +35,7 @@ const LoginManager = imports.misc.loginManager;
 const LookingGlass = imports.ui.lookingGlass;
 const NotificationDaemon = imports.ui.notificationDaemon;
 const WindowAttentionHandler = imports.ui.windowAttentionHandler;
+const Screenshot = imports.ui.screenshot;
 const ScreenShield = imports.ui.screenShield;
 const Scripting = imports.ui.scripting;
 const SessionMode = imports.ui.sessionMode;
@@ -74,6 +75,7 @@ var padOsdService = null;
 var osdWindowManager = null;
 var osdMonitorLabeler = null;
 var sessionMode = null;
+var screenshotUI = null;
 var shellAccessDialogDBusService = null;
 var shellAudioSelectionDBusService = null;
 var shellDBusService = null;
@@ -224,6 +226,8 @@ function _initializeUI() {
     windowAttentionHandler = new WindowAttentionHandler.WindowAttentionHandler();
     componentManager = new Components.ComponentManager();
 
+    screenshotUI = new Screenshot.ScreenshotUI();
+
     introspectService = new Introspect.IntrospectService();
 
     layoutManager.init();

js/ui/screenshot.js

@@ -1,5 +1,5 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
-/* exported ScreenshotService */
+/* exported ScreenshotService, ScreenshotUI, showScreenshotUI */
 
 const { Clutter, Gio, GObject, GLib, Meta, Shell, St } = imports.gi;
 
@@ -19,6 +19,97 @@ const { DBusSenderChecker } = imports.misc.util;
 
 const ScreenshotIface = loadInterfaceXML('org.gnome.Shell.Screenshot');
 
+var ScreenshotUI = GObject.registerClass(
+class ScreenshotUI extends St.Widget {
+    _init() {
+        super._init({
+            name: 'screenshot-ui',
+            constraints: new Clutter.BindConstraint({
+                source: global.stage,
+                coordinate: Clutter.BindCoordinate.ALL,
+            }),
+            layout_manager: new Clutter.BinLayout(),
+            opacity: 0,
+            visible: false,
+        });
+
+        Main.layoutManager.screenshotUIGroup.add_child(this);
+
+        this._grabHelper = new GrabHelper.GrabHelper(this, {
+            actionMode: Shell.ActionMode.POPUP,
+        });
+
+        Main.layoutManager.connect('monitors-changed', () => {
+            // Nope, not dealing with monitor changes.
+            this.close(true);
+        });
+
+        Main.wm.addKeybinding(
+            'show-screenshot-ui',
+            new Gio.Settings({ schema_id: 'org.gnome.shell.keybindings' }),
+            Meta.KeyBindingFlags.IGNORE_AUTOREPEAT,
+            Shell.ActionMode.NORMAL |
+            Shell.ActionMode.OVERVIEW |
+            Shell.ActionMode.SYSTEM_MODAL |
+            Shell.ActionMode.LOOKING_GLASS |
+            Shell.ActionMode.POPUP,
+            showScreenshotUI
+        );
+    }
+
+    open() {
+        // Get rid of any popup menus.
+        // We already have them captured on the screenshot anyway.
+        //
+        // This needs to happen before the grab below as closing menus will
+        // pop their grabs.
+        Main.layoutManager.emit('system-modal-opened');
+
+        const grabResult = this._grabHelper.grab({
+            actor: this,
+            onUngrab: () => this.close(),
+        });
+        if (!grabResult)
+            return;
+
+        this.remove_all_transitions();
+        this.visible = true;
+        this.ease({
+            opacity: 255,
+            duration: 200,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+        });
+    }
+
+    _finishClosing() {
+        this.hide();
+    }
+
+    close(instantly = false) {
+        this._grabHelper.ungrab();
+
+        if (instantly) {
+            this._finishClosing();
+            return;
+        }
+
+        this.remove_all_transitions();
+        this.ease({
+            opacity: 0,
+            duration: 200,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+            onComplete: this._finishClosing.bind(this),
+        });
+    }
+});
+
+/**
+ * Shows the screenshot UI.
+ */
+function showScreenshotUI() {
+    Main.screenshotUI.open();
+}
+
 var ScreenshotService = class {
     constructor() {
         this._dbusImpl = Gio.DBusExportedObject.wrapJSObject(ScreenshotIface, this);