[devtool] make the draggable content selective (#86816)

Author: huozhi

packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/draggable.tsx

@@ -143,17 +143,7 @@ export function Draggable({
   }
 
   return (
-    <div
-      {...props}
-      ref={ref}
-      {...drag}
-      style={{
-        touchAction: 'none',
-        userSelect: 'none',
-        WebkitUserSelect: 'none',
-        ...props.style,
-      }}
-    >
+    <div {...props} {...drag} ref={ref}>
       {children}
     </div>
   )
@@ -208,6 +198,7 @@ function useDrag(options: UseDragOptions) {
     velocities.current = []
 
     ref.current?.classList.remove('dev-tools-grabbing')
+    ref.current?.style.removeProperty('-webkit-user-select')
     document.body.style.removeProperty('user-select')
     document.body.style.removeProperty('-webkit-user-select')
   }, [])
@@ -310,6 +301,7 @@ function useDrag(options: UseDragOptions) {
         machine.current = { state: 'drag', pointerId: e.pointerId }
         ref.current?.setPointerCapture(e.pointerId)
         ref.current?.classList.add('dev-tools-grabbing')
+        ref.current?.style.setProperty('-webkit-user-select', 'none')
         document.body.style.userSelect = 'none'
         document.body.style.webkitUserSelect = 'none'
         options.onDragStart?.()

packages/next/src/next-devtools/dev-overlay/components/overview/segment-explorer.css

@@ -41,7 +41,6 @@
   display: flex;
   align-items: center;
   white-space: pre;
-  cursor: default;
   color: var(--color-gray-1000);
 }
 
@@ -90,8 +89,6 @@
   line-height: 16px;
   font-size: var(--size-12);
   font-weight: 500;
-  user-select: none;
-  cursor: pointer;
   background-color: var(--color-gray-300);
   color: var(--color-gray-1000);
 }