<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Files app Labs</title>
<meta name="google" value="notranslate">
<meta name="color-scheme" content="light dark">
<link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
<link rel="stylesheet" href="chrome://resources/chromeos/colors/cros_styles.css">
<link rel="stylesheet" href="chrome://theme/colors.css?sets=legacy,sys">
<link rel="stylesheet" href="chrome://theme/typography.css">
<style>
body {
background-color: var(--cros-bg-color);
color: var(--cros-text-color-primary);
}
xf-tree {
width: 300px;
}
.trailing-icon {
box-sizing: border-box;
padding: 5px 0 0 5px;
}
.container {
display: flex;
justify-content: space-around;
}
xf-tree:not(:defined) {
display: none;
}
xf-tree:defined {
display: block;
}
.icons {
display: flex;
flex-wrap: wrap;
width: 900px;
}
.icon-wrapper {
display: flex;
justify-content: space-between;
margin-inline-end: 20px;
width: 200px;
}
.widget-title {
text-decoration: underline;
}
[theme='legacy'] iron-icon {
padding: 6px;
}
[theme='refresh23'] iron-icon {
padding: 10px;
}
</style>
<script type="module" src="./main.js"></script>
</head>
<body>
<h1>Files app Labs</h1>
<div class="container">
<div theme="legacy">
<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">
<xf-tree-item label="Level 1.1.1 (no children)" selected icon="camera-folder"></xf-tree-item>
<xf-tree-item label="Level 1.1.2 (no children)" disabled icon="invalid_type"></xf-tree-item>
</xf-tree-item>
<xf-tree-item label="Level 1.2 (no children)" icon="folder" renaming>
<input type="text" slot="rename">
</xf-tree-item>
</xf-tree-item>
<xf-tree-item label="Level 2 (may have children)" may-have-children separator icon="smb"></xf-tree-item>
<xf-tree-item label="Level 3 (no children)" icon="usb">
<cr-button class="root-eject align-right-icon" tabindex="0" slot="trailingIcon">
<iron-icon icon="files20:eject"></iron-icon>
</cr-button>
</xf-tree-item>
<xf-tree-item label="Level 4 (no children)" icon="usb">
<span class="external-link-icon align-right-icon" slot="trailingIcon">
<iron-icon icon="files20:external-link"></iron-icon>
</span>
</xf-tree-item>
</xf-tree>
</div>
<div theme="refresh23">
<h2>Refresh23</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">
<xf-tree-item label="Level 1.1.1 (no children)" selected icon="camera-folder"></xf-tree-item>
<xf-tree-item label="Level 1.1.2 (no children)" disabled icon="invalid_type"></xf-tree-item>
</xf-tree-item>
<xf-tree-item label="Level 1.2 (no children)" icon="folder" renaming>
<input type="text" slot="rename">
</xf-tree-item>
</xf-tree-item>
<xf-tree-item label="Level 2 (may have children)" may-have-children separator icon="smb"></xf-tree-item>
<xf-tree-item label="Level 3 (no children)" icon="usb">
<cr-button class="root-eject align-right-icon" tabindex="0" slot="trailingIcon">
<iron-icon icon="files20:eject"></iron-icon>
</cr-button>
</xf-tree-item>
<xf-tree-item label="Level 4 (no children)" icon="usb">
<span class="external-link-icon align-right-icon" slot="trailingIcon">
<iron-icon icon="files20:external-link"></iron-icon>
</span>
</xf-tree-item>
</xf-tree>
</div>
</div>
<h2 class="widget">Icons</h2>
<div class="icons">
<div class="icon-wrapper">
<span>type="android_files"</span>
<xf-icon type="android_files"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="archive"</span>
<xf-icon type="archive"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="audio"</span>
<xf-icon type="audio"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="bruschetta"</span>
<xf-icon type="bruschetta"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="camera-folder"</span>
<xf-icon type="camera-folder"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="computer"</span>
<xf-icon type="computer"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="computers_grand_root"</span>
<xf-icon type="computers_grand_root"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="crostini"</span>
<xf-icon type="crostini"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="downloads"</span>
<xf-icon type="downloads"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="drive_offline"</span>
<xf-icon type="drive_offline"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="drive_recent"</span>
<xf-icon type="drive_recent"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="drive_shared_with_me"</span>
<xf-icon type="drive_shared_with_me"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="drive"</span>
<xf-icon type="drive"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="excel"</span>
<xf-icon type="excel"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="external_media"</span>
<xf-icon type="external_media"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="folder"</span>
<xf-icon type="folder"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="generic"</span>
<xf-icon type="generic"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="gdoc"</span>
<xf-icon type="gdoc"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="gdraw"</span>
<xf-icon type="gdraw"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="gform"</span>
<xf-icon type="gform"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="glink"</span>
<xf-icon type="glink"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="gmap"</span>
<xf-icon type="gmap"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="gsheet"</span>
<xf-icon type="gsheet"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="gsite"</span>
<xf-icon type="gsite"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="gmaillayout"</span>
<xf-icon type="gmaillayout"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="gslides"</span>
<xf-icon type="gslides"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="gtable"</span>
<xf-icon type="gtable"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="image"</span>
<xf-icon type="image"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="mtp"</span>
<xf-icon type="mtp"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="my_files"</span>
<xf-icon type="my_files"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="optical"</span>
<xf-icon type="optical"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="pdf"</span>
<xf-icon type="pdf"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="plugin_vm"</span>
<xf-icon type="plugin_vm"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="ppt"</span>
<xf-icon type="ppt"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="raw"</span>
<xf-icon type="raw"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="recent"</span>
<xf-icon type="recent"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="removable"</span>
<xf-icon type="removable"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="script"</span>
<xf-icon type="script"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="sd"</span>
<xf-icon type="sd"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="service_drive"</span>
<xf-icon type="service_drive"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="shared_drive"</span>
<xf-icon type="shared_drive"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="shared_drives_grand_root"</span>
<xf-icon type="shared_drives_grand_root"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="shared_folder"</span>
<xf-icon type="shared_folder"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="shortcut"</span>
<xf-icon type="shortcut"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="sites"</span>
<xf-icon type="sites"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="smb"</span>
<xf-icon type="smb"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="team_drive"</span>
<xf-icon type="team_drive"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="thumbnail_generic"</span>
<xf-icon type="thumbnail_generic"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="tini"</span>
<xf-icon type="tini"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="trash"</span>
<xf-icon type="trash"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="unknown_removable"</span>
<xf-icon type="unknown_removable"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="usb"</span>
<xf-icon type="usb"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="video"</span>
<xf-icon type="video"></xf-icon>
</div>
<div class="icon-wrapper">
<span>type="word"</span>
<xf-icon type="word"></xf-icon>
</div>
</div>
</body>
</html>
Codebase Browser
chromium