feat: adaptive address bar style for edge mode, scope context menu to dock icons

- Address bar drops rounded corners and outer border in edge mode, uses
  bottom border instead; iframe itself gets no border/radius in edge mode
- Remove @contextmenu from edge panel frame so the dock context menu only
  triggers on individual dock icon right-clicks

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: antfu

packages/core/src/client/webcomponents/components/DockEdge.vue

@@ -4,7 +4,6 @@ import type { CSSProperties } from 'vue'
 import { computed, h, markRaw, useTemplateRef } from 'vue'
 import { setEdgePositionDropdown, setFloatingTooltip, useEdgePositionDropdown } from '../state/floating-tooltip'
 import { PersistedDomViewsManager } from '../utils/PersistedDomViewsManager'
-import { openDockContextMenu } from './DockContextMenu'
 import DockEntriesWithCategories from './DockEntriesWithCategories.vue'
 import DockPanelResizer from './DockPanelResizer.vue'
 import ViewEntry from './ViewEntry.vue'
@@ -19,7 +18,6 @@ const context = props.context
 const store = context.panel.store
 
 const viewsContainer = useTemplateRef<HTMLElement>('viewsContainer')
-const edgePanel = useTemplateRef<HTMLDivElement>('edgePanel')
 const persistedDoms = markRaw(new PersistedDomViewsManager(viewsContainer))
 
 const isVertical = computed(() => store.position === 'left' || store.position === 'right')
@@ -107,21 +105,6 @@ function switchToFloat() {
   store.mode = 'float'
 }
 
-function openContextMenu(e: MouseEvent) {
-  if (!edgePanel.value)
-    return
-  const entry = selectedEntry.value
-  if (!entry)
-    return
-  e.preventDefault()
-  openDockContextMenu({
-    context,
-    entry,
-    el: edgePanel.value,
-    gap: 6,
-  })
-}
-
 const panelStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {
     position: 'fixed',
@@ -182,11 +165,9 @@ const contentClass = computed(() => {
 <template>
   <div
     id="vite-devtools-edge-panel"
-    ref="edgePanel"
     class="bg-glass:75 border border-base color-base shadow overflow-hidden z-floating-anchor font-sans text-[15px] box-border"
     :class="`flex ${isVertical ? 'flex-row' : 'flex-col'}`"
     :style="panelStyle"
-    @contextmenu="openContextMenu"
   >
     <DockPanelResizer :panel="context.panel" edge-mode />
 

packages/core/src/client/webcomponents/components/ViewIframe.vue

@@ -15,6 +15,7 @@ const props = defineProps<{
 
 const settings = sharedStateToRef(props.context.docks.settings)
 const showAddressBar = computed(() => settings.value.showIframeAddressBar ?? true)
+const isEdgeMode = computed(() => props.context.panel.store.mode === 'edge')
 const ADDRESS_BAR_HEIGHT = 50
 
 const isLoading = ref(true)
@@ -177,14 +178,20 @@ onMounted(() => {
     Object.assign(holder.element.style, props.iframeStyle)
     if (showAddressBar.value) {
       holder.element.style.marginTop = `${ADDRESS_BAR_HEIGHT}px`
-      holder.element.style.borderTopLeftRadius = '0px'
-      holder.element.style.borderTopRightRadius = '0px'
+      if (!isEdgeMode.value) {
+        holder.element.style.borderTopLeftRadius = '0px'
+        holder.element.style.borderTopRightRadius = '0px'
+      }
     }
     else {
       holder.element.style.marginTop = '0px'
       holder.element.style.borderTopLeftRadius = ''
       holder.element.style.borderTopRightRadius = ''
     }
+    if (isEdgeMode.value) {
+      holder.element.style.borderRadius = '0px'
+      holder.element.style.border = 'none'
+    }
   })
 
   watch(
@@ -219,7 +226,8 @@ onUnmounted(() => {
   <div class="w-full h-full flex flex-col">
     <div
       v-if="showAddressBar"
-      class="flex-none px-2 w-full flex items-center gap-1 border rounded-t-md border-base border-b-0 bg-gray/5"
+      class="flex-none px-2 w-full flex items-center gap-1 bg-gray/5"
+      :class="isEdgeMode ? 'border-b border-base' : 'border rounded-t-md border-base border-b-0'"
       :style="{ height: `${ADDRESS_BAR_HEIGHT}px` }"
     >
       <!-- Navigation buttons (hidden for cross-origin) -->