Merge remote-tracking branch 'origin/develop' into wip/kw/clipping-in…

…hibition

app/gui2/e2e/widgets.spec.ts

@@ -119,6 +119,71 @@ test('Selection widgets in Data.read node', async ({ page }) => {
   await expect(pathArg.locator('.WidgetText > input')).toHaveValue('File 1')
 })
 
+test('Selection widget with text widget as input', async ({ page }) => {
+  await actions.goToGraph(page)
+  await mockMethodCallInfo(page, 'data', {
+    methodPointer: {
+      module: 'Standard.Base.Data',
+      definedOnType: 'Standard.Base.Data',
+      name: 'read',
+    },
+    notAppliedArguments: [0, 1, 2],
+  })
+
+  const dropDown = new DropDownLocator(page)
+  const node = locate.graphNodeByBinding(page, 'data')
+  const argumentNames = node.locator('.WidgetArgumentName')
+  const pathArg = argumentNames.filter({ has: page.getByText('path') })
+  const pathArgInput = pathArg.locator('.WidgetText > input')
+  await pathArg.click()
+  await expect(page.locator('.dropdownContainer')).toBeVisible()
+  await dropDown.clickOption(page, 'File 2')
+  await expect(pathArgInput).toHaveValue('File 2')
+
+  // Editing text input shows and filters drop down
+  await pathArgInput.click()
+  await dropDown.expectVisibleWithOptions(page, ['Choose file…', 'File 1', 'File 2'])
+  await page.keyboard.insertText('File 1')
+  await dropDown.expectVisibleWithOptions(page, ['File 1'])
+  // Clearing input should show all text literal options
+  await pathArgInput.clear()
+  await dropDown.expectVisibleWithOptions(page, ['File 1', 'File 2'])
+
+  // Esc should cancel editing and close drop down
+  await page.keyboard.press('Escape')
+  await expect(pathArgInput).not.toBeFocused()
+  await expect(pathArgInput).toHaveValue('File 2')
+  await expect(dropDown.dropDown).not.toBeVisible()
+
+  // Choosing entry should finish editing
+  await pathArgInput.click()
+  await dropDown.expectVisibleWithOptions(page, ['Choose file…', 'File 1', 'File 2'])
+  await page.keyboard.insertText('File')
+  await dropDown.expectVisibleWithOptions(page, ['File 1', 'File 2'])
+  await dropDown.clickOption(page, 'File 1')
+  await expect(pathArgInput).not.toBeFocused()
+  await expect(pathArgInput).toHaveValue('File 1')
+  await expect(dropDown.dropDown).not.toBeVisible()
+
+  // Clicking-off and pressing enter should accept text as-is
+  await pathArgInput.click()
+  await dropDown.expectVisibleWithOptions(page, ['Choose file…', 'File 1', 'File 2'])
+  await page.keyboard.insertText('File')
+  await page.keyboard.press('Enter')
+  await expect(pathArgInput).not.toBeFocused()
+  await expect(pathArgInput).toHaveValue('File')
+  await expect(dropDown.dropDown).not.toBeVisible()
+
+  await pathArgInput.click()
+  await dropDown.expectVisibleWithOptions(page, ['Choose file…', 'File 1', 'File 2'])
+  await page.keyboard.insertText('Foo')
+  await expect(pathArgInput).toHaveValue('Foo')
+  await page.mouse.click(200, 200)
+  await expect(pathArgInput).not.toBeFocused()
+  await expect(pathArgInput).toHaveValue('Foo')
+  await expect(dropDown.dropDown).not.toBeVisible()
+})
+
 test('File Browser widget', async ({ page }) => {
   await actions.goToGraph(page)
   await mockMethodCallInfo(page, 'data', {

app/gui2/src/components/CodeEditor.vue

@@ -350,7 +350,7 @@ const editorStyle = computed(() => {
         <circle cx="14" cy="14" r="1.5" />
       </svg>
     </div>
-    <SvgIcon name="enso_logo" class="closeButton button" @click="emit('close')" />
+    <SvgIcon name="close" class="closeButton button" @click="emit('close')" />
   </div>
 </template>
 

app/gui2/src/components/ComponentBrowser.vue

@@ -67,7 +67,7 @@ const cbOpen: Interaction = {
     emit('canceled')
   },
   click: (e: PointerEvent) => {
-    if (targetIsOutside(e, cbRoot)) {
+    if (targetIsOutside(e, cbRoot.value)) {
       if (input.anyChange.value) {
         acceptInput()
       } else {

app/gui2/src/components/ExtendedMenu.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { codeEditorBindings } from '@/bindings'
 import SvgIcon from '@/components/SvgIcon.vue'
-import { isMacLike } from '@/composables/events'
 import { ref } from 'vue'
 
 const isDropdownOpen = ref(false)
@@ -9,9 +9,7 @@ const props = defineProps<{
   zoomLevel: number
 }>()
 const emit = defineEmits<{ zoomIn: []; zoomOut: []; fitToAllClicked: []; toggleCodeEditor: [] }>()
-
-// TODO: replace with codeEditorBindigs.toggle: https://github.com/enso-org/enso/issues/9411.
-const toggleCodeEditorShortcut = isMacLike ? 'Cmd + `' : 'Ctrl + `'
+const toggleCodeEditorShortcut = codeEditorBindings.bindings.toggle.humanReadable
 </script>
 
 <template>
@@ -21,7 +19,7 @@ const toggleCodeEditorShortcut = isMacLike ? 'Cmd + `' : 'Ctrl + `'
     @pointerup.stop
     @click.stop="isDropdownOpen = !isDropdownOpen"
   >
-    <SvgIcon name="folder_opened" class="moreIcon" />
+    <SvgIcon name="3_dot_menu" class="moreIcon" />
   </div>
   <Transition name="dropdown">
     <div
@@ -34,12 +32,16 @@ const toggleCodeEditorShortcut = isMacLike ? 'Cmd + `' : 'Ctrl + `'
       <div class="row">
         <div class="label">Zoom</div>
         <div class="zoomControl">
-          <div class="zoomButton minus" title="Decrease zoom" @click="emit('zoomOut')" />
+          <div class="zoomButtonHighlight">
+            <SvgIcon :scale="12 / 16" name="minus" title="Decrease zoom" @click="emit('zoomOut')" />
+          </div>
           <span
             class="zoomScaleLabel"
             v-text="props.zoomLevel ? props.zoomLevel.toFixed(0) + '%' : '?'"
           ></span>
-          <div class="zoomButton plus" title="increase zoom" @click="emit('zoomIn')" />
+          <div class="zoomButtonHighlight">
+            <SvgIcon :scale="12 / 16" name="add" title="increase zoom" @click="emit('zoomIn')" />
+          </div>
           <div class="divider"></div>
           <div class="showAllIconHighlight">
             <SvgIcon name="show_all" class="showAllIcon" @click="emit('fitToAllClicked')" />
@@ -77,7 +79,7 @@ const toggleCodeEditorShortcut = isMacLike ? 'Cmd + `' : 'Ctrl + `'
   top: 40px;
   margin-top: 6px;
   padding: 4px;
-  right: 0px;
+  right: 8px;
   border-radius: 12px;
   background: var(--color-frame-bg);
   backdrop-filter: var(--blur-app-bg);
@@ -146,54 +148,23 @@ const toggleCodeEditorShortcut = isMacLike ? 'Cmd + `' : 'Ctrl + `'
   left: 8px;
 }
 
-.zoomButton {
+.zoomButtonHighlight {
   width: 16px;
   height: 16px;
   border-radius: var(--radius-full);
   position: relative;
   margin: 0px;
+  padding: 2px;
   display: inline-block;
   vertical-align: middle;
   cursor: pointer;
   transition: background-color 0.3s;
 }
 
-.zoomButton:hover {
+.zoomButtonHighlight:hover {
   background-color: var(--color-menu-entry-hover-bg);
 }
 
-.zoomButton.plus:before,
-.zoomButton.plus:after {
-  content: '';
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  background: var(--color-text);
-}
-
-.zoomButton.plus:before {
-  width: 2px;
-  height: 12px;
-}
-
-.zoomButton.plus:after {
-  height: 2px;
-  width: 12px;
-}
-
-.zoomButton.minus:before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--color-text);
-  margin: auto 2px;
-  height: 2px;
-}
-
 .dropdown-enter-active,
 .dropdown-leave-active {
   transition: opacity 0.25s ease;