[devtools] Fix focus when docking devtools

This patch keeps the focus on the main menu
when changing from undocked back to docked again.

Bug: chromium:1002424
Change-Id: Ic36f3e6852cb4e0a43ced6387dfeb3e2491d1d8b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1798344Reviewed-by: Yang Guo <yangguo@chromium.org>
Commit-Queue: Jan Scheffler <janscheffler@chromium.org>
Cr-Commit-Position: refs/heads/master@{#706405}

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

@@ -614,10 +614,21 @@ Main.Main.MainMenuItem = class {
       contextMenu.headerSection().appendCustomItem(dockItemElement);
     }
 
+
+    const button = this._item.element;
+
     /**
      * @param {string} side
+     * @suppressGlobalPropertiesCheck
      */
     function setDockSide(side) {
+      const hadKeyboardFocus = document.deepActiveElement().hasAttribute('data-keyboard-focus');
+      Components.dockController.once(Components.DockController.Events.AfterDockSideChanged).then(() => {
+        button.focus();
+        if (hadKeyboardFocus) {
+          UI.markAsFocusedByKeyboard(button);
+        }
+      });
       Components.dockController.setDockSide(side);
       contextMenu.discard();
     }

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

@@ -836,9 +836,14 @@ export function _focusChanged(event) {
   if (!UI._keyboardFocus) {
     return;
   }
+
+  UI.markAsFocusedByKeyboard(element);
+}
+
+UI.markAsFocusedByKeyboard = function(element) {
   element.setAttribute('data-keyboard-focus', 'true');
   element.addEventListener('blur', () => element.removeAttribute('data-keyboard-focus'), {once: true, capture: true});
-}
+};
 
 /**
  * @unrestricted