DevTools: Display product information in ConsoleContextSelector

third_party/WebKit/Source/devtools/front_end/ui/toolbar.css

 /*
  * Copyright (c) 2014 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.
  */
 
 :host {
     flex: none;
     padding: 0 2px;
 }
 
 .toolbar-shadow {
     position: relative;
     white-space: nowrap;
     height: 26px;
+    contain: strict;

[dgozman, 2017/05/08 23:16:48]

Does this break wrapping toolbars?

[einbinder, 2017/05/09 22:00:45]

It did. done.

     overflow: hidden;
     z-index: 12;
     display: flex;
     flex: none;
     align-items: center;
 }
 
 .toolbar-shadow.wrappable {
     flex-wrap: wrap;
     overflow: visible;
 }
 
 .toolbar-shadow.wrappable-reverse {
     flex-direction: row-reverse;
 }
 
 .toolbar-shadow.toolbar-grow-vertical {
     height: initial;
 }
 
 .toolbar-shadow.vertical {
     flex-direction: column;
     height: auto;
+    contain: none;
     align-items: flex-start;
 }
 
 .toolbar-item {
     position: relative;
     display: flex;
     background-color: transparent;
     flex: none;
     align-items: center;
     justify-content: center;
@@ skipping 154 matching lines @@
     border: 0;
     border-radius: 0;
     padding: 0 13px 0 5px;
     margin-right: -10px;
     position: relative;
     height: 22px;
     margin-top: 2px;
     margin-bottom: 2px;
 }
 
+.console-context {

[dgozman, 2017/05/08 23:16:49]

This does not deserve to be in toolbar.css

[einbinder, 2017/05/09 22:00:45]

Where can this go? Should I inject a stylesheet into the toolbar shadow root?

[dgozman, 2017/05/09 23:11:12]

Wrap your custom element with shadow root. See
DeviceModeToolbar._wrapToolbarItem for example.

[einbinder, 2017/05/11 00:07:03]

Done.

+    height: 26px;
+    text-align: left;
+}
+
+.console-context[data-keyboard-focus="true"]:focus::before {
+    content: "";
+    position: absolute;
+    top:2px;
+    left:2px;
+    right:2px;
+    bottom:2px;
+    background: rgba(0, 0, 0, 0.08);
+}
 select.toolbar-item[data-keyboard-focus="true"]:focus {
     background: rgba(0, 0, 0, 0.08);
     border-radius: 2px;
 }
 
 select.toolbar-item[data-keyboard-focus="true"]:focus > * {
     background: white;
 }
 
 /* Input */
@@ skipping 66 matching lines @@
     left: 2px;
     right: 2px;
     background-color: rgba(0, 0, 0, 0.08);
     border-radius: 2px;
     content: "";
 }
 
 .toolbar-shadow.floating {
     flex-direction: column;
     height: auto;
+    contain: none;
     background-color: white;
     border: 1px solid #ccc;
     margin-top: -1px;
     width: 28px;
     left: -2px;
 }
 
-span.toolbar-select-container.toolbar-item.warning {
+.console-context.warning {
     background: #ffd7d7;
-    padding: 0 5px 0 0;
-    margin-right: 1px;
 }