// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*- /* exported ScreenshotService, ScreenshotUI, showScreenshotUI, captureScreenshot */ const { Clutter, Cogl, Gio, GObject, GLib, Graphene, Gtk, Meta, Shell, St } = imports.gi; const Config = imports.misc.config; const GrabHelper = imports.ui.grabHelper; const Layout = imports.ui.layout; const Lightbox = imports.ui.lightbox; const Main = imports.ui.main; const MessageTray = imports.ui.messageTray; const Workspace = imports.ui.workspace; Gio._promisify(Shell.Screenshot.prototype, 'pick_color'); Gio._promisify(Shell.Screenshot.prototype, 'screenshot'); Gio._promisify(Shell.Screenshot.prototype, 'screenshot_window'); Gio._promisify(Shell.Screenshot.prototype, 'screenshot_area'); Gio._promisify(Shell.Screenshot.prototype, 'screenshot_stage_to_content'); Gio._promisify(Shell.Screenshot, 'composite_to_stream'); const { loadInterfaceXML } = imports.misc.fileUtils; const { DBusSenderChecker } = imports.misc.util; const ScreenshotIface = loadInterfaceXML('org.gnome.Shell.Screenshot'); const ScreencastIface = loadInterfaceXML('org.gnome.Shell.Screencast'); const ScreencastProxy = Gio.DBusProxy.makeProxyWrapper(ScreencastIface); var IconLabelButton = GObject.registerClass( class IconLabelButton extends St.Button { _init(iconName, label, params) { super._init(params); this._container = new St.BoxLayout({ vertical: true, style_class: 'icon-label-button-container', }); this.set_child(this._container); this._container.add_child(new St.Icon({ icon_name: iconName })); this._container.add_child(new St.Label({ text: label, x_align: Clutter.ActorAlign.CENTER, })); } }); var Tooltip = GObject.registerClass( class Tooltip extends St.Label { _init(widget, params) { super._init(params); this._widget = widget; this._timeoutId = null; this._widget.connect('notify::hover', () => { if (this._widget.hover) this.open(); else this.close(); }); } open() { if (this._timeoutId) return; this._timeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 300, () => { this.opacity = 0; this.show(); const extents = this._widget.get_transformed_extents(); const xOffset = Math.floor((extents.get_width() - this.width) / 2); const x = Math.clamp(extents.get_x() + xOffset, 0, global.stage.width - this.width); const node = this.get_theme_node(); const yOffset = node.get_length('-y-offset'); const y = extents.get_y() - this.height - yOffset; this.set_position(x, y); this.ease({ opacity: 255, duration: 150, mode: Clutter.AnimationMode.EASE_OUT_QUAD, }); this._timeoutId = null; return GLib.SOURCE_REMOVE; }); GLib.Source.set_name_by_id(this._timeoutId, '[gnome-shell] tooltip.open'); } close() { if (this._timeoutId) { GLib.source_remove(this._timeoutId); this._timeoutId = null; return; } if (!this.visible) return; this.remove_all_transitions(); this.ease({ opacity: 0, duration: 100, mode: Clutter.AnimationMode.EASE_OUT_QUAD, onComplete: () => this.hide(), }); } }); var UIAreaIndicator = GObject.registerClass( class UIAreaIndicator extends St.Widget { _init(params) { super._init(params); this._topRect = new St.Widget({ style_class: 'screenshot-ui-area-indicator-shade' }); this._topRect.add_constraint(new Clutter.BindConstraint({ source: this, coordinate: Clutter.BindCoordinate.WIDTH, })); this._topRect.add_constraint(new Clutter.SnapConstraint({ source: this, from_edge: Clutter.SnapEdge.TOP, to_edge: Clutter.SnapEdge.TOP, })); this._topRect.add_constraint(new Clutter.SnapConstraint({ source: this, from_edge: Clutter.SnapEdge.LEFT, to_edge: Clutter.SnapEdge.LEFT, })); this.add_child(this._topRect); this._bottomRect = new St.Widget({ style_class: 'screenshot-ui-area-indicator-shade' }); this._bottomRect.add_constraint(new Clutter.BindConstraint({ source: this, coordinate: Clutter.BindCoordinate.WIDTH, })); this._bottomRect.add_constraint(new Clutter.SnapConstraint({ source: this, from_edge: Clutter.SnapEdge.BOTTOM, to_edge: Clutter.SnapEdge.BOTTOM, })); this._bottomRect.add_constraint(new Clutter.SnapConstraint({ source: this, from_edge: Clutter.SnapEdge.LEFT, to_edge: Clutter.SnapEdge.LEFT, })); this.add_child(this._bottomRect); this._leftRect = new St.Widget({ style_class: 'screenshot-ui-area-indicator-shade' }); this._leftRect.add_constraint(new Clutter.SnapConstraint({ source: this, from_edge: Clutter.SnapEdge.LEFT, to_edge: Clutter.SnapEdge.LEFT, })); this._leftRect.add_constraint(new Clutter.SnapConstraint({ source: this._topRect, from_edge: Clutter.SnapEdge.TOP, to_edge: Clutter.SnapEdge.BOTTOM, })); this._leftRect.add_constraint(new Clutter.SnapConstraint({ source: this._bottomRect, from_edge: Clutter.SnapEdge.BOTTOM, to_edge: Clutter.SnapEdge.TOP, })); this.add_child(this._leftRect); this._rightRect = new St.Widget({ style_class: 'screenshot-ui-area-indicator-shade' }); this._rightRect.add_constraint(new Clutter.SnapConstraint({ source: this, from_edge: Clutter.SnapEdge.RIGHT, to_edge: Clutter.SnapEdge.RIGHT, })); this._rightRect.add_constraint(new Clutter.SnapConstraint({ source: this._topRect, from_edge: Clutter.SnapEdge.TOP, to_edge: Clutter.SnapEdge.BOTTOM, })); this._rightRect.add_constraint(new Clutter.SnapConstraint({ source: this._bottomRect, from_edge: Clutter.SnapEdge.BOTTOM, to_edge: Clutter.SnapEdge.TOP, })); this.add_child(this._rightRect); this._selectionRect = new St.Widget({ style_class: 'screenshot-ui-area-indicator-selection' }); this.add_child(this._selectionRect); this._topRect.add_constraint(new Clutter.SnapConstraint({ source: this._selectionRect, from_edge: Clutter.SnapEdge.BOTTOM, to_edge: Clutter.SnapEdge.TOP, })); this._bottomRect.add_constraint(new Clutter.SnapConstraint({ source: this._selectionRect, from_edge: Clutter.SnapEdge.TOP, to_edge: Clutter.SnapEdge.BOTTOM, })); this._leftRect.add_constraint(new Clutter.SnapConstraint({ source: this._selectionRect, from_edge: Clutter.SnapEdge.RIGHT, to_edge: Clutter.SnapEdge.LEFT, })); this._rightRect.add_constraint(new Clutter.SnapConstraint({ source: this._selectionRect, from_edge: Clutter.SnapEdge.LEFT, to_edge: Clutter.SnapEdge.RIGHT, })); } setSelectionRect(x, y, width, height) { this._selectionRect.set_position(x, y); this._selectionRect.set_size(width, height); } }); var UIAreaSelector = GObject.registerClass({ Signals: { 'drag-started': {}, 'drag-ended': {} }, }, class UIAreaSelector extends St.Widget { _init(params) { super._init(params); // During a drag, this can be Clutter.BUTTON_PRIMARY, // Clutter.BUTTON_SECONDARY or the string "touch" to identify the source // of the drag operation. this._dragButton = 0; this._dragSequence = null; this._areaIndicator = new UIAreaIndicator(); this._areaIndicator.add_constraint(new Clutter.BindConstraint({ source: this, coordinate: Clutter.BindCoordinate.ALL, })); this.add_child(this._areaIndicator); this._topLeftHandle = new St.Widget({ style_class: 'screenshot-ui-area-selector-handle' }); this.add_child(this._topLeftHandle); this._topRightHandle = new St.Widget({ style_class: 'screenshot-ui-area-selector-handle' }); this.add_child(this._topRightHandle); this._bottomLeftHandle = new St.Widget({ style_class: 'screenshot-ui-area-selector-handle' }); this.add_child(this._bottomLeftHandle); this._bottomRightHandle = new St.Widget({ style_class: 'screenshot-ui-area-selector-handle' }); this.add_child(this._bottomRightHandle); // This will be updated before the first drawn frame. this._handleSize = 0; this._topLeftHandle.connect('style-changed', widget => { this._handleSize = widget.get_theme_node().get_width(); this._updateSelectionRect(); }); this.connect('notify::mapped', () => { if (this.mapped) { const [x, y] = global.get_pointer(); this._updateCursor(x, y); } }); // Initialize area to out of bounds so reset() below resets it. this._startX = -1; this._startY = 0; this._lastX = 0; this._lastY = 0; this.reset(); } reset() { this.stopDrag(); global.display.set_cursor(Meta.Cursor.DEFAULT); // Preserve area selection if possible. If the area goes out of bounds, // the monitors might have changed, so reset the area. const [x, y, w, h] = this.getGeometry(); if (x < 0 || y < 0 || x + w > this.width || y + h > this.height) { // Initialize area to out of bounds so if there's no monitor, // the area will be reset once a monitor does appear. this._startX = -1; this._startY = 0; this._lastX = 0; this._lastY = 0; // This can happen when running headless without any monitors. if (Main.layoutManager.primaryIndex !== -1) { const monitor = Main.layoutManager.monitors[Main.layoutManager.primaryIndex]; this._startX = monitor.x + Math.floor(monitor.width * 3 / 8); this._startY = monitor.y + Math.floor(monitor.height * 3 / 8); this._lastX = monitor.x + Math.floor(monitor.width * 5 / 8) - 1; this._lastY = monitor.y + Math.floor(monitor.height * 5 / 8) - 1; } this._updateSelectionRect(); } } getGeometry() { const leftX = Math.min(this._startX, this._lastX); const topY = Math.min(this._startY, this._lastY); const rightX = Math.max(this._startX, this._lastX); const bottomY = Math.max(this._startY, this._lastY); return [leftX, topY, rightX - leftX + 1, bottomY - topY + 1]; } _updateSelectionRect() { const [x, y, w, h] = this.getGeometry(); this._areaIndicator.setSelectionRect(x, y, w, h); const offset = this._handleSize / 2; this._topLeftHandle.set_position(x - offset, y - offset); this._topRightHandle.set_position(x + w - 1 - offset, y - offset); this._bottomLeftHandle.set_position(x - offset, y + h - 1 - offset); this._bottomRightHandle.set_position(x + w - 1 - offset, y + h - 1 - offset); } _computeCursorType(cursorX, cursorY) { const [leftX, topY, width, height] = this.getGeometry(); const [rightX, bottomY] = [leftX + width - 1, topY + height - 1]; const [x, y] = [cursorX, cursorY]; // Check if the cursor overlaps the handles first. const limit = (this._handleSize / 2) ** 2; if ((leftX - x) ** 2 + (topY - y) ** 2 <= limit) return Meta.Cursor.NW_RESIZE; else if ((rightX - x) ** 2 + (topY - y) ** 2 <= limit) return Meta.Cursor.NE_RESIZE; else if ((leftX - x) ** 2 + (bottomY - y) ** 2 <= limit) return Meta.Cursor.SW_RESIZE; else if ((rightX - x) ** 2 + (bottomY - y) ** 2 <= limit) return Meta.Cursor.SE_RESIZE; // Now check the rest of the rectangle. const threshold = 10 * St.ThemeContext.get_for_stage(global.stage).scaleFactor; if (leftX - x >= 0 && leftX - x <= threshold) { if (topY - y >= 0 && topY - y <= threshold) return Meta.Cursor.NW_RESIZE; else if (y - bottomY >= 0 && y - bottomY <= threshold) return Meta.Cursor.SW_RESIZE; else if (topY - y < 0 && y - bottomY < 0) return Meta.Cursor.WEST_RESIZE; } else if (x - rightX >= 0 && x - rightX <= threshold) { if (topY - y >= 0 && topY - y <= threshold) return Meta.Cursor.NE_RESIZE; else if (y - bottomY >= 0 && y - bottomY <= threshold) return Meta.Cursor.SE_RESIZE; else if (topY - y < 0 && y - bottomY < 0) return Meta.Cursor.EAST_RESIZE; } else if (leftX - x < 0 && x - rightX < 0) { if (topY - y >= 0 && topY - y <= threshold) return Meta.Cursor.NORTH_RESIZE; else if (y - bottomY >= 0 && y - bottomY <= threshold) return Meta.Cursor.SOUTH_RESIZE; else if (topY - y < 0 && y - bottomY < 0) return Meta.Cursor.MOVE_OR_RESIZE_WINDOW; } return Meta.Cursor.CROSSHAIR; } stopDrag() { if (!this._dragButton) return; if (this._dragGrab) { this._dragGrab.dismiss(); this._dragGrab = null; } this._dragButton = 0; this._dragSequence = null; if (this._dragCursor === Meta.Cursor.CROSSHAIR && this._lastX === this._startX && this._lastY === this._startY) { // The user clicked without dragging. Make up a larger selection // to reduce confusion. const offset = 20 * St.ThemeContext.get_for_stage(global.stage).scaleFactor; this._startX -= offset; this._startY -= offset; this._lastX += offset; this._lastY += offset; // Keep the coordinates inside the stage. if (this._startX < 0) { this._lastX -= this._startX; this._startX = 0; } else if (this._lastX >= this.width) { this._startX -= this._lastX - this.width + 1; this._lastX = this.width - 1; } if (this._startY < 0) { this._lastY -= this._startY; this._startY = 0; } else if (this._lastY >= this.height) { this._startY -= this._lastY - this.height + 1; this._lastY = this.height - 1; } this._updateSelectionRect(); } this.emit('drag-ended'); } _updateCursor(x, y) { const cursor = this._computeCursorType(x, y); global.display.set_cursor(cursor); } _onPress(event, button, sequence) { if (this._dragButton) return Clutter.EVENT_PROPAGATE; const cursor = this._computeCursorType(event.x, event.y); // Clicking outside of the selection, or using the right mouse button, // or with Ctrl results in dragging a new selection from scratch. if (cursor === Meta.Cursor.CROSSHAIR || button === Clutter.BUTTON_SECONDARY || (event.modifier_state & Clutter.ModifierType.CONTROL_MASK)) { this._dragButton = button; this._dragCursor = Meta.Cursor.CROSSHAIR; global.display.set_cursor(Meta.Cursor.CROSSHAIR); [this._startX, this._startY] = [event.x, event.y]; this._lastX = this._startX = Math.floor(this._startX); this._lastY = this._startY = Math.floor(this._startY); this._updateSelectionRect(); } else { // This is a move or resize operation. this._dragButton = button; this._dragCursor = cursor; this._dragStartX = event.x; this._dragStartY = event.y; const [leftX, topY, width, height] = this.getGeometry(); const rightX = leftX + width - 1; const bottomY = topY + height - 1; // For moving, start X and Y are the top left corner, while // last X and Y are the bottom right corner. if (cursor === Meta.Cursor.MOVE_OR_RESIZE_WINDOW) { this._startX = leftX; this._startY = topY; this._lastX = rightX; this._lastY = bottomY; } // Start X and Y are set to the stationary sides, while last X // and Y are set to the moving sides. if (cursor === Meta.Cursor.NW_RESIZE || cursor === Meta.Cursor.WEST_RESIZE || cursor === Meta.Cursor.SW_RESIZE) { this._startX = rightX; this._lastX = leftX; } if (cursor === Meta.Cursor.NE_RESIZE || cursor === Meta.Cursor.EAST_RESIZE || cursor === Meta.Cursor.SE_RESIZE) { this._startX = leftX; this._lastX = rightX; } if (cursor === Meta.Cursor.NW_RESIZE || cursor === Meta.Cursor.NORTH_RESIZE || cursor === Meta.Cursor.NE_RESIZE) { this._startY = bottomY; this._lastY = topY; } if (cursor === Meta.Cursor.SW_RESIZE || cursor === Meta.Cursor.SOUTH_RESIZE || cursor === Meta.Cursor.SE_RESIZE) { this._startY = topY; this._lastY = bottomY; } } if (this._dragButton) { this._dragGrab = global.stage.grab(this); this._dragSequence = sequence; this.emit('drag-started'); return Clutter.EVENT_STOP; } return Clutter.EVENT_PROPAGATE; } _onRelease(event, button, sequence) { if (this._dragButton !== button || this._dragSequence?.get_slot() !== sequence?.get_slot()) return Clutter.EVENT_PROPAGATE; this.stopDrag(); // We might have finished creating a new selection, so we need to // update the cursor. this._updateCursor(event.x, event.y); return Clutter.EVENT_STOP; } _onMotion(event, sequence) { if (!this._dragButton) { this._updateCursor(event.x, event.y); return Clutter.EVENT_PROPAGATE; } if (sequence?.get_slot() !== this._dragSequence?.get_slot()) return Clutter.EVENT_PROPAGATE; if (this._dragCursor === Meta.Cursor.CROSSHAIR) { [this._lastX, this._lastY] = [event.x, event.y]; this._lastX = Math.floor(this._lastX); this._lastY = Math.floor(this._lastY); } else { let dx = Math.round(event.x - this._dragStartX); let dy = Math.round(event.y - this._dragStartY); if (this._dragCursor === Meta.Cursor.MOVE_OR_RESIZE_WINDOW) { const [,, selectionWidth, selectionHeight] = this.getGeometry(); let newStartX = this._startX + dx; let newStartY = this._startY + dy; let newLastX = this._lastX + dx; let newLastY = this._lastY + dy; let overshootX = 0; let overshootY = 0; // Keep the size intact if we bumped into the stage edge. if (newStartX < 0) { overshootX = 0 - newStartX; newStartX = 0; newLastX = newStartX + (selectionWidth - 1); } else if (newLastX > this.width - 1) { overshootX = (this.width - 1) - newLastX; newLastX = this.width - 1; newStartX = newLastX - (selectionWidth - 1); } if (newStartY < 0) { overshootY = 0 - newStartY; newStartY = 0; newLastY = newStartY + (selectionHeight - 1); } else if (newLastY > this.height - 1) { overshootY = (this.height - 1) - newLastY; newLastY = this.height - 1; newStartY = newLastY - (selectionHeight - 1); } // Add the overshoot to the delta to create a "rubberbanding" // behavior of the pointer when dragging. dx += overshootX; dy += overshootY; this._startX = newStartX; this._startY = newStartY; this._lastX = newLastX; this._lastY = newLastY; } else { if (this._dragCursor === Meta.Cursor.WEST_RESIZE || this._dragCursor === Meta.Cursor.EAST_RESIZE) dy = 0; if (this._dragCursor === Meta.Cursor.NORTH_RESIZE || this._dragCursor === Meta.Cursor.SOUTH_RESIZE) dx = 0; // Make sure last X and Y are clamped between 0 and size - 1, // while always preserving the cursor dragging position relative // to the selection rectangle. this._lastX += dx; if (this._lastX >= this.width) { dx -= this._lastX - this.width + 1; this._lastX = this.width - 1; } else if (this._lastX < 0) { dx -= this._lastX; this._lastX = 0; } this._lastY += dy; if (this._lastY >= this.height) { dy -= this._lastY - this.height + 1; this._lastY = this.height - 1; } else if (this._lastY < 0) { dy -= this._lastY; this._lastY = 0; } // If we drag the handle past a selection side, update which // handles are which. if (this._lastX > this._startX) { if (this._dragCursor === Meta.Cursor.NW_RESIZE) this._dragCursor = Meta.Cursor.NE_RESIZE; else if (this._dragCursor === Meta.Cursor.SW_RESIZE) this._dragCursor = Meta.Cursor.SE_RESIZE; else if (this._dragCursor === Meta.Cursor.WEST_RESIZE) this._dragCursor = Meta.Cursor.EAST_RESIZE; } else { // eslint-disable-next-line no-lonely-if if (this._dragCursor === Meta.Cursor.NE_RESIZE) this._dragCursor = Meta.Cursor.NW_RESIZE; else if (this._dragCursor === Meta.Cursor.SE_RESIZE) this._dragCursor = Meta.Cursor.SW_RESIZE; else if (this._dragCursor === Meta.Cursor.EAST_RESIZE) this._dragCursor = Meta.Cursor.WEST_RESIZE; } if (this._lastY > this._startY) { if (this._dragCursor === Meta.Cursor.NW_RESIZE) this._dragCursor = Meta.Cursor.SW_RESIZE; else if (this._dragCursor === Meta.Cursor.NE_RESIZE) this._dragCursor = Meta.Cursor.SE_RESIZE; else if (this._dragCursor === Meta.Cursor.NORTH_RESIZE) this._dragCursor = Meta.Cursor.SOUTH_RESIZE; } else { // eslint-disable-next-line no-lonely-if if (this._dragCursor === Meta.Cursor.SW_RESIZE) this._dragCursor = Meta.Cursor.NW_RESIZE; else if (this._dragCursor === Meta.Cursor.SE_RESIZE) this._dragCursor = Meta.Cursor.NE_RESIZE; else if (this._dragCursor === Meta.Cursor.SOUTH_RESIZE) this._dragCursor = Meta.Cursor.NORTH_RESIZE; } global.display.set_cursor(this._dragCursor); } this._dragStartX += dx; this._dragStartY += dy; } this._updateSelectionRect(); return Clutter.EVENT_STOP; } vfunc_button_press_event(event) { if (event.button === Clutter.BUTTON_PRIMARY || event.button === Clutter.BUTTON_SECONDARY) return this._onPress(event, event.button, null); return Clutter.EVENT_PROPAGATE; } vfunc_button_release_event(event) { if (event.button === Clutter.BUTTON_PRIMARY || event.button === Clutter.BUTTON_SECONDARY) return this._onRelease(event, event.button, null); return Clutter.EVENT_PROPAGATE; } vfunc_motion_event(event) { return this._onMotion(event, null); } vfunc_touch_event(event) { if (event.type === Clutter.EventType.TOUCH_BEGIN) return this._onPress(event, 'touch', event.sequence); else if (event.type === Clutter.EventType.TOUCH_END) return this._onRelease(event, 'touch', event.sequence); else if (event.type === Clutter.EventType.TOUCH_UPDATE) return this._onMotion(event, event.sequence); return Clutter.EVENT_PROPAGATE; } vfunc_leave_event(event) { // If we're dragging and go over the panel we still get a leave event // for some reason, even though we have a grab. We don't want to switch // the cursor when we're dragging. if (!this._dragButton) global.display.set_cursor(Meta.Cursor.DEFAULT); return super.vfunc_leave_event(event); } }); var UIWindowSelectorLayout = GObject.registerClass( class UIWindowSelectorLayout extends Workspace.WorkspaceLayout { _init(monitorIndex) { super._init(null, monitorIndex, null); } vfunc_set_container(container) { this._container = container; this._syncWorkareaTracking(); } vfunc_allocate(container, box) { const containerBox = container.allocation; const containerAllocationChanged = this._lastBox === null || !this._lastBox.equal(containerBox); this._lastBox = containerBox.copy(); let layoutChanged = false; if (this._layout === null) { this._layout = this._createBestLayout(this._workarea); layoutChanged = true; } if (layoutChanged || containerAllocationChanged) this._windowSlots = this._getWindowSlots(box.copy()); const childBox = new Clutter.ActorBox(); const nSlots = this._windowSlots.length; for (let i = 0; i < nSlots; i++) { let [x, y, width, height, child] = this._windowSlots[i]; childBox.set_origin(x, y); childBox.set_size(width, height); child.allocate(childBox); } } addWindow(window) { if (this._sortedWindows.includes(window)) return; this._sortedWindows.push(window); this._container.add_child(window); this._layout = null; this.layout_changed(); } reset() { for (const window of this._sortedWindows) window.destroy(); this._sortedWindows = []; this._windowSlots = []; this._layout = null; } get windows() { return this._sortedWindows; } }); var UIWindowSelectorWindow = GObject.registerClass( class UIWindowSelectorWindow extends St.Button { _init(actor, params) { super._init(params); const window = actor.metaWindow; this._boundingBox = window.get_frame_rect(); this._bufferRect = window.get_buffer_rect(); this._bufferScale = actor.get_resource_scale(); this._actor = new Clutter.Actor({ content: actor.paint_to_content(null), }); this.add_child(this._actor); this._border = new St.Bin({ style_class: 'screenshot-ui-window-selector-window-border' }); this._border.connect('style-changed', () => { this._borderSize = this._border.get_theme_node().get_border_width(St.Side.TOP); }); this.add_child(this._border); this._border.child = new St.Icon({ icon_name: 'object-select-symbolic', style_class: 'screenshot-ui-window-selector-check', x_align: Clutter.ActorAlign.CENTER, y_align: Clutter.ActorAlign.CENTER, }); this._cursor = null; this._cursorPoint = { x: 0, y: 0 }; this._shouldShowCursor = actor.get_children().some(c => c.has_pointer); this.connect('destroy', this._onDestroy.bind(this)); } get boundingBox() { return this._boundingBox; } get windowCenter() { const boundingBox = this.boundingBox; return { x: boundingBox.x + boundingBox.width / 2, y: boundingBox.y + boundingBox.height / 2, }; } chromeHeights() { return [0, 0]; } chromeWidths() { return [0, 0]; } overlapHeights() { return [0, 0]; } get cursorPoint() { return { x: this._cursorPoint.x + this._boundingBox.x - this._bufferRect.x, y: this._cursorPoint.y + this._boundingBox.y - this._bufferRect.y, }; } get bufferScale() { return this._bufferScale; } get windowContent() { return this._actor.content; } _onDestroy() { this.remove_child(this._actor); this._actor.destroy(); this._actor = null; this.remove_child(this._border); this._border.destroy(); this._border = null; if (this._cursor) { this.remove_child(this._cursor); this._cursor.destroy(); this._cursor = null; } } vfunc_allocate(box) { this.set_allocation(box); // Border goes around the window. const borderBox = box.copy(); borderBox.set_origin(0, 0); borderBox.x1 -= this._borderSize; borderBox.y1 -= this._borderSize; borderBox.x2 += this._borderSize; borderBox.y2 += this._borderSize; this._border.allocate(borderBox); // box should contain this._boundingBox worth of window. Compute // origin and size for the actor box to satisfy that. const xScale = box.get_width() / this._boundingBox.width; const yScale = box.get_height() / this._boundingBox.height; const [, windowW, windowH] = this._actor.content.get_preferred_size(); const actorBox = new Clutter.ActorBox(); actorBox.set_origin( (this._bufferRect.x - this._boundingBox.x) * xScale, (this._bufferRect.y - this._boundingBox.y) * yScale ); actorBox.set_size( windowW * xScale / this._bufferScale, windowH * yScale / this._bufferScale ); this._actor.allocate(actorBox); // Allocate the cursor if we have one. if (!this._cursor) return; let [, , w, h] = this._cursor.get_preferred_size(); w *= this._cursorScale; h *= this._cursorScale; const cursorBox = new Clutter.ActorBox({ x1: this._cursorPoint.x, y1: this._cursorPoint.y, x2: this._cursorPoint.x + w, y2: this._cursorPoint.y + h, }); cursorBox.x1 *= xScale; cursorBox.x2 *= xScale; cursorBox.y1 *= yScale; cursorBox.y2 *= yScale; this._cursor.allocate(cursorBox); } addCursorTexture(content, point, scale) { if (!this._shouldShowCursor) return; // Add the cursor. this._cursor = new St.Widget({ content, request_mode: Clutter.RequestMode.CONTENT_SIZE, }); this._cursorPoint = { x: point.x - this._boundingBox.x, y: point.y - this._boundingBox.y, }; this._cursorScale = scale; this.insert_child_below(this._cursor, this._border); } setCursorVisible(visible) { if (!this._cursor) return; this._cursor.visible = visible; } }); var UIWindowSelector = GObject.registerClass( class UIWindowSelector extends St.Widget { _init(monitorIndex, params) { super._init(params); super.layout_manager = new Clutter.BinLayout(); this._monitorIndex = monitorIndex; this._layoutManager = new UIWindowSelectorLayout(monitorIndex); // Window screenshots this._container = new St.Widget({ style_class: 'screenshot-ui-window-selector-window-container', x_expand: true, y_expand: true, }); this._container.layout_manager = this._layoutManager; this.add_child(this._container); } capture() { for (const actor of global.get_window_actors()) { let window = actor.metaWindow; let workspaceManager = global.workspace_manager; let activeWorkspace = workspaceManager.get_active_workspace(); if (window.is_override_redirect() || !window.located_on_workspace(activeWorkspace) || window.get_monitor() !== this._monitorIndex) continue; const widget = new UIWindowSelectorWindow( actor, { style_class: 'screenshot-ui-window-selector-window', reactive: true, can_focus: true, toggle_mode: true, } ); widget.connect('key-focus-in', win => { Main.screenshotUI.grab_key_focus(); win.checked = true; }); if (window.has_focus()) { widget.checked = true; widget.toggle_mode = false; } this._layoutManager.addWindow(widget); } } reset() { this._layoutManager.reset(); } windows() { return this._layoutManager.windows; } }); const UIMode = { SCREENSHOT: 0, SCREENCAST: 1, }; var ScreenshotUI = GObject.registerClass({ Properties: { 'screencast-in-progress': GObject.ParamSpec.boolean( 'screencast-in-progress', 'screencast-in-progress', 'screencast-in-progress', GObject.ParamFlags.READABLE, false), }, }, 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, reactive: true, }); this._screencastInProgress = false; this._lockdownSettings = new Gio.Settings({ schema_id: 'org.gnome.desktop.lockdown' }); Main.sessionMode.connect('updated', () => this.close(true)); // The full-screen screenshot has a separate container so that we can // show it without the screenshot UI fade-in for a nicer animation. this._stageScreenshotContainer = new St.Widget({ visible: false }); this._stageScreenshotContainer.add_constraint(new Clutter.BindConstraint({ source: global.stage, coordinate: Clutter.BindCoordinate.ALL, })); 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); Shell.util_set_hidden_from_pick(this._screencastAreaIndicator, true); Main.layoutManager.screenshotUIGroup.add_child(this); this._stageScreenshot = new St.Widget({ style_class: 'screenshot-ui-screen-screenshot' }); this._stageScreenshot.add_constraint(new Clutter.BindConstraint({ source: global.stage, coordinate: Clutter.BindCoordinate.ALL, })); this._stageScreenshotContainer.add_child(this._stageScreenshot); this._cursor = new St.Widget(); this._stageScreenshotContainer.add_child(this._cursor); this._openingCoroutineInProgress = false; this._grabHelper = new GrabHelper.GrabHelper(this, { actionMode: Shell.ActionMode.POPUP, }); this._areaSelector = new UIAreaSelector({ style_class: 'screenshot-ui-area-selector', x_expand: true, y_expand: true, reactive: true, }); this.add_child(this._areaSelector); this._primaryMonitorBin = new St.Widget({ layout_manager: new Clutter.BinLayout() }); this._primaryMonitorBin.add_constraint( new Layout.MonitorConstraint({ 'primary': true })); this.add_child(this._primaryMonitorBin); this._panel = new St.BoxLayout({ style_class: 'screenshot-ui-panel', y_align: Clutter.ActorAlign.END, y_expand: true, vertical: true, offscreen_redirect: Clutter.OffscreenRedirect.AUTOMATIC_FOR_OPACITY, }); this._primaryMonitorBin.add_child(this._panel); this._closeButton = new St.Button({ style_class: 'screenshot-ui-close-button', child: new St.Icon({ icon_name: 'preview-close-symbolic' }), }); this._closeButton.add_constraint(new Clutter.BindConstraint({ source: this._panel, coordinate: Clutter.BindCoordinate.POSITION, })); this._closeButton.add_constraint(new Clutter.AlignConstraint({ source: this._panel, align_axis: Clutter.AlignAxis.Y_AXIS, pivot_point: new Graphene.Point({ x: -1, y: 0.5 }), factor: 0, })); this._closeButtonXAlignConstraint = new Clutter.AlignConstraint({ source: this._panel, align_axis: Clutter.AlignAxis.X_AXIS, pivot_point: new Graphene.Point({ x: 0.5, y: -1 }), }); this._closeButton.add_constraint(this._closeButtonXAlignConstraint); this._closeButton.connect('clicked', () => this.close()); this._primaryMonitorBin.add_child(this._closeButton); this._areaSelector.connect('drag-started', () => { this._panel.ease({ opacity: 100, duration: 200, mode: Clutter.AnimationMode.EASE_OUT_QUAD, }); this._closeButton.ease({ opacity: 100, duration: 200, mode: Clutter.AnimationMode.EASE_OUT_QUAD, }); }); this._areaSelector.connect('drag-ended', () => { this._panel.ease({ opacity: 255, duration: 200, mode: Clutter.AnimationMode.EASE_OUT_QUAD, }); this._closeButton.ease({ opacity: 255, duration: 200, mode: Clutter.AnimationMode.EASE_OUT_QUAD, }); }); this._typeButtonContainer = new St.Widget({ style_class: 'screenshot-ui-type-button-container', layout_manager: new Clutter.BoxLayout({ spacing: 12, homogeneous: true, }), }); this._panel.add_child(this._typeButtonContainer); this._selectionButton = new IconLabelButton('screenshot-ui-area-symbolic', _('Selection'), { style_class: 'screenshot-ui-type-button', checked: true, x_expand: true, }); this._selectionButton.connect('notify::checked', this._onSelectionButtonToggled.bind(this)); this._typeButtonContainer.add_child(this._selectionButton); this.add_child(new Tooltip(this._selectionButton, { text: _('Area Selection'), style_class: 'screenshot-ui-tooltip', visible: false, })); this._screenButton = new IconLabelButton('screenshot-ui-display-symbolic', _('Screen'), { style_class: 'screenshot-ui-type-button', toggle_mode: true, x_expand: true, }); this._screenButton.connect('notify::checked', this._onScreenButtonToggled.bind(this)); this._typeButtonContainer.add_child(this._screenButton); this.add_child(new Tooltip(this._screenButton, { text: _('Screen Selection'), style_class: 'screenshot-ui-tooltip', visible: false, })); this._windowButton = new IconLabelButton('screenshot-ui-window-symbolic', _('Window'), { style_class: 'screenshot-ui-type-button', toggle_mode: true, x_expand: true, }); this._windowButton.connect('notify::checked', this._onWindowButtonToggled.bind(this)); this._typeButtonContainer.add_child(this._windowButton); this.add_child(new Tooltip(this._windowButton, { text: _('Window Selection'), style_class: 'screenshot-ui-tooltip', visible: false, })); this._bottomRowContainer = new St.Widget({ layout_manager: new Clutter.BinLayout() }); this._panel.add_child(this._bottomRowContainer); this._shotCastContainer = new St.BoxLayout({ style_class: 'screenshot-ui-shot-cast-container', x_align: Clutter.ActorAlign.START, x_expand: true, }); this._bottomRowContainer.add_child(this._shotCastContainer); this._shotButton = new St.Button({ style_class: 'screenshot-ui-shot-cast-button', checked: true, }); this._shotButton.set_child(new St.Icon({ icon_name: 'camera-photo-symbolic' })); this._shotButton.connect('notify::checked', this._onShotButtonToggled.bind(this)); this._shotCastContainer.add_child(this._shotButton); this._castButton = new St.Button({ style_class: 'screenshot-ui-shot-cast-button', toggle_mode: true, visible: Config.HAVE_RECORDER, }); this._castButton.set_child(new St.Icon({ icon_name: 'camera-web-symbolic' })); this._castButton.connect('notify::checked', this._onCastButtonToggled.bind(this)); this._shotCastContainer.add_child(this._castButton); this._shotButton.bind_property('checked', this._castButton, 'checked', GObject.BindingFlags.BIDIRECTIONAL | GObject.BindingFlags.INVERT_BOOLEAN); this._shotCastTooltip = new Tooltip(this._shotCastContainer, { text: _('Screenshot / Screencast'), style_class: 'screenshot-ui-tooltip', visible: false, }); const shotCastCallback = () => { if (this._shotButton.hover || this._castButton.hover) this._shotCastTooltip.open(); else this._shotCastTooltip.close(); }; this._shotButton.connect('notify::hover', shotCastCallback); this._castButton.connect('notify::hover', shotCastCallback); this.add_child(this._shotCastTooltip); this._captureButton = new St.Button({ style_class: 'screenshot-ui-capture-button' }); this._captureButton.set_child(new St.Widget({ style_class: 'screenshot-ui-capture-button-circle', })); this._captureButton.connect('clicked', this._onCaptureButtonClicked.bind(this)); this._bottomRowContainer.add_child(this._captureButton); this._showPointerButtonContainer = new St.BoxLayout({ x_align: Clutter.ActorAlign.END, x_expand: true, }); this._bottomRowContainer.add_child(this._showPointerButtonContainer); this._showPointerButton = new St.Button({ style_class: 'screenshot-ui-show-pointer-button', toggle_mode: true, }); this._showPointerButton.set_child(new St.Icon({ icon_name: 'screenshot-ui-show-pointer-symbolic' })); this._showPointerButtonContainer.add_child(this._showPointerButton); this.add_child(new Tooltip(this._showPointerButton, { text: _('Show Pointer'), style_class: 'screenshot-ui-tooltip', visible: false, })); this._showPointerButton.connect('notify::checked', () => { const state = this._showPointerButton.checked; this._cursor.visible = state; const windows = this._windowSelectors.flatMap(selector => selector.windows()); for (const window of windows) window.setCursorVisible(state); }); this._cursor.visible = false; this._monitorBins = []; this._windowSelectors = []; this._rebuildMonitorBins(); Main.layoutManager.connect('monitors-changed', () => { // Nope, not dealing with monitor changes. this.close(true); this._rebuildMonitorBins(); }); const uiModes = Shell.ActionMode.ALL & ~(Shell.ActionMode.LOCK_SCREEN | Shell.ActionMode.UNLOCK_SCREEN | Shell.ActionMode.LOGIN_SCREEN); Main.wm.addKeybinding( 'show-screenshot-ui', new Gio.Settings({ schema_id: 'org.gnome.shell.keybindings' }), Meta.KeyBindingFlags.IGNORE_AUTOREPEAT, uiModes, showScreenshotUI ); Main.wm.addKeybinding( 'show-screen-recording-ui', new Gio.Settings({ schema_id: 'org.gnome.shell.keybindings' }), Meta.KeyBindingFlags.IGNORE_AUTOREPEAT, uiModes, showScreenRecordingUI ); Main.wm.addKeybinding( 'screenshot-window', new Gio.Settings({ schema_id: 'org.gnome.shell.keybindings' }), Meta.KeyBindingFlags.IGNORE_AUTOREPEAT | Meta.KeyBindingFlags.PER_WINDOW, uiModes, async (_display, window, _binding) => { try { const actor = window.get_compositor_private(); const content = actor.paint_to_content(null); const texture = content.get_texture(); await captureScreenshot(texture, null, 1, null); } catch (e) { logError(e, 'Error capturing screenshot'); } } ); Main.wm.addKeybinding( 'screenshot', new Gio.Settings({ schema_id: 'org.gnome.shell.keybindings' }), Meta.KeyBindingFlags.IGNORE_AUTOREPEAT, uiModes, async () => { try { const shooter = new Shell.Screenshot(); const [content] = await shooter.screenshot_stage_to_content(); const texture = content.get_texture(); await captureScreenshot(texture, null, 1, null); } catch (e) { logError(e, 'Error capturing screenshot'); } } ); } _refreshButtonLayout() { const buttonLayout = Meta.prefs_get_button_layout(); this._closeButton.remove_style_class_name('left'); this._closeButton.remove_style_class_name('right'); if (buttonLayout.left_buttons.includes(Meta.ButtonFunction.CLOSE)) { this._closeButton.add_style_class_name('left'); this._closeButtonXAlignConstraint.factor = 0; } else { this._closeButton.add_style_class_name('right'); this._closeButtonXAlignConstraint.factor = 1; } } _rebuildMonitorBins() { for (const bin of this._monitorBins) bin.destroy(); this._monitorBins = []; this._windowSelectors = []; this._screenSelectors = []; for (let i = 0; i < Main.layoutManager.monitors.length; i++) { const bin = new St.Widget({ layout_manager: new Clutter.BinLayout(), }); bin.add_constraint(new Layout.MonitorConstraint({ 'index': i })); this.insert_child_below(bin, this._primaryMonitorBin); this._monitorBins.push(bin); const windowSelector = new UIWindowSelector(i, { style_class: 'screenshot-ui-window-selector', x_expand: true, y_expand: true, visible: this._windowButton.checked, }); if (i === Main.layoutManager.primaryIndex) windowSelector.add_style_pseudo_class('primary-monitor'); bin.add_child(windowSelector); this._windowSelectors.push(windowSelector); const screenSelector = new St.Button({ style_class: 'screenshot-ui-screen-selector', x_expand: true, y_expand: true, visible: this._screenButton.checked, reactive: true, can_focus: true, toggle_mode: true, }); screenSelector.connect('key-focus-in', () => { this.grab_key_focus(); screenSelector.checked = true; }); bin.add_child(screenSelector); this._screenSelectors.push(screenSelector); screenSelector.connect('notify::checked', () => { if (!screenSelector.checked) return; screenSelector.toggle_mode = false; for (const otherSelector of this._screenSelectors) { if (screenSelector === otherSelector) continue; otherSelector.toggle_mode = true; otherSelector.checked = false; } }); } if (Main.layoutManager.primaryIndex !== -1) this._screenSelectors[Main.layoutManager.primaryIndex].checked = true; } async open(mode = UIMode.SCREENSHOT) { if (this._openingCoroutineInProgress) return; if (this._screencastInProgress) return; if (mode === UIMode.SCREENCAST && !Config.HAVE_RECORDER) return; this._castButton.checked = mode === UIMode.SCREENCAST; if (!this.visible) { // Screenshot UI is opening from completely closed state // (rather than opening back from in process of closing). for (const selector of this._windowSelectors) selector.capture(); const windows = this._windowSelectors.flatMap(selector => selector.windows()); for (const window of windows) { window.connect('notify::checked', () => { if (!window.checked) return; window.toggle_mode = false; for (const otherWindow of windows) { if (window === otherWindow) continue; otherWindow.toggle_mode = true; otherWindow.checked = false; } }); } this._windowButton.reactive = windows.length > 0 && !this._castButton.checked; if (!this._windowButton.reactive) this._selectionButton.checked = true; this._shooter = new Shell.Screenshot(); this._openingCoroutineInProgress = true; try { const [content, scale, cursorContent, cursorPoint, cursorScale] = await this._shooter.screenshot_stage_to_content(); this._stageScreenshot.set_content(content); this._scale = scale; if (cursorContent !== null) { this._cursor.set_content(cursorContent); this._cursor.set_position(cursorPoint.x, cursorPoint.y); let [, w, h] = cursorContent.get_preferred_size(); w *= cursorScale; h *= cursorScale; this._cursor.set_size(w, h); this._cursorScale = cursorScale; for (const window of windows) { window.addCursorTexture(cursorContent, cursorPoint, cursorScale); window.setCursorVisible(this._showPointerButton.checked); } } this._stageScreenshotContainer.show(); } catch (e) { log(`Error capturing screenshot: ${e.message}`); } this._openingCoroutineInProgress = false; } // 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) { this.close(true); return; } this._refreshButtonLayout(); this.remove_all_transitions(); this.visible = true; this.ease({ opacity: 255, duration: 200, mode: Clutter.AnimationMode.EASE_OUT_QUAD, onComplete: () => { this._stageScreenshotContainer.get_parent().remove_child( this._stageScreenshotContainer); this.insert_child_at_index(this._stageScreenshotContainer, 0); }, }); } _finishClosing() { this.hide(); this._shooter = null; // Switch back to screenshot mode. this._shotButton.checked = true; this._stageScreenshotContainer.get_parent().remove_child( this._stageScreenshotContainer); Main.layoutManager.screenshotUIGroup.insert_child_at_index( this._stageScreenshotContainer, 0); this._stageScreenshotContainer.hide(); this._stageScreenshot.set_content(null); this._cursor.set_content(null); this._areaSelector.reset(); for (const selector of this._windowSelectors) selector.reset(); } 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), }); } _onSelectionButtonToggled() { if (this._selectionButton.checked) { this._selectionButton.toggle_mode = false; this._windowButton.checked = false; this._screenButton.checked = false; this._areaSelector.show(); this._areaSelector.remove_all_transitions(); this._areaSelector.reactive = true; this._areaSelector.ease({ opacity: 255, duration: 200, mode: Clutter.AnimationMode.EASE_OUT_QUAD, }); } else { this._selectionButton.toggle_mode = true; this._areaSelector.stopDrag(); global.display.set_cursor(Meta.Cursor.DEFAULT); this._areaSelector.remove_all_transitions(); this._areaSelector.reactive = false; this._areaSelector.ease({ opacity: 0, duration: 200, mode: Clutter.AnimationMode.EASE_OUT_QUAD, onComplete: () => this._areaSelector.hide(), }); } } _onScreenButtonToggled() { if (this._screenButton.checked) { this._screenButton.toggle_mode = false; this._selectionButton.checked = false; this._windowButton.checked = false; for (const selector of this._screenSelectors) { selector.show(); selector.remove_all_transitions(); selector.ease({ opacity: 255, duration: 200, mode: Clutter.AnimationMode.EASE_OUT_QUAD, }); } } else { this._screenButton.toggle_mode = true; for (const selector of this._screenSelectors) { selector.remove_all_transitions(); selector.ease({ opacity: 0, duration: 200, mode: Clutter.AnimationMode.EASE_OUT_QUAD, onComplete: () => selector.hide(), }); } } } _onWindowButtonToggled() { if (this._windowButton.checked) { this._windowButton.toggle_mode = false; this._selectionButton.checked = false; this._screenButton.checked = false; for (const selector of this._windowSelectors) { selector.show(); selector.remove_all_transitions(); selector.ease({ opacity: 255, duration: 200, mode: Clutter.AnimationMode.EASE_OUT_QUAD, }); } } else { this._windowButton.toggle_mode = true; for (const selector of this._windowSelectors) { selector.remove_all_transitions(); selector.ease({ opacity: 0, duration: 200, mode: Clutter.AnimationMode.EASE_OUT_QUAD, onComplete: () => selector.hide(), }); } } } _onShotButtonToggled() { if (this._shotButton.checked) { this._shotButton.toggle_mode = false; this._stageScreenshotContainer.show(); this._stageScreenshotContainer.remove_all_transitions(); this._stageScreenshotContainer.ease({ opacity: 255, duration: 200, mode: Clutter.AnimationMode.EASE_OUT_QUAD, }); } else { this._shotButton.toggle_mode = true; } } _onCastButtonToggled() { if (this._castButton.checked) { this._castButton.toggle_mode = false; this._captureButton.add_style_pseudo_class('cast'); this._stageScreenshotContainer.remove_all_transitions(); this._stageScreenshotContainer.ease({ opacity: 0, duration: 200, mode: Clutter.AnimationMode.EASE_OUT_QUAD, onComplete: () => this._stageScreenshotContainer.hide(), }); // Screen recording doesn't support window selection yet. if (this._windowButton.checked) this._selectionButton.checked = true; this._windowButton.reactive = false; } else { this._castButton.toggle_mode = true; this._captureButton.remove_style_pseudo_class('cast'); const windows = this._windowSelectors.flatMap(selector => selector.windows()); this._windowButton.reactive = windows.length > 0; } } _getSelectedGeometry(rescale) { let x, y, w, h; if (this._selectionButton.checked) { [x, y, w, h] = this._areaSelector.getGeometry(); } else if (this._screenButton.checked) { const index = this._screenSelectors.findIndex(screen => screen.checked); const monitor = Main.layoutManager.monitors[index]; x = monitor.x; y = monitor.y; w = monitor.width; h = monitor.height; } if (rescale) { x *= this._scale; y *= this._scale; w *= this._scale; h *= this._scale; } return [x, y, w, h]; } _onCaptureButtonClicked() { if (this._shotButton.checked) { this._saveScreenshot(); this.close(); } else { // Screencast closes the UI on its own. this._startScreencast(); } } _saveScreenshot() { if (this._selectionButton.checked || this._screenButton.checked) { const content = this._stageScreenshot.get_content(); if (!content) return; // Failed to capture the screenshot for some reason. const texture = content.get_texture(); const geometry = this._getSelectedGeometry(true); let cursorTexture = this._cursor.content?.get_texture(); if (!this._cursor.visible) cursorTexture = null; captureScreenshot( texture, geometry, this._scale, { texture: cursorTexture ?? null, x: this._cursor.x * this._scale, y: this._cursor.y * this._scale, scale: this._cursorScale, } ).catch(e => logError(e, 'Error capturing screenshot')); } else if (this._windowButton.checked) { const window = this._windowSelectors.flatMap(selector => selector.windows()) .find(win => win.checked); if (!window) return; const content = window.windowContent; if (!content) return; const texture = content.get_texture(); let cursorTexture = this._cursor.content?.get_texture(); if (!this._cursor.visible) cursorTexture = null; captureScreenshot( texture, null, window.bufferScale, { texture: cursorTexture ?? null, x: window.cursorPoint.x * window.bufferScale, y: window.cursorPoint.y * window.bufferScale, scale: this._cursorScale, } ).catch(e => logError(e, 'Error capturing screenshot')); } } _startScreencast() { if (this._windowButton.checked) return; // TODO 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); // This is a bit awkward because creating a proxy synchronously hangs Shell. const doStartScreencast = () => { let method = this._screencastProxy.ScreencastRemote.bind(this._screencastProxy); if (w !== -1) { method = this._screencastProxy.ScreencastAreaRemote.bind( this._screencastProxy, x, y, w, h); } method( GLib.build_filenamev([ /* Translators: this is the folder where recorded screencasts are stored. */ _('Screencasts'), /* Translators: this is a filename used for screencast * recording, where "%d" and "%t" date and time, e.g. * "Screencast from 07-17-2013 10:00:46 PM.webm" */ /* xgettext:no-c-format */ _('Screencast from %d %t.webm'), ]), { 'draw-cursor': new GLib.Variant('b', drawCursor) }, ([success, path], error) => { if (error !== null) { this._setScreencastInProgress(false); log(`Error starting screencast: ${error.message}`); return; } if (!success) { this._setScreencastInProgress(false); log('Error starting screencast'); return; } this._screencastPath = path; } ); }; // Set this before calling the method as the screen recording indicator // will check it before the success callback fires. this._setScreencastInProgress(true); if (this._screencastProxy) { doStartScreencast(); } else { new ScreencastProxy( Gio.DBus.session, 'org.gnome.Shell.Screencast', '/org/gnome/Shell/Screencast', (object, error) => { if (error !== null) { log('Error connecting to the screencast service'); return; } this._screencastProxy = object; doStartScreencast(); } ); } } stopScreencast() { if (!this._screencastInProgress) return; // Set this before calling the method as the screen recording indicator // will check it before the success callback fires. this._setScreencastInProgress(false); this._screencastProxy.StopScreencastRemote((success, error) => { if (error !== null) { log(`Error stopping screencast: ${error.message}`); return; } if (!success) { log('Error stopping screencast'); return; } // Show a notification. const file = Gio.file_new_for_path(this._screencastPath); const source = new MessageTray.Source( // Translators: notification source name. _('Screenshot'), 'screencast-recorded-symbolic' ); const notification = new MessageTray.Notification( source, // Translators: notification title. _('Screencast recorded'), // Translators: notification body when a screencast was recorded. _('Click here to view the video.') ); // Translators: button on the screencast notification. notification.addAction(_('Show in Files'), () => { const app = Gio.app_info_get_default_for_type('inode/directory', false); if (app === null) { // It may be null e.g. in a toolbox without nautilus. log('Error showing in files: no default app set for inode/directory'); return; } app.launch([file], global.create_app_launch_context(0, -1)); }); notification.connect('activated', () => { try { Gio.app_info_launch_default_for_uri( file.get_uri(), global.create_app_launch_context(0, -1)); } catch (err) { logError(err, 'Error opening screencast'); } }); notification.setTransient(true); Main.messageTray.add(source); source.showNotification(notification); }); } get screencast_in_progress() { if (!('_screencastInProgress' in this)) return false; return this._screencastInProgress; } _setScreencastInProgress(inProgress) { if (this._screencastInProgress === inProgress) return; this._screencastInProgress = inProgress; this.notify('screencast-in-progress'); } vfunc_key_press_event(event) { const symbol = event.keyval; if (symbol === Clutter.KEY_Return || symbol === Clutter.KEY_space || ((event.modifier_state & Clutter.ModifierType.CONTROL_MASK) && (symbol === Clutter.KEY_c || symbol === Clutter.KEY_C))) { this._onCaptureButtonClicked(); return Clutter.EVENT_STOP; } if (symbol === Clutter.KEY_s || symbol === Clutter.KEY_S) { this._selectionButton.checked = true; return Clutter.EVENT_STOP; } if (symbol === Clutter.KEY_c || symbol === Clutter.KEY_C) { this._screenButton.checked = true; return Clutter.EVENT_STOP; } if (this._windowButton.reactive && (symbol === Clutter.KEY_w || symbol === Clutter.KEY_W)) { this._windowButton.checked = true; return Clutter.EVENT_STOP; } if (symbol === Clutter.KEY_p || symbol === Clutter.KEY_P) { this._showPointerButton.checked = !this._showPointerButton.checked; return Clutter.EVENT_STOP; } if (symbol === Clutter.KEY_v || symbol === Clutter.KEY_V) { this._castButton.checked = !this._castButton.checked; return Clutter.EVENT_STOP; } if (symbol === Clutter.KEY_Left || symbol === Clutter.KEY_Right || symbol === Clutter.KEY_Up || symbol === Clutter.KEY_Down) { let direction; if (symbol === Clutter.KEY_Left) direction = St.DirectionType.LEFT; else if (symbol === Clutter.KEY_Right) direction = St.DirectionType.RIGHT; else if (symbol === Clutter.KEY_Up) direction = St.DirectionType.UP; else if (symbol === Clutter.KEY_Down) direction = St.DirectionType.DOWN; if (this._windowButton.checked) { const window = this._windowSelectors.flatMap(selector => selector.windows()) .find(win => win.checked) ?? null; this.navigate_focus(window, direction, false); } else if (this._screenButton.checked) { const screen = this._screenSelectors.find(selector => selector.checked) ?? null; this.navigate_focus(screen, direction, false); } return Clutter.EVENT_STOP; } return super.vfunc_key_press_event(event); } }); /** * Stores a PNG-encoded screenshot into the clipboard and a file, and shows a * notification. * * @param {GLib.Bytes} bytes - The PNG-encoded screenshot. * @param {GdkPixbuf.Pixbuf} pixbuf - The Pixbuf with the screenshot. */ function _storeScreenshot(bytes, pixbuf) { // Store to the clipboard first in case storing to file fails. const clipboard = St.Clipboard.get_default(); clipboard.set_content(St.ClipboardType.CLIPBOARD, 'image/png', bytes); const time = GLib.DateTime.new_now_local(); // This will be set in the first save to disk branch and then accessed // in the second save to disk branch, so we need to declare it outside. let file; // The function is declared here rather than inside the condition to // satisfy eslint. /** * Returns a filename suffix with an increasingly large index. * * @returns {Generator} suffix string */ function* suffixes() { yield ''; for (let i = 1; ; i++) yield `-${i}`; } const lockdownSettings = new Gio.Settings({ schema_id: 'org.gnome.desktop.lockdown' }); const disableSaveToDisk = lockdownSettings.get_boolean('disable-save-to-disk'); if (!disableSaveToDisk) { const dir = Gio.File.new_for_path(GLib.build_filenamev([ GLib.get_user_special_dir(GLib.UserDirectory.DIRECTORY_PICTURES), // Translators: name of the folder under ~/Pictures for screenshots. _('Screenshots'), ])); try { dir.make_directory_with_parents(null); } catch (e) { if (!e.matches(Gio.IOErrorEnum, Gio.IOErrorEnum.EXISTS)) throw e; } const timestamp = time.format('%Y-%m-%d %H-%M-%S'); // Translators: this is the name of the file that the screenshot is // saved to. The placeholder is a timestamp, e.g. "2017-05-21 12-24-03". const name = _('Screenshot from %s').format(timestamp); // If the target file already exists, try appending a suffix with an // increasing number to it. for (const suffix of suffixes()) { file = Gio.File.new_for_path(GLib.build_filenamev([ dir.get_path(), `${name}${suffix}.png`, ])); try { const stream = file.create(Gio.FileCreateFlags.NONE, null); stream.write_bytes(bytes, null); break; } catch (e) { if (!e.matches(Gio.IOErrorEnum, Gio.IOErrorEnum.EXISTS)) throw e; } } // Add it to recent files. Gtk.RecentManager.get_default().add_item(file.get_uri()); } // Create a St.ImageContent icon for the notification. We want // St.ImageContent specifically because it preserves the aspect ratio when // shown in a notification. const pixels = pixbuf.read_pixel_bytes(); const content = St.ImageContent.new_with_preferred_size(pixbuf.width, pixbuf.height); content.set_bytes( pixels, Cogl.PixelFormat.RGBA_8888, pixbuf.width, pixbuf.height, pixbuf.rowstride ); // Show a notification. const source = new MessageTray.Source( // Translators: notification source name. _('Screenshot'), 'screenshot-recorded-symbolic' ); const notification = new MessageTray.Notification( source, // Translators: notification title. _('Screenshot captured'), // Translators: notification body when a screenshot was captured. _('You can paste the image from the clipboard.'), { datetime: time, gicon: content } ); if (!disableSaveToDisk) { // Translators: button on the screenshot notification. notification.addAction(_('Show in Files'), () => { const app = Gio.app_info_get_default_for_type('inode/directory', false); if (app === null) { // It may be null e.g. in a toolbox without nautilus. log('Error showing in files: no default app set for inode/directory'); return; } app.launch([file], global.create_app_launch_context(0, -1)); }); notification.connect('activated', () => { try { Gio.app_info_launch_default_for_uri( file.get_uri(), global.create_app_launch_context(0, -1)); } catch (err) { logError(err, 'Error opening screenshot'); } }); } notification.setTransient(true); Main.messageTray.add(source); source.showNotification(notification); } /** * Captures a screenshot from a texture, given a region, scale and optional * cursor data. * * @param {Cogl.Texture} texture - The texture to take the screenshot from. * @param {number[4]} [geometry] - The region to use: x, y, width and height. * @param {number} scale - The texture scale. * @param {Object} [cursor] - Cursor data to include in the screenshot. * @param {Cogl.Texture} cursor.texture - The cursor texture. * @param {number} cursor.x - The cursor x coordinate. * @param {number} cursor.y - The cursor y coordinate. * @param {number} cursor.scale - The cursor texture scale. */ async function captureScreenshot(texture, geometry, scale, cursor) { const stream = Gio.MemoryOutputStream.new_resizable(); const [x, y, w, h] = geometry ?? [0, 0, -1, -1]; if (cursor === null) cursor = { texture: null, x: 0, y: 0, scale: 1 }; global.display.get_sound_player().play_from_theme( 'screen-capture', _('Screenshot taken'), null); const pixbuf = await Shell.Screenshot.composite_to_stream( texture, x, y, w, h, scale, cursor.texture, cursor.x, cursor.y, cursor.scale, stream ); stream.close(null); _storeScreenshot(stream.steal_as_bytes(), pixbuf); } /** * Shows the screenshot UI. */ function showScreenshotUI() { Main.screenshotUI.open().catch(err => { logError(err, 'Error opening the screenshot UI'); }); } /** * Shows the screen recording UI. */ function showScreenRecordingUI() { Main.screenshotUI.open(UIMode.SCREENCAST).catch(err => { logError(err, 'Error opening the screenshot UI'); }); } var ScreenshotService = class { constructor() { this._dbusImpl = Gio.DBusExportedObject.wrapJSObject(ScreenshotIface, this); this._dbusImpl.export(Gio.DBus.session, '/org/gnome/Shell/Screenshot'); this._screenShooter = new Map(); this._senderChecker = new DBusSenderChecker([ 'org.gnome.SettingsDaemon.MediaKeys', 'org.freedesktop.impl.portal.desktop.gtk', 'org.freedesktop.impl.portal.desktop.gnome', 'org.gnome.Screenshot', ]); this._lockdownSettings = new Gio.Settings({ schema_id: 'org.gnome.desktop.lockdown' }); Gio.DBus.session.own_name('org.gnome.Shell.Screenshot', Gio.BusNameOwnerFlags.REPLACE, null, null); } async _createScreenshot(invocation, needsDisk = true, restrictCallers = true) { let lockedDown = false; if (needsDisk) lockedDown = this._lockdownSettings.get_boolean('disable-save-to-disk'); let sender = invocation.get_sender(); if (this._screenShooter.has(sender)) { invocation.return_error_literal( Gio.IOErrorEnum, Gio.IOErrorEnum.BUSY, 'There is an ongoing operation for this sender'); return null; } else if (lockedDown) { invocation.return_error_literal( Gio.IOErrorEnum, Gio.IOErrorEnum.PERMISSION_DENIED, 'Saving to disk is disabled'); return null; } else if (restrictCallers) { try { await this._senderChecker.checkInvocation(invocation); } catch (e) { invocation.return_gerror(e); return null; } } let shooter = new Shell.Screenshot(); shooter._watchNameId = Gio.bus_watch_name(Gio.BusType.SESSION, sender, 0, null, this._onNameVanished.bind(this)); this._screenShooter.set(sender, shooter); return shooter; } _onNameVanished(connection, name) { this._removeShooterForSender(name); } _removeShooterForSender(sender) { let shooter = this._screenShooter.get(sender); if (!shooter) return; Gio.bus_unwatch_name(shooter._watchNameId); this._screenShooter.delete(sender); } _checkArea(x, y, width, height) { return x >= 0 && y >= 0 && width > 0 && height > 0 && x + width <= global.screen_width && y + height <= global.screen_height; } *_resolveRelativeFilename(filename) { filename = filename.replace(/\.png$/, ''); let path = [ GLib.get_user_special_dir(GLib.UserDirectory.DIRECTORY_PICTURES), GLib.get_home_dir(), ].find(p => p && GLib.file_test(p, GLib.FileTest.EXISTS)); if (!path) return null; yield Gio.File.new_for_path( GLib.build_filenamev([path, `${filename}.png`])); for (let idx = 1; ; idx++) { yield Gio.File.new_for_path( GLib.build_filenamev([path, `${filename}-${idx}.png`])); } } _createStream(filename, invocation) { if (filename == '') return [Gio.MemoryOutputStream.new_resizable(), null]; if (GLib.path_is_absolute(filename)) { try { let file = Gio.File.new_for_path(filename); let stream = file.replace(null, false, Gio.FileCreateFlags.NONE, null); return [stream, file]; } catch (e) { invocation.return_gerror(e); this._removeShooterForSender(invocation.get_sender()); return [null, null]; } } let err; for (let file of this._resolveRelativeFilename(filename)) { try { let stream = file.create(Gio.FileCreateFlags.NONE, null); return [stream, file]; } catch (e) { err = e; if (!e.matches(Gio.IOErrorEnum, Gio.IOErrorEnum.EXISTS)) break; } } invocation.return_gerror(err); this._removeShooterForSender(invocation.get_sender()); return [null, null]; } _flashAsync(shooter) { return new Promise((resolve, _reject) => { shooter.connect('screenshot_taken', (s, area) => { const flashspot = new Flashspot(area); flashspot.fire(resolve); global.display.get_sound_player().play_from_theme( 'screen-capture', _('Screenshot taken'), null); }); }); } _onScreenshotComplete(stream, file, invocation) { stream.close(null); let filenameUsed = ''; if (file) { filenameUsed = file.get_path(); } else { let bytes = stream.steal_as_bytes(); let clipboard = St.Clipboard.get_default(); clipboard.set_content(St.ClipboardType.CLIPBOARD, 'image/png', bytes); } let retval = GLib.Variant.new('(bs)', [true, filenameUsed]); invocation.return_value(retval); } _scaleArea(x, y, width, height) { let scaleFactor = St.ThemeContext.get_for_stage(global.stage).scale_factor; x *= scaleFactor; y *= scaleFactor; width *= scaleFactor; height *= scaleFactor; return [x, y, width, height]; } _unscaleArea(x, y, width, height) { let scaleFactor = St.ThemeContext.get_for_stage(global.stage).scale_factor; x /= scaleFactor; y /= scaleFactor; width /= scaleFactor; height /= scaleFactor; return [x, y, width, height]; } async ScreenshotAreaAsync(params, invocation) { let [x, y, width, height, flash, filename] = params; [x, y, width, height] = this._scaleArea(x, y, width, height); if (!this._checkArea(x, y, width, height)) { invocation.return_error_literal(Gio.IOErrorEnum, Gio.IOErrorEnum.CANCELLED, "Invalid params"); return; } let screenshot = await this._createScreenshot(invocation); if (!screenshot) return; let [stream, file] = this._createStream(filename, invocation); if (!stream) return; try { await Promise.all([ flash ? this._flashAsync(screenshot) : null, screenshot.screenshot_area(x, y, width, height, stream), ]); this._onScreenshotComplete(stream, file, invocation); } catch (e) { invocation.return_value(new GLib.Variant('(bs)', [false, ''])); } finally { this._removeShooterForSender(invocation.get_sender()); } } async ScreenshotWindowAsync(params, invocation) { let [includeFrame, includeCursor, flash, filename] = params; let screenshot = await this._createScreenshot(invocation); if (!screenshot) return; let [stream, file] = this._createStream(filename, invocation); if (!stream) return; try { await Promise.all([ flash ? this._flashAsync(screenshot) : null, screenshot.screenshot_window(includeFrame, includeCursor, stream), ]); this._onScreenshotComplete(stream, file, invocation); } catch (e) { invocation.return_value(new GLib.Variant('(bs)', [false, ''])); } finally { this._removeShooterForSender(invocation.get_sender()); } } async ScreenshotAsync(params, invocation) { let [includeCursor, flash, filename] = params; let screenshot = await this._createScreenshot(invocation); if (!screenshot) return; let [stream, file] = this._createStream(filename, invocation); if (!stream) return; try { await Promise.all([ flash ? this._flashAsync(screenshot) : null, screenshot.screenshot(includeCursor, stream), ]); this._onScreenshotComplete(stream, file, invocation); } catch (e) { invocation.return_value(new GLib.Variant('(bs)', [false, ''])); } finally { this._removeShooterForSender(invocation.get_sender()); } } async SelectAreaAsync(params, invocation) { try { await this._senderChecker.checkInvocation(invocation); } catch (e) { invocation.return_gerror(e); return; } let selectArea = new SelectArea(); try { let areaRectangle = await selectArea.selectAsync(); let retRectangle = this._unscaleArea( areaRectangle.x, areaRectangle.y, areaRectangle.width, areaRectangle.height); invocation.return_value(GLib.Variant.new('(iiii)', retRectangle)); } catch (e) { invocation.return_error_literal( Gio.IOErrorEnum, Gio.IOErrorEnum.CANCELLED, 'Operation was cancelled'); } } async FlashAreaAsync(params, invocation) { try { await this._senderChecker.checkInvocation(invocation); } catch (e) { invocation.return_gerror(e); return; } let [x, y, width, height] = params; [x, y, width, height] = this._scaleArea(x, y, width, height); if (!this._checkArea(x, y, width, height)) { invocation.return_error_literal(Gio.IOErrorEnum, Gio.IOErrorEnum.CANCELLED, "Invalid params"); return; } let flashspot = new Flashspot({ x, y, width, height }); flashspot.fire(); invocation.return_value(null); } async PickColorAsync(params, invocation) { const screenshot = await this._createScreenshot(invocation, false, false); if (!screenshot) return; const pickPixel = new PickPixel(screenshot); try { const color = await pickPixel.pickAsync(); const { red, green, blue } = color; const retval = GLib.Variant.new('(a{sv})', [{ color: GLib.Variant.new('(ddd)', [ red / 255.0, green / 255.0, blue / 255.0, ]), }]); invocation.return_value(retval); } catch (e) { invocation.return_error_literal( Gio.IOErrorEnum, Gio.IOErrorEnum.CANCELLED, 'Operation was cancelled'); } finally { this._removeShooterForSender(invocation.get_sender()); } } }; var SelectArea = GObject.registerClass( class SelectArea extends St.Widget { _init() { this._startX = -1; this._startY = -1; this._lastX = 0; this._lastY = 0; this._result = null; super._init({ visible: false, reactive: true, x: 0, y: 0, }); Main.uiGroup.add_actor(this); this._grabHelper = new GrabHelper.GrabHelper(this); const constraint = new Clutter.BindConstraint({ source: global.stage, coordinate: Clutter.BindCoordinate.ALL, }); this.add_constraint(constraint); this._rubberband = new St.Widget({ style_class: 'select-area-rubberband', visible: false, }); this.add_actor(this._rubberband); } async selectAsync() { global.display.set_cursor(Meta.Cursor.CROSSHAIR); Main.uiGroup.set_child_above_sibling(this, null); this.show(); try { await this._grabHelper.grabAsync({ actor: this }); } finally { global.display.set_cursor(Meta.Cursor.DEFAULT); GLib.idle_add(GLib.PRIORITY_DEFAULT, () => { this.destroy(); return GLib.SOURCE_REMOVE; }); } return this._result; } _getGeometry() { return new Meta.Rectangle({ x: Math.min(this._startX, this._lastX), y: Math.min(this._startY, this._lastY), width: Math.abs(this._startX - this._lastX) + 1, height: Math.abs(this._startY - this._lastY) + 1, }); } vfunc_motion_event(motionEvent) { if (this._startX == -1 || this._startY == -1 || this._result) return Clutter.EVENT_PROPAGATE; [this._lastX, this._lastY] = [motionEvent.x, motionEvent.y]; this._lastX = Math.floor(this._lastX); this._lastY = Math.floor(this._lastY); let geometry = this._getGeometry(); this._rubberband.set_position(geometry.x, geometry.y); this._rubberband.set_size(geometry.width, geometry.height); this._rubberband.show(); return Clutter.EVENT_PROPAGATE; } vfunc_button_press_event(buttonEvent) { if (this._result) return Clutter.EVENT_PROPAGATE; [this._startX, this._startY] = [buttonEvent.x, buttonEvent.y]; this._startX = Math.floor(this._startX); this._startY = Math.floor(this._startY); this._rubberband.set_position(this._startX, this._startY); return Clutter.EVENT_PROPAGATE; } vfunc_button_release_event() { if (this._startX === -1 || this._startY === -1 || this._result) return Clutter.EVENT_PROPAGATE; this._result = this._getGeometry(); this.ease({ opacity: 0, duration: 200, mode: Clutter.AnimationMode.EASE_OUT_QUAD, onComplete: () => this._grabHelper.ungrab(), }); return Clutter.EVENT_PROPAGATE; } }); var RecolorEffect = GObject.registerClass({ Properties: { color: GObject.ParamSpec.boxed( 'color', 'color', 'replacement color', GObject.ParamFlags.WRITABLE, Clutter.Color.$gtype), chroma: GObject.ParamSpec.boxed( 'chroma', 'chroma', 'color to replace', GObject.ParamFlags.WRITABLE, Clutter.Color.$gtype), threshold: GObject.ParamSpec.float( 'threshold', 'threshold', 'threshold', GObject.ParamFlags.WRITABLE, 0.0, 1.0, 0.0), smoothing: GObject.ParamSpec.float( 'smoothing', 'smoothing', 'smoothing', GObject.ParamFlags.WRITABLE, 0.0, 1.0, 0.0), }, }, class RecolorEffect extends Shell.GLSLEffect { _init(params) { this._color = new Clutter.Color(); this._chroma = new Clutter.Color(); this._threshold = 0; this._smoothing = 0; this._colorLocation = null; this._chromaLocation = null; this._thresholdLocation = null; this._smoothingLocation = null; super._init(params); this._colorLocation = this.get_uniform_location('recolor_color'); this._chromaLocation = this.get_uniform_location('chroma_color'); this._thresholdLocation = this.get_uniform_location('threshold'); this._smoothingLocation = this.get_uniform_location('smoothing'); this._updateColorUniform(this._colorLocation, this._color); this._updateColorUniform(this._chromaLocation, this._chroma); this._updateFloatUniform(this._thresholdLocation, this._threshold); this._updateFloatUniform(this._smoothingLocation, this._smoothing); } _updateColorUniform(location, color) { if (!location) return; this.set_uniform_float(location, 3, [color.red / 255, color.green / 255, color.blue / 255]); this.queue_repaint(); } _updateFloatUniform(location, value) { if (!location) return; this.set_uniform_float(location, 1, [value]); this.queue_repaint(); } set color(c) { if (this._color.equal(c)) return; this._color = c; this.notify('color'); this._updateColorUniform(this._colorLocation, this._color); } set chroma(c) { if (this._chroma.equal(c)) return; this._chroma = c; this.notify('chroma'); this._updateColorUniform(this._chromaLocation, this._chroma); } set threshold(value) { if (this._threshold === value) return; this._threshold = value; this.notify('threshold'); this._updateFloatUniform(this._thresholdLocation, this._threshold); } set smoothing(value) { if (this._smoothing === value) return; this._smoothing = value; this.notify('smoothing'); this._updateFloatUniform(this._smoothingLocation, this._smoothing); } vfunc_build_pipeline() { // Conversion parameters from https://en.wikipedia.org/wiki/YCbCr const decl = ` vec3 rgb2yCrCb(vec3 c) { \n float y = 0.299 * c.r + 0.587 * c.g + 0.114 * c.b; \n float cr = 0.7133 * (c.r - y); \n float cb = 0.5643 * (c.b - y); \n return vec3(y, cr, cb); \n } \n \n uniform vec3 chroma_color; \n uniform vec3 recolor_color; \n uniform float threshold; \n uniform float smoothing; \n`; const src = ` vec3 mask = rgb2yCrCb(chroma_color.rgb); \n vec3 yCrCb = rgb2yCrCb(cogl_color_out.rgb); \n float blend = \n smoothstep(threshold, \n threshold + smoothing, \n distance(yCrCb.gb, mask.gb)); \n cogl_color_out.rgb = \n mix(recolor_color, cogl_color_out.rgb, blend); \n`; this.add_glsl_snippet(Shell.SnippetHook.FRAGMENT, decl, src, false); } }); var PickPixel = GObject.registerClass( class PickPixel extends St.Widget { _init(screenshot) { super._init({ visible: false, reactive: true }); this._screenshot = screenshot; this._result = null; this._color = null; this._inPick = false; Main.uiGroup.add_actor(this); this._grabHelper = new GrabHelper.GrabHelper(this); const constraint = new Clutter.BindConstraint({ source: global.stage, coordinate: Clutter.BindCoordinate.ALL, }); this.add_constraint(constraint); const action = new Clutter.ClickAction(); action.connect('clicked', async () => { await this._pickColor(...action.get_coords()); this._result = this._color; this._grabHelper.ungrab(); }); this.add_action(action); this._recolorEffect = new RecolorEffect({ chroma: new Clutter.Color({ red: 80, green: 219, blue: 181, }), threshold: 0.04, smoothing: 0.07, }); this._previewCursor = new St.Icon({ icon_name: 'color-pick', icon_size: Meta.prefs_get_cursor_size(), effect: this._recolorEffect, visible: false, }); Main.uiGroup.add_actor(this._previewCursor); } async pickAsync() { global.display.set_cursor(Meta.Cursor.BLANK); Main.uiGroup.set_child_above_sibling(this, null); this.show(); this._pickColor(...global.get_pointer()); try { await this._grabHelper.grabAsync({ actor: this }); } finally { global.display.set_cursor(Meta.Cursor.DEFAULT); this._previewCursor.destroy(); GLib.idle_add(GLib.PRIORITY_DEFAULT, () => { this.destroy(); return GLib.SOURCE_REMOVE; }); } return this._result; } async _pickColor(x, y) { if (this._inPick) return; this._inPick = true; this._previewCursor.set_position(x, y); [this._color] = await this._screenshot.pick_color(x, y); this._inPick = false; if (!this._color) return; this._recolorEffect.color = this._color; this._previewCursor.show(); } vfunc_motion_event(motionEvent) { const { x, y } = motionEvent; this._pickColor(x, y); return Clutter.EVENT_PROPAGATE; } }); var FLASHSPOT_ANIMATION_OUT_TIME = 500; // milliseconds var Flashspot = GObject.registerClass( class Flashspot extends Lightbox.Lightbox { _init(area) { super._init(Main.uiGroup, { inhibitEvents: true, width: area.width, height: area.height, }); this.style_class = 'flashspot'; this.set_position(area.x, area.y); } fire(doneCallback) { this.set({ visible: true, opacity: 255 }); this.ease({ opacity: 0, duration: FLASHSPOT_ANIMATION_OUT_TIME, mode: Clutter.AnimationMode.EASE_OUT_QUAD, onComplete: () => { if (doneCallback) doneCallback(); this.destroy(); }, }); } });