[Risolto]Come creare una estensione per gnome-shell (javascript) (istruttivo)

[robytrevi]

Ciao a tutti.
Mi sto appassionando alle estensioni di gnome-shell e vorrei capire come funzionano e come scriverne di nuove (non sono un informatico ma mi appassiona la programmazione).
Da quel che ho capito sono scritte in javascript (che non conosco, di cui sto leggendo qualcosa ma mi riesce molto ostico).
Così scopiazzando tra le extensions disponibili sto cercando di crearne una mia.
Qui viene un po' spiegato come fare ma se devo essere sincero non ci capisco molto.
Nelle vecchie versioni di ubuntu c'era un plugin di compiz che permetteva di vedere tutte le finestre aperte rimpicciolite e su sfondo scuro (come appaiono quando si apre la shell di gnome-shell) premendo il tasto centrale del mouse. Per me era comodissimo e sto cercando di associare al tasto centrale del mouse l'apertura della shell.
Quanto scritto finora deriva da spunti presi da Desktop scroller, movehotcorner e Panel-docklet vedi qui a fine pagina.
Allego quanto scritto:

Codice: Seleziona tutto

const Lang = imports.lang;
const Main = imports.ui.main;
const St = imports.gi.St;

let act = "";

function ShowActivities() {
this._CONF_middleClick = this._settings.get_enum('middle-click-action');
if (this._CONF_middleClick) {
                Main.panel._activities;
}
}



function init() {
ShowActivities();
}

function enable() {
}

function disable() {
}

Se non ho capito male, si importa ciò che serve all'inizio (const Main = ...), si crea una funzione, una funzione init, una enable e una disable. Init richiama alla funzione che si vuole usare. Ma non capisco come richiamare le varie cose necessarie e tutti questi punti e questi this, underscorr tra le varie linee: this._settings.get_enum
Allego la cartella con l'estensione (non da errore ma non fa nulla. Ho modificato il nome togliendo la @ e mettendo at per allegarlo).
Ripeto, l'idea è imparare e vi sarei grato se mi spiegaste un po' tutto.
(b2b)

[il_muflone]

ohhh finalmente un'iniziative lodevole e che riesca ad apprezzare, parlo di un tutorial per la scrittura di estensioni, non per la funzione dell'estensione in questione essendo il click centrale un'attivita` importante in GNOME.

tuttavia l'estensione non si avvia neanche a causa di errori.
dopo aver installato l'estensione e riavviato la shell se esegui looking glass (lg da menu alt+f2) alla scheda errors trovi l'errore dell'estensione: impossibile valutare init a causa di quel this._settings inesistente.

in programmazione this significa l'oggetto nel quale ti trovi (l'estensione nel tuo caso) mentre _settings deve far riferimento a qualche variabile oggetto che abbia tra le sue funzioni la get_enum.

Nel tuo caso non esiste nulla del genere.
Sei sicuro che esista un'azione che scatti al click centrale del mouse?

[robytrevi]

Si, l'idea è di spiegare come come creare le estensioni e ne approfitterei  :-[ per cercare di crearne una che mi interessi.
L'errore l'ho notato ora. Con tutte le modifiche che sto facendo devo aver allegato una versione con un errore (e non ho tenuto le vecchie versioni).
Se ne esce qualcosa di buono alla fine posto un how to nel primo post.

Comunque la logica dovrebbe essere quella, no?

• si importa ciò che serve all'inizio (const Main = ...)  --> Dove si trovano tutte le cose che servono?
• si crea una funzione
• si crea una funzione init
• si crea una funzione enable  --> Abilita ciò che fa la funzione?
• si crea una funzione disable  --> Disabilita ciò che fa la funzione?
• nella funzione si mette ciò che si vuole fare
• la funzione init richiama la funzione principale

[il_muflone]

la logica non e` precisamente quella.

ogni estensione deve avere una funzione init che serve a decidere se essa sia un'estensione valida per essere usata, ad esempio per controllare eventuali requisiti, versioni o presenza di altri software o anche solo per creare variabili o recuperare dati che siano usate successivamente.
La funzione init scatta una sola volta all'avvio/riavvio della shell.

Dopo l'init la shell lancia la funzione enable se si tratta di una estensione attivata (gsettings get org.gnome.shell enabled-extensions) o altrimenti non fa nulla.

la disable scatta quando l'utente disabilita un'estensione.

Il ciclo logico quindi e` porre in init eventuali passi precedenti all'attivazione, in enable le funzioni per rendere attiva l'estensione e in disable i passi per rendere non operativa l'estensione.

Tutto il resto e` a scelta dello sviluppatore.
Alcune estensioni fatte male (inclusa la tua :P) mettono il codice dell'estensione nella init, rendendo impossibile disattivare l'estensione e anzi attivandola anche se essa sia stata disattivata.

se vuoi avere uno scheletro di base funzionante e corretto esegui:

Codice: Seleziona tutto

gnome-shell-extension-tool --create-extension

[robytrevi]

Sei stato molto chiaro, credo di aver capito... forse:

Codice: Seleziona tutto

/*"Importazione cose necessarie all'estensione"*/
const Lang = imports.lang;
const Main = imports.ui.main;
const St = imports.gi.St;

function funzione() {
/*corpo dell'estensione*/
}

function init() {
/*eventuali passi precedenti all'attivazione dell'estensione*/
}

function enable() {
/*qualcosa che attivi l'estensione*/
}

function disable() {
/*qualcosa che siattivi l'estensione*/
}

mentre _settings deve far riferimento a qualche variabile oggetto che abbia tra le sue funzioni la get_enum.

Nel tuo caso non esiste nulla del genere.
Sei sicuro che esista un'azione che scatti al click centrale del mouse?

Si lo usa l'estensione panel-docklet che crea uno spazio sul pannello che elenca le finestre aperte (tipo window icon list), e ad ogni bottone del mouse corrisponde un'azione.
Credo utilizzi Gio e modificando l'estensione (abbastanza alla cieca e a caso) così non da più errore:

Codice: Seleziona tutto

const Lang = imports.lang;
const Main = imports.ui.main;
const St = imports.gi.St;
const Shell = imports.gi.Shell;
const Gio = imports.gi.Gio;

function ShowActivities() {
     let settings = new Gio.Settings;
     this._settings = settings;
     this._CONF_middleClick = this._settings.get_enum('middle-click-action');
     if (this._CONF_middleClick) {
     Main.panel._activities;
}
}


function init() {
/*eventuali passi precedenti all'attivazione dell'estensione*/
}

function enable() {
/*qualcosa che attivi l'estensione*/
}

function disable() {
/*qualcosa che diattivi l'estensione*/
}

Ovviamente non fa nulla ma sto capendo molto ed ho trovato questo che prima mi era sfuggito.
In generale le estensioni utilizzano un bottone sul pannello. La cosa è più complicata (per me) senza bottone in quanto l'esempio che posso seguire è solo uno: Desktop scroller.
Affondo nella lettura del tutorial allegato.  (b2b)

[il_muflone]

ciao

un po' per scopo didattico, un po' per passatempo di questa grigia domenica ho realizzato un'estensione che faccia più o meno ciò che chiedi, basata sul lavoro di Marcos Diaz.

E' volutamente riempita di commenti per spiegarne il funzionamento ed ho volutamente lasciata enorme la dimensione del pulsante (actor_width), per usarla bisognerà portarla a 1 pixel o simile.

La allego qui e posto anche il codice così possa essere utile a qualcuno. Se è necessario la commenteremo.

Codice: Seleziona tutto

// Middle click overview
// Copyright (c) 2012 Muflone <muflone@vbsimple.net>
//
// Based on Desktop Scroller by Marcos Diaz <diazmencia@gmail.com>.
//
// Middle click overview is a free software:
// you can redistribute it and/or modify it under the terms of the GNU
// General Public License as published by the Free Software Foundation, 
// either version 3 of the License, or newer.
//
// You should have received a copy of the GNU General Public License along with
// this file. If not, see <http://www.gnu.org/licenses/>.

const St = imports.gi.St
const Main = imports.ui.main

function MiddleClickOverview(){
  this.enable = function(){
    // Enable the actor to middle click upon to show the overview
    
    var monitor = Main.layoutManager.primaryMonitor
    // The width of the actor to click on
    var actor_width = 30 // CHANGE IT ACCORDINGLY TO YOUR NEEDS!
    // The left position of the handler (screen width - actor width)
    var actor_left = monitor.width - actor_width
    // The top position of the handler
    var actor_top = 60
    // Height is determined from the monitor height minus the y twice
    // Leave a blank space on the upper and left corners
    var actor_height = monitor.height - actor_top * 2

    // Create the new actor button
    this.actor = new St.Button({style_class:'middleclickoverview'})
    // Move the actor button to its position and set its size
    this.actor.set_position(actor_left, actor_top)
    this.actor.set_width(actor_width)
    this.actor.set_height(actor_height)
    this.actor.opacity = 128
    // Add a button click event handler to process middle clicks
    this.actor.connect('button-press-event', this.button_press_event.bind(this))
    Main.layoutManager.addChrome(this.actor)
    // Find the overview actor to handle its behavior
    this.overview = get_actor_by_name(global.overlay_group, 'overview')
    // When activities overview is shown this actor is hidden
    this.signaladdr0 = this.overview.connect('show', this.hide.bind(this))
    // When activities overview is hidden this actor is shown
    this.signaladdr1 = this.overview.connect('hide', this.show.bind(this))
  }

  this.disable = function(){
    // Disable the extension by removing the actor and disable the
    // show and hide signal handlers
    Main.layoutManager.removeChrome(this.actor)
    this.actor.destroy()
    this.overview.disconnect(this.signaladdr0)
    this.overview.disconnect(this.signaladdr1)
  }

  this.button_press_event = function(actor, event){
    // A button was pressed
    var button = event.get_button();
    // If the middle button was pressed then show the overview
    if(button==2) Main.overview.show()
  }

  this.show = function(){
    // Shows the actor
    this.actor.show()
  }
  
  this.hide = function(){
    // Hides the actor
    this.actor.hide()
  }
}

// Gnome-shell extension API.
function init() {
  // Create the instance object
  middleClickOverview = new MiddleClickOverview()
}

function enable() {
  // Enable the extension instance
  middleClickOverview.enable()
}

function disable() {
  // Disable the extension instance
  middleClickOverview.disable()
}

// Other utils.
function get_actor_by_name(actor, name){
  // Needed to handle show and hide of overview window
  var children = actor.get_children()
  for(var i in children) if(children[i].name == name) return children[i]
}

[robytrevi]

Allora:

function MiddleClickOverview(){
 this.enable = function(){

mi piace come usi enable qui, collegato a

function enable() {
 // Enable the extension instance
 middleClickOverview.enable()
}

e poi lo rifai con disable.
Qui:

   var monitor = Main.layoutManager.primaryMonitor
   // The width of the actor to click on
   var actor_width = 1 // CHANGE IT ACCORDINGLY TO YOUR NEEDS!
   // The left position of the handler (screen width - actor width)
   var actor_left = monitor.width - actor_width
   // The top position of the handler
   var actor_top = 60
   // Height is determined from the monitor height minus the y twice
   // Leave a blank space on the upper and left corners
   var actor_height = monitor.height - actor_top * 2

assegni valori alle variabili che utilizzi poco dopo per la posizione del pulsante (in funzione della risoluzione dello schermo definita da Main.layoutManager.primaryMonitor). Ma la parte in grassetto non dice già che è 1?
Poi mi si annebbia la mente...

   // Add a button click event handler to process middle clicks
   this.actor.connect('button-press-event', this.button_press_event.bind(this))
   Main.layoutManager.addChrome(this.actor)

Associ il pulsante a button_press_event che descrivi in seguito (associato al tasto 2 = centrale), ma cos'è .bind(this)?
E la linea successiva?
Poi si fa buio pesto:

// Find the overview actor to handle its behavior
   this.overview = get_actor_by_name(global.overlay_group, 'overview')
   // When activities overview is shown this actor is hidden
   this.signaladdr0 = this.overview.connect('show', this.hide.bind(this))
   // When activities overview is hidden this actor is shown
   this.signaladdr1 = this.overview.connect('hide', this.show.bind(this))

Poi metti la parte per disabilitare l'estensione:

Main.layoutManager.removeChrome(this.actor)
   this.actor.destroy()
   this.overview.disconnect(this.signaladdr0)
   this.overview.disconnect(this.signaladdr1)

ma il non capire la parte precedente mi impedisce di capire la rimozione/disattivazione di Chrome e overview.
Poi ancora:

this.show = function(){
   // Shows the actor
   this.actor.show()
 }
 
 this.hide = function(){
   // Hides the actor
   this.actor.hide()
 }

mostrano e nascondono il pulsante? Vedo che sono collegati alla parte sopra che non ho capito.
Infine

// Other utils.
function get_actor_by_name(actor, name){
 // Needed to handle show and hide of overview window
 var children = actor.get_children()
 for(var i in children) if(children.name == name) return children
}

Perché init non l'hai lasciato vuoto?
E perché le righe non terminano con ; ?

P.S. L'estensione non da errori ma il pulsante non appare.
???

EDIT:

Perché init non l'hai lasciato vuoto?

ho visto ora l'uso che ne fai.

[il_muflone]

Ma la parte in grassetto non dice già che è 1?

avevo dimenticato di mettere la dimensione actor_width a 60, l'ho modificato 20 minuti dopo.

se ingrandisci la dimensione vedrai il pulsante altrimenti e` un angolino rosso microscopico nel lato destro del monitor.

[il_muflone]

Poi mi si annebbia la mente...

Codice: Seleziona tutto

    // Add a button click event handler to process middle clicks
    this.actor.connect('button-press-event', this.button_press_event.bind(this))

aggiunge al pulsante una funzione (this.button_press_event) che verra` chiamata al momento dell'evento delle gtk button-press-event.

Associ il pulsante a button_press_event che descrivi in seguito (associato al tasto 2 = centrale), ma cos'è .bind(this)?

bind(oggetto) e` un metodo dei prototipi di javascript e indica alla funzione (ovvero la connect) che quando richiamera` la funzione callback (button_press_event) dovra` fornire anche l'argomento this (ovvero l'istanza dell'estensione).

E la linea successiva?

Chrome in gergo tecnico significa interfaccia.
Semplicemente aggiunge tale pulsante all'interfaccia grafica in modo che possa riceverne i segnali e gli eventi della shell e non essere soltanto un pulsante presente nel tuo codice senza collegamento col resto della shell.

Codice: Seleziona tutto

 // Find the overview actor to handle its behavior
    this.overview = get_actor_by_name(global.overlay_group, 'overview')

Trova l'oggetto della shell che corrisponda al pannello attivita`

Codice: Seleziona tutto

    // When activities overview is shown this actor is hidden
    this.signaladdr0 = this.overview.connect('show', this.hide.bind(this))
    // When activities overview is hidden this actor is shown
    this.signaladdr1 = this.overview.connect('hide', this.show.bind(this))

aggiunge due funzioni ai gestori dei segnali della finestra delle attivita`:
quando attivita` appare deve sparire il nostro pulsante, quando attivita` sparisce perche` nascosta deve apparire il nostro pulsante.

ma il non capire la parte precedente mi impedisce di capire la rimozione/disattivazione di Chrome e overview.

quando si disabilita l'estensione la finestra attivita` non deve piu` far scattare i mostra/nascondi della nostra estensione.

Perché init non l'hai lasciato vuoto?

perche` sia all'attivazione che alla disattivazione bisogna avere un riferimento all'oggetto da attivare e disattivare. Si poteva lasciar vuoto init e creare l'oggetto in enable ma avrebbe perso un po' in logica e si sarebbe dovuta gestire la situazione di attivazioni multiple (attiva, disattiva, riattiva).

E perché le righe non terminano con ; ?

perche` non serve

P.S. L'estensione non da errori ma il pulsante non appare.
???

l'hai attivata?

EDIT: aiuto la formattazione scazza!

[robytrevi]

Ok, ho capito.

l'hai attivata?

Si, non lo vedevo perché era troppo piccolo. Ho messo a 60 ed effettivamente c'era, ora l'ho rimpicciolito nuovamente.

get_actor_by_name(global.overlay_group, 'overview')

Questo però per me resta un mistero  :-\

Il tasto va a sovrapporsi allo scroll tra le scrivanie. Ridurre la dimensione del pulsante solo alla parte centrale può essere utile per usare entrambe le estensioni comodamente.
Tipo:

Codice: Seleziona tutto

var actor_top = monitor.height / 2.5

Inoltre alla fine secondo me con

Codice: Seleziona tutto

var actor_width = 2

si vede appena per sapere dov'è (comunque al centro) ma non da fastidio.

Comunque... WOW... ho sbagliato studi... Mi appassiona troppo il mondo della programmazione (in generale).
Grazie mille  (b2b)
Cosa dovrei aggiungere al primo post secondo te perché possa essere utile? Tutto quello che ho capito?

E l'estensione la pubblicherai? Se si, dove così la aggiungo al topic delle estensioni.

[il_muflone]

se non vuoi mandarla in conflitto posizionala altrove, ad esempio a sinistra o cambia del tutto approccio

riguardo:

Codice: Seleziona tutto

get_actor_by_name(global.overlay_group, 'overview')

quella riga richiama la funzione definita in basso, riceve due argomenti: il gruppo dove cercare e il nome dell'actor cercato.

Non credo di pubblicare mai questa porcheria (disprezzare il lavoro proprio non e` deplorevole), e` solo un esempio didattico, non uno strumento valido.
Fanne cio` che vuoi, ripubblicala tu se ne sei interessato.
Sul primo post non saprei cosa aggiungere, io lo eliminerei totalmente, contiene solo un pezzo di codice senza senso e non avviabile nemmeno.

P.S. ecco perche` scazzava la formattazione nella mia risposta, tu usi quote invece di code

[robytrevi]

Aggiungo solamente [Risolto] e (istruttivo).
Allego l'estensione al topic  che elenca le estensioni e rimando a questo nella descrizione.
Grazie mille di nuovo  (b2b)


P.S.

P.S. ecco perche` scazzava la formattazione nella mia risposta, tu usi quote invece di code

Si, quando ti cito uso quote, quando metto  parti nuove uso code 

[robytrevi]

Sto provando a fare semplici cose (ma che ritengo comode) con quanto appreso.
Tipo spostare la parte sensibile del pannello in baso (message tray) da destra a sinistra:

Codice: Seleziona tutto

const St = imports.gi.St;
const Main = imports.ui.main;
const MessageTray = imports.ui.messageTray;

function LeftMessageTray() {
    this.enable = function(){
    // Align summary items to the left
    Main.messageTray._summaryBin.x_align = St.Align.START
    }

    this.disable = function(){
    // Align summary items to the right
    Main.messageTray._summaryBin.x_align = St.Align.END
    }
}

function init() {
leftMessageTray = new LeftMessageTray()
}

function enable() {
    leftMessageTray.enable()
}

function disable() {
    leftMessageTray.disable()
}

(good)
Una domanda, forse banale. Leggendo i termini della licenza GPLv3, suggerisce di aggiungere alla parte

Codice: Seleziona tutto

<one line to give the program's name and a brief idea of what it does.>
    Copyright (C) <year>  <name of author>

anche informazioni su come essere contattati.
È meglio avere un indirizzo di posta elettronica apposito?

[il_muflone]

apposito? basta un indirizzo email qualsiasi

[il_muflone]

Alcune estensioni fatte male (inclusa la tua :P) mettono il codice dell'estensione nella init, rendendo impossibile disattivare l'estensione e anzi attivandola anche se essa sia stata disattivata.

Proprio a tema di questo errore di sviluppo di alcune estensioni, c'e` l'estensione chiamata Lock Keys che e' un esempio di questo problema.

L'attivazione e la disattivazione dell'estensione si limitano a far apparire e sparire la voce nel pannello superiore ma l'init si occupa di attivare la notifica al cambio di stato di alcuni tasti.

Ecco appunto che, nonostante l'estensione sia disattivata, i messaggi nella barra di stato continuano ad apparire.

[robytrevi]

L'ho notato in diverse estensioni. Oltre all'errore in sé, è anche scomodo perché per disattivare l'estensione la devi togliere dalla cartella e riavviare la shell.

[robytrevi]

Nel sito ufficiale delle estensioni suggeriscono di mettere tutte le opzioni per attivazione/disattivazione delle estensioni sotto alle funzioni enable e disable direttamente invece di richiamarle da init.

Sono però qui con un'altra domanda; ho visto che in alcune estensioni c'è la possibilità di cambiare alcune impostazioni da dconf-editor (ad esempio la dock). Tra le mie prove sto cercando di fare qualcosa di simile ma non trovo il modo di aggiungere la voce nel menu di gsettings.
Quanto fatto è stato aggiungere all'inizio dell'estensione

Codice: Seleziona tutto

const Gio = imports.gi.Gio;

e successivamente

Codice: Seleziona tutto

const SETTINGS_SCHEMA = 'org.gnome.shell.extensions.nome-extension';
const SETTINGS_POS_KEY = 'position';

per decidere la posizione dell'eventuale estensione (per iniziare vorrei apparisse la voce, poi cercherò di aggiungere le possibili opzioni).
Però nel menu di dconf-editor non appare nessuna nuova voce sotto a org.gnome.shell.extensions dopo avere ricaricato la shell.
Cosa mi sfugge?

[patel]

Muflone non si è fatto vivo sul forum da 2 mesi, temo che dovrai risponderti da solo.

[robytrevi]

Muflone non si è fatto vivo sul forum da 2 mesi, temo che dovrai risponderti da solo.

Eheh... ho visto, ma non si sa mai che torni.
Nel frattempo continuo nella ricerca, anche se, finora, con scarsi risultati.
(b2b)