Add Extend/Collapse buttons to desktop view and close on Escape.

Closes #3286466

css/admin.toolbar.css

-.toolbar-tray-horizontal .menu-item:hover {
+/* All levels */
+
+.toolbar-tray-horizontal .menu-item--expanded {
+  background-color: #f5f5f2;
+}
+
+.toolbar-tray-horizontal .menu-item:hover,
+.toolbar-tray-horizontal .menu-item.hover-intent {
   background: #fff;
 }
 
-.toolbar-tray-horizontal .menu-item a:focus {
+.toolbar-tray-horizontal a {
+  display: inline-block;
+}
+
+.toolbar-tray-horizontal .toolbar-menu .toolbar-icon.toolbar-handle {
+  display: inline-block;
+  position: relative;
+  padding: 1em 0;
+  line-height: 1;
+  z-index: auto;
+}
+
+.menu-item a:focus,
+.toolbar .toolbar-icon.toolbar-handle:focus {
   background: #abeae4;
 }
 
-.toolbar-tray-horizontal .toolbar-menu:not(:first-child) li.menu-item--expanded > a:focus {
-  background-position: center right;
-  background-image: url(../misc/icons/0074bd/chevron-right.svg);
-  background-repeat: no-repeat;
+html:not([dir="rtl"]) .toolbar-tray-horizontal .toolbar-handle::before {
+  left: auto;
+}
+
+[dir="rtl"] .toolbar-tray-horizontal .toolbar-handle::before {
+  right: auto;
 }
 
 .toolbar-tray-horizontal .menu-item--expanded .menu {
@@ -18,8 +40,91 @@
   height: auto;
 }
 
-.toolbar-tray-horizontal .menu-item--expanded {
-  background-color: #f5f5f2;
+.toolbar-menu .menu-item > span {
+  padding: 1em 1.3333em;
+  display: block;
+  color: #434343;
+  cursor: pointer;
+}
+
+html:not([dir="rtl"]) .toolbar-tray-vertical .menu-item--expanded > .toolbar-box a {
+  margin-right: 4em;
+}
+
+[dir="rtl"] .toolbar-tray-vertical .menu-item--expanded > .toolbar-box a {
+  margin-left: 4em;
+}
+
+.toolbar .toolbar-tray-vertical li.open > ul.toolbar-menu.clearfix {
+  display: block;
+}
+
+/* Level 1 */
+
+html:not([dir="rtl"]) .toolbar-tray-horizontal .level-1 > .toolbar-box a {
+  padding-right: 0.6667em;
+}
+
+[dir="rtl"] .toolbar-tray-horizontal .level-1 > .toolbar-box a {
+  padding-left: 0.6667em;
+}
+
+.toolbar-tray-horizontal .level-1 > .toolbar-box .toolbar-handle {
+  width: 3.3844em;
+}
+
+html:not([dir="rtl"]) .toolbar-tray-horizontal .level-1 > .toolbar-box .toolbar-handle::before {
+  right: 0.923em;
+}
+
+[dir="rtl"] .toolbar-tray-horizontal .level-1 > .toolbar-box .toolbar-handle::before {
+  left: 0.923em;
+  right: auto;
+}
+
+/* Sub-levels */
+
+.toolbar-tray-horizontal .level-1 :not(.menu-item--expanded) > .toolbar-box a {
+  width: 100%;
+}
+
+.toolbar-tray-horizontal .level-1 .menu-item--expanded > .toolbar-box a {
+  width: calc(100% - 3em);
+}
+
+.toolbar-tray-horizontal .level-1 .menu-item--expanded .toolbar-handle {
+  width: 3em;
+}
+
+.toolbar-tray-horizontal .level-1 .menu-item--expanded .toolbar-box .toolbar-icon.toolbar-handle::before {
+  background-size: auto;
+  position: absolute;
+}
+
+.toolbar-tray-horizontal .level-1 .menu-item--expanded .toolbar-handle.open::before {
+  transform: rotate(180deg);
+  filter: brightness(0) saturate(100%) invert(51%) sepia(5%) saturate(8%) hue-rotate(12deg) brightness(90%) contrast(88%);
+}
+
+html:not([dir="rtl"]) .toolbar-tray-horizontal .level-1 .menu-item--expanded > .toolbar-box .toolbar-handle::before {
+  background-image: url(../misc/icons/0074bd/chevron-right.svg);
+  background-position: right;
+  right: 0;
+}
+
+[dir="rtl"] .toolbar-tray-horizontal .level-1 .menu-item--expanded > .toolbar-box .toolbar-handle::before {
+  background-image: url(../misc/icons/0074bd/chevron-left.svg);
+  background-position: left;
+  left: 0;
+  right: auto;
+}
+
+html:not([dir="rtl"]) .toolbar-tray-horizontal .level-1 .menu-item--expanded .toolbar-handle.open::before {
+  background-position: left;
+}
+
+[dir="rtl"] .toolbar-tray-horizontal .level-1 .menu-item--expanded .toolbar-handle.open::before {
+  background-position: right;
 }
 
 .toolbar-tray-horizontal ul li li.menu-item {
@@ -38,21 +143,18 @@
   border-top: 1px solid #ddd;
 }
 
-.toolbar-tray-horizontal li.menu-item--expanded.hover-intent ul ul,
-.toolbar-tray-horizontal li.menu-item--expanded.hover-intent ul ul ul,
-.toolbar-tray-horizontal li.menu-item--expanded.hover-intent ul ul ul ul,
-.toolbar-tray-horizontal li.menu-item--expanded.hover-intent ul ul ul ul ul {
+.toolbar-tray-horizontal li.menu-item--expanded.hover-intent ul {
   display: none;
   left: -999em; /* LTR */
 }
 
 /* Lists nested under hovered list items */
-.toolbar-tray-horizontal li.menu-item--expanded.hover-intent ul,
-.toolbar-tray-horizontal li li.menu-item--expanded.hover-intent ul,
-.toolbar-tray-horizontal li li li.menu-item--expanded.hover-intent ul,
-.toolbar-tray-horizontal li li li li.menu-item--expanded.hover-intent ul,
-.toolbar-tray-horizontal li li li li li.menu-item--expanded.hover-intent ul {
+.toolbar-tray-horizontal li.menu-item--expanded.hover-intent ul {
   display: block;
+  position: absolute;
+  width: 200px;
+  box-shadow: 2px 2px 3px hsla(0, 0%, 0%, 0.4);
+  z-index: 1;
   left: auto; /* LTR */
 }
 
@@ -61,34 +163,23 @@
   padding: 12px 15px 12px 12px;
 }
 
-.toolbar-tray-horizontal ul li.menu-item--expanded.hover-intent ul {
-  display: block;
-  position: absolute;
-  width: 200px;
-  box-shadow: 2px 2px 3px hsla(0, 0%, 0%, 0.4);
-  z-index: 1;
-}
-
-.toolbar-tray-horizontal ul li.menu-item--expanded .menu-item > ul {
+.toolbar-tray-horizontal li.menu-item--expanded .menu-item > ul {
   display: none;
 }
 
-.toolbar-tray-horizontal ul li.menu-item--expanded ul li.menu-item--expanded {
-  background-position: center right;
-  background-image: url(../misc/icons/0074bd/chevron-right.svg);
-  background-repeat: no-repeat;
-}
-
-.toolbar-tray-horizontal ul li.menu-item--expanded .menu-item.hover-intent ul {
+.toolbar-tray-horizontal li.menu-item--expanded .menu-item.hover-intent > ul {
   display: block;
   margin: -40px 0 0 197px;
 }
 
-.toolbar-tray-horizontal li:hover ul li {
-  float: none;
+[dir="rtl"] .toolbar-tray-horizontal ul li.menu-item--expanded .menu-item.hover-intent ul {
+  margin: -40px 197px 0 0;
 }
 
-.toolbar-tray-horizontal li.hover-intent ul li {
+.toolbar-tray-horizontal li:hover ul li,
+.toolbar-tray-horizontal li.hover-intent ul li,
+[dir="rtl"] .toolbar-tray-horizontal li:hover ul li,
+[dir="rtl"] .toolbar-tray-horizontal li.hover-intent ul li {
   float: none;
 }
 
@@ -99,31 +190,3 @@
   left: 200px;
   width: 200px;
 }
-
-.toolbar .toolbar-tray-vertical li.open > ul.toolbar-menu.clearfix {
-  display: block;
-}
-
-.toolbar-menu  .menu-item > span {
-  padding: 1em 1.3333em;
-  display: block;
-  color: #434343;
-  cursor: pointer;
-}
-
-[dir="rtl"] .toolbar-tray-horizontal ul li.menu-item--expanded ul li.menu-item--expanded {
-  background-position: center left;
-  background-image: url(../misc/icons/0074bd/chevron-left.svg);
-}
-
-[dir="rtl"] .toolbar-tray-horizontal ul li.menu-item--expanded .menu-item.hover-intent ul {
-  margin: -40px 197px 0 0;
-}
-
-[dir="rtl"] .toolbar-tray-horizontal li:hover ul li {
-  float: none;
-}
-
-[dir="rtl"] .toolbar-tray-horizontal li.hover-intent ul li {
-  float: none;
-}