improvement(DefaultToolWindows): improve overflow handling in header

Tool window header (Tabs in most cases) should not be pushed, but should overflow out, when resizing to very small sizes.
alirezamirian · Dec 6, 2023 · 23b885f · 23b885f
1 parent aec27b7
commit 23b885f
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 20 deletions.
diff --git a/packages/jui/cypress/support/commands.ts b/packages/jui/cypress/support/commands.ts
@@ -38,12 +38,12 @@ declare global {
     interface Chainable {
       /**
        * Custom command to perform resize action on an element with resize handle on `side`
-       * @example cy.resizeLeft('left', 50) // increase size by 50 pixels, using left resize handle.
-       * @example cy.resizeLeft('left', -50) // decrease size by 50 pixels, using left resize handle.
-       * @example cy.resizeLeft('top', 50) // increase size by 50 pixels, using top resize handle.
-       * @example cy.resizeLeft('top', -50) // decrease size by 50 pixels, using top resize handle.
+       * @example cy.resizeFromSide('left', 50) // increase size by 50 pixels, using left resize handle.
+       * @example cy.resizeFromSide('left', -50) // decrease size by 50 pixels, using left resize handle.
+       * @example cy.resizeFromSide('top', 50) // increase size by 50 pixels, using top resize handle.
+       * @example cy.resizeFromSide('top', -50) // decrease size by 50 pixels, using top resize handle.
        */
-      resize(
+      resizeFromSide(
         side: "left" | "right" | "top" | "bottom",
         value: number
       ): Chainable<JQuery<HTMLElement>>;
@@ -58,7 +58,7 @@ declare global {
 }
 
 Cypress.Commands.add(
-  "resize",
+  "resizeFromSide",
   { prevSubject: "element" },
   (subject, side, value) => {
     return cy

diff --git a/packages/jui/src/Popup/Popup.cy.tsx b/packages/jui/src/Popup/Popup.cy.tsx
@@ -93,8 +93,14 @@ describe("Popup", () => {
           interactions="all"
         />
       );
-      cy.get("#popup").resize("left", -50).invoke("width").should("eq", 100);
-      cy.get("#popup").resize("left", 50).invoke("width").should("eq", 150);
+      cy.get("#popup")
+        .resizeFromSide("left", -50)
+        .invoke("width")
+        .should("eq", 100);
+      cy.get("#popup")
+        .resizeFromSide("left", 50)
+        .invoke("width")
+        .should("eq", 150);
       cy.wrap(onBoundsChange).should("be.calledTwice");
       cy.wrap(onBoundsChange).should(
         "be.calledWithMatch",
@@ -116,8 +122,14 @@ describe("Popup", () => {
           interactions="all"
         />
       );
-      cy.get("#popup").resize("right", -50).invoke("width").should("eq", 100);
-      cy.get("#popup").resize("right", 50).invoke("width").should("eq", 150);
+      cy.get("#popup")
+        .resizeFromSide("right", -50)
+        .invoke("width")
+        .should("eq", 100);
+      cy.get("#popup")
+        .resizeFromSide("right", 50)
+        .invoke("width")
+        .should("eq", 150);
       cy.wrap(onBoundsChange).should("be.calledTwice");
       cy.wrap(onBoundsChange).should(
         "be.calledWithMatch",
@@ -139,8 +151,14 @@ describe("Popup", () => {
           interactions="all"
         />
       );
-      cy.get("#popup").resize("top", -50).invoke("height").should("eq", 100);
-      cy.get("#popup").resize("top", 50).invoke("height").should("eq", 150);
+      cy.get("#popup")
+        .resizeFromSide("top", -50)
+        .invoke("height")
+        .should("eq", 100);
+      cy.get("#popup")
+        .resizeFromSide("top", 50)
+        .invoke("height")
+        .should("eq", 150);
       cy.wrap(onBoundsChange).should("be.calledTwice");
       cy.wrap(onBoundsChange).should(
         "be.calledWithMatch",
@@ -162,8 +180,14 @@ describe("Popup", () => {
           interactions="all"
         />
       );
-      cy.get("#popup").resize("bottom", -50).invoke("height").should("eq", 100);
-      cy.get("#popup").resize("bottom", 50).invoke("height").should("eq", 150);
+      cy.get("#popup")
+        .resizeFromSide("bottom", -50)
+        .invoke("height")
+        .should("eq", 100);
+      cy.get("#popup")
+        .resizeFromSide("bottom", 50)
+        .invoke("height")
+        .should("eq", 150);
       cy.wrap(onBoundsChange).should("be.calledTwice");
       cy.wrap(onBoundsChange).should(
         "be.calledWithMatch",
@@ -187,7 +211,10 @@ describe("Popup", () => {
           interactions="all"
         />
       );
-      cy.get("#popup").resize("right", -40).invoke("width").should("eq", 130);
+      cy.get("#popup")
+        .resizeFromSide("right", -40)
+        .invoke("width")
+        .should("eq", 130);
       cy.wrap(onBoundsChanging).should(
         "be.calledOnceWith",
         Cypress.sinon.match({ left: 50, top: 150, width: 130, height: 100 }),
@@ -224,7 +251,7 @@ describe("Popup", () => {
         />
       );
       cy.contains("Title").move(-50, 50);
-      cy.get("#popup").resize("bottom", -50);
+      cy.get("#popup").resizeFromSide("bottom", -50);
       cy.get("#popup")
         .invoke("offset")
         .should("deep.equal", { left: 100, top: 100 });
@@ -242,7 +269,7 @@ describe("Popup", () => {
         />
       );
       cy.contains("Title").move(-50, 50);
-      cy.get("#popup").resize("left", 50).move(-50, 50);
+      cy.get("#popup").resizeFromSide("left", 50).move(-50, 50);
       cy.get("#popup")
         .invoke("offset")
         .should("deep.equal", { left: 50, top: 150 });

diff --git a/packages/jui/src/ToolWindowsImpl/DefaultToolWindowHeader.tsx b/packages/jui/src/ToolWindowsImpl/DefaultToolWindowHeader.tsx
@@ -53,6 +53,7 @@ const StyledToolWindowHeaderContent = styled.div`
   flex: 1;
   display: flex;
   align-items: center;
+  overflow: hidden;
 `;
 
 export const DefaultToolWindowHeader: React.FC<ToolWindowHeaderProps> = ({

diff --git a/packages/jui/src/ToolWindowsImpl/DefaultToolWindows.cy.tsx b/packages/jui/src/ToolWindowsImpl/DefaultToolWindows.cy.tsx
@@ -1,13 +1,13 @@
 import React, { useState } from "react";
 import {
   DefaultToolWindow,
+  DefaultToolWindows,
   Theme,
   ThemeProvider,
   ToolWindowRefValue,
   ToolWindowsState,
-  ToolWindowState,
   toolWindowState,
-  DefaultToolWindows,
+  ToolWindowState,
 } from "@intellij-platform/core";
 import darculaThemeJson from "../../themes/darcula.theme.json";
 import { KeymapProvider } from "@intellij-platform/core/ActionSystem";
@@ -17,7 +17,10 @@ const window = (id: string) => ({
   title: id,
   icon: null,
   content: (
-    <DefaultToolWindow data-testid={`${id}`} headerContent={id}>
+    <DefaultToolWindow
+      data-testid={`${id}`}
+      headerContent={<span style={{ whiteSpace: "nowrap" }}>{id}</span>}
+    >
       <input />
       <input />
     </DefaultToolWindow>
@@ -56,6 +59,19 @@ const SimpleToolWindows = React.forwardRef(
   }
 );
 
+describe("DefaultToolWindowHeader", () => {
+  beforeEach(() => {
+    cy.viewport("macbook-13");
+  });
+  it("overflows the header title out, in small sizes, without pushing the content", () => {
+    cy.mount(<SimpleToolWindows />);
+    cy.findByTestId("First window").resizeFromSide("right", -150);
+    cy.percySnapshot("DefaultToolWindowHeader--overflow", {
+      scope: '[data-testid="First window"]',
+    });
+  });
+});
+
 describe("DefaultToolWindowActions", () => {
   beforeEach(() => {
     cy.viewport("macbook-13");