Dash-to-panel: [Feature Request] Blur effect

[Rawleenc]

It would be great if we had the possibility to add blur effect to the custom transparency option for the task bar.

[nekohayo]

Maybe you folks could adapt a portion of code from https://extensions.gnome.org/extension/1251/blyr/ and propose a patch for this ;)

[vanillajonathan]

In CSS this is done using the filter attribute with the blur function.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur

I don't know how to do this, but maybe something like this?

if (Me.settings.get_boolean('trans-use-blur')) {
    this._dtpPanel.set_style('filter: blur(5px)'); // This might not be supported.

    // Maybe like this?
    this._dtpPanel.add_effect_with_name('blur', new Shell.BlurEffect({
        mode: 0,
        brightness: 0.5,
        sigma: 0.5
    }));
}

🖹 prefs.js

this._settings.bind('trans-use-blur',
    this._builder.get_object('trans_use_blur_switch'),
    'active',
    Gio.SettingsBindFlags.DEFAULT);

this._builder.get_object('trans_use_blur_switch').connect('state-set', Lang.bind (this, function(widget) {
    if (widget.get_active()) this._settings.set_boolean('trans-use-blur', false);
}));

🖹 schemas/org.gnome.shell.extensions.dash-to-panel.gschema.xml

<key type="b" name="trans-use-blur">
  <default>false</default>
  <summary>Use blur effect</summary>
  <description>Use a blur effect on the panel</description>
</key>

🖹 Settings.ui

<child>
  <object class="GtkLabel" id="trans_use_blur_label">
    <property name="visible">True</property>
    <property name="can_focus">False</property>
    <property name="hexpand">True</property>
    <property name="label" translatable="yes">Use blur effect</property>
    <property name="xalign">0</property>
  </object>
  <packing>
    <property name="left_attach">0</property>
    <property name="top_attach">0</property>
  </packing>
</child>
<child>
  <object class="GtkSwitch" id="trans_use_blur_switch">
    <property name="visible">True</property>
    <property name="can_focus">True</property>
    <property name="halign">end</property>
    <property name="valign">center</property>
  </object>
  <packing>
    <property name="left_attach">1</property>
    <property name="top_attach">0</property>
  </packing>
</child>

[MatheusZabin]

GNOME 3.36 brings native blur support... Maybe now it's easier to implement?
There's a commit of Blyr extensions for this update.

[matfantinel]

I've tried messign with the code for a bit, but only was able to blur the contents of the panel (icons) instead of its background. Looks kinda funny, actually.

I think it needs another Actor that's behind the panel (spanning 100% width and height) and we apply the blur on it.

I may be able to tinker with this a bit more, but it's my first time with this codebase

Edit: few days later, couldn't get far :grimacing:

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[nekohayo]

In the interest of fending of the robot, and also to add some new information, I will say that https://extensions.gnome.org/extension/3193/blur-my-shell/ (rather than "blyr") also has partial support for this, they attempted to write their extension in a way that is compatible with dash-to-panel, but are encountering some remaining issue with setting dash-to-panel's transparency. Perhaps the dash-to-panel folks would like to directly collaborate with that project?