diff --git a/.gitignore b/.gitignore index 3424f7d348a38..179ef51773f5b 100644 --- a/.gitignore +++ b/.gitignore @@ -90,6 +90,7 @@ vs-chromium-project.txt /ash/ash_unittests_run.xml /ash/webui/eche_app_ui/resources/app /ash/webui/eche_app_ui/resources/prod +/ash/webui/file_manager/resources/tsconfig.json /ash/webui/help_app_ui/resources/prod /ash/webui/media_app_ui/resources/prod /ash/webui/media_app_ui/resources/app diff --git a/ash/webui/file_manager/resources/BUILD.gn b/ash/webui/file_manager/resources/BUILD.gn index d758a28a1cc87..73a0251f9960f 100644 --- a/ash/webui/file_manager/resources/BUILD.gn +++ b/ash/webui/file_manager/resources/BUILD.gn @@ -122,6 +122,8 @@ if (!optimize_webui) { extra_deps = [ ":copy_labs" ] in_files = ts_files + + deps = [ "//ui/webui/resources:library" ] } } diff --git a/ash/webui/file_manager/resources/labs/labs.html b/ash/webui/file_manager/resources/labs/labs.html index 276f753e98a31..d5c668c375cb1 100644 --- a/ash/webui/file_manager/resources/labs/labs.html +++ b/ash/webui/file_manager/resources/labs/labs.html @@ -51,6 +51,10 @@ width: 200px; } + .widget-title { + text-decoration: underline; + } + @@ -58,16 +62,15 @@

Files app Labs

-

Breadcrumb

- - - - -

Tree

-
-

Legacy

+

Legacy

+ +

Breadcrumb

+ + + +

Tree

@@ -84,7 +87,9 @@

Legacy

-

Refresh23

+

Refresh23

+ +

Tree

@@ -100,7 +105,8 @@

Refresh23
-

Icons

+ +

Icons

type="android_files" diff --git a/ash/webui/file_manager/resources/labs/main.ts b/ash/webui/file_manager/resources/labs/main.ts index f673f6f0bad13..7baf4b969d862 100644 --- a/ash/webui/file_manager/resources/labs/main.ts +++ b/ash/webui/file_manager/resources/labs/main.ts @@ -7,4 +7,36 @@ import 'chrome://file-manager/widgets/xf_icon.js'; import 'chrome://file-manager/widgets/xf_tree.js'; import 'chrome://file-manager/widgets/xf_tree_item.js'; -console.log('main ts is here.'); +import {FocusOutlineManager} from 'chrome://resources/js/focus_outline_manager.js'; + +const rootElement = document.documentElement; +// Add global focus-outline-visible handler. +FocusOutlineManager.forDocument(document); + +// Add global pointer-active handler. +['pointerdown', 'pointerup', 'dragend', 'touchend'].forEach((eventType) => { + document.addEventListener(eventType, (e) => { + if (/down$/.test(e.type) === false) { + rootElement.classList.toggle('pointer-active', false); + } else if ( + (e as PointerEvent).pointerType !== + 'touch') { // http://crbug.com/1311472 + rootElement.classList.toggle('pointer-active', true); + } + }, true); +}); + +// Add global drag-drop-active handler. +let activeDropTarget: EventTarget|null = null; +['dragenter', 'dragleave', 'drop'].forEach((eventType) => { + document.addEventListener(eventType, (event) => { + const dragDropActive = 'drag-drop-active'; + if (event.type === 'dragenter') { + rootElement.classList.add(dragDropActive); + activeDropTarget = event.target; + } else if (activeDropTarget === event.target) { + rootElement.classList.remove(dragDropActive); + activeDropTarget = null; + } + }); +});