DevTools: New look for SoftContextMenus

Previously, mac-style context menus were used everywhere that we could
not use a native context menu. With this patch, there are now three
context menus:

A standard context menu for windows/linux.
The old style context menus for mac.
A dark theme context menu, which is used in place of native menus
on all platforms.

https://i.imgur.com/DRDp1E2.png

Change-Id: Ic3be0e7ac1661ef1eaeecdc473bdef7dc015314b
Reviewed-on: https://chromium-review.googlesource.com/1161282Reviewed-by: Andrey Lushnikov <lushnikov@chromium.org>
Commit-Queue: Joel Einbinder <einbinder@chromium.org>
Cr-Commit-Position: refs/heads/master@{#580917}

third_party/blink/renderer/devtools/front_end/main/Main.js

@@ -518,7 +518,8 @@ Main.Main.MainMenuItem = class {
           'Placement of DevTools relative to the page. (%s to restore last position)', toggleDockSideShorcuts[0].name);
       dockItemElement.appendChild(titleElement);
       const dockItemToolbar = new UI.Toolbar('', dockItemElement);
-      dockItemToolbar.makeBlueOnHover();
+      if (Host.isMac() && !UI.themeSupport.hasTheme())
+        dockItemToolbar.makeBlueOnHover();
       const undock = new UI.ToolbarToggle(Common.UIString('Undock into separate window'), 'largeicon-undock');
       const bottom = new UI.ToolbarToggle(Common.UIString('Dock to bottom'), 'largeicon-dock-to-bottom');
       const right = new UI.ToolbarToggle(Common.UIString('Dock to right'), 'largeicon-dock-to-right');

third_party/blink/renderer/devtools/front_end/ui/ContextMenu.js

@@ -434,7 +434,8 @@ UI.ContextMenu = class extends UI.ContextSubMenu {
 
   _innerShow() {
     const menuObject = this._buildMenuDescriptors();
-    if (this._useSoftMenu || UI.ContextMenu._useSoftMenu || InspectorFrontendHost.isHostedMode()) {
+    if (this._useSoftMenu || UI.ContextMenu._useSoftMenu || InspectorFrontendHost.isHostedMode() ||
+        (UI.themeSupport.hasTheme() && menuObject.length)) {
       this._softMenu = new UI.SoftContextMenu(menuObject, this._itemSelected.bind(this));
       this._softMenu.show(this._event.target.ownerDocument, new AnchorBox(this._x, this._y, 0, 0));
     } else {

third_party/blink/renderer/devtools/front_end/ui/SoftContextMenu.js

@@ -146,8 +146,13 @@ UI.SoftContextMenu = class {
 
     menuItemElement.createTextChild(item.label);
 
-    const subMenuArrowElement = menuItemElement.createChild('span', 'soft-context-menu-item-submenu-arrow');
-    subMenuArrowElement.textContent = '\u25B6';  // BLACK RIGHT-POINTING TRIANGLE
+    if (Host.isMac() && !UI.themeSupport.hasTheme()) {
+      const subMenuArrowElement = menuItemElement.createChild('span', 'soft-context-menu-item-submenu-arrow');
+      subMenuArrowElement.textContent = '\u25B6';  // BLACK RIGHT-POINTING TRIANGLE
+    } else {
+      const subMenuArrowElement = UI.Icon.create('smallicon-triangle-right', 'soft-context-menu-item-submenu-arrow');
+      menuItemElement.appendChild(subMenuArrowElement);
+    }
 
     menuItemElement.addEventListener('mousedown', this._menuItemMouseDown.bind(this), false);
     menuItemElement.addEventListener('mouseup', this._menuItemMouseUp.bind(this), false);
@@ -254,7 +259,8 @@ UI.SoftContextMenu = class {
     }
     this._highlightedMenuItemElement = menuItemElement;
     if (this._highlightedMenuItemElement) {
-      this._highlightedMenuItemElement.classList.add('force-white-icons');
+      if (UI.themeSupport.hasTheme() || Host.isMac())
+        this._highlightedMenuItemElement.classList.add('force-white-icons');
       this._highlightedMenuItemElement.classList.add('soft-context-menu-item-mouse-over');
       this._contextMenuElement.focus();
       if (scheduleSubMenu && this._highlightedMenuItemElement._subItems &&

third_party/blink/renderer/devtools/front_end/ui/softContextMenu.css

@@ -5,19 +5,32 @@
  */
 
 .soft-context-menu {
-    border: 1px solid rgba(196, 196, 196, 0.9);
-    border-top: 1px solid rgba(196, 196, 196, 0.5);
+    overflow-y: auto;
+    min-width: 160px !important;
     /* NOTE: Keep padding in sync with padding adjustment in SoftContextMenu.js */
     padding: 4px 0 4px 0;
+    border: 1px solid #b9b9b9;
+    background-color: #FFF;
+    box-shadow: var(--drop-shadow);
+    --context-menu-hover-bg: #ebebeb;
+    --context-menu-hover-color: #222;
+    --context-menu-seperator-color: var(--divider-color);
+}
+
+:host:host-context(.platform-mac):host-context(html:not(.-theme-with-dark-background)) .soft-context-menu {
+    border: 1px solid rgba(196, 196, 196, 0.9);
+    border-top: 1px solid rgba(196, 196, 196, 0.5);
     border-radius: 4px;
     background-color: rgb(240, 240, 240);
     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
-    overflow-y: auto;
-    min-width: 160px !important;
+    --context-menu-hover-color: #FFF;
+    --context-menu-seperator-color: rgb(222, 222, 222);
 }
 
 :host-context(.-theme-with-dark-background) .soft-context-menu {
-    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
+    --context-menu-hover-bg: var(--selection-bg-color);
+    --context-menu-hover-color: var(--selection-fg-color);
+    border: none;
 }
 
 .soft-context-menu-item {
@@ -45,33 +58,34 @@
 .soft-context-menu-separator > .separator-line {
     margin: 0;
     height: 5px;
-    border-bottom: 1px solid rgb(222, 222, 222);
+    border-bottom: 1px solid var(--context-menu-seperator-color);
     pointer-events: none;
 }
 
 .soft-context-menu-item-mouse-over,
 .-theme-selection-color {
-    border-top: 1px solid var(--selection-bg-color);
-    border-bottom: 1px solid var(--selection-bg-color);
-    background-color: var(--selection-bg-color);
-    color: white;
+    border-top: 1px solid var(--context-menu-hover-bg);
+    border-bottom: 1px solid var(--context-menu-hover-bg);
+    background-color: var(--context-menu-hover-bg);
+    color: var(--context-menu-hover-color);
 }
 
-:host-context(.platform-mac) .soft-context-menu-item-mouse-over, -theme-preserve {
+:host:host-context(.platform-mac):host-context(html:not(.-theme-with-dark-background)) .soft-context-menu-item-mouse-over {
     border-top: 1px solid transparent;
     border-bottom: 1px solid transparent;
     background-image: linear-gradient(to right, hsl(214, 81%, 60%), hsl(214, 100%, 56%));
 }
 
-:host-context(.platform-mac) .separator-line {
+:host:host-context(.platform-mac):host-context(html:not(.-theme-with-dark-background)) .separator-line {
     border-width: 2px;
 }
 
 .soft-context-menu-item-submenu-arrow {
     pointer-events: none;
     font-size: 11px;
-    flex: 1 1 auto;
     text-align: right;
+    align-self: center;
+    margin-left: auto;
 }
 
 .soft-context-menu-item-mouse-over .soft-context-menu-item-checkmark {
@@ -103,6 +117,11 @@
     margin: auto 5px auto 0px;
 }
 
+:host-context(.-theme-with-dark-background) .checkmark {
+    filter: invert(80%);
+}
+
 .soft-context-menu-item-mouse-over .checkmark {
     opacity: 1;
+    filter: none;
 }