Bug 1226272 - Part 3: Change the style which is for while dragging. r?
MozReview-Commit-ID: I5Xh081R5Y4
--- 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;
}