Merge pull request #4 from hhoao/feat_45_1.0.x_prefs

[feat] add ellipsize_mode_switch prefs

README.md

@@ -7,6 +7,11 @@
 ## Installation
 Clone this repository and copy it to path `.local/share/gnome-shell/extensions/`
 
+## DEBUG
+```bash
+dbus-run-session -- gnome-shell --nested --wayland
+```
+
 ## Feature
 1. You can see the application window intuitively
 2. Click tab to jump to the corresponding window immediately

extension.js

@@ -4,6 +4,10 @@ import Logger from './src/utils/Logger.js';
 import Config from './src/config/Config.js';
 import {TabPanel} from './src/TabPanel.js';
 
+export const get_extension_object = () => Extension.lookupByUUID('[email protected]');
+export const get_settings = () => get_extension_object().getSettings(
+    "org.gnome.shell.extensions.app_tabs"
+);
 export default class AppTabsExtension extends Extension {
     enable() {
         this._logger = new Logger("AppTabsExtension")

metadata.json

@@ -3,7 +3,6 @@
   "description": "Panel will include a different window tab for the same application that is currently launched.1. You can see the application window intuitively\n2. Click tab to jump to the corresponding window immediately\n3. Click the Close button to close the window",
   "url": "https://github.com/hhoao/app_tabs",
   "uuid": "[email protected]",
-  "shell-version": [
-    "45"
-  ]
+  "settings-schema": "org.gnome.shell.extensions.app_tabs",
+  "shell-version": ["45"]
 }

package.sh

@@ -1,15 +1,18 @@
 #!/bin/bash
 include_files=(
-src/*
+src
 stylesheet.css
 extension.js
 metadata.json
+prefs.js
 LICENSE
 )
 
 args=""
 for include_file in "${include_files[@]}"; do
-  args="${args} ${include_file}"
+  if [ -e "$include_file" ]; then
+    args="${args} ${include_file}"
+  fi
 done
 
 if [[ -n $1 ]]; then

prefs.js

@@ -0,0 +1,41 @@
+import Gio from 'gi://Gio';
+import Adw from 'gi://Adw';
+import Gtk from 'gi://Gtk';
+import {ExtensionPreferences} from 'resource:///org/gnome/Shell/Extensions/js/extensions/prefs.js';
+
+export default class DockerContainersPreferences extends ExtensionPreferences {
+    get_ellipsize_mode_switch = () => {
+        const settings = this.getSettings()
+        const ellipsize_mode_switch = new Gtk.Switch({
+            active: false,
+            valign: Gtk.Align.CENTER,
+        });
+        settings.bind("ellipsize-mode", ellipsize_mode_switch, "active", Gio.SettingsBindFlags.DEFAULT);
+        return ellipsize_mode_switch;
+    };
+
+    fillPreferencesWindow(window) {
+        const page = new Adw.PreferencesPage({
+            title: 'General',
+            icon_name: 'dialog-information-symbolic',
+        });
+        const group = new Adw.PreferencesGroup({
+            title: 'Appearance',
+            description: 'Configure the appearance of the extension',
+        });
+        page.add(group);
+
+        const row = new Adw.ActionRow({
+            title: "Enable ellipsis mode of label",
+        });
+        group.add(row);
+
+        const ellipsize_mode_switch = this.get_ellipsize_mode_switch();
+
+        row.add_suffix(ellipsize_mode_switch);
+        row.activatable_widget = ellipsize_mode_switch;
+
+        window.add(page);
+    }
+}
+

schemas/org.gnome.shell.extensions.app_tabs.gschema.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<schemalist>
+  <schema id="org.gnome.shell.extensions.app_tabs" path="/org/gnome/shell/extensions/app_tabs/">
+    <key name="ellipsize-mode" type="b">
+      <default>false</default>
+    </key>
+  </schema>
+</schemalist>

src/AppTab.js

@@ -2,6 +2,8 @@ import Clutter from 'gi://Clutter';
 import * as Overview from 'resource:///org/gnome/shell/ui/overview.js';
 import St from 'gi://St';
 import GObject from 'gi://GObject';
+import Pango from 'gi://Pango';
+import {get_settings} from '../extension.js';
 
 export const AppTab = GObject.registerClass({
 }, class AppTab extends St.Button {
@@ -12,44 +14,76 @@ export const AppTab = GObject.registerClass({
         });
         this._current_window = null;
         this._divide = null;
-
         this.add_style_class_name('app-tab')
+
+        this._init_controls();
+        this._init_icon();
+        this._init_label();
+        this._init_close_button();
+
+        this.connect('clicked', () => {
+            if (this.get_current_window()) {
+                this.get_current_window().activate(0);
+            }
+        });
+    }
+    _init_close_button() {
+        this._close_button = new St.Button({
+            label: '×',
+            y_align: Clutter.ActorAlign.CENTER,
+            x_align: Clutter.ActorAlign.END,
+        });
+        this._close_button.connect('clicked', () => {
+            if (this.get_current_window()) {
+                this.get_current_window().delete(0);
+            }
+        });
+        this._close_button.add_style_class_name('app-tab-close-button');
+        this._controls.add_child(this._close_button)
+    }
+    _init_controls() {
         this._controls = new St.BoxLayout({
             x_expand: true,
             y_expand: false,
         })
         this._controls.add_style_class_name("app-tab-controller");
         this.add_actor(this._controls)
+    }
+
+    _init_icon() {
         this._icon = new St.Icon()
         this._icon.set_icon_size(18)
         this._icon.set_fallback_gicon(null)
         this._icon.add_style_class_name("app-tab-icon");
+        this._controls.add_child(this._icon);
+    }
+    _init_label() {
         this._label = new St.Label({
             text: 'label',
             y_align: Clutter.ActorAlign.CENTER,
             x_align: Clutter.ActorAlign.FILL,
         });
+        let enableEllipsizeMode = get_settings().get_boolean("ellipsize-mode");
+        let ellipsizeMode = Pango.EllipsizeMode.NONE;
+        if (enableEllipsizeMode) {
+            ellipsizeMode = Pango.EllipsizeMode.END;
+        }
+        this._label.clutter_text.set_ellipsize(ellipsizeMode);
+        this._label.clutter_text.set_line_wrap(false);
+        this._label.clutter_text.set_single_line_mode(true);
+        this._label.clutter_text.set_line_wrap_mode(Pango.WrapMode.CHAR);
+        this._label.clutter_text.set_max_length(10);
         this._label.add_style_class_name('app-tab-label');
-        this._close_button = new St.Button({
-            label: '×',
-            y_align: Clutter.ActorAlign.CENTER,
-            x_align: Clutter.ActorAlign.END,
-        });
-        this._close_button.connect('clicked', () => {
-            if (this.get_current_window()) {
-                this.get_current_window().delete(0);
-            }
-        });
-        this._close_button.add_style_class_name('app-tab-close-button');
-        this._controls.add_child(this._icon);
+
         this._controls.add_child(this._label)
-        this._controls.add_child(this._close_button)
+    }
 
-        this.connect('clicked', () => {
-            if (this.get_current_window()) {
-                this.get_current_window().activate(0);
-            }
-        });
+    set_label_ellipsize_mode(value) {
+        let ellipsizeMode = Pango.EllipsizeMode.NONE;
+        if (value) {
+            ellipsizeMode = Pango.EllipsizeMode.END;
+        }
+        this._label.clutter_text.set_ellipsize(ellipsizeMode);
     }
 
     destroy() {

src/TabPanel.js

@@ -7,6 +7,7 @@ import * as PanelMenu from 'resource:///org/gnome/shell/ui/panelMenu.js';
 import * as Main from 'resource:///org/gnome/shell/ui/main.js';
 import Logger from './utils/Logger.js';
 import {AppTab} from './AppTab.js';
+import {get_settings} from '../extension.js';
 
 export const TabPanel = GObject.registerClass({
     Properties: {
@@ -44,6 +45,17 @@ export const TabPanel = GObject.registerClass({
         global.window_manager.connectObject('switch-workspace',
             this._sync.bind(this), this);
         global.display.connectObject('notify::focus-window', this.on_focus_window_changed.bind(this), this)
+        get_settings().connectObject(
+            "changed::ellipsize-mode",
+            this._on_ellipsize_mode_changed.bind(this),
+            this
+        );
+    }
+
+    _on_ellipsize_mode_changed(settings, mode) {
+        for (let tab of this._tabs_pool) {
+            tab.set_label_ellipsize_mode(get_settings().get_boolean(mode));
+        }
     }
 
     get_tab_style(is_active = false, is_hover = false) {