[FilesRefresh] Add global CSS classes to the labs page

Support the following global classes on Labs page so it will be eaiser to test the appiness behaviour on Lbas: * .pointer-active * .focus-outline-visible * .drog-drop-active Demo: http://go/scrcast/NTQwODE2NzI2NjYxNTI5Nnw5NDAwOGMxNS0xOA Bug: b:242938039 Change-Id: I1503d424f1fc306e31c10f07ec9ce7af69e2b07f Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4111664 Reviewed-by: Alex Danilo <adanilo@chromium.org> Commit-Queue: Wenbo Jie <wenbojie@chromium.org> Cr-Commit-Position: refs/heads/main@{#1084834}
chromium · Dec 19, 2022 · 7f0aad0 · 7f0aad0
1 parent cb546ec
commit 7f0aad0
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 11 deletions.
diff --git 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
@@ -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
@@ -51,23 +51,26 @@
       width: 200px;
     }
 
+    .widget-title {
+      text-decoration: underline;
+    }
+
   </style>
 
   <script type="module" src="./main.js"></script>
 </head>
 
 <body>
   <h1>Files app Labs</h1>
-  <h2>Breadcrumb</h2>
-
-  <xf-breadcrumb path="My Files/Downloads"></xf-breadcrumb>
-  <xf-breadcrumb path="My Files/Downloads/AAA/BBB/CCC"></xf-breadcrumb>
-
-  <h2>Tree</h2>
-
   <div class="container">
     <div theme="legacy">
-      <h3>Legacy</h3>
+      <h2>Legacy</h2>
+
+      <h3 class="widget-title">Breadcrumb</h3>
+      <xf-breadcrumb path="My Files/Downloads"></xf-breadcrumb>
+      <xf-breadcrumb path="My Files/Downloads/AAA/BBB/CCC"></xf-breadcrumb>
+
+      <h3 class="widget-title">Tree</h3>
       <xf-tree>
         <xf-tree-item label="Level 1 (2 children)" icon="my_files">
           <xf-tree-item label="Level 1.1 (2 children)" icon="downloads">
@@ -84,7 +87,9 @@ <h3>Legacy</h3>
     </div>
 
     <div theme="refresh23">
-      <h3>Refresh23</h3>
+      <h2>Refresh23</h2>
+
+      <h3 class="widget-title">Tree</h3>
       <xf-tree>
         <xf-tree-item label="Level 1 (2 children)" icon="my_files">
           <xf-tree-item label="Level 1.1 (2 children)" icon="downloads">
@@ -100,7 +105,8 @@ <h3>Refresh23</h3>
       </xf-tree>
     </div>
   </div>
-  <h2>Icons</h2>
+
+  <h2 class="widget">Icons</h2>
   <div class="icons">
     <div class="icon-wrapper">
       <span>type="android_files"</span>

diff --git 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;
+    }
+  });
+});