Commit log viewer repaints too frequently after r198499
[WebKit.git] / Websites / perf.webkit.org / public / v3 / components / commit-log-viewer.js
1
2 class CommitLogViewer extends ComponentBase {
3
4     constructor()
5     {
6         super('commit-log-viewer');
7         this._repository = null;
8         this._fetchingPromise = null;
9         this._commits = null;
10         this._from = null;
11         this._to = null;
12     }
13
14     currentRepository() { return this._repository; }
15
16     view(repository, from, to)
17     {
18         if (this._repository == repository && this._from == from && this._to == to)
19             return Promise.resolve(null);
20
21         this._commits = null;
22         this._repository = repository;
23         this._from = from;
24         this._to = to;
25
26         if (!repository) {
27             this._fetchingPromise = null;
28             this._repository = null;
29             return Promise.resolve(null);
30         }
31
32         if (!to) {
33             this._fetchingPromise = null;
34             this.render();
35             return Promise.resolve(null);
36         }
37
38         var promise = CommitLog.fetchBetweenRevisions(repository, from || to, to);
39
40         this._fetchingPromise = promise;
41
42         var self = this;
43         var spinnerTimer = setTimeout(function () {
44             self.render();
45         }, 300);
46
47         this._fetchingPromise.then(function (commits) {
48             clearTimeout(spinnerTimer);
49             if (self._fetchingPromise != promise)
50                 return;
51             self._fetchingPromise = null;
52             self._commits = commits;
53         }, function (error) {
54             if (self._fetchingPromise != promise)
55                 return;
56             self._fetchingPromise = null;
57             self._commits = null;
58         });
59
60         return this._fetchingPromise;
61     }
62
63     render()
64     {
65         var caption = '';
66         if (this._repository && (this._commits || this._fetchingPromise))
67             caption = this._repository.name();
68         this.content().querySelector('caption').textContent = caption;
69
70         var element = ComponentBase.createElement;
71         var link = ComponentBase.createLink;
72
73         this.renderReplace(this.content().querySelector('tbody'), (this._commits || []).map(function (commit) {
74             var label = commit.label();
75             var url = commit.url();
76             return element('tr', [
77                 element('th', [element('h4', {class: 'revision'}, url ? link(label, commit.title(), url) : label), commit.author() || '']),
78                 element('td', commit.message() ? commit.message().substring(0, 80) : '')]);
79         }));
80
81         this.content().querySelector('.commits-viewer-spinner').style.display = this._fetchingPromise ? null : 'none';
82     }
83
84     static htmlTemplate()
85     {
86         return `
87             <div class="commits-viewer-container">
88                 <div class="commits-viewer-spinner"><spinner-icon></spinner-icon></div>
89                 <table class="commits-viewer-table">
90                     <caption></caption>
91                     <tbody>
92                     </tbody>
93                 </table>
94             </div>
95 `;
96     }
97
98     static cssTemplate()
99     {
100         return `
101             .commits-viewer-container {
102                 width: 100%;
103                 height: calc(100% - 2px);
104                 overflow-y: scroll;
105             }
106             
107             .commits-viewer-table {
108                 width: 100%;
109             }
110
111             .commits-viewer-table caption {
112                 font-weight: inherit;
113                 font-size: 1rem;
114                 text-align: center;
115                 padding: 0.2rem;
116             }
117
118             .commits-viewer-table {
119                 border-collapse: collapse;
120                 border-bottom: solid 1px #ccc;
121             }
122
123             .commits-viewer-table .revision {
124                 white-space: nowrap;
125                 font-weight: normal;
126                 margin: 0;
127                 padding: 0;
128             }
129
130             .commits-viewer-table td,
131             .commits-viewer-table th {
132                 word-break: break-word;
133                 border-top: solid 1px #ccc;
134                 padding: 0.2rem;
135                 margin: 0;
136                 font-size: 0.8rem;
137                 font-weight: normal;
138             }
139
140             .commits-viewer-spinner {
141                 margin-top: 2rem;
142                 text-align: center;
143             }
144 `;
145     }
146
147 }
148
149 ComponentBase.defineElement('commit-log-viewer', CommitLogViewer);