Merge "Fix blinking tooltip"
diff --git a/polygerrit-ui/app/elements/checks/gr-checks-results.ts b/polygerrit-ui/app/elements/checks/gr-checks-results.ts
index 71b8f33..a4ac01d 100644
--- a/polygerrit-ui/app/elements/checks/gr-checks-results.ts
+++ b/polygerrit-ui/app/elements/checks/gr-checks-results.ts
@@ -60,8 +60,8 @@
} from '../../utils/common-util';
import {toggleClass, whenVisible} from '../../utils/dom-util';
import {durationString} from '../../utils/date-util';
-import {charsOnly, pluralize} from '../../utils/string-util';
-import {fireRunSelectionReset, isAttemptSelected} from './gr-checks-util';
+import {charsOnly} from '../../utils/string-util';
+import {isAttemptSelected} from './gr-checks-util';
import {ChecksTabState} from '../../types/events';
import {ConfigInfo, PatchSetNumber} from '../../types/common';
import {latestPatchNum$} from '../../services/change/change-model';
@@ -255,6 +255,7 @@
<div>
<span>${this.result.checkName}</span>
<gr-checks-attempt .run="${this.result}"></gr-checks-attempt>
+ <gr-hovercard-run .run="${this.result}"></gr-hovercard-run>
</div>
</td>
<td class="summaryCol">
@@ -466,6 +467,21 @@
SHOW_ALL_THRESHOLDS.set(Category.INFO, 5);
SHOW_ALL_THRESHOLDS.set(Category.SUCCESS, 5);
+const CATEGORY_TOOLTIPS: Map<Category, string> = new Map();
+CATEGORY_TOOLTIPS.set(Category.ERROR, 'Must be fixed and is blocking submit');
+CATEGORY_TOOLTIPS.set(
+ Category.WARNING,
+ 'Should be checked but is not blocking submit'
+);
+CATEGORY_TOOLTIPS.set(
+ Category.INFO,
+ 'Does not have to be checked, for your information only'
+);
+CATEGORY_TOOLTIPS.set(
+ Category.SUCCESS,
+ 'Successful runs without results and individual successful results'
+);
+
@customElement('gr-checks-results')
export class GrChecksResults extends GrLitElement {
@query('#filterInput')
@@ -599,12 +615,6 @@
.filterDiv .selection {
padding: var(--spacing-s) var(--spacing-m);
}
- .filterDiv iron-icon.filter {
- color: var(--selected-foreground);
- }
- .filterDiv gr-button.reset {
- margin: calc(0px - var(--spacing-s)) var(--spacing-l);
- }
.categoryHeader {
margin-top: var(--spacing-l);
margin-left: var(--spacing-l);
@@ -618,6 +628,9 @@
height: var(--line-height-h3);
margin-right: var(--spacing-s);
}
+ .categoryHeader .statusIconWrapper {
+ display: inline-block;
+ }
.categoryHeader .statusIcon {
position: relative;
top: 2px;
@@ -831,28 +844,10 @@
placeholder="Filter results by regular expression"
@input="${this.onInput}"
/>
- <div class="selection">${this.renderSelectionFilter()}</div>
</div>
`;
}
- renderSelectionFilter() {
- const count = this.selectedRuns.length;
- if (count === 0) return;
- return html`
- <iron-icon class="filter" icon="gr-icons:filter"></iron-icon>
- <span>Filtered by ${pluralize(count, 'run')}</span>
- <gr-button link class="reset" @click="${this.handleClick}"
- >Reset View</gr-button
- >
- `;
- }
-
- handleClick() {
- this.filterRegExp = new RegExp('');
- fireRunSelectionReset(this);
- }
-
onInput() {
assertIsDefined(this.filterInput, 'filter <input> element');
this.filterRegExp = new RegExp(this.filterInput.value, 'i');
@@ -902,11 +897,16 @@
@click="${() => this.toggleExpanded(category)}"
>
<iron-icon class="expandIcon" icon="${icon}"></iron-icon>
- <iron-icon
- icon="gr-icons:${iconForCategory(category)}"
- class="statusIcon ${catString}"
- ></iron-icon>
- <span class="title">${catString}</span>
+ <div class="statusIconWrapper">
+ <iron-icon
+ icon="gr-icons:${iconForCategory(category)}"
+ class="statusIcon ${catString}"
+ ></iron-icon>
+ <span class="title">${catString}</span>
+ <paper-tooltip offset="5"
+ >${CATEGORY_TOOLTIPS.get(category)}</paper-tooltip
+ >
+ </div>
<span class="count"
>${this.renderCount(all, selected, filtered)}</span
>
diff --git a/polygerrit-ui/app/elements/checks/gr-checks-runs.ts b/polygerrit-ui/app/elements/checks/gr-checks-runs.ts
index 1d65546..7346d5b 100644
--- a/polygerrit-ui/app/elements/checks/gr-checks-runs.ts
+++ b/polygerrit-ui/app/elements/checks/gr-checks-runs.ts
@@ -55,7 +55,11 @@
} from '../../services/checks/checks-model';
import {assertIsDefined} from '../../utils/common-util';
import {whenVisible} from '../../utils/dom-util';
-import {fireAttemptSelected, fireRunSelected} from './gr-checks-util';
+import {
+ fireAttemptSelected,
+ fireRunSelected,
+ fireRunSelectionReset,
+} from './gr-checks-util';
import {ChecksTabState} from '../../types/events';
import {charsOnly} from '../../utils/string-util';
@@ -350,6 +354,10 @@
padding: var(--spacing-l) var(--spacing-xl) var(--spacing-xl)
var(--spacing-xl);
}
+ .title {
+ display: flex;
+ justify-content: space-between;
+ }
.expandIcon {
width: var(--line-height-h3);
height: var(--line-height-h3);
@@ -410,7 +418,17 @@
render() {
return html`
- <h2 class="heading-2">Runs</h2>
+ <h2 class="title">
+ <div class="heading-2">Runs</div>
+ <div class="font-normal">
+ <gr-button
+ ?hidden="${this.selectedRuns.length < 2}"
+ link
+ @click="${() => fireRunSelectionReset(this)}"
+ >Unselect All</gr-button
+ >
+ </div>
+ </h2>
<input
id="filterInput"
type="text"
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 e78945b..dec5111 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
@@ -123,6 +123,26 @@
/* First button needs to claim width to display without text wrapping. */
position: relative;
}
+
+ paper-button {
+ text-transform: none;
+ align-items: center;
+ background-color: var(--background-color);
+ font-family: inherit;
+ margin: var(--margin, 0);
+ min-width: var(--border, 0);
+ color: var(--diff-context-control-color);
+ border: solid var(--border-color);
+ border-width: 1px;
+ border-radius: var(--border-radius);
+ padding: var(--spacing-s) var(--spacing-l);
+ }
+
+ paper-button:hover {
+ /* same as defined in gr-button */
+ background: rgba(0, 0, 0, 0.12);
+ }
+
.centeredButton {
/* Center over divider. */
top: 50%;
@@ -141,75 +161,23 @@
.aboveButton {
/* Display over preceding content / background placeholder. */
transform: translateY(-100%);
+ border-bottom-width: 1px;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+ padding: var(--spacing-xxs) var(--spacing-l);
}
.belowButton {
top: calc(100% + var(--divider-border));
+ border-top-width: 0;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ padding: var(--spacing-xxs) var(--spacing-l);
}
.breadcrumbTooltip {
white-space: nowrap;
}
`;
- // To pass CSS mixins for @apply to Polymer components, they need to be
- // wrapped in a <custom-style>.
- static customStyles = html`
- <custom-style>
- <style>
- .centeredButton {
- --gr-button: {
- color: var(--diff-context-control-color);
- border-style: solid;
- border-color: var(--border-color);
- border-top-width: 1px;
- border-right-width: 1px;
- border-bottom-width: 1px;
- border-left-width: 1px;
-
- border-top-left-radius: var(--border-radius);
- border-top-right-radius: var(--border-radius);
- border-bottom-right-radius: var(--border-radius);
- border-bottom-left-radius: var(--border-radius);
- padding: var(--spacing-s) var(--spacing-l);
- }
- }
- .aboveButton {
- --gr-button: {
- color: var(--diff-context-control-color);
- border-style: solid;
- border-color: var(--border-color);
- border-top-width: 1px;
- border-right-width: 1px;
- border-bottom-width: 0;
- border-left-width: 1px;
-
- border-top-left-radius: var(--border-radius);
- border-top-right-radius: var(--border-radius);
- border-bottom-right-radius: 0;
- border-bottom-left-radius: var(--border-radius);
- padding: var(--spacing-xxs) var(--spacing-l);
- }
- }
- .belowButton {
- --gr-button: {
- color: var(--diff-context-control-color);
- border-style: solid;
- border-color: var(--border-color);
- border-top-width: 0;
- border-right-width: 1px;
- border-bottom-width: 1px;
- border-left-width: 1px;
-
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- border-bottom-right-radius: var(--border-radius);
- border-bottom-left-radius: var(--border-radius);
- padding: var(--spacing-xxs) var(--spacing-l);
- }
- }
- </style>
- </custom-style>
- `;
-
connectedCallback() {
super.connectedCallback();
this.setupButtonHoverHandler();
@@ -323,7 +291,7 @@
groups
);
- const mouseHander = (eventType: 'enter' | 'leave') => {
+ const mouseHandler = (eventType: 'enter' | 'leave') => {
this.expandButtonsHover.next({
eventType,
buttonType: type,
@@ -331,18 +299,16 @@
});
};
- const button = html` <gr-button
+ const button = html` <paper-button
class="${classes}"
- link="true"
- no-uppercase="true"
aria-label="${ariaLabel}"
@click="${expandHandler}"
- @mouseenter="${() => mouseHander('enter')}"
- @mouseleave="${() => mouseHander('leave')}"
+ @mouseenter="${() => mouseHandler('enter')}"
+ @mouseleave="${() => mouseHandler('leave')}"
>
<span class="showContext">${text}</span>
${tooltip}
- </gr-button>`;
+ </paper-button>`;
return button;
}
@@ -525,7 +491,7 @@
return html`<p>invalid properties</p>`;
}
return html`
- ${GrContextControls.customStyles} ${this.createExpandAllButtonContainer()}
+ ${this.createExpandAllButtonContainer()}
${this.createPartialExpansionButtons()}
${this.createBlockExpansionButtons()}
`;
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 f59b19d..4e75c82 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
@@ -60,7 +60,7 @@
await flush();
const buttons = element.shadowRoot!.querySelectorAll(
- 'gr-button.showContext'
+ 'paper-button.showContext'
);
assert.equal(buttons.length, 1);
assert.equal(buttons[0].textContent!.trim(), '+10 common lines');
@@ -73,7 +73,7 @@
await flush();
const buttons = element.shadowRoot!.querySelectorAll(
- 'gr-button.showContext'
+ 'paper-button.showContext'
);
assert.equal(buttons.length, 2);
@@ -92,7 +92,7 @@
await flush();
const buttons = element.shadowRoot!.querySelectorAll(
- 'gr-button.showContext'
+ 'paper-button.showContext'
);
assert.equal(buttons.length, 3);
@@ -112,7 +112,7 @@
await flush();
const buttons = element.shadowRoot!.querySelectorAll(
- 'gr-button.showContext'
+ 'paper-button.showContext'
);
assert.equal(buttons.length, 2);
@@ -138,13 +138,13 @@
await flush();
const fullExpansionButtons = element.shadowRoot!.querySelectorAll(
- '.fullExpansion gr-button'
+ '.fullExpansion paper-button'
);
const partialExpansionButtons = element.shadowRoot!.querySelectorAll(
- '.partialExpansion gr-button'
+ '.partialExpansion paper-button'
);
const blockExpansionButtons = element.shadowRoot!.querySelectorAll(
- '.blockExpansion gr-button'
+ '.blockExpansion paper-button'
);
assert.equal(fullExpansionButtons.length, 1);
assert.equal(partialExpansionButtons.length, 1);
@@ -168,13 +168,13 @@
await flush();
const fullExpansionButtons = element.shadowRoot!.querySelectorAll(
- '.fullExpansion gr-button'
+ '.fullExpansion paper-button'
);
const partialExpansionButtons = element.shadowRoot!.querySelectorAll(
- '.partialExpansion gr-button'
+ '.partialExpansion paper-button'
);
const blockExpansionButtons = element.shadowRoot!.querySelectorAll(
- '.blockExpansion gr-button'
+ '.blockExpansion paper-button'
);
assert.equal(fullExpansionButtons.length, 1);
assert.equal(partialExpansionButtons.length, 2);
@@ -205,13 +205,13 @@
await flush();
const fullExpansionButtons = element.shadowRoot!.querySelectorAll(
- '.fullExpansion gr-button'
+ '.fullExpansion paper-button'
);
const partialExpansionButtons = element.shadowRoot!.querySelectorAll(
- '.partialExpansion gr-button'
+ '.partialExpansion paper-button'
);
const blockExpansionButtons = element.shadowRoot!.querySelectorAll(
- '.blockExpansion gr-button'
+ '.blockExpansion paper-button'
);
assert.equal(fullExpansionButtons.length, 1);
assert.equal(partialExpansionButtons.length, 1);
@@ -246,7 +246,7 @@
await flush();
const blockExpansionButtons = element.shadowRoot!.querySelectorAll(
- '.blockExpansion gr-button'
+ '.blockExpansion paper-button'
);
assert.equal(
blockExpansionButtons[0]
@@ -299,7 +299,7 @@
await flush();
const blockExpansionButtons = element.shadowRoot!.querySelectorAll(
- '.blockExpansion gr-button'
+ '.blockExpansion paper-button'
);
assert.equal(
blockExpansionButtons[0]
@@ -345,7 +345,7 @@
await flush();
const blockExpansionButtons = element.shadowRoot!.querySelectorAll(
- '.blockExpansion gr-button'
+ '.blockExpansion paper-button'
);
assert.equal(
blockExpansionButtons[0]
@@ -364,7 +364,7 @@
await flush();
const blockExpansionButtons = element.shadowRoot!.querySelectorAll(
- '.blockExpansion gr-button'
+ '.blockExpansion paper-button'
);
const tooltipAbove = blockExpansionButtons[0].querySelector(
'paper-tooltip'
