Enable Dragging of Processes to reorder them in trace viewer.

PiperOrigin-RevId: 706047808

plugin/trace_viewer/tf_trace_viewer/tf-trace-viewer.html

@@ -389,7 +389,21 @@
     background-image: unset;
     background-color: #cbd6e3;
   }
+
+  .process-track-drag-handle {
+    position: absolute;
+    left: 18px;
+    user-select: text;
+    flex-grow: unset;
+    cursor: text;
+  }
+  .process-track-drag-handle:hover {
+    outline: none;
+    border: none;
+  }
   .process-track-name {
+    position: absolute;
+    left: 36px;
     user-select: text;
     flex-grow: unset;
     padding-right: 36px;
@@ -1232,6 +1246,86 @@
 
     _updateProcessHeader: function() {
       const processNameEls = document.getElementsByClassName('process-track-name');
+      const processTracks = document.getElementsByClassName('process-track-header');
+
+      for (let i = 0; i < processTracks.length; ++i) {
+        // Add a draggable handle to each process track header.
+        const draggingEl = tr.ui.b.createSpan();
+        Polymer.dom(draggingEl).classList.add('process-track-drag-handle');
+        draggingEl.textContent = '☰';
+        Polymer.dom(processTracks[i]).appendChild(draggingEl);
+        draggingEl.draggable = true;
+
+        // Overwrite the click event and prevent event propogation to enable drag and drop
+        draggingEl.addEventListener('mousedown', (e) => {
+          e.stopPropagation();
+        });
+        draggingEl.addEventListener('click', (e) => {
+          e.stopPropagation();
+        });
+        draggingEl.addEventListener('mousemove', (e) => {
+          e.stopPropagation();
+        });
+
+        // Reduce opacity while dragging
+        draggingEl.addEventListener('dragstart', (e) => {
+          // Store the offset for drag positioning
+          processTracks[i].style.opacity = 0.5; // Reduce opacity while dragging
+        });
+
+        // Reorder the process track when dragging ends while restoring the opacity
+        draggingEl.addEventListener('dragend', (e) => {
+          processTracks[i].style.opacity = 1; // Reduce opacity after dragging ends
+
+          const item = processTracks[i].parentNode;
+
+          // Extract the target process track from target element
+          let target = document.elementFromPoint(event.clientX, event.clientY);
+          while(target && !target.classList.contains('process-track-base'))
+          {
+            target = target.parentNode;
+          }
+
+          // Find the parent list of all items
+          const parentNode = item.parentNode;
+          const listArray = Array.from(parentNode.children);
+
+          // Find the index of the dragged item and the target item for drag/drop logic
+          const fromIndex = listArray.indexOf(item);
+          const toIndex = listArray.indexOf(target);
+
+          if(fromIndex == toIndex) return;
+
+          //remove dragged item from list
+          const children = Array.from(item.childNodes);
+          parentNode.removeChild(item);
+          // Reorder the dragged item by moving it to its new position
+          if (fromIndex > toIndex) {
+            parentNode.insertBefore(item, target);
+          } else {
+            parentNode.insertBefore(item, target.nextSibling);
+          }
+          // Reattach all the child nodes to the item
+          children.forEach(child => {
+            item.appendChild(child);
+          });
+
+          // Reset the expanded state of the process tracks to prevent some UI jank
+          const isExpandedList = [];
+          for(let i = 0; i < parentNode.children.length; ++i)
+          {
+            isExpandedList.push(parentNode.children[i].expanded)
+            parentNode.children[i].expanded = false;
+          }
+          for(let i = 0; i < isExpandedList.length; ++i)
+          {
+            parentNode.children[i].expanded = isExpandedList[i];
+          }
+
+          // Reset certain UI elements, such as flow event filter, details filter, etc.
+          this._adjustUI();
+        });
+      }
 
       // Overwrite the click event with noop and prevent event propogatin to enable text selection.
       for (let i = 0; i < processNameEls.length; ++i) {