Skip to content

Commit 148fd10

Browse files
Nancy LiDevtools-frontend LUCI CQ
Nancy Li
authored and
Devtools-frontend LUCI CQ
committed
[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 <[email protected]> Commit-Queue: Nancy Li <[email protected]>
1 parent 1906c4c commit 148fd10

File tree

17 files changed

+22
-92
lines changed

17 files changed

+22
-92
lines changed

‎front_end/ui/components/dialogs/Dialog.test.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -255,6 +255,7 @@ describe('Dialog', () => {
255255
});
256256
describe('with an anchor and possible overflow', () => {
257257
const CONTAINER_WIDTH = 500;
258+
const CONTAINER_HEIGHT = 500;
258259
const HOST_OFFSET = 100;
259260
const HOST_HEIGHT = 100;
260261
const devtoolsDialog = new Dialogs.Dialog.Dialog();
@@ -265,7 +266,7 @@ describe('Dialog', () => {
265266
// of DevTools bounding element.
266267
container = document.createElement('div');
267268
container.style.width = `${CONTAINER_WIDTH}px`;
268-
container.style.height = `${CONTAINER_WIDTH}px`;
269+
container.style.height = `${CONTAINER_HEIGHT}px`;
269270
container.style.position = 'fixed';
270271
container.style.top = '0';
271272
container.style.left = '0';
@@ -318,7 +319,7 @@ describe('Dialog', () => {
318319
assert.strictEqual(dialogLeftBorderLimitPosition, CONTAINER_WIDTH);
319320
assert.strictEqual(
320321
dialog.clientHeight,
321-
CONTAINER_WIDTH - Dialogs.Dialog.CONNECTOR_HEIGHT - HOST_HEIGHT - HOST_OFFSET +
322+
CONTAINER_HEIGHT - Dialogs.Dialog.DIALOG_PADDING_FROM_WINDOW - HOST_HEIGHT - HOST_OFFSET +
322323
2 * Dialogs.Dialog.DIALOG_VERTICAL_PADDING);
323324
});
324325
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',

‎front_end/ui/components/dialogs/Dialog.ts‎

Lines changed: 15 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -149,13 +149,19 @@ export class Dialog extends HTMLElement {
149149
// still close the dialog.
150150
#onKeyDownBound = this.#onKeyDown.bind(this);
151151

152+
/**
153+
* @deprecated
154+
*/
152155
get showConnector(): boolean {
156+
console.assert(this.#props.showConnector === false);
153157
return this.#props.showConnector;
154158
}
155159

156-
set showConnector(showConnector: boolean) {
157-
this.#props.showConnector = showConnector;
158-
this.#onStateChange();
160+
/**
161+
* @deprecated
162+
*/
163+
set showConnector(_showConnector: boolean) {
164+
console.warn('Connector is no longer supported');
159165
}
160166

161167
get origin(): DialogOrigin {
@@ -264,7 +270,6 @@ export class Dialog extends HTMLElement {
264270
this.#devtoolsMutationObserver.observe(this.#devToolsBoundingElement, {childList: true, subtree: true});
265271
this.#devToolsBoundingElement.addEventListener('wheel', this.#handleScrollAttemptBound);
266272
this.style.setProperty('--dialog-padding', '0');
267-
this.style.setProperty('--override-content-box-shadow', 'none');
268273
this.style.setProperty('--dialog-display', IS_DIALOG_SUPPORTED ? 'block' : 'none');
269274
this.style.setProperty('--override-dialog-content-border', `${CONNECTOR_HEIGHT}px solid transparent`);
270275
this.style.setProperty('--dialog-padding', `${DIALOG_VERTICAL_PADDING}px ${DIALOG_SIDE_PADDING}px`);
@@ -452,9 +457,8 @@ export class Dialog extends HTMLElement {
452457
this.#bestVerticalPositionInternal === DialogVerticalPosition.AUTO) {
453458
return;
454459
}
455-
this.#hitArea.height = anchorBottom - anchorTop + (CONNECTOR_HEIGHT * (this.showConnector ? 2 : 1));
460+
this.#hitArea.height = anchorBottom - anchorTop + CONNECTOR_HEIGHT;
456461
this.#hitArea.width = hitAreaWidth;
457-
let connectorRelativeXValue = 0;
458462
// If the connector is to be shown, the dialog needs a minimum width such that it covers
459463
// the connector's width.
460464
this.style.setProperty(
@@ -463,16 +467,14 @@ export class Dialog extends HTMLElement {
463467
this.style.setProperty('--dialog-left', 'auto');
464468
this.style.setProperty('--dialog-right', 'auto');
465469
this.style.setProperty('--dialog-margin', '0');
466-
const offsetToCoverConnector = this.showConnector ? CONNECTOR_WIDTH * 3 / 4 : 0;
467470
switch (this.#bestHorizontalAlignment) {
468471
case DialogHorizontalAlignment.LEFT: {
469472
// Position the dialog such that its left border is in line with that of its anchor.
470473
// If this means the dialog's left border is out of DevTools bounds, move it to the right.
471474
// Cap its width as needed so that the right border doesn't overflow.
472-
const dialogLeft = Math.max(anchorLeft - offsetToCoverConnector, devToolsLeft);
475+
const dialogLeft = Math.max(anchorLeft, devToolsLeft);
473476
const devtoolsRightBorderToDialogLeft = devToolsRight - dialogLeft;
474477
const dialogMaxWidth = devtoolsRightBorderToDialogLeft - DIALOG_PADDING_FROM_WINDOW;
475-
connectorRelativeXValue = connectorFixedXValue - dialogLeft - DIALOG_SIDE_PADDING;
476478
this.style.setProperty('--dialog-left', `${dialogLeft}px`);
477479
this.#hitArea.x = anchorLeft;
478480
this.style.setProperty('--dialog-max-width', `${dialogMaxWidth}px`);
@@ -485,15 +487,11 @@ export class Dialog extends HTMLElement {
485487
const windowRightBorderToAnchorRight = windowWidth - anchorRight;
486488
const windowRightBorderToDevToolsRight = windowWidth - devToolsRight;
487489
const windowRightBorderToDialogRight =
488-
Math.max(windowRightBorderToAnchorRight - offsetToCoverConnector, windowRightBorderToDevToolsRight);
490+
Math.max(windowRightBorderToAnchorRight, windowRightBorderToDevToolsRight);
489491

490492
const dialogRight = windowWidth - windowRightBorderToDialogRight;
491493
const devtoolsLeftBorderToDialogRight = dialogRight - devToolsLeft;
492494
const dialogMaxWidth = devtoolsLeftBorderToDialogRight - DIALOG_PADDING_FROM_WINDOW;
493-
const dialogCappedWidth = Math.min(dialogMaxWidth, dialogWidth);
494-
495-
const dialogLeft = dialogRight - dialogCappedWidth;
496-
connectorRelativeXValue = connectorFixedXValue - dialogLeft;
497495

498496
this.#hitArea.x = windowWidth - windowRightBorderToDialogRight - hitAreaWidth;
499497
this.style.setProperty('--dialog-right', `${windowRightBorderToDialogRight}px`);
@@ -508,7 +506,6 @@ export class Dialog extends HTMLElement {
508506

509507
let dialogLeft = Math.max(originCenterX - dialogCappedWidth * 0.5, devToolsLeft);
510508
dialogLeft = Math.min(dialogLeft, devToolsRight - dialogCappedWidth);
511-
connectorRelativeXValue = connectorFixedXValue - dialogLeft - DIALOG_SIDE_PADDING;
512509
this.style.setProperty('--dialog-left', `${dialogLeft}px`);
513510
this.#hitArea.x = originCenterX - hitAreaWidth * 0.5;
514511
this.style.setProperty('--dialog-max-width', `${devToolsWidth - DIALOG_PADDING_FROM_WINDOW}px`);
@@ -518,92 +515,32 @@ export class Dialog extends HTMLElement {
518515
Platform.assertNever(
519516
this.#bestHorizontalAlignment, `Unknown alignment type: ${this.#bestHorizontalAlignment}`);
520517
}
521-
const visibleConnectorHeight = this.showConnector ? CONNECTOR_HEIGHT : 0;
522-
const clipPathConnectorStartX = connectorRelativeXValue - CONNECTOR_WIDTH / 2;
523-
const clipPathConnectorEndX = connectorRelativeXValue + CONNECTOR_WIDTH / 2;
524-
let [p1, p2, p3, p4, p5, p6, p7, p8, p9] = ['', '', '', '', '', '', '', '', '', ''];
525518

526-
const PSEUDO_BORDER_RADIUS = 2;
527519
switch (this.#bestVerticalPositionInternal) {
528520
case DialogVerticalPosition.TOP: {
529-
// p1 p2
530-
// *-----------------------------*
531-
// | |
532-
// | |
533-
// p9| |
534-
// \__________________p7 p5____/ p3 <-- A pseudo curve is added to the clip path to
535-
// p8 \/ p4 imitate a curved boder.
536-
// p6
537-
// |-connectorRelativeX--|
538-
const clipPathBottom = `calc(100% - ${CONNECTOR_HEIGHT}px)`;
539-
if (this.#props.showConnector) {
540-
p1 = '0 0';
541-
p2 = '100% 0';
542-
p3 = `100% calc(${clipPathBottom} - ${PSEUDO_BORDER_RADIUS}px)`;
543-
p4 = `calc(100% - ${PSEUDO_BORDER_RADIUS}px) ${clipPathBottom}`;
544-
p5 = `${clipPathConnectorStartX}px ${clipPathBottom}`;
545-
p6 = `${connectorRelativeXValue}px 100%`;
546-
p7 = `${clipPathConnectorEndX}px ${clipPathBottom}`;
547-
p8 = `${PSEUDO_BORDER_RADIUS}px ${clipPathBottom}`;
548-
p9 = `0 calc(${clipPathBottom} - ${PSEUDO_BORDER_RADIUS}px)`;
549-
}
550-
551-
this.style.setProperty(
552-
'--content-padding-bottom',
553-
`${CONNECTOR_HEIGHT + (this.#props.showConnector ? CONNECTOR_HEIGHT : 0)}px`);
554-
this.style.setProperty('--content-padding-top', `${CONNECTOR_HEIGHT}px`);
555521
this.style.setProperty('--dialog-top', '0');
556522
this.style.setProperty('--dialog-margin', 'auto');
557523
this.style.setProperty('--dialog-margin-bottom', `${innerHeight - anchorTop}px`);
558-
this.#hitArea.y = anchorTop - (CONNECTOR_HEIGHT * (this.showConnector ? 2 : 1));
524+
this.#hitArea.y = anchorTop - CONNECTOR_HEIGHT;
559525
this.style.setProperty('--dialog-offset-y', `${DIALOG_ANIMATION_OFFSET}px`);
560526
this.style.setProperty(
561-
'--dialog-max-height',
562-
`${
563-
devToolsHeight - (innerHeight - anchorTop) - DIALOG_PADDING_FROM_WINDOW -
564-
visibleConnectorHeight}px`);
527+
'--dialog-max-height', `${devToolsHeight - (innerHeight - anchorTop) - DIALOG_PADDING_FROM_WINDOW}px`);
565528
break;
566529
}
567530
case DialogVerticalPosition.BOTTOM: {
568-
// p4
569-
// p2_________/\_________p6
570-
// / p3 p5 \
571-
// p1 | | p7
572-
// | |
573-
// p9 *________________________* p8
574-
575-
if (this.#props.showConnector) {
576-
p1 = `0 ${CONNECTOR_HEIGHT + PSEUDO_BORDER_RADIUS}px`;
577-
p2 = `${PSEUDO_BORDER_RADIUS}px ${CONNECTOR_HEIGHT}px`;
578-
p3 = `${clipPathConnectorStartX}px ${CONNECTOR_HEIGHT}px`;
579-
p4 = `${connectorRelativeXValue}px 0`;
580-
p5 = `${clipPathConnectorEndX}px ${CONNECTOR_HEIGHT}px`;
581-
p6 = `calc(100% - ${PSEUDO_BORDER_RADIUS}px) ${CONNECTOR_HEIGHT}px`;
582-
p7 = `100% ${CONNECTOR_HEIGHT + PSEUDO_BORDER_RADIUS}px`;
583-
p8 = '100% 100%';
584-
p9 = '0 100%';
585-
}
586-
this.style.setProperty(
587-
'--content-padding-top', `${CONNECTOR_HEIGHT + (this.#props.showConnector ? CONNECTOR_HEIGHT : 0)}px`);
588-
this.style.setProperty('--content-padding-bottom', `${CONNECTOR_HEIGHT}px`);
589531
this.style.setProperty('--dialog-top', `${anchorBottom}px`);
590532
this.#hitArea.y = anchorTop;
591533
this.style.setProperty('--dialog-offset-y', `-${DIALOG_ANIMATION_OFFSET}px`);
592534
this.style.setProperty(
593535
'--dialog-max-height',
594-
`${
595-
devToolsHeight - (anchorBottom - devToolsTop) - DIALOG_PADDING_FROM_WINDOW -
596-
visibleConnectorHeight}px`);
536+
`${devToolsHeight - (anchorBottom - devToolsTop) - DIALOG_PADDING_FROM_WINDOW}px`);
597537
break;
598538
}
599539
default:
600540
Platform.assertNever(
601541
this.#bestVerticalPositionInternal, `Unknown position type: ${this.#bestVerticalPositionInternal}`);
602542
}
603543

604-
const clipPath = [p1, p2, p3, p4, p5, p6, p7, p8, p9].join();
605-
606-
this.style.setProperty('--content-clip-path', clipPath);
607544
dialog.close();
608545
dialog.style.visibility = '';
609546
});

‎front_end/ui/components/dialogs/dialog.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,14 +40,10 @@ dialog:focus-visible {
4040
min-width: var(--content-min-width);
4141
background: var(--color-background-elevation-dark-only);
4242
border-radius: var(--sys-size-5);
43-
padding-top: var(--content-padding-top);
44-
padding-bottom: var(--content-padding-bottom);
45-
box-shadow: var(--override-content-box-shadow);
4643
max-height: var(--dialog-max-height);
4744
max-width: var(--dialog-max-width);
4845
overflow: auto;
4946
outline: none;
50-
clip-path: polygon(var(--content-clip-path));
5147
}
5248

5349
.dialog-header {

‎front_end/ui/components/docs/dialog/basic.ts‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import * as ComponentHelpers from '../../helpers/helpers.js';
99
await ComponentHelpers.ComponentServerSetup.setup();
1010
await FrontendHelpers.initializeGlobalVars();
1111

12-
const showConnectors = [true, false];
1312
const verticalPositions = [Dialogs.Dialog.DialogVerticalPosition.TOP, Dialogs.Dialog.DialogVerticalPosition.BOTTOM];
1413
const horizontalAlignments = [
1514
Dialogs.Dialog.DialogHorizontalAlignment.AUTO,
@@ -22,7 +21,6 @@ const horizontalAlignments = [
2221
const root = document.getElementById('root') as HTMLElement;
2322

2423
let i = 0;
25-
for (const showConnector of showConnectors) {
2624
for (const verticalPosition of verticalPositions) {
2725
const row = document.createElement('div');
2826
row.classList.add('row');
@@ -44,7 +42,6 @@ for (const showConnector of showConnectors) {
4442

4543
dialog.position = verticalPosition;
4644
dialog.horizontalAlignment = horizontalAlignment;
47-
dialog.showConnector = showConnector;
4845
dialog.origin = host;
4946
dialog.id = `dialog-${i}`;
5047

@@ -58,12 +55,11 @@ for (const showConnector of showConnectors) {
5855
const div = document.createElement('div');
5956
div.classList.add('dialog-content');
6057
div.style.padding = '0 1em';
61-
div.innerHTML = `Hello, World<br/>Show connector: ${showConnector}<br/>Vertical position: ${
62-
verticalPosition}<br/>Horizontal alignment: ${horizontalAlignment}`;
58+
div.innerHTML =
59+
`Hello, World<br/>Vertical position: ${verticalPosition}<br/>Horizontal alignment: ${horizontalAlignment}`;
6360
dialog.appendChild(div);
6461
root.appendChild(dialog);
6562
i++;
66-
}
6763
}
6864
}
6965

@@ -88,7 +84,6 @@ for (const verticalPosition of verticalPositions) {
8884

8985
dialog.position = verticalPosition;
9086
dialog.horizontalAlignment = horizontalAlignment;
91-
dialog.showConnector = true;
9287
dialog.origin = host;
9388
dialog.id = `dialog-${i}`;
9489

@@ -148,6 +143,7 @@ function renderDifferentModeExample() {
148143
});
149144
const div = document.createElement('div');
150145
div.classList.add('dialog-content');
146+
div.style.padding = '0 var(--sys-size-8)';
151147

152148
div.innerHTML = 'Hello, World';
153149
dialog.appendChild(div);

‎test/interactions/goldens/linux/dialog/bottom-auto-open.png‎

1.12 KB
Loading

‎test/interactions/goldens/linux/dialog/bottom-center-open.png‎

1.1 KB
Loading

‎test/interactions/goldens/linux/dialog/button_dialog_open.png‎

20 Bytes
Loading

‎test/interactions/goldens/linux/dialog/narrow-top-auto-open.png‎

-325 Bytes
Loading

‎test/interactions/goldens/linux/dialog/shortcut_dialog_open.png‎

241 Bytes
Loading

‎test/interactions/goldens/linux/dialog/top-left-open.png‎

-501 Bytes
Loading

0 commit comments

Comments
 (0)