extensions: allow trash to have a focus outline.

ui/webui/resources/css/trash.css

Index: ui/webui/resources/css/trash.css
diff --git a/ui/webui/resources/css/trash.css b/ui/webui/resources/css/trash.css
index 25b7d0e10e578413889b3ea3be7845c0d139ddc8..7d788c06c162fb1dbf752305b830ba02ca39e589 100644
--- a/ui/webui/resources/css/trash.css
+++ b/ui/webui/resources/css/trash.css
@@ -12,50 +12,80 @@
   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 {
+.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:focus > .lid,
-.trash:hover > .lid {
+.trash:-webkit-any(:focus, :hover, .open) > :-webkit-any(.lid, .halo) {
   -webkit-transform: rotate(-45deg);
   -webkit-transition: -webkit-transform 250ms;
 }
 
-html[dir='rtl'] .trash:focus > .lid,
-html[dir='rtl'] .trash:hover > .lid {
+html[dir='rtl'] .trash:-webkit-any(:focus, :hover, .open) >
+    :-webkit-any(.lid, .halo) {
   -webkit-transform: rotate(45deg);
 }
 
-.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;
+.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);
 }