Skip to content

Commit

Permalink
Add clear cursor feature for search commit and regress point in resul…
Browse files Browse the repository at this point in the history 
…ts.webkit.org

https://bugs.webkit.org/show_bug.cgi?id=256809
rdar://108869264

Reviewed by Jonathan Bedard.

This patch add a clear button for search commits and regress points, this can let user clear the highlight cursor

* Tools/Scripts/libraries/resultsdbpy/resultsdbpy/view/static/css/search.css:
* Tools/Scripts/libraries/resultsdbpy/resultsdbpy/view/static/js/drawer.js:
* Tools/Scripts/libraries/resultsdbpy/resultsdbpy/view/static/js/timeline.js:
* Tools/Scripts/libraries/resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js:

Canonical link: https://commits.webkit.org/270482@main
  • Loading branch information
@facetothefate
facetothefate committed Nov 9, 2023
1 parent 79a659d commit 385868a
Show file tree
Hide file tree
Showing 4 changed files with 142 additions and 21 deletions.
17 changes: 17 additions & 0 deletions Tools/Scripts/libraries/resultsdbpy/resultsdbpy/view/static/css/search.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,4 +45,21 @@
.search-candidates .selected {
background-color: var(--blue);
color: white;
}

.next-regress-bar {
width:100%;
z-index:10
}

.next-regress-bar button {
background-color: var(--blurBackgroundColor);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}

@media (prefers-color-scheme: dark) {
.next-regress-bar button{
background-color: var(--blurBackgroundColorDark);
}
}
11 changes: 10 additions & 1 deletion Tools/Scripts/libraries/resultsdbpy/resultsdbpy/view/static/js/drawer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,17 +145,26 @@ function CommitSearchBar(onSearchAction = null) {
onSearchAction(searchValue);
});

const clearButtonRef = REF.createRef({});
clearButtonRef.fromEvent("click").action(e => {
if (onSearchAction)
onSearchAction(null);
});

window.addEventListener("keypress", searchHotKeyFunction);

return `<div class="input">
<div class="row">
<div class="input col-9">
<div class="input col-7">
<input type="text" ref="${searchInputRef}" autocomplete="off" autocapitalize="none" required/>
<label>Search commit</label>
</div>
<button class="button col-3 primary" ref="${searchButtonRef}">
<img src="library/icons/search.svg" style="height: var(--largeSize); filter: invert(1);">
</button>
<button class="button col-2" ref="${clearButtonRef}">
X
</button>
</div>
</div>`;
}
Expand Down
114 changes: 103 additions & 11 deletions Tools/Scripts/libraries/resultsdbpy/resultsdbpy/view/static/js/timeline.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -644,8 +644,11 @@ class TimelineFromEndpoint {
}

onSearch(searchValue) {
if (!searchValue || !searchValue.length) {
this.searchScale(null);
}
let found = false;
for (let currentScale of this.scale) {
let found = false;
for (let repo of this.repositories) {
if (!currentScale[repo]) {
continue;
Expand All @@ -660,6 +663,8 @@ class TimelineFromEndpoint {
if (found)
break;
}
if (!found)
this.searchScale(null);
};

render(limit) {
Expand Down Expand Up @@ -1068,24 +1073,100 @@ class TimelineFromEndpoint {
}));

let currentResultIndex = 0;
let regressPoints = [];
let currentRegressPointIndex = -1;
const jumpNextRegressPoint = () => {
const lastResultStatus = this.getTestResultStatus(allConfigResults[currentResultIndex], InvestigateDrawer.willFilterExpected);
for(let i = currentResultIndex + 1; i < allConfigResults.length; i++) {
const currentTestStatus = this.getTestResultStatus(allConfigResults[i], InvestigateDrawer.willFilterExpected);
if (currentTestStatus.failureType !== lastResultStatus.failureType || currentTestStatus.failureNumber !== lastResultStatus.failureNumber) {
currentResultIndex = i;
searchDot(allConfigResults[i]);
break;
if (currentRegressPointIndex === regressPoints.length - 1) {
const lastResultStatus = this.getTestResultStatus(allConfigResults[currentResultIndex], InvestigateDrawer.willFilterExpected);
for(let i = currentResultIndex + 1; i < allConfigResults.length; i++) {
const currentTestStatus = this.getTestResultStatus(allConfigResults[i], InvestigateDrawer.willFilterExpected);
if (currentTestStatus.failureType !== lastResultStatus.failureType || currentTestStatus.failureNumber !== lastResultStatus.failureNumber) {
currentResultIndex = i;
regressPoints.push(allConfigResults[i]);
currentRegressPointIndex = regressPoints.length - 1;
searchDot(allConfigResults[i]);
if (currentRegressPointIndex > 0)
previousRegressButtonRef.setState({disabled: false});
break;
}
}
} else if (currentRegressPointIndex < regressPoints.length - 1) {
currentRegressPointIndex += 1;
if (currentRegressPointIndex > 0)
previousRegressButtonRef.setState({disabled: false});
searchDot(regressPoints[currentRegressPointIndex]);
}
};

const jumpPreviousRegressPoint = () => {
if (0 < currentRegressPointIndex && currentRegressPointIndex < regressPoints.length) {
currentRegressPointIndex -= 1;
searchDot(regressPoints[currentRegressPointIndex]);
if (currentRegressPointIndex === 0)
previousRegressButtonRef.setState({disabled: true});
}
};

const hideableRefOptionFactory = (initShow) => {
return {
state: {
show: initShow,
},
onStateUpdate: (element, stateDiff) => {
if ('show' in stateDiff) {
if (stateDiff.show) {
element.style.display = 'block';
} else {
element.style.display = 'none';
}
}
}
}
}

const findRegressButtonRef = REF.createRef(hideableRefOptionFactory(true));
findRegressButtonRef.fromEvent("click").action(e => {
findRegressPannelRef.setState({show: true});
findRegressButtonRef.setState({show: false});
jumpNextRegressPoint();
});

const findRegressPannelRef = REF.createRef(hideableRefOptionFactory(false));

const closeRegressButtonRef = REF.createRef({});
closeRegressButtonRef.fromEvent("click").action(e => {
findRegressPannelRef.setState({show: false});
findRegressButtonRef.setState({show: true});
currentRegressPointIndex = -1;
previousRegressButtonRef.setState({disabled: true});
searchDot(null);
});

const nextRegressButtonRef = REF.createRef({});
const nextRegressButtonClickEventStream = nextRegressButtonRef.fromEvent("click");
nextRegressButtonClickEventStream.action((e) => {
jumpNextRegressPoint();
});

const previousRegressButtonRef = REF.createRef({
state: {
disabled: true,
},
onStateUpdate: (element, stateDiff) => {
if ("disabled" in stateDiff) {
if (stateDiff.disabled) {
element.setAttribute('disabled', true);
} else {
element.removeAttribute('disabled');
}
}
}
});

previousRegressButtonRef.fromEvent("click").action(e => {
jumpPreviousRegressPoint();
});

const searchBarRef = REF.createRef({
state: {
float: false
Expand Down Expand Up @@ -1141,10 +1222,21 @@ class TimelineFromEndpoint {
}
});
return `<div ref="${containnerRef}" style="position: relative">
<div ref="${searchBarRef}" style="width:100%; background: var(--blurBackgroundColor); -webkit-backdrop-filter: blur(5px); z-index:10">
<button class="button" ref="${nextRegressButtonRef}">
Next Regress Point
<div ref="${searchBarRef}" class="next-regress-bar">
<button class="button" ref="${findRegressButtonRef}">
Find Regress Point
</button>
<div ref="${findRegressPannelRef}">
<button class="button" ref="${previousRegressButtonRef}">
Previous Regress Point
</button>
<button class="button" ref="${nextRegressButtonRef}">
Next Regress Point
</button>
<button class="button" ref="${closeRegressButtonRef}">
Close
</button>
</div>
</div>
<div class="row" ref="${placeHolderRef}">
<div class="col-12" style="height: 40px; padding: 0"></div>
Expand Down
21 changes: 12 additions & 9 deletions ...libraries/resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -544,8 +544,8 @@ Timeline.CanvasSeriesComponent = (dots, scales, option = {}) => {
const scrollLeft = typeof stateDiff.scrollLeft === 'number' ? stateDiff.scrollLeft : state.scrollLeft;
const scales = stateDiff.scales ? stateDiff.scales : state.scales;
const dots = stateDiff.dots ? stateDiff.dots : state.dots;
const highLightScale = stateDiff.highLightScale ? stateDiff.highLightScale : state.highLightScale;
const highLightDot = stateDiff.highLightDot ? stateDiff.highLightDot : state.highLightDot;
const highLightScale = "highLightScale" in stateDiff ? stateDiff.highLightScale : state.highLightScale;
const highLightDot = "highLightDot" in stateDiff ? stateDiff.highLightDot : state.highLightDot;
if ('dots' in stateDiff)
dots.forEach((dot, index) => dot._index = index);
// This color maybe change when switch dark/light mode
Expand Down Expand Up @@ -673,12 +673,13 @@ Timeline.CanvasSeriesComponent = (dots, scales, option = {}) => {
};
const onSearchScaleAction = (scale) => {
let clearHighLight = true;
canvasRef.state.scales.forEach((currentScale) => {
if (comp(currentScale, scale) === 0) {
canvasRef.setState({highLightScale: scale});
clearHighLight = false;
}
});
if (scale)
canvasRef.state.scales.forEach((currentScale) => {
if (comp(currentScale, scale) === 0) {
canvasRef.setState({highLightScale: scale});
clearHighLight = false;
}
});
if (clearHighLight)
canvasRef.setState({highLightScale: false});
};
Expand Down Expand Up @@ -819,7 +820,7 @@ Timeline.CanvasSeriesComponent = (dots, scales, option = {}) => {
onStateUpdate: (element, stateDiff, state) => {
if (!state.onScreen && !stateDiff.onScreen)
return;
if (stateDiff.scales || stateDiff.dots || typeof stateDiff.scrollLeft === 'number' || typeof stateDiff.width === 'number' || stateDiff.onScreen || stateDiff.hasDotSelected || stateDiff.highLightScale || stateDiff.highLightDot) {
if (stateDiff.scales || stateDiff.dots || typeof stateDiff.scrollLeft === 'number' || typeof stateDiff.width === 'number' || stateDiff.onScreen || stateDiff.hasDotSelected || 'highLightDot' in stateDiff || 'highLightScale' in stateDiff) {
if (stateDiff.scales)
stateDiff.scales = stateDiff.scales.map(x => x);
if (stateDiff.dots)
Expand Down Expand Up @@ -1194,6 +1195,8 @@ Timeline.CanvasXAxisComponent = (scales, option = {}) => {
canvasRef.setState({width: width});
};
const onSearchScaleAction = (scale) => {
if (!scale)
return;
canvasRef.state.scales.forEach((currentScale, index) => {
if (comp(currentScale, scale) === 0) {
const scaleLeft = index * scaleWidth;
Expand Down

0 comments on commit 385868a

Please sign in to comment.