Add setting to define previews background opacity

Settings.ui

@@ -2175,6 +2175,11 @@
     <property name="step_increment">10</property>
     <property name="page_increment">50</property>
   </object>
+  <object class="GtkAdjustment" id="preview_opacity_adjustment">
+    <property name="upper">100</property>
+    <property name="step_increment">5</property>
+    <property name="page_increment">10</property>
+  </object>
   <object class="GtkAdjustment" id="preview_padding_adjustment">
     <property name="upper">50</property>
     <property name="step_increment">1</property>
@@ -2599,6 +2604,96 @@
                 </child>
               </object>
             </child>
+            <child>
+              <object class="GtkListBoxRow" id="listboxrow_preview_custom_opacity">
+                <property name="visible">True</property>
+                <property name="can_focus">True</property>
+                <child>
+                  <object class="GtkGrid" id="grid_preview_custom_opacity">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="margin_left">12</property>
+                    <property name="margin_right">12</property>
+                    <property name="margin_top">12</property>
+                    <property name="margin_bottom">12</property>
+                    <property name="column_spacing">32</property>
+                    <child>
+                      <object class="GtkLabel" id="preview_custom_opacity_label">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="hexpand">True</property>
+                        <property name="label" translatable="yes">Use custom opacity for the previews background</property>
+                        <property name="use_markup">True</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="GtkLabel" id="preview_custom_opacity_description">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="hexpand">True</property>
+                        <property name="label" translatable="yes">If disabled, the previews background have the same opacity as the panel</property>
+                        <property name="wrap">True</property>
+                        <property name="max_width_chars">40</property>
+                        <property name="xalign">0</property>
+                        <style>
+                          <class name="dim-label"/>
+                        </style>
+                      </object>
+                      <packing>
+                        <property name="left_attach">0</property>
+                        <property name="top_attach">1</property>
+                        <property name="width">2</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkBox">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="spacing">8</property>
+                        <child>
+                          <object class="GtkSwitch" id="preview_custom_opacity_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="expand">False</property>
+                            <property name="fill">True</property>
+                            <property name="position">1</property>
+                          </packing>
+                        </child>
+                        <child>
+                          <object class="GtkSpinButton" id="preview_custom_opacity_spinbutton">
+                            <property name="visible">True</property>
+                            <property name="can_focus">True</property>
+                            <property name="halign">end</property>
+                            <property name="valign">center</property>
+                            <property name="text" translatable="yes">5</property>
+                            <property name="adjustment">preview_opacity_adjustment</property>
+                            <property name="value">5</property>
+                          </object>
+                          <packing>
+                            <property name="expand">False</property>
+                            <property name="fill">True</property>
+                            <property name="position">2</property>
+                          </packing>
+                        </child>
+                      </object>
+                      <packing>
+                        <property name="left_attach">1</property>
+                        <property name="top_attach">0</property>
+                      </packing>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
             <child>
               <object class="GtkListBoxRow" id="listbox_preview_title_position">
                 <property name="visible">True</property>

prefs.js

@@ -1042,6 +1042,20 @@ const Settings = new Lang.Class({
                             this._builder.get_object('preview_aspect_ratio_y_fixed_togglebutton'),
                             'active',
                             Gio.SettingsBindFlags.DEFAULT);
+
+            this._settings.bind('preview-use-custom-opacity',
+                            this._builder.get_object('preview_custom_opacity_switch'),
+                            'active',
+                            Gio.SettingsBindFlags.DEFAULT);
+            this._settings.bind('preview-use-custom-opacity',
+                            this._builder.get_object('preview_custom_opacity_spinbutton'),
+                            'sensitive',
+                            Gio.SettingsBindFlags.DEFAULT);
+
+            this._builder.get_object('preview_custom_opacity_spinbutton').set_value(this._settings.get_int('preview-custom-opacity'));
+            this._builder.get_object('preview_custom_opacity_spinbutton').connect('value-changed', Lang.bind (this, function(widget) {
+                this._settings.set_int('preview-custom-opacity', widget.get_value());
+            }));
                             
             this._settings.bind('peek-mode',
                             this._builder.get_object('peek_mode_switch'),
@@ -1141,6 +1155,11 @@ const Settings = new Lang.Class({
                     this._settings.set_value('window-preview-animation-time', this._settings.get_default_value('window-preview-animation-time'));
                     this._builder.get_object('animation_time_spinbutton').set_value(this._settings.get_int('window-preview-animation-time'));
 
+                    this._settings.set_value('preview-use-custom-opacity', this._settings.get_default_value('preview-use-custom-opacity'));
+
+                    this._settings.set_value('preview-custom-opacity', this._settings.get_default_value('preview-custom-opacity'));
+                    this._builder.get_object('preview_custom_opacity_spinbutton').set_value(this._settings.get_int('preview-custom-opacity'));
+
                     this._settings.set_value('peek-mode', this._settings.get_default_value('peek-mode'));
                     this._settings.set_value('window-preview-show-title', this._settings.get_default_value('window-preview-show-title'));
                     this._settings.set_value('enter-peek-mode-timeout', this._settings.get_default_value('enter-peek-mode-timeout'));

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

@@ -589,6 +589,16 @@
       <summary>Middle click preview to close window</summary>
       <description>Middle click on the window preview to close that window</description>
     </key>
+    <key type="b" name="preview-use-custom-opacity">
+      <default>true</default>
+      <summary>Window previews use custom opacity</summary>
+      <description>Window previews background use a different opacity from the panel</description>
+    </key>
+    <key type="i" name="preview-custom-opacity">
+      <default>60</default>
+      <summary>Window previews background opacity</summary>
+      <description>Window previews use this custom background opacity.</description>
+    </key>
     <key type="i" name="tray-size">
       <default>0</default>
       <summary>Tray font size</summary>

windowPreview.js

@@ -41,12 +41,12 @@ const T3 = 'peekTimeout';
 const MAX_TRANSLATION = 40;
 const HEADER_HEIGHT = 38;
 const MIN_DIMENSION = 100;
-const MIN_MENU_ALPHA = .6;
 const FOCUSED_COLOR_OFFSET = 24;
 const HEADER_COLOR_OFFSET = -12;
 const PEEK_INDEX_PROP = '_dtpPeekInitialIndex';
 
 let headerHeight = 0;
+let alphaBg = 0;
 let isLeftButtons = false;
 let isTopHeader = true;
 let scaleFactor = 1;
@@ -168,12 +168,10 @@ var PreviewMenu = Utils.defineClass({
             this.currentAppIcon = appIcon;
 
             if (!this.opened) {
-                let alpha = Math.max(MIN_MENU_ALPHA, this._panelWrapper.dynamicTransparency.alpha);
-    
-                this.menu.set_style('background: ' + Utils.getrgbaColor(this._panelWrapper.dynamicTransparency.backgroundColorRgb, alpha));
-                this.show();
-
                 this._refreshGlobals();
+                this.menu.set_style('background: ' + Utils.getrgbaColor(this._panelWrapper.dynamicTransparency.backgroundColorRgb, alphaBg));
+                
+                this.show();
             }
 
             this._mergeWindows(appIcon);
@@ -380,6 +378,12 @@ var PreviewMenu = Utils.defineClass({
             size: this._dtpSettings.get_int('window-preview-aspect-ratio-y'),
             fixed: this._dtpSettings.get_boolean('window-preview-fixed-y')
         };
+        
+        if (this._panelWrapper.dynamicTransparency) {
+            alphaBg = this._dtpSettings.get_boolean('preview-use-custom-opacity') ? 
+                      this._dtpSettings.get_int('preview-custom-opacity') * .01 : 
+                      this._panelWrapper.dynamicTransparency.alpha;
+        }
     },
 
     _resetHiddenState: function() {
@@ -680,7 +684,7 @@ var Preview = Utils.defineClass({
 
         this._closeButtonBin.set_style(
             'padding: ' + closeButtonPadding + 'px; ' + 
-            this._getBackgroundColor(HEADER_COLOR_OFFSET, headerHeight ? 1 : MIN_MENU_ALPHA) +
+            this._getBackgroundColor(HEADER_COLOR_OFFSET, headerHeight ? 1 : .6) +
             closeButtonBorderRadius
         );
     },
@@ -870,7 +874,7 @@ var Preview = Utils.defineClass({
         alpha = Math.abs(alpha);
 
         if (isNaN(alpha)) {
-            alpha = Math.max(MIN_MENU_ALPHA, this._panelWrapper.dynamicTransparency.alpha);
+            alpha = alphaBg;
         }
 
         return Utils.getrgbaColor(this._panelWrapper.dynamicTransparency.backgroundColorRgb, alpha, offset);