extensions: allow trash to have a focus outline.

ui/webui/resources/css/trash.css

 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 .trash {
   -webkit-appearance: none;
   background: none;
   border: none;
   cursor: pointer;
   display: inline-block;
   outline: none;
   padding: 0;
   position: relative;
   width: 30px;
+  z-index: 0;
 }
 
-.trash > span {
+.trash :-webkit-any(.can, .lid, .halo) {
   display: inline-block;
+  position: absolute;
 }
 
-.trash > .can,
-.trash > .lid {
+.trash > :-webkit-any(.can, .lid) {
   background: url(chrome://resources/images/trash.png) 0 0 no-repeat;
   left: 8px;
-  position: absolute;
   right: 8px;
   top: 2px;
+  z-index: 2;
 }
 
-.trash > .lid {
-  -webkit-transform-origin: -7% 100%;
-  -webkit-transition: -webkit-transform 150ms;
+.trash .lid {
   height: 6px;
   width: 14px;
 }
 
-html[dir='rtl'] .trash > .lid {
-  -webkit-transform-origin: 107% 100%;
-}
-
-.trash:focus > .lid,
-.trash:hover > .lid {
-  -webkit-transform: rotate(-45deg);
-  -webkit-transition: -webkit-transform 250ms;
-}
-
-html[dir='rtl'] .trash:focus > .lid,
-html[dir='rtl'] .trash:hover > .lid {
-  -webkit-transform: rotate(45deg);
-}
-
-.trash > .can {
+.trash .can {
   background-position: -1px -4px;
   height: 12px;
   /* The margins match the background position offsets. */
   margin-left: 1px;
   /* The right margin is one greater due to a shadow on the trash image. */
   margin-right: 2px;
   margin-top: 4px;
   width: 11px;
 }
+
+/* NOTE: "> .halo" only applies to the lid's halo element. */
+
+.trash > .halo {
+  height: 5px;
+  right: 9px;
+  top: 3px;
+  width: 13px;
+}
+
+.trash > :-webkit-any(.lid, .halo) {
+  -webkit-transform-origin: -7% 100%;
+  -webkit-transition: -webkit-transform 150ms;
+}
+
+html[dir='rtl'] .trash > :-webkit-any(.lid, .halo) {
+  -webkit-transform-origin: 107% 100%;
+}
+
+.trash:-webkit-any(:focus, :hover, .open) > :-webkit-any(.lid, .halo) {
+  -webkit-transform: rotate(-45deg);
+  -webkit-transition: -webkit-transform 250ms;
+}
+
+html[dir='rtl'] .trash:-webkit-any(:focus, :hover, .open) >
+    :-webkit-any(.lid, .halo) {
+  -webkit-transform: rotate(45deg);
+}
+
+.halo {
+  border-radius: 2px;
+  z-index: 1;
+}
+
+.can .halo {
+  bottom: 1px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+}
+
+.trash:focus .halo {
+  box-shadow: 0 0 2px rgb(77, 144, 254);
+}