Bug 589206 - Drawing a tab group should be transparent or in background view [r+a=dolske]

browser/base/content/tabview/ui.js

@@ -985,10 +985,9 @@ let UI = {
 
     var startPos = { x: e.clientX, y: e.clientY };
     var phantom = iQ("<div>")
-      .addClass("groupItem phantom activeGroupItem")
+      .addClass("groupItem phantom activeGroupItem dragRegion")
       .css({
         position: "absolute",
-        opacity: .7,
         zIndex: -1,
         cursor: "default"
       })
@@ -1005,7 +1004,7 @@ let UI = {
         this.container.css(bounds);
       },
       setZ: function FauxItem_setZ(z) {
-        this.container.css("z-index", z);
+        // don't set a z-index because we want to force it to be low.
       },
       setOpacity: function FauxItem_setOpacity(opacity) {
         this.container.css("opacity", opacity);
@@ -1069,6 +1068,7 @@ let UI = {
 
     function finalize(e) {
       iQ(window).unbind("mousemove", updateSize);
+      item.container.removeClass("dragRegion");
       dragOutInfo.stop();
       if (phantom.css("opacity") != 1)
         collapse();

browser/themes/gnomestripe/browser/tabview/tabview.css

@@ -228,6 +228,10 @@ html[dir=rtl] .groupItem.activeGroupItem {
   border: 1px solid rgba(190,190,190,1);
 }
 
+.dragRegion {
+  background: rgba(248,248,248,0.4);
+}
+
 .overlay {
   background-color: rgba(0,0,0,.7) !important;
   box-shadow: 3px 3px 5.5px rgba(0,0,0,.5);

browser/themes/pinstripe/browser/tabview/tabview.css

@@ -221,6 +221,10 @@ html[dir=rtl] .groupItem.activeGroupItem {
   border: 1px solid rgba(255, 255, 255, 0.5);
 }
 
+.dragRegion {
+  background: rgba(235, 235, 235, 0.4);
+}
+
 .overlay {
   background-color: rgba(0,0,0,.7) !important;
   box-shadow: 3px 3px 5.5px rgba(0,0,0,.5);

browser/themes/winstripe/browser/tabview/tabview.css

@@ -248,6 +248,10 @@ html[dir=rtl] .groupItem.activeGroupItem {
     rgba(0,0,0,0.6) -1px 1px 5.5px;
 }
 
+.dragRegion {
+  background: rgba(224, 234, 245, 0.4);
+}
+
 .overlay {
   background-color: rgba(0,0,0,.7) !important;
   box-shadow: 3px 3px 5.5px rgba(0,0,0,.5);