File Editors: Display list of theme/plugin files in scrollable directory tree.

Props WraithKenny, afercia, melchoyce, westonruter.
Amends [41721].
Fixes #24048.

Built from https://develop.svn.wordpress.org/trunk@41851


git-svn-id: http://core.svn.wordpress.org/trunk@41685 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/common-rtl.css

@@ -1466,17 +1466,17 @@ div.error {
 .wrap #templateside .notice {
 	display: block;
 	margin: 0;
-	padding: 5px 12px;
+	padding: 5px 8px;
 	font-weight: 600;
 	text-decoration: none;
 }
 
 .wrap #templateside span.notice {
-  margin-right: -12px;
+	margin-right: -12px;
 }
 
 #templateside li.notice a {
-  padding: 0;
+	padding: 0;
 }
 
 /* Update icon. */
@@ -3036,11 +3036,135 @@ img {
 	width: 97%;
 	height: calc( 100vh - 280px );
 }
-#templateside {
-	margin-top: 31px;
-	overflow: scroll;
+
+#templateside > h2 {
+	padding-top: 6px;
+	padding-bottom: 6px;
+	margin: 0;
+	border-bottom: solid 1px #ccc;
 }
 
+#templateside ol,
+#templateside ul {
+	margin: .5em 0;
+	padding: 0;
+}
+#templateside > ul {
+	margin-top: 0;
+	overflow: auto;
+	padding: 2px;
+	height: calc(100vh - 280px);
+}
+#templateside ul ul {
+	padding-right: 12px;
+}
+
+/*
+ * Styles for Theme and Plugin editors.
+ */
+
+/* Hide collapsed items. */
+[role="treeitem"][aria-expanded="false"] > ul {
+	display: none;
+}
+
+/* Use arrow dashicons for folder states, but hide from screen readers. */
+[role="treeitem"] span[aria-hidden] {
+	display: inline;
+	font-family: dashicons;
+	font-size: 20px;
+	position: absolute;
+	pointer-events: none;
+}
+[role="treeitem"][aria-expanded="false"] > .folder-label .icon:after {
+	content: "\f141";
+}
+[role="treeitem"][aria-expanded="true"] > .folder-label .icon:after {
+	content: "\f140";
+}
+[role="treeitem"] .folder-label {
+	display: block;
+	padding: 3px 12px 3px 3px;
+	cursor: pointer;
+}
+
+/* Remove outline, and create our own focus and hover styles */
+[role="treeitem"] {
+	outline: 0;
+}
+[role="treeitem"] .folder-label.focus {
+	color: #124964;
+	box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
+}
+[role="treeitem"].hover,
+[role="treeitem"] .folder-label.hover {
+	background-color: #DDDDDD;
+}
+
+.tree-folder {
+	margin: 0;
+	position: relative;
+}
+[role="treeitem"] li {
+	position: relative;
+}
+
+/* Styles for folder indicators/depth */
+.tree-folder .tree-folder::after {
+	content: ' ';
+	display: block;
+	position: absolute;
+	right: 2px;
+	border-right: 1px solid #ccc;
+	top: -13px;
+	bottom: 10px;
+}
+.tree-folder > li::before {
+	content: ' ';
+	position: absolute;
+	display: block;
+	border-right: 1px solid #ccc;
+	right: 2px;
+	top: -5px;
+	height: 18px;
+	width: 7px;
+	border-bottom: 1px solid #ccc;
+}
+.tree-folder > li::after {
+	content: ' ';
+	position: absolute;
+	display: block;
+	border-right: 1px solid #ccc;
+	right: 2px;
+	bottom: -7px;
+	top: 0;
+}
+
+/* current-file needs to adjustment for .notice styles */
+#templateside .current-file {
+	margin: -4px 0 -2px;
+}
+.tree-folder > .current-file::before {
+	right: 4px;
+	height: 15px;
+	width: 6px;
+	border-right: none;
+	top: 3px;
+}
+.tree-folder > .current-file::after {
+	bottom: -4px;
+	height: 7px;
+	right: 2px;
+	top: auto;
+}
+
+/* Lines shouldn't continue on last item */
+.tree-folder > li:last-child::after,
+.tree-folder li:last-child > .tree-folder::after {
+	display: none;
+}
+
+
 #theme-plugin-editor-label {
 	display: inline-block;
 	margin-bottom: 1em;
@@ -3090,7 +3214,6 @@ img {
 	word-wrap: break-word;
 }
 
-#templateside h2,
 #postcustomstuff p.submit {
 	margin: 0;
 }
@@ -3099,12 +3222,6 @@ img {
 	margin: 1em 0 0;
 }
 
-#templateside ol,
-#templateside ul {
-	margin: .5em 0;
-	padding: 0;
-}
-
 #templateside li {
 	margin: 4px 0;
 }
@@ -3653,6 +3770,35 @@ img {
 		width: 100%;
 	}
 
+	#templateside ul ul {
+		padding-right: 1.5em;
+	}
+	[role="treeitem"] .folder-label {
+		display: block;
+		padding: 5px;
+	}
+	.tree-folder > li::before,
+	.tree-folder > li::after,
+	.tree-folder .tree-folder::after {
+		right: -8px;
+	}
+	.tree-folder > li::before {
+		top: 0px;
+		height: 13px;
+	}
+	.tree-folder > .current-file::before {
+		right: -5px;
+		top: 7px;
+		width: 4px;
+	}
+	.tree-folder > .current-file::after {
+		height: 9px;
+		right: -8px;
+	}
+	.wrap #templateside span.notice {
+		margin-right: -14px;
+	}
+
 	.fileedit-sub .alignright {
 		margin-top: 15px;
 	}