Bug 1226272 - Part 3: Change the style which is for while dragging. r? draft
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Thu, 12 Apr 2018 19:39:17 +0900
changeset 780985 14a0a6352ba6fd16667b6e33b6845097d53eb1e8
parent 780984 a3d97a5001239d5ea20e126f21680588aba8dab6
push id106179
push userbmo:dakatsuka@mozilla.com
push dateThu, 12 Apr 2018 10:40:27 +0000
bugs1226272
milestone61.0a1
Bug 1226272 - Part 3: Change the style which is for while dragging. r? MozReview-Commit-ID: I5Xh081R5Y4
devtools/client/framework/toolbox-tabs-order-manager.js
devtools/client/themes/toolbox.css
--- a/devtools/client/framework/toolbox-tabs-order-manager.js
+++ b/devtools/client/framework/toolbox-tabs-order-manager.js
@@ -73,28 +73,30 @@ class ToolboxTabsOrderManager {
 
     let distance = e.pageX - this.dragStartX;
 
     if ((this.dragTarget.style.order == this.minOrder && distance < 0) ||
         (this.dragTarget.style.order == this.maxOrder && distance > 0)) {
       distance = 0;
     }
 
+    this.tabsElement.classList.add("dragging");
     this.dragTarget.classList.add("drag-target");
     this.dragTarget.style.left = `${ distance }px`;
   }
 
   onMouseOut(e) {
     if (e.pageX <= 0 || this.tabsElement.ownerDocument.width <= e.pageX ||
         e.pageY <= 0 || this.tabsElement.ownerDocument.height <= e.pageY) {
       this.onMouseUp();
     }
   }
 
   onMouseUp() {
+    this.tabsElement.classList.remove("dragging");
     this.dragTarget.classList.remove("drag-target");
     this.dragTarget.style.left = "unset";
     this.dragTarget = null;
 
     this.tabsElement.ownerDocument.removeEventListener("mousemove", this.onMouseMove);
     this.tabsElement.ownerDocument.removeEventListener("mouseout", this.onMouseOut);
     this.tabsElement.ownerDocument.removeEventListener("mouseup", this.onMouseUp);
   }
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -152,19 +152,38 @@
 .devtools-tab.selected > img {
   fill: var(--theme-toolbar-selected-color);
 }
 
 .devtools-tab.highlighted > img {
   fill: var(--theme-toolbar-highlighted-color);
 }
 
+/* Dragging style */
+.toolbox-tabs.dragging .devtools-tab:hover {
+  background: transparent;
+}
+
+.toolbox-tabs.dragging .devtools-tab:not(.selected):hover .devtools-tab-line {
+  opacity: 0;
+  transition: none;
+}
+
 .devtools-tab.drag-target {
+  background-color: var(--theme-toolbar-hover);
   /* To avoid selecting this tool if it was dragged */
   pointer-events: none;
+  z-index: 1;
+}
+
+.devtools-tab.drag-target .devtools-tab-line {
+  background-color: var(--tab-line-hover-color);
+  opacity: 1;
+  transform: scaleX(1);
+  transition: none;
 }
 
 /* Toolbox controls */
 
 #toolbox-controls {
   margin-right: 3px;
 }