Gnome shell going through

Gnome is an open source desktop environment under Linux.

Desktop settings: GNOME

Themes and icons

sudo apt install gtk-theme-config

打开User Themes选项进行主题的选择。

安装主题和图标有两种方法，一种是通过PPA源安装；另一种是将文件克隆到~/.icons下。

安装 OSX Arc 主题（推荐）

sudo add-apt-repository ppa:noobslab/themes
sudo apt-get update
sudo apt-get install arc-theme

安装 MacOS High Sierra主题（可选）

https://github.com/B00merang-Project/macOS-High-Sierra
下载安装之后

gsettings set org.gnome.desktop.interface gtk-theme "macOS High Sierra"
gsettings set org.gnome.desktop.wm.preferences theme "macOS High Sierra"

安装 Macbuntu主题（可选）

sudo add-apt-repository ppa:noobslab/macbuntu
sudo apt update
sudo apt-get install macbuntu-os-icons-lts-v7
sudo apt-get install macbuntu-os-ithemes-lts-v7

由于macbuntu还没出bionic的源，

Intall Vivacious Colors GTK Theme（可选）

sudo add-apt-repository ppa:ravefinity-project/ppa
sudo apt-get update
sudo apt-get install vivacious-colors-gtk-dark
sudo apt-get install vivacious-colors-gtk-light

安装图标

安装la-capitaine图标（推荐）

sudo add-apt-repository ppa:dyatlov-igor/la-capitaine
sudo apt update
sudo apt install la-capitaine-icon-theme

Nautilus file manager

Drag-and-drop for move or copy?
Press Ctrl for Copy and Shift for Move.
Once I installed nautilus but it responsed very slowly.
So I use a terminal to open nautilus and I see lots of warnings like:

(nautilus:4258): Gtk-WARNING **: 17:34:12.268: Duplicate child name in GtkStack: …

Later I found this is because I had put too many files in ~/Templates, so I removed them and clear the cache

sudo rm -r ~/Templates/2，标准例程-HAL库版本
sudo rm -r ~/Templates/2，标准例程-库函数版本
sudo rm -r ~/Templates/mx-stm32f4
rm -rf ~/.cache/tracker # Clear nautilus cache
killall nautilus

and restart nautilus file manager, it’s ok.

Touchpad

For wayland, it’s ok.
For Xorg:

sudo pacman -Syu libinput-gestures
sudo gpasswd -a $USER input # Adding your user to group input
sudo cp /etc/libinput-gestures.conf ~/.config/
sudo chown $USER:$USER ~/.config/libinput-gestures.conf
libinput-gestures-setup autostart

The way for debugging gnome-shell extension

journalctl /usr/bin/gnome-shell -f

gnome-extensions disable my-extension@wsd to disable the extension

Alt+F2 and input r to restart.

gnome-extensions enable my-extension@wsd to reload the extension

Here I append the command for logout current desktop user:

sudo pkill Xorg # Or sudo pkill Xwayland

Reading source code of gnome shell extension: fullscreen-hotcorner

source page

function _removeHotCorners() {
    this.hotCorners.forEach(corner => {
        if (corner)
            corner.destroy();
    });
    this.hotCorners = [];
}

This code part uses arrow function. It is equivelent to

this.hotCorners.forEach(
    func(corner){
        if (corner)
            corner.destroy();
        return ;
    }
);

So the aim of function _removeHotCorners is to clear all hot corners that exist.

ui.layout.HotCorner._rtl suggest the text direction in the widget.

you can go to ~/.local/share/gnome-shell/extensions for reading another source code.

Looking glass tool

enter by Alt+F2
exit by Esc

Write an extension on your own

Transparent panel

The top bar (panel) widget is created by gnome shell in ui.main.panel. The picture of some widgets below can be illustrated here:

Its css file is defined in gnome-shell/data/theme/gnome-shell-sass/widgets/_panel.scss

$panel_bg_color: #000;
#panel {
    background-color: $panel_bg_color;
    ......
    // the rounded outset corners
    .panel-corner {
        -panel-corner-background-color: $panel_bg_color;
        -panel-corner-border-color: transparent;
        ......
    }
}

so that we write css as
stylesheet.css

.topbar-transparency {
    background-color: rgba(0,0,0,0.5); /* set object.background-color=half transparent */
}

/* set the very small(2pt) round color between panel and its adjacent part */
.roundcorner-transparency {
    -panel-corner-background-color: transparent;
}

and we go to find the panel and corner name in gnome-shell/js/ui/panel.js

var Panel = GObject.registerClass(
class Panel extends St.Widget {
    _init() {
        super._init({name: 'panel',
                    reactive: true});
        ......
        this.leftCorner = new PanelCorner(St.Side.LEFT);
        this.add_child(this._leftCorner);

        this._rightCorner = new PanelCorner(St.Side.RIGHT);
        this.add_child(this._rightCorner);
        ......
    }
    ......
}
)

Then we produces our extension.js

'use strict';

// This is a handy import we'll use to grab our extension's object
const Main = imports.ui.main;

function init() {
    log(`initializing ${Me.metadata.name} version ${Me.metadata.version}`);
}

function enable() {
    log(`enabling ${Me.metadata.name} v.${Me.metadata.version}`);
    // Add transparency
    Main.panel.actor.add_style_class_name('topbar-transparency');
    Main.panel.actor._leftCorner.add_style_class_name('roundcorner-transparency');
    Main.panel.actor._rightCorner.add_style_class_name('roundcorner-transparency');
}

function disable() {
    log(`disabling ${Me.metadata.name} version ${Me.metadata.version}`);
    Main.panel.actor.remove_style_class_name('topbar-transparency');
    Main.panel.actor._leftCorner.remove_style_class_name('roundcorner-transparency');
    Main.panel.actor._rightCorner.remove_style_class_name('roundcorner-transparency');
}