Come posso attivare e utilizzare lo strumento Browser Toolbox per ispezionare l'interfaccia grafica di Floorp?

Lo strumento Browser Toolbox è una versione speciale degli Strumenti per Sviluppatori (DevTools) che non ispeziona il contenuto dei siti web, ma l'interfaccia grafica (UI) vera e propria di Floorp.

1.Abilitare le opzioni di debug avanzato:

Prima di poter avviare lo strumento, devi abilitare i permessi di debug dell'interfaccia.

1. Digita about:config nella barra degli indirizzi e premi Invio.

2. Cerca la voce devtools.chrome.enabled e impostala su true.

3. Cerca la voce devtools.debugger.remote-enabled e impostala su true.

2.Avviare il Browser Toolbox:

Premi la combinazione di tasti sulla tastiera:

• Linux / Windows: Ctrl + Shift + Alt + I

• macOS: Cmd + Option + Shift + I

In alternativa: Apri il menu principale di Floorp > Altri strumenti > Browser Toolbox.

3.Confermare la richiesta di connessione:Richiesto solo al primo avvio.

Sullo schermo apparirà un popup di sicurezza che notifica una richiesta di connessione di debug remoto. Clicca su OK o Consenti entro pochi secondi per autorizzare l'apertura della nuova finestra.

Come utilizzare il Browser Toolbox per personalizzare Floorp

Una volta aperta la nuova finestra indipendente dei DevTools, puoi iniziare a ispezionare l'interfaccia.

1. Selezionare un elemento dell'interfaccia

1. In alto a sinistra nella finestra del Browser Toolbox, clicca sull'icona della freccia d'ispezione (oppure premi Ctrl + Shift + C).

2. Sposta il cursore sopra l'interfaccia di Floorp: vedrai evidenziati i vari elementi (la barra delle schede, la Browser Manager Sidebar, la barra degli indirizzi o i singoli pulsanti).

3. Fai clic sull'elemento che desideri modificare per selezionarlo nell'albero HTML/DOM.

2. Identificare i selettori CSS

Nel pannello di sinistra del Browser Toolbox vedrai il codice dell'elemento selezionato. Cerca il suo id o la sua class:

• Se l'elemento ha id="nav-bar", il selettore CSS sarà #nav-bar.

• Se ha class="tabbrowser-tab", il selettore sarà .tabbrowser-tab.

3. Testare le modifiche CSS in tempo reale

1. Nel pannello di destra (Regole / Rules), puoi fare doppio clic sulle proprietà CSS per cambiarne i valori (es. background-color, padding, display).

2. Se desideri aggiungere nuove regole, clicca sull'icona + per creare un nuovo blocco di stile.

3. Le modifiche verranno applicate istantaneamente alla finestra di Floorp attiva.

4. Salvare il lavoro nel file userChrome.css

Il Browser Toolbox non salva le modifiche in modo permanente: quando riavvii il browser, le personalizzazioni effettuate al volo andranno perse.

Quando trovi la combinazione CSS che soddisfa il tuo risultato:

1. Copia il codice dal pannello Regole.

2. Incollalo all'interno del tuo file userChrome.css.

3. Salva il file.