DevTools: Display product information in ConsoleContextSelector

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

Index: third_party/WebKit/Source/devtools/front_end/ui/toolbar.css
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/toolbar.css b/third_party/WebKit/Source/devtools/front_end/ui/toolbar.css
index 3958872b979170397979fb8c2ef00d34f4f5da9f..819613dcd2d6c39799d93cadc6d0fb05099a2858 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/toolbar.css
+++ b/third_party/WebKit/Source/devtools/front_end/ui/toolbar.css
@@ -13,6 +13,7 @@
     position: relative;
     white-space: nowrap;
     height: 26px;
+    contain: strict;
     overflow: hidden;
     z-index: 12;
     display: flex;
@@ -36,6 +37,7 @@
 .toolbar-shadow.vertical {
     flex-direction: column;
     height: auto;
+    contain: none;
     align-items: flex-start;
 }
 
@@ -210,6 +212,20 @@ select.toolbar-item {
     margin-bottom: 2px;
 }
 
+.console-context {
+    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;
@@ -296,6 +312,7 @@ select.toolbar-item[data-keyboard-focus="true"]:focus > * {
 .toolbar-shadow.floating {
     flex-direction: column;
     height: auto;
+    contain: none;

[einbinder, 2017/05/05 22:58:00]

This dramatically speeds up layout when changing the title on the context menu

     background-color: white;
     border: 1px solid #ccc;
     margin-top: -1px;
@@ -303,8 +320,6 @@ select.toolbar-item[data-keyboard-focus="true"]:focus > * {
     left: -2px;
 }
 
-span.toolbar-select-container.toolbar-item.warning {
+.console-context.warning {
     background: #ffd7d7;
-    padding: 0 5px 0 0;
-    margin-right: 1px;
 }