[gnome-shell] screenshot-ui: Add screencast area indicator

[Marge Bot <marge-bot src gnome org>]

commit 1107fc50cac803fd6244b1586e94b05c7e89ff68
Author: Ivan Molodetskikh <yalterz gmail com>
Date:   Sat Nov 27 16:31:19 2021 +0300

    screenshot-ui: Add screencast area indicator
    
    It shows the screencast area during recording.
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2103>

 js/ui/screenshot.js | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
---
diff --git a/js/ui/screenshot.js b/js/ui/screenshot.js
index 54c56f8465..840df466bc 100644
--- a/js/ui/screenshot.js
+++ b/js/ui/screenshot.js
@@ -1035,6 +1035,22 @@ var ScreenshotUI = GObject.registerClass({
         Main.layoutManager.screenshotUIGroup.add_child(
             this._stageScreenshotContainer);
 
+        this._screencastAreaIndicator = new UIAreaIndicator({
+            style_class: 'screenshot-ui-screencast-area-indicator',
+            visible: false,
+        });
+        this._screencastAreaIndicator.add_constraint(new Clutter.BindConstraint({
+            source: global.stage,
+            coordinate: Clutter.BindCoordinate.ALL,
+        }));
+        this.bind_property(
+            'screencast-in-progress',
+            this._screencastAreaIndicator,
+            'visible',
+            GObject.BindingFlags.DEFAULT);
+        // Add it directly to the stage so that it's above popup menus.
+        global.stage.add_child(this._screencastAreaIndicator);
+
         Main.layoutManager.screenshotUIGroup.add_child(this);
 
         this._stageScreenshot = new St.Widget({ style_class: 'screenshot-ui-screen-screenshot' });
@@ -1846,6 +1862,19 @@ var ScreenshotUI = GObject.registerClass({
         const [x, y, w, h] = this._getSelectedGeometry(false);
         const drawCursor = this._cursor.visible;
 
+        // Set up the screencast indicator rect.
+        if (this._selectionButton.checked) {
+            this._screencastAreaIndicator.setSelectionRect(
+                ...this._areaSelector.getGeometry());
+        } else if (this._screenButton.checked) {
+            const index =
+                this._screenSelectors.findIndex(screen => screen.checked);
+            const monitor = Main.layoutManager.monitors[index];
+
+            this._screencastAreaIndicator.setSelectionRect(
+                monitor.x, monitor.y, monitor.width, monitor.height);
+        }
+
         // Close instantly so the fade-out doesn't get recorded.
         this.close(true);