Diff
Modified: trunk/Tools/ChangeLog (249357 => 249358)
--- trunk/Tools/ChangeLog 2019-08-31 04:03:54 UTC (rev 249357)
+++ trunk/Tools/ChangeLog 2019-08-31 04:11:21 UTC (rev 249358)
@@ -1,3 +1,16 @@
+2019-08-30 Zhifei Fang <zhifei_f...@apple.com>
+
+ [results.webkit.org Timeline] Add notify rerender API for timeline
+ https://bugs.webkit.org/show_bug.cgi?id=201363
+
+ Reviewed by Jonathan Bedard.
+
+ * resultsdbpy/resultsdbpy/view/static/js/timeline.js: Export notifyRerender API to timeline class
+ * resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js:
+ (XScrollableCanvasProvider): Add an event stream to receive notification that it will need to render
+ (prototype.ExpandableSeriesComponent): Notify the rerender when expanded, because this may change the layout.
+ (prototype.Timeline.CanvasContainer):
+
2019-08-30 Aakash Jain <aakash_j...@apple.com>
[ews-build] 're-run-layout-tests' step on macOS-High-Sierra-Debug-WK1-Tests-EWS runs WK2 tests
Modified: trunk/Tools/resultsdbpy/resultsdbpy/view/static/js/drawer.js (249357 => 249358)
--- trunk/Tools/resultsdbpy/resultsdbpy/view/static/js/drawer.js 2019-08-31 04:03:54 UTC (rev 249357)
+++ trunk/Tools/resultsdbpy/resultsdbpy/view/static/js/drawer.js 2019-08-31 04:11:21 UTC (rev 249358)
@@ -36,7 +36,7 @@
setEnableRecursive(node, state);
}
-function Drawer(controls = []) {
+function Drawer(controls = [], onCollapseChange) {
const HIDDEN = false;
const VISIBLE = true;
let drawerState = VISIBLE;
@@ -62,6 +62,9 @@
if (node.classList.contains("list"))
setEnableRecursive(node, state);
}
+
+ if (onCollapseChange)
+ onCollapseChange();
},
onElementMount: (element) => {
let candidates = document.getElementsByClassName("main");
Modified: trunk/Tools/resultsdbpy/resultsdbpy/view/static/js/timeline.js (249357 => 249358)
--- trunk/Tools/resultsdbpy/resultsdbpy/view/static/js/timeline.js 2019-08-31 04:03:54 UTC (rev 249357)
+++ trunk/Tools/resultsdbpy/resultsdbpy/view/static/js/timeline.js 2019-08-31 04:11:21 UTC (rev 249358)
@@ -764,7 +764,7 @@
top = false;
});
- const composer = FP.composer((updateTimeline) => {
+ const composer = FP.composer(FP.currying((updateTimeline, notifiyRerender) => {
self.timelineUpdate = (xAxises) => {
children.splice(0, 1);
if (self.repositories.length > 1)
@@ -780,7 +780,8 @@
});
updateTimeline(children);
};
- });
+ self.notifiyRerender = notifiyRerender;
+ }));
return Timeline.CanvasContainer(composer, ...children);
}
}
Modified: trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js (249357 => 249358)
--- trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js 2019-08-31 04:03:54 UTC (rev 249357)
+++ trunk/Tools/resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js 2019-08-31 04:11:21 UTC (rev 249358)
@@ -118,19 +118,26 @@
presenterRef.setState({resize:true});
});
const resizeContainerWidth = width => {containerRef.setState({width: width})};
+ const getScrollableBoundingClientRect = () => scrollRef.element.getBoundingClientRect();
const presenterRef = REF.createRef({
state: {scrollLeft: 0},
onElementMount: (element) => {
- element.style.width = `${element.parentElement.parentElement.offsetWidth}px`;
- resizeEventStream.add(element.offsetWidth);
+ const scrollableWidth = getScrollableBoundingClientRect().width;
+ element.style.width = `${scrollableWidth}px`;
+ resizeEventStream.add(scrollableWidth);
},
onStateUpdate: (element, stateDiff, state) => {
if (stateDiff.resize) {
- element.style.width = `${element.parentElement.parentElement.offsetWidth}px`;
- resizeEventStream.add(element.offsetWidth);
+ const scrollableWidth = getScrollableBoundingClientRect().width;
+ element.style.width = `${scrollableWidth}px`;
+ resizeEventStream.add(scrollableWidth);
}
}
});
+ const layoutSizeMayChange = new EventStream();
+ layoutSizeMayChange.action(() => {
+ presenterRef.setState({resize:true});
+ });
// Provide parent functions/event to children to use
return `<div class="content" ref="${scrollRef}">
@@ -138,14 +145,30 @@
<div ref="${presenterRef}" style="position: -webkit-sticky; position:sticky; top:0; left: 0">${
ListProvider((updateChildrenFunctions) => {
if (exporter) {
- exporter((children) => {
- updateChildrenFunctions(children);
- // this make sure the newly added children receive current state
- resizeEventStream.replayLast();
- scrollEventStream.replayLast();
- });
+ exporter(
+ /**
+ * Update Children
+ * @param children {Array} r An array of the children
+ */
+ (children) => {
+ updateChildrenFunctions(children);
+ // Propigate the current state to new children
+ resizeEventStream.replayLast();
+ scrollEventStream.replayLast();
+ },
+ /**
+ * Notifiy Re-render
+ * @param width {number} r if undefined, it will auto detact the width change
+ */
+ (width) => {
+ if (typeof width === "number" && width >= 0)
+ resizeEventStream.add(width);
+ else
+ layoutSizeMayChange.add();
+ }
+ );
}
- }, [resizeContainerWidth, scrollEventStream, resizeEventStream], ...childrenFunctions)
+ }, [resizeContainerWidth, scrollEventStream, resizeEventStream, layoutSizeMayChange], ...childrenFunctions)
}</div>
</div>
</div>`;
@@ -476,6 +499,7 @@
}
Timeline.ExpandableSeriesComponent = (mainSeries, options, subSerieses, exporter) => {
+ let layoutSizeMayChangeEvent = null;
const ref = REF.createRef({
state: {expanded: options.expanded ? options.expanded : false},
onStateUpdate: (element, stateDiff) => {
@@ -488,15 +512,18 @@
element.children[1].style.display = 'none';
element.children[2].style.display = 'block';
}
+ // Notifiy inside of the provider that we may changed the layout size because of expanded / unexpanded.
+ layoutSizeMayChangeEvent.add();
}
});
if (exporter)
exporter((expanded) => ref.setState({expanded: expanded}));
- return ListProviderReceiver((updateContainerWidth, onContainerScroll, onResize) => {
+ return ListProviderReceiver((updateContainerWidth, onContainerScroll, onResize, layoutSizeMayChange) => {
+ layoutSizeMayChangeEvent = layoutSizeMayChange;
return `<div class="groupSeries" ref="${ref}">
<div class="series" style="display:none;"></div>
- <div>${mainSeries(updateContainerWidth, onContainerScroll, onResize)}</div>
- <div style="display:none">${subSerieses.map((subSeries) => subSeries(updateContainerWidth, onContainerScroll, onResize)).join("")}</div>
+ <div>${mainSeries(updateContainerWidth, onContainerScroll, onResize, layoutSizeMayChange)}</div>
+ <div style="display:none">${subSerieses.map((subSeries) => subSeries(updateContainerWidth, onContainerScroll, onResize, layoutSizeMayChange)).join("")}</div>
</div>`;
});
}
@@ -870,13 +897,13 @@
return {headers, serieses};
};
const {headers, serieses} = upackChildren(children);
- let composer = FP.composer(FP.currying((updateHeaders, updateSerieses) => {
+ let composer = FP.composer(FP.currying((updateHeaders, updateSerieses, notifiyRerender) => {
if (exporter)
exporter((newChildren) => {
const {headers, serieses} = upackChildren(newChildren);
updateHeaders(headers);
updateSerieses(serieses);
- });
+ }, notifiyRerender);
}));
return (
`<div class="timeline">
Modified: trunk/Tools/resultsdbpy/resultsdbpy/view/templates/search.html (249357 => 249358)
--- trunk/Tools/resultsdbpy/resultsdbpy/view/templates/search.html 2019-08-31 04:03:54 UTC (rev 249357)
+++ trunk/Tools/resultsdbpy/resultsdbpy/view/templates/search.html 2019-08-31 04:11:21 UTC (rev 249358)
@@ -37,10 +37,10 @@
import {SearchBar} from '/assets/js/search.js';
import {Legend, TimelineFromEndpoint} from '/assets/js/timeline.js';
import {ToolTip} from '/assets/js/tooltip.js';
-import {DOM, REF} from '/library/js/Ref.js';
+import {DOM, REF, EventStream} from '/library/js/Ref.js';
const DEFAULT_LIMIT = 100;
-const SUITES = JSON.parse('{{ suites|safe }}');
+const SUITES = JSON.parse('{{ suites|safe }}');
class SearchView {
constructor() {
@@ -207,13 +207,22 @@
toString() {
return `<div ref="${this.ref}"></div>`;
}
+ notifiyTimelinesRender() {
+ this.ref.state.children.forEach(child => {
+ child.timeline.notifiyRerender();
+ });
+ }
}
let view = new SearchView();
-
+const _onLayoutChange_ = new EventStream();
+onLayoutChange.action(() => {
+ view.notifiyTimelinesRender();
+});
window._onpopstate_ = event => {view.reload();};
window._onpushstate_ = event => {view.reload();};
+
DOM.inject(
document.getElementById('app'),
`${ToolTip}
@@ -224,7 +233,7 @@
view.reload();
}),
ConfigurationSelectors(() => {view.reload()}),
- ])}
+ ], () => onLayoutChange.add())}
<div class="main left under-topbar-with-actions">
<div class="content">
Modified: trunk/Tools/resultsdbpy/resultsdbpy/view/templates/suite_results.html (249357 => 249358)
--- trunk/Tools/resultsdbpy/resultsdbpy/view/templates/suite_results.html 2019-08-31 04:03:54 UTC (rev 249357)
+++ trunk/Tools/resultsdbpy/resultsdbpy/view/templates/suite_results.html 2019-08-31 04:11:21 UTC (rev 249358)
@@ -36,7 +36,7 @@
import {Drawer, BranchSelector, ConfigurationSelectors, LimitSlider} from '/assets/js/drawer.js';
import {Legend, TimelineFromEndpoint} from '/assets/js/timeline.js';
import {ToolTip} from '/assets/js/tooltip.js';
-import {DOM, REF} from '/library/js/Ref.js';
+import {DOM, REF, EventStream} from '/library/js/Ref.js';
const DEFAULT_LIMIT = 100;
const SUITES = JSON.parse('{{ suites|safe }}');
@@ -156,9 +156,18 @@
</div><br>`;
}).join('');
}
+ notifiyTimelinesRender() {
+ for (let suite in this.children) {
+ this.children[suite].notifiyRerender();
+ }
+ }
}
let view = new MainView();
+const _onLayoutChange_ = new EventStream();
+onLayoutChange.action(() => {
+ view.notifiyTimelinesRender();
+});
DOM.inject(document.getElementById('app'), `${ToolTip}
${Drawer([
@@ -168,7 +177,7 @@
view.reload();
}),
ConfigurationSelectors(() => {view.reload()}),
-])}
+], () => onLayoutChange.add())}
<div class="main left under-topbar-with-actions">
<div class="content">
${view}
