Merge "Fix Block expansion tooltip position (top/bottom)"
diff --git a/polygerrit-ui/app/elements/diff/gr-context-controls/gr-context-controls.ts b/polygerrit-ui/app/elements/diff/gr-context-controls/gr-context-controls.ts
index 60b1a1a..41a448e 100644
--- a/polygerrit-ui/app/elements/diff/gr-context-controls/gr-context-controls.ts
+++ b/polygerrit-ui/app/elements/diff/gr-context-controls/gr-context-controls.ts
@@ -29,7 +29,14 @@
import {fire} from '../../../utils/event-util';
import {DiffInfo} from '../../../types/diff';
import {assertIsDefined} from '../../../utils/common-util';
-import {css, customElement, html, LitElement, property} from 'lit-element';
+import {
+ css,
+ customElement,
+ html,
+ LitElement,
+ property,
+ TemplateResult,
+} from 'lit-element';
import {
ContextButtonType,
@@ -205,7 +212,7 @@
private createContextButton(
type: ContextButtonType,
linesToExpand: number,
- tooltipText?: string
+ tooltip?: TemplateResult
) {
let text = '';
let groups: GrDiffGroup[] = []; // The groups that replace this one if tapped.
@@ -269,11 +276,6 @@
groups
);
- const tooltip = tooltipText
- ? html`<paper-tooltip offset="10"
- ><div class="breadcrumbTooltip">${tooltipText}</div></paper-tooltip
- >`
- : undefined;
const button = html` <gr-button
class="${classes}"
link="true"
@@ -396,6 +398,24 @@
return undefined;
}
+ private createBlockButtonTooltip(
+ buttonType: ContextButtonType,
+ syntaxPath: SyntaxBlock[],
+ linesToExpand: number
+ ) {
+ // Create breadcrumb string:
+ // myNamepace > MyClass > myMethod1 > aLocalFunctionInsideMethod1 > (anonymous)
+ const tooltipText = syntaxPath.length
+ ? syntaxPath.map(b => b.name || '(anonymous)').join(' > ')
+ : `${linesToExpand} common lines`;
+
+ const position =
+ buttonType === ContextButtonType.BLOCK_ABOVE ? 'top' : 'bottom';
+ return html`<paper-tooltip offset="10" position="${position}"
+ ><div class="breadcrumbTooltip">${tooltipText}</div></paper-tooltip
+ >`;
+ }
+
private createBlockButton(
buttonType: ContextButtonType,
numLines: number,
@@ -408,14 +428,8 @@
syntaxTree
);
let linesToExpand = numLines;
- let tooltipText = `${linesToExpand} common lines`;
if (outlineSyntaxPath.length) {
const {range} = outlineSyntaxPath[outlineSyntaxPath.length - 1];
- // Create breadcrumb string:
- // myNamepace > MyClass > myMethod1 > aLocalFunctionInsideMethod1 > (anonymous)
- tooltipText = outlineSyntaxPath
- .map(b => b.name || '(anonymous)')
- .join(' > ');
const targetLine =
buttonType === ContextButtonType.BLOCK_ABOVE
? range.end_line
@@ -425,7 +439,12 @@
linesToExpand = distanceToTargetLine;
}
}
- return this.createContextButton(buttonType, linesToExpand, tooltipText);
+ const tooltip = this.createBlockButtonTooltip(
+ buttonType,
+ outlineSyntaxPath,
+ linesToExpand
+ );
+ return this.createContextButton(buttonType, linesToExpand, tooltip);
}
private contextRange() {
diff --git a/polygerrit-ui/app/elements/diff/gr-context-controls/gr-context-controls_test.ts b/polygerrit-ui/app/elements/diff/gr-context-controls/gr-context-controls_test.ts
index d866c1a..f59b19d 100644
--- a/polygerrit-ui/app/elements/diff/gr-context-controls/gr-context-controls_test.ts
+++ b/polygerrit-ui/app/elements/diff/gr-context-controls/gr-context-controls_test.ts
@@ -366,12 +366,21 @@
const blockExpansionButtons = element.shadowRoot!.querySelectorAll(
'.blockExpansion gr-button'
);
- // querySelector('.breadcrumbTooltip')!.textContent!.trim()
+ const tooltipAbove = blockExpansionButtons[0].querySelector(
+ 'paper-tooltip'
+ )!;
+ const tooltipBelow = blockExpansionButtons[1].querySelector(
+ 'paper-tooltip'
+ )!;
assert.equal(
- blockExpansionButtons[0]
- .querySelector('.breadcrumbTooltip')!
- .textContent?.trim(),
+ tooltipAbove.querySelector('.breadcrumbTooltip')!.textContent?.trim(),
'20 common lines'
);
+ assert.equal(
+ tooltipBelow.querySelector('.breadcrumbTooltip')!.textContent?.trim(),
+ '20 common lines'
+ );
+ assert.equal(tooltipAbove!.getAttribute('position'), 'top');
+ assert.equal(tooltipBelow!.getAttribute('position'), 'bottom');
});
});
