[GM3Restyling] Remove the `showConnector` property in `Dialog` component Will remove the usage in the following CL Bug: 383278166 Change-Id: Idc456c2aedc83f8d96364b921601430dd5454f36 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6085436 Reviewed-by: Kim-Anh Tran <kimanh@chromium.org> Commit-Queue: Nancy Li <nancyly@chromium.org>
diff --git a/front_end/ui/components/dialogs/Dialog.test.ts b/front_end/ui/components/dialogs/Dialog.test.ts index bc9c0b7..b389330 100644 --- a/front_end/ui/components/dialogs/Dialog.test.ts +++ b/front_end/ui/components/dialogs/Dialog.test.ts
@@ -255,6 +255,7 @@ }); describe('with an anchor and possible overflow', () => { const CONTAINER_WIDTH = 500; + const CONTAINER_HEIGHT = 500; const HOST_OFFSET = 100; const HOST_HEIGHT = 100; const devtoolsDialog = new Dialogs.Dialog.Dialog(); @@ -265,7 +266,7 @@ // of DevTools bounding element. container = document.createElement('div'); container.style.width = `${CONTAINER_WIDTH}px`; - container.style.height = `${CONTAINER_WIDTH}px`; + container.style.height = `${CONTAINER_HEIGHT}px`; container.style.position = 'fixed'; container.style.top = '0'; container.style.left = '0'; @@ -318,7 +319,7 @@ assert.strictEqual(dialogLeftBorderLimitPosition, CONTAINER_WIDTH); assert.strictEqual( dialog.clientHeight, - CONTAINER_WIDTH - Dialogs.Dialog.CONNECTOR_HEIGHT - HOST_HEIGHT - HOST_OFFSET + + CONTAINER_HEIGHT - Dialogs.Dialog.DIALOG_PADDING_FROM_WINDOW - HOST_HEIGHT - HOST_OFFSET + 2 * Dialogs.Dialog.DIALOG_VERTICAL_PADDING); }); it('sets the max width and height correctly when the dialog\'s content dimensions exceed the viewport and the dialog is anchored to the right',
diff --git a/front_end/ui/components/dialogs/Dialog.ts b/front_end/ui/components/dialogs/Dialog.ts index f170b82..e1ac469 100644 --- a/front_end/ui/components/dialogs/Dialog.ts +++ b/front_end/ui/components/dialogs/Dialog.ts
@@ -149,13 +149,19 @@ // still close the dialog. #onKeyDownBound = this.#onKeyDown.bind(this); + /** + * @deprecated + */ get showConnector(): boolean { + console.assert(this.#props.showConnector === false); return this.#props.showConnector; } - set showConnector(showConnector: boolean) { - this.#props.showConnector = showConnector; - this.#onStateChange(); + /** + * @deprecated + */ + set showConnector(_showConnector: boolean) { + console.warn('Connector is no longer supported'); } get origin(): DialogOrigin { @@ -264,7 +270,6 @@ this.#devtoolsMutationObserver.observe(this.#devToolsBoundingElement, {childList: true, subtree: true}); this.#devToolsBoundingElement.addEventListener('wheel', this.#handleScrollAttemptBound); this.style.setProperty('--dialog-padding', '0'); - this.style.setProperty('--override-content-box-shadow', 'none'); this.style.setProperty('--dialog-display', IS_DIALOG_SUPPORTED ? 'block' : 'none'); this.style.setProperty('--override-dialog-content-border', `${CONNECTOR_HEIGHT}px solid transparent`); this.style.setProperty('--dialog-padding', `${DIALOG_VERTICAL_PADDING}px ${DIALOG_SIDE_PADDING}px`); @@ -452,9 +457,8 @@ this.#bestVerticalPositionInternal === DialogVerticalPosition.AUTO) { return; } - this.#hitArea.height = anchorBottom - anchorTop + (CONNECTOR_HEIGHT * (this.showConnector ? 2 : 1)); + this.#hitArea.height = anchorBottom - anchorTop + CONNECTOR_HEIGHT; this.#hitArea.width = hitAreaWidth; - let connectorRelativeXValue = 0; // If the connector is to be shown, the dialog needs a minimum width such that it covers // the connector's width. this.style.setProperty( @@ -463,16 +467,14 @@ this.style.setProperty('--dialog-left', 'auto'); this.style.setProperty('--dialog-right', 'auto'); this.style.setProperty('--dialog-margin', '0'); - const offsetToCoverConnector = this.showConnector ? CONNECTOR_WIDTH * 3 / 4 : 0; switch (this.#bestHorizontalAlignment) { case DialogHorizontalAlignment.LEFT: { // Position the dialog such that its left border is in line with that of its anchor. // If this means the dialog's left border is out of DevTools bounds, move it to the right. // Cap its width as needed so that the right border doesn't overflow. - const dialogLeft = Math.max(anchorLeft - offsetToCoverConnector, devToolsLeft); + const dialogLeft = Math.max(anchorLeft, devToolsLeft); const devtoolsRightBorderToDialogLeft = devToolsRight - dialogLeft; const dialogMaxWidth = devtoolsRightBorderToDialogLeft - DIALOG_PADDING_FROM_WINDOW; - connectorRelativeXValue = connectorFixedXValue - dialogLeft - DIALOG_SIDE_PADDING; this.style.setProperty('--dialog-left', `${dialogLeft}px`); this.#hitArea.x = anchorLeft; this.style.setProperty('--dialog-max-width', `${dialogMaxWidth}px`); @@ -485,15 +487,11 @@ const windowRightBorderToAnchorRight = windowWidth - anchorRight; const windowRightBorderToDevToolsRight = windowWidth - devToolsRight; const windowRightBorderToDialogRight = - Math.max(windowRightBorderToAnchorRight - offsetToCoverConnector, windowRightBorderToDevToolsRight); + Math.max(windowRightBorderToAnchorRight, windowRightBorderToDevToolsRight); const dialogRight = windowWidth - windowRightBorderToDialogRight; const devtoolsLeftBorderToDialogRight = dialogRight - devToolsLeft; const dialogMaxWidth = devtoolsLeftBorderToDialogRight - DIALOG_PADDING_FROM_WINDOW; - const dialogCappedWidth = Math.min(dialogMaxWidth, dialogWidth); - - const dialogLeft = dialogRight - dialogCappedWidth; - connectorRelativeXValue = connectorFixedXValue - dialogLeft; this.#hitArea.x = windowWidth - windowRightBorderToDialogRight - hitAreaWidth; this.style.setProperty('--dialog-right', `${windowRightBorderToDialogRight}px`); @@ -508,7 +506,6 @@ let dialogLeft = Math.max(originCenterX - dialogCappedWidth * 0.5, devToolsLeft); dialogLeft = Math.min(dialogLeft, devToolsRight - dialogCappedWidth); - connectorRelativeXValue = connectorFixedXValue - dialogLeft - DIALOG_SIDE_PADDING; this.style.setProperty('--dialog-left', `${dialogLeft}px`); this.#hitArea.x = originCenterX - hitAreaWidth * 0.5; this.style.setProperty('--dialog-max-width', `${devToolsWidth - DIALOG_PADDING_FROM_WINDOW}px`); @@ -518,82 +515,25 @@ Platform.assertNever( this.#bestHorizontalAlignment, `Unknown alignment type: ${this.#bestHorizontalAlignment}`); } - const visibleConnectorHeight = this.showConnector ? CONNECTOR_HEIGHT : 0; - const clipPathConnectorStartX = connectorRelativeXValue - CONNECTOR_WIDTH / 2; - const clipPathConnectorEndX = connectorRelativeXValue + CONNECTOR_WIDTH / 2; - let [p1, p2, p3, p4, p5, p6, p7, p8, p9] = ['', '', '', '', '', '', '', '', '', '']; - const PSEUDO_BORDER_RADIUS = 2; switch (this.#bestVerticalPositionInternal) { case DialogVerticalPosition.TOP: { - // p1 p2 - // *-----------------------------* - // | | - // | | - // p9| | - // \__________________p7 p5____/ p3 <-- A pseudo curve is added to the clip path to - // p8 \/ p4 imitate a curved boder. - // p6 - // |-connectorRelativeX--| - const clipPathBottom = `calc(100% - ${CONNECTOR_HEIGHT}px)`; - if (this.#props.showConnector) { - p1 = '0 0'; - p2 = '100% 0'; - p3 = `100% calc(${clipPathBottom} - ${PSEUDO_BORDER_RADIUS}px)`; - p4 = `calc(100% - ${PSEUDO_BORDER_RADIUS}px) ${clipPathBottom}`; - p5 = `${clipPathConnectorStartX}px ${clipPathBottom}`; - p6 = `${connectorRelativeXValue}px 100%`; - p7 = `${clipPathConnectorEndX}px ${clipPathBottom}`; - p8 = `${PSEUDO_BORDER_RADIUS}px ${clipPathBottom}`; - p9 = `0 calc(${clipPathBottom} - ${PSEUDO_BORDER_RADIUS}px)`; - } - - this.style.setProperty( - '--content-padding-bottom', - `${CONNECTOR_HEIGHT + (this.#props.showConnector ? CONNECTOR_HEIGHT : 0)}px`); - this.style.setProperty('--content-padding-top', `${CONNECTOR_HEIGHT}px`); this.style.setProperty('--dialog-top', '0'); this.style.setProperty('--dialog-margin', 'auto'); this.style.setProperty('--dialog-margin-bottom', `${innerHeight - anchorTop}px`); - this.#hitArea.y = anchorTop - (CONNECTOR_HEIGHT * (this.showConnector ? 2 : 1)); + this.#hitArea.y = anchorTop - CONNECTOR_HEIGHT; this.style.setProperty('--dialog-offset-y', `${DIALOG_ANIMATION_OFFSET}px`); this.style.setProperty( - '--dialog-max-height', - `${ - devToolsHeight - (innerHeight - anchorTop) - DIALOG_PADDING_FROM_WINDOW - - visibleConnectorHeight}px`); + '--dialog-max-height', `${devToolsHeight - (innerHeight - anchorTop) - DIALOG_PADDING_FROM_WINDOW}px`); break; } case DialogVerticalPosition.BOTTOM: { - // p4 - // p2_________/\_________p6 - // / p3 p5 \ - // p1 | | p7 - // | | - // p9 *________________________* p8 - - if (this.#props.showConnector) { - p1 = `0 ${CONNECTOR_HEIGHT + PSEUDO_BORDER_RADIUS}px`; - p2 = `${PSEUDO_BORDER_RADIUS}px ${CONNECTOR_HEIGHT}px`; - p3 = `${clipPathConnectorStartX}px ${CONNECTOR_HEIGHT}px`; - p4 = `${connectorRelativeXValue}px 0`; - p5 = `${clipPathConnectorEndX}px ${CONNECTOR_HEIGHT}px`; - p6 = `calc(100% - ${PSEUDO_BORDER_RADIUS}px) ${CONNECTOR_HEIGHT}px`; - p7 = `100% ${CONNECTOR_HEIGHT + PSEUDO_BORDER_RADIUS}px`; - p8 = '100% 100%'; - p9 = '0 100%'; - } - this.style.setProperty( - '--content-padding-top', `${CONNECTOR_HEIGHT + (this.#props.showConnector ? CONNECTOR_HEIGHT : 0)}px`); - this.style.setProperty('--content-padding-bottom', `${CONNECTOR_HEIGHT}px`); this.style.setProperty('--dialog-top', `${anchorBottom}px`); this.#hitArea.y = anchorTop; this.style.setProperty('--dialog-offset-y', `-${DIALOG_ANIMATION_OFFSET}px`); this.style.setProperty( '--dialog-max-height', - `${ - devToolsHeight - (anchorBottom - devToolsTop) - DIALOG_PADDING_FROM_WINDOW - - visibleConnectorHeight}px`); + `${devToolsHeight - (anchorBottom - devToolsTop) - DIALOG_PADDING_FROM_WINDOW}px`); break; } default: @@ -601,9 +541,6 @@ this.#bestVerticalPositionInternal, `Unknown position type: ${this.#bestVerticalPositionInternal}`); } - const clipPath = [p1, p2, p3, p4, p5, p6, p7, p8, p9].join(); - - this.style.setProperty('--content-clip-path', clipPath); dialog.close(); dialog.style.visibility = ''; });
diff --git a/front_end/ui/components/dialogs/dialog.css b/front_end/ui/components/dialogs/dialog.css index 339917f..1798a6f 100644 --- a/front_end/ui/components/dialogs/dialog.css +++ b/front_end/ui/components/dialogs/dialog.css
@@ -40,14 +40,10 @@ min-width: var(--content-min-width); background: var(--color-background-elevation-dark-only); border-radius: var(--sys-size-5); - padding-top: var(--content-padding-top); - padding-bottom: var(--content-padding-bottom); - box-shadow: var(--override-content-box-shadow); max-height: var(--dialog-max-height); max-width: var(--dialog-max-width); overflow: auto; outline: none; - clip-path: polygon(var(--content-clip-path)); } .dialog-header {
diff --git a/front_end/ui/components/docs/dialog/basic.ts b/front_end/ui/components/docs/dialog/basic.ts index 358f741..d082fc9 100644 --- a/front_end/ui/components/docs/dialog/basic.ts +++ b/front_end/ui/components/docs/dialog/basic.ts
@@ -9,7 +9,6 @@ await ComponentHelpers.ComponentServerSetup.setup(); await FrontendHelpers.initializeGlobalVars(); -const showConnectors = [true, false]; const verticalPositions = [Dialogs.Dialog.DialogVerticalPosition.TOP, Dialogs.Dialog.DialogVerticalPosition.BOTTOM]; const horizontalAlignments = [ Dialogs.Dialog.DialogHorizontalAlignment.AUTO, @@ -22,7 +21,6 @@ const root = document.getElementById('root') as HTMLElement; let i = 0; -for (const showConnector of showConnectors) { for (const verticalPosition of verticalPositions) { const row = document.createElement('div'); row.classList.add('row'); @@ -44,7 +42,6 @@ dialog.position = verticalPosition; dialog.horizontalAlignment = horizontalAlignment; - dialog.showConnector = showConnector; dialog.origin = host; dialog.id = `dialog-${i}`; @@ -58,12 +55,11 @@ const div = document.createElement('div'); div.classList.add('dialog-content'); div.style.padding = '0 1em'; - div.innerHTML = `Hello, World<br/>Show connector: ${showConnector}<br/>Vertical position: ${ - verticalPosition}<br/>Horizontal alignment: ${horizontalAlignment}`; + div.innerHTML = + `Hello, World<br/>Vertical position: ${verticalPosition}<br/>Horizontal alignment: ${horizontalAlignment}`; dialog.appendChild(div); root.appendChild(dialog); i++; - } } } @@ -88,7 +84,6 @@ dialog.position = verticalPosition; dialog.horizontalAlignment = horizontalAlignment; - dialog.showConnector = true; dialog.origin = host; dialog.id = `dialog-${i}`; @@ -148,6 +143,7 @@ }); const div = document.createElement('div'); div.classList.add('dialog-content'); + div.style.padding = '0 var(--sys-size-8)'; div.innerHTML = 'Hello, World'; dialog.appendChild(div);
diff --git a/test/interactions/goldens/linux/dialog/bottom-auto-open.png b/test/interactions/goldens/linux/dialog/bottom-auto-open.png index e62df1f..d19328f 100644 --- a/test/interactions/goldens/linux/dialog/bottom-auto-open.png +++ b/test/interactions/goldens/linux/dialog/bottom-auto-open.png Binary files differ
diff --git a/test/interactions/goldens/linux/dialog/bottom-center-open.png b/test/interactions/goldens/linux/dialog/bottom-center-open.png index a170934..50e779d 100644 --- a/test/interactions/goldens/linux/dialog/bottom-center-open.png +++ b/test/interactions/goldens/linux/dialog/bottom-center-open.png Binary files differ
diff --git a/test/interactions/goldens/linux/dialog/button_dialog_open.png b/test/interactions/goldens/linux/dialog/button_dialog_open.png index dd71e04..3c6b63a 100644 --- a/test/interactions/goldens/linux/dialog/button_dialog_open.png +++ b/test/interactions/goldens/linux/dialog/button_dialog_open.png Binary files differ
diff --git a/test/interactions/goldens/linux/dialog/narrow-top-auto-open.png b/test/interactions/goldens/linux/dialog/narrow-top-auto-open.png index d069edc..d96158f 100644 --- a/test/interactions/goldens/linux/dialog/narrow-top-auto-open.png +++ b/test/interactions/goldens/linux/dialog/narrow-top-auto-open.png Binary files differ
diff --git a/test/interactions/goldens/linux/dialog/shortcut_dialog_open.png b/test/interactions/goldens/linux/dialog/shortcut_dialog_open.png index ec85798..fcf10cd 100644 --- a/test/interactions/goldens/linux/dialog/shortcut_dialog_open.png +++ b/test/interactions/goldens/linux/dialog/shortcut_dialog_open.png Binary files differ
diff --git a/test/interactions/goldens/linux/dialog/top-left-open.png b/test/interactions/goldens/linux/dialog/top-left-open.png index 26f8aa3..7f6df76 100644 --- a/test/interactions/goldens/linux/dialog/top-left-open.png +++ b/test/interactions/goldens/linux/dialog/top-left-open.png Binary files differ
diff --git a/test/interactions/goldens/linux/icon_dialog/icon_dialog_open.png b/test/interactions/goldens/linux/icon_dialog/icon_dialog_open.png index 864a6e6..32bb234 100644 --- a/test/interactions/goldens/linux/icon_dialog/icon_dialog_open.png +++ b/test/interactions/goldens/linux/icon_dialog/icon_dialog_open.png Binary files differ
diff --git a/test/interactions/goldens/linux/select_menu/select_menu.png b/test/interactions/goldens/linux/select_menu/select_menu.png new file mode 100644 index 0000000..256d617 --- /dev/null +++ b/test/interactions/goldens/linux/select_menu/select_menu.png Binary files differ
diff --git a/test/interactions/goldens/linux/select_menu/select_menu_with_connector.png b/test/interactions/goldens/linux/select_menu/select_menu_with_connector.png deleted file mode 100644 index d90173a..0000000 --- a/test/interactions/goldens/linux/select_menu/select_menu_with_connector.png +++ /dev/null Binary files differ
diff --git a/test/interactions/goldens/linux/select_menu/select_menu_with_groups.png b/test/interactions/goldens/linux/select_menu/select_menu_with_groups.png index 7ee42ee..96759a0 100644 --- a/test/interactions/goldens/linux/select_menu/select_menu_with_groups.png +++ b/test/interactions/goldens/linux/select_menu/select_menu_with_groups.png Binary files differ
diff --git a/test/interactions/goldens/mac/select_menu/select_menu_with_connector.png b/test/interactions/goldens/mac/select_menu/select_menu_with_connector.png deleted file mode 100644 index 0215210..0000000 --- a/test/interactions/goldens/mac/select_menu/select_menu_with_connector.png +++ /dev/null Binary files differ
diff --git a/test/interactions/goldens/win32/select_menu/select_menu_with_connector.png b/test/interactions/goldens/win32/select_menu/select_menu_with_connector.png deleted file mode 100644 index 99a9054..0000000 --- a/test/interactions/goldens/win32/select_menu/select_menu_with_connector.png +++ /dev/null Binary files differ
diff --git a/test/interactions/ui/components/SelectMenu_test.ts b/test/interactions/ui/components/SelectMenu_test.ts index db19e50..e6acc69 100644 --- a/test/interactions/ui/components/SelectMenu_test.ts +++ b/test/interactions/ui/components/SelectMenu_test.ts
@@ -308,7 +308,7 @@ itScreenshot('renders a menu with a connector', async () => { await loadComponentDocExample('select_menu/basic.html'); - await testScreenshotOnPlaceholder('#place-holder-3', 'select_menu/select_menu_with_connector.png'); + await testScreenshotOnPlaceholder('#place-holder-3', 'select_menu/select_menu.png'); }); itScreenshot('renders a menu with groups', async () => {
