DevTools: Order split widget children correctly in the DOM
Previously, the sidebar and main widgets were arranged via css. This
caused the tab order to be wrong for keyboard navigation.
This patch puts the dom elements in the correct order, which lets us
remove the CSS hacks and fixes the tab order.
If the main widget and the sidebar widget both contain extension
iframes, we can't swap the widgets without destroying the extensions.
This is quite an exotic scenario though, and currently never happens
in DevTools.
Bug: 941182
Change-Id: I3a93d7f3e6fb52f5f7c1b1a8511f713d31ae07ff
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1521798
Reviewed-by: Erik Luo <[email protected]>
Commit-Queue: Joel Einbinder <[email protected]>
Cr-Original-Commit-Position: refs/heads/master@{#640657}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 8cd1b24aabce4a31a644db856351f3f9ef29dd92diff --git a/front_end/ui/SplitWidget.js b/front_end/ui/SplitWidget.js
index 950b230..a5300e6 100644
--- a/front_end/ui/SplitWidget.js
+++ b/front_end/ui/SplitWidget.js
@@ -44,11 +44,11 @@
this.registerRequiredCSS('ui/splitWidget.css');
this.contentElement.classList.add('shadow-split-widget');
+ this._sidebarElement =
+ this.contentElement.createChild('div', 'shadow-split-widget-contents shadow-split-widget-sidebar vbox');
this._mainElement =
this.contentElement.createChild('div', 'shadow-split-widget-contents shadow-split-widget-main vbox');
this._mainElement.createChild('slot').name = 'insertion-point-main';
- this._sidebarElement =
- this.contentElement.createChild('div', 'shadow-split-widget-contents shadow-split-widget-sidebar vbox');
this._sidebarElement.createChild('slot').name = 'insertion-point-sidebar';
this._resizerElement = this.contentElement.createChild('div', 'shadow-split-widget-resizer');
this._resizerElementSize = null;
@@ -241,8 +241,23 @@
* @param {boolean} secondIsSidebar
*/
setSecondIsSidebar(secondIsSidebar) {
- this.contentElement.classList.toggle('shadow-split-widget-first-is-sidebar', !secondIsSidebar);
+ if (secondIsSidebar === this._secondIsSidebar)
+ return;
this._secondIsSidebar = secondIsSidebar;
+ if (!this._mainWidget || !this._mainWidget.shouldHideOnDetach()) {
+ if (secondIsSidebar)
+ this.contentElement.insertBefore(this._mainElement, this._sidebarElement);
+ else
+ this.contentElement.insertBefore(this._mainElement, this._resizerElement);
+ } else if (!this._sidebarWidget || !this._sidebarWidget.shouldHideOnDetach()) {
+ if (secondIsSidebar)
+ this.contentElement.insertBefore(this._sidebarElement, this._resizerElement);
+ else
+ this.contentElement.insertBefore(this._sidebarElement, this._mainElement);
+ } else {
+ console.error('Could not swap split widget side. Both children widgets contain iframes.');
+ this._secondIsSidebar = !secondIsSidebar;
+ }
}
/**
