[GlobalAiButton] Show AI Assistance in sidebar initially

* If the user does not have any preference (i.e.
they didn't moved the drawer to sidebar or vice-versa by
clicking the button explicitly), we're going to show
the AI assistance panel in the sidebar.

Bug: none
Change-Id: Iff2f8e445946d51f8b4d5031597f45842876f360
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6906117
Commit-Queue: Ergün Erdoğmuş <[email protected]>
Commit-Queue: Piotr Paulski <[email protected]>
Reviewed-by: Piotr Paulski <[email protected]>
Auto-Submit: Ergün Erdoğmuş <[email protected]>

Author: ergunsh

front_end/entrypoints/main/GlobalAiButton.test.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
+import * as Root from '../../core/root/root.js';
 import {
   renderElementIntoDOM,
 } from '../../testing/DOMHelpers.js';
@@ -42,16 +43,73 @@ describeWithEnvironment('GlobalAiButton', () => {
     assert.strictEqual(view.input.state, Main.GlobalAiButton.GlobalAiButtonState.DEFAULT);
   });
 
-  it('shows freestyler in drawer and increases click count on click', async () => {
-    const {view} = await createWidget();
-    const showViewStub = sinon.stub(UI.ViewManager.ViewManager.instance(), 'showViewInLocation');
-    const setting = Common.Settings.Settings.instance().settingForTest('global-ai-button-click-count');
-    setting.set(0);
+  describe('onClick', () => {
+    let inspectorView: UI.InspectorView.InspectorView;
+    let isUserExplicitlyUpdatedDrawerOrientationStub: sinon.SinonStub;
+    let toggleDrawerOrientationSpy: sinon.SinonSpy;
+    let showViewStub: sinon.SinonStub;
+    let showDrawerStub: sinon.SinonStub;
+
+    beforeEach(() => {
+      inspectorView = UI.InspectorView.InspectorView.instance();
+      isUserExplicitlyUpdatedDrawerOrientationStub =
+          sinon.stub(inspectorView, 'isUserExplicitlyUpdatedDrawerOrientation');
+      toggleDrawerOrientationSpy = sinon.spy(inspectorView, 'toggleDrawerOrientation');
+      showViewStub = sinon.stub(UI.ViewManager.ViewManager.instance(), 'showViewInLocation');
+      showDrawerStub = sinon.stub(inspectorView, 'showDrawer');
+    });
+
+    it('shows freestyler in drawer and increases click count', async () => {
+      const {view} = await createWidget();
+      const setting = Common.Settings.Settings.instance().settingForTest('global-ai-button-click-count');
+      setting.set(0);
+
+      view.input.onClick();
+
+      sinon.assert.calledOnceWithExactly(showViewStub, 'freestyler', 'drawer-view');
+      assert.strictEqual(setting.get(), 1);
+    });
+
+    describe('with vertical drawer experiment', () => {
+      beforeEach(() => {
+        Root.Runtime.experiments.setEnabled(Root.Runtime.ExperimentName.VERTICAL_DRAWER, true);
+      });
+
+      afterEach(() => {
+        Root.Runtime.experiments.setEnabled(Root.Runtime.ExperimentName.VERTICAL_DRAWER, false);
+      });
 
-    view.input.onClick();
+      it('toggles drawer if experiment is on and user has no preference', async () => {
+        const {view} = await createWidget();
+        isUserExplicitlyUpdatedDrawerOrientationStub.returns(false);
 
-    sinon.assert.calledOnceWithExactly(showViewStub, 'freestyler', 'drawer-view');
-    assert.strictEqual(setting.get(), 1);
+        view.input.onClick();
+
+        sinon.assert.calledOnceWithExactly(showDrawerStub, {focus: true, hasTargetDrawer: false});
+        sinon.assert.calledOnceWithExactly(toggleDrawerOrientationSpy, {force: 'vertical'});
+      });
+
+      it('does not toggle drawer if user has preference', async () => {
+        const {view} = await createWidget();
+        isUserExplicitlyUpdatedDrawerOrientationStub.returns(true);
+
+        view.input.onClick();
+
+        sinon.assert.notCalled(showDrawerStub);
+        sinon.assert.notCalled(toggleDrawerOrientationSpy);
+      });
+    });
+
+    it('does not toggle drawer if experiment is off', async () => {
+      Root.Runtime.experiments.setEnabled(Root.Runtime.ExperimentName.VERTICAL_DRAWER, false);
+      const {view} = await createWidget();
+      isUserExplicitlyUpdatedDrawerOrientationStub.returns(false);
+
+      view.input.onClick();
+
+      sinon.assert.notCalled(showDrawerStub);
+      sinon.assert.notCalled(toggleDrawerOrientationSpy);
+    });
   });
 
   describe('promotion lifecycle', () => {

front_end/entrypoints/main/GlobalAiButton.ts

@@ -155,6 +155,22 @@ export class GlobalAiButton extends UI.Widget.Widget {
   #onClick(): void {
     UI.ViewManager.ViewManager.instance().showViewInLocation('freestyler', 'drawer-view');
     incrementClickCountSetting();
+
+    const hasExplicitUserPreference =
+        UI.InspectorView.InspectorView.instance().isUserExplicitlyUpdatedDrawerOrientation();
+    const isVerticalDrawerExperimentEnabled =
+        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.VERTICAL_DRAWER);
+    if (isVerticalDrawerExperimentEnabled && !hasExplicitUserPreference) {
+      // This mimics what we're doing while showing the drawer via `ESC`.
+      // There is a bug where opening the sidebar directly for the first time,
+      // and triggering a drawer rotation without calling `showDrawer({focus: true})` makes the drawer disappear.
+      UI.InspectorView.InspectorView.instance().showDrawer({
+        focus: true,
+        hasTargetDrawer: false,
+      });
+      UI.InspectorView.InspectorView.instance().toggleDrawerOrientation(
+          {force: UI.InspectorView.DrawerOrientation.VERTICAL});
+    }
   }
 
   override performUpdate(): Promise<void>|void {

front_end/ui/legacy/InspectorView.test.ts

@@ -11,7 +11,8 @@ import * as LegacyUI from './legacy.js';
 
 const InspectorView = LegacyUI.InspectorView.InspectorView;
 const Settings = Common.Settings.Settings;
-const DRAWER_ORIENTATION_SETTING_NAME = 'inspector.use-vertical-drawer-orientation';
+const DrawerOrientation = LegacyUI.InspectorView.DrawerOrientation;
+const DRAWER_ORIENTATION_SETTING_NAME = 'inspector.drawer-orientation';
 
 describeWithEnvironment('InspectorView', () => {
   beforeEach(() => {
@@ -72,28 +73,68 @@ describeWithEnvironment('InspectorView', () => {
     Common.Settings.Settings.instance({forceNew: true, syncedStorage, globalStorage, localStorage});
   });
 
-  it('drawer orientation and setting default to horizontal', () => {
+  it('drawer orientation and setting default to unset', () => {
     const inspectorView = InspectorView.instance({forceNew: true});
     assert.isFalse(inspectorView.isDrawerOrientationVertical());
     const setting = Settings.instance().settingForTest(DRAWER_ORIENTATION_SETTING_NAME);
-    assert.isFalse(setting.get());
+    assert.strictEqual(setting.get(), DrawerOrientation.UNSET);
   });
 
   it('drawer orientation setting updates after each toggle', () => {
     const inspectorView = InspectorView.instance({forceNew: true});
     const setting = Settings.instance().settingForTest(DRAWER_ORIENTATION_SETTING_NAME);
-    assert.isFalse(setting.get());
+    assert.strictEqual(setting.get(), DrawerOrientation.UNSET);
 
     inspectorView.toggleDrawerOrientation();
-    assert.isTrue(setting.get());
+    assert.strictEqual(setting.get(), DrawerOrientation.VERTICAL);
 
     inspectorView.toggleDrawerOrientation();
-    assert.isFalse(setting.get());
+    assert.strictEqual(setting.get(), DrawerOrientation.HORIZONTAL);
   });
 
-  it('drawer starts vertical if setting is true', () => {
-    Settings.instance().createSetting(DRAWER_ORIENTATION_SETTING_NAME, true);
+  it('drawer starts vertical if setting is vertical', () => {
+    Settings.instance().createSetting(DRAWER_ORIENTATION_SETTING_NAME, DrawerOrientation.VERTICAL);
     const inspectorView = InspectorView.instance({forceNew: true});
     assert.isTrue(inspectorView.isDrawerOrientationVertical());
   });
+
+  it('isUserExplicitlyUpdatedDrawerOrientation returns false by default', () => {
+    const inspectorView = InspectorView.instance({forceNew: true});
+    assert.isFalse(inspectorView.isUserExplicitlyUpdatedDrawerOrientation());
+  });
+
+  it('isUserExplicitlyUpdatedDrawerOrientation returns true when orientation is toggled', () => {
+    const inspectorView = InspectorView.instance({forceNew: true});
+
+    inspectorView.toggleDrawerOrientation();
+
+    assert.isTrue(inspectorView.isUserExplicitlyUpdatedDrawerOrientation());
+  });
+
+  it('toggleDrawerOrientation can force vertical orientation', () => {
+    const inspectorView = InspectorView.instance({forceNew: true});
+    const orientationSetting = Settings.instance().settingForTest(DRAWER_ORIENTATION_SETTING_NAME);
+    const updatedSetting = Settings.instance().settingForTest(DRAWER_ORIENTATION_SETTING_NAME);
+
+    assert.isFalse(inspectorView.isDrawerOrientationVertical());
+
+    inspectorView.toggleDrawerOrientation({force: 'vertical'});
+
+    assert.isTrue(inspectorView.isDrawerOrientationVertical());
+    assert.strictEqual(orientationSetting.get(), DrawerOrientation.VERTICAL);
+    assert.strictEqual(updatedSetting.get(), DrawerOrientation.VERTICAL);
+  });
+
+  it('toggleDrawerOrientation can force horizontal orientation', () => {
+    Settings.instance().createSetting(DRAWER_ORIENTATION_SETTING_NAME, DrawerOrientation.VERTICAL);
+    const inspectorView = InspectorView.instance({forceNew: true});
+    const orientationSetting = Settings.instance().settingForTest(DRAWER_ORIENTATION_SETTING_NAME);
+
+    assert.isTrue(inspectorView.isDrawerOrientationVertical());
+
+    inspectorView.toggleDrawerOrientation({force: 'horizontal'});
+
+    assert.isFalse(inspectorView.isDrawerOrientationVertical());
+    assert.strictEqual(orientationSetting.get(), DrawerOrientation.HORIZONTAL);
+  });
 });

front_end/ui/legacy/InspectorView.ts

@@ -140,8 +140,14 @@ const str_ = i18n.i18n.registerUIStrings('ui/legacy/InspectorView.ts', UIStrings
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 let inspectorViewInstance: InspectorView|null = null;
 
+export enum DrawerOrientation {
+  VERTICAL = 'vertical',
+  HORIZONTAL = 'horizontal',
+  UNSET = 'unset',
+}
+
 export class InspectorView extends VBox implements ViewLocationResolver {
-  private readonly drawerIsVerticalSetting: Common.Settings.Setting<boolean>;
+  private readonly drawerOrientationSetting: Common.Settings.Setting<DrawerOrientation>;
   private readonly drawerSplitWidget: SplitWidget;
   private readonly tabDelegate: InspectorViewTabDelegate;
   private readonly drawerTabbedLocation: TabbedViewLocation;
@@ -164,10 +170,10 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     this.setMinimumSize(250, 72);
 
     // DevTools sidebar is a vertical split of main tab bar panels and a drawer.
-    this.drawerIsVerticalSetting =
-        Common.Settings.Settings.instance().createSetting('inspector.use-vertical-drawer-orientation', false);
-    this.drawerSplitWidget =
-        new SplitWidget(this.drawerIsVerticalSetting.get(), true, 'inspector.drawer-split-view-state', 200, 200);
+    this.drawerOrientationSetting =
+        Common.Settings.Settings.instance().createSetting('inspector.drawer-orientation', DrawerOrientation.UNSET);
+    const isVertical = this.drawerOrientationSetting.get() === DrawerOrientation.VERTICAL;
+    this.drawerSplitWidget = new SplitWidget(isVertical, true, 'inspector.drawer-split-view-state', 200, 200);
     this.drawerSplitWidget.hideSidebar();
     this.drawerSplitWidget.enableShowModeSaving();
     this.drawerSplitWidget.show(this.element);
@@ -195,7 +201,8 @@ export class InspectorView extends VBox implements ViewLocationResolver {
         this.drawerSplitWidget.isVertical() ? 'dock-bottom' : 'dock-right');
     this.#toggleOrientationButton.element.setAttribute('jslog', `${VisualLogging.toggle().track({click: true})}`);
     this.#toggleOrientationButton.element.setAttribute('jslogcontext', 'toggle-drawer-orientation');
-    this.#toggleOrientationButton.addEventListener(ToolbarButton.Events.CLICK, this.toggleDrawerOrientation, this);
+    this.#toggleOrientationButton.addEventListener(
+        ToolbarButton.Events.CLICK, () => this.toggleDrawerOrientation(), this);
     this.drawerTabbedPane.addEventListener(
         TabbedPaneEvents.TabSelected,
         (event: Common.EventTarget.EventTargetEvent<EventData>) => this.tabSelected(event.data.tabId), this);
@@ -435,14 +442,24 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.drawerHidden));
   }
 
-  toggleDrawerOrientation(): void {
-    const drawerWillBeVertical = !this.drawerSplitWidget.isVertical();
+  toggleDrawerOrientation({force}: {force?: Omit<DrawerOrientation, DrawerOrientation.UNSET>} = {}): void {
+    let drawerWillBeVertical: boolean;
+    if (force) {
+      drawerWillBeVertical = force === DrawerOrientation.VERTICAL;
+    } else {
+      drawerWillBeVertical = !this.drawerSplitWidget.isVertical();
+    }
+
+    this.drawerOrientationSetting.set(drawerWillBeVertical ? DrawerOrientation.VERTICAL : DrawerOrientation.HORIZONTAL);
     this.#toggleOrientationButton.setGlyph(drawerWillBeVertical ? 'dock-bottom' : 'dock-right');
-    this.drawerIsVerticalSetting.set(drawerWillBeVertical);
     this.drawerSplitWidget.setVertical(drawerWillBeVertical);
     this.setDrawerMinimumSize();
   }
 
+  isUserExplicitlyUpdatedDrawerOrientation(): boolean {
+    return this.drawerOrientationSetting.get() !== DrawerOrientation.UNSET;
+  }
+
   setDrawerMinimumSize(): void {
     const drawerIsVertical = this.drawerSplitWidget.isVertical();
     if (drawerIsVertical) {

front_end/ui/visual_logging/KnownContextValues.ts

@@ -1889,7 +1889,7 @@ export const knownContextValues = new Set([
   'inspector-main.hard-reload',
   'inspector-main.reload',
   'inspector-stylesheet',
-  'inspector.use-vertical-drawer-orientation',
+  'inspector.drawer-orientation',
   'installability',
   'installing-entry-inspect',
   'instance-id',