[ts] Type-check network/RequestTimingView.js with TypeScript
[email protected]
Bug: chromium:1011811
Change-Id: Iaadde2c9b5263102ec7e6c2f83a0be627fe177ef
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2460908
Commit-Queue: Simon Zünd <[email protected]>
Reviewed-by: Paul Lewis <[email protected]>
diff --git a/front_end/legacy/legacy-defs.d.ts b/front_end/legacy/legacy-defs.d.ts
index 4390737..bc62c73 100644
--- a/front_end/legacy/legacy-defs.d.ts
+++ b/front_end/legacy/legacy-defs.d.ts
@@ -112,6 +112,7 @@
}
interface Document {
+ createElementWithClass(elementName: string, className?: string, customElementType?: string): Element;
deepActiveElement(): Element|null;
}
diff --git a/front_end/network/RequestTimingView.js b/front_end/network/RequestTimingView.js
index 75b8c0b..218a4d0 100644
--- a/front_end/network/RequestTimingView.js
+++ b/front_end/network/RequestTimingView.js
@@ -28,10 +28,8 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-// @ts-nocheck
-// TODO(crbug.com/1011811): Enable TypeScript compiler checks
-
import * as Common from '../common/common.js';
+import * as ObjectUI from '../object_ui/object_ui.js';
import * as SDK from '../sdk/sdk.js';
import * as UI from '../ui/ui.js';
@@ -100,6 +98,7 @@
* @return {!Array.<!RequestTimeRange>}
*/
static calculateRequestTimeRanges(request, navigationStart) {
+ /** @type {!Array.<!RequestTimeRange>} */
const result = [];
/**
* @param {!RequestTimeRangeNames} name
@@ -222,18 +221,23 @@
const startTimeHeader = tableElement.createChild('thead', 'network-timing-start');
const tableHeaderRow = startTimeHeader.createChild('tr');
- const activityHeaderCell = tableHeaderRow.createChild('th');
+ /** @type {!HTMLTableCellElement} */
+ const activityHeaderCell = /** @type {!HTMLTableCellElement} */ (tableHeaderRow.createChild('th'));
activityHeaderCell.createChild('span', 'network-timing-hidden-header').textContent = ls`Label`;
activityHeaderCell.scope = 'col';
- const waterfallHeaderCell = tableHeaderRow.createChild('th');
+ /** @type {!HTMLTableCellElement} */
+ const waterfallHeaderCell = /** @type {!HTMLTableCellElement} */ (tableHeaderRow.createChild('th'));
waterfallHeaderCell.createChild('span', 'network-timing-hidden-header').textContent = ls`Waterfall`;
waterfallHeaderCell.scope = 'col';
- const durationHeaderCell = tableHeaderRow.createChild('th');
+ /** @type {!HTMLTableCellElement} */
+ const durationHeaderCell = /** @type {!HTMLTableCellElement} */ (tableHeaderRow.createChild('th'));
durationHeaderCell.createChild('span', 'network-timing-hidden-header').textContent = ls`Duration`;
durationHeaderCell.scope = 'col';
- const queuedCell = startTimeHeader.createChild('tr').createChild('td');
- const startedCell = startTimeHeader.createChild('tr').createChild('td');
+ /** @type {!HTMLTableCellElement} */
+ const queuedCell = /** @type {!HTMLTableCellElement} */ (startTimeHeader.createChild('tr').createChild('td'));
+ /** @type {!HTMLTableCellElement} */
+ const startedCell = /** @type {!HTMLTableCellElement} */ (startTimeHeader.createChild('tr').createChild('td'));
queuedCell.colSpan = startedCell.colSpan = 3;
queuedCell.createTextChild(
Common.UIString.UIString('Queued at %s', calculator.formatValue(request.issueTime(), 2)));
@@ -289,20 +293,22 @@
timingBarTitleEement.classList.add('network-fetch-timing-bar-clickable');
tableElement.createChild('tr', 'network-fetch-timing-bar-details');
- timingBarTitleEement.setAttribute('tabindex', 0);
+ timingBarTitleEement.setAttribute('tabindex', '0');
timingBarTitleEement.setAttribute('role', 'switch');
UI.ARIAUtils.setChecked(timingBarTitleEement, false);
}
}
if (!request.finished) {
- const cell = tableElement.createChild('tr').createChild('td', 'caution');
+ /** @type {!HTMLTableCellElement} */
+ const cell = /** @type {!HTMLTableCellElement} */ (tableElement.createChild('tr').createChild('td', 'caution'));
cell.colSpan = 3;
cell.createTextChild(Common.UIString.UIString('CAUTION: request is not finished yet!'));
}
const footer = tableElement.createChild('tr', 'network-timing-footer');
- const note = footer.createChild('td');
+ /** @type {!HTMLTableCellElement} */
+ const note = /** @type {!HTMLTableCellElement} */ (footer.createChild('td'));
note.colSpan = 1;
note.appendChild(UI.UIUtils.createDocumentationLink(
'network-performance/reference#timing-explanation', Common.UIString.UIString('Explanation')));
@@ -313,7 +319,9 @@
const lastTimingRightEdge = right === undefined ? 100 : right;
- const breakElement = tableElement.createChild('tr', 'network-timing-table-header').createChild('td');
+ /** @type {!HTMLTableCellElement} */
+ const breakElement = /** @type {!HTMLTableCellElement} */ (
+ tableElement.createChild('tr', 'network-timing-table-header').createChild('td'));
breakElement.colSpan = 3;
breakElement.createChild('hr', 'break');
@@ -324,7 +332,8 @@
if (!serverTimings) {
const informationRow = tableElement.createChild('tr');
- const information = informationRow.createChild('td');
+ /** @type {!HTMLTableCellElement} */
+ const information = /** @type {!HTMLTableCellElement} */ (informationRow.createChild('td'));
information.colSpan = 3;
const link = UI.XLink.XLink.create('https://web.dev/custom-metrics/#server-timing-api', ls`the Server Timing API`);
@@ -346,7 +355,8 @@
* @param {number} right
*/
function addTiming(serverTiming, right) {
- const colorGenerator = new Common.Color.Generator({min: 0, max: 360, count: 36}, {min: 50, max: 80}, 80);
+ const colorGenerator =
+ new Common.Color.Generator({min: 0, max: 360, count: 36}, {min: 50, max: 80, count: undefined}, 80);
const isTotal = serverTiming.metric.toLowerCase() === 'total';
const tr = tableElement.createChild('tr', isTotal ? 'network-timing-footer' : '');
const metric = tr.createChild('td', 'network-timing-metric');
@@ -479,9 +489,10 @@
return;
}
- if (event.target.classList.contains('network-fetch-timing-bar-clickable')) {
- const expanded = event.target.getAttribute('aria-checked') === 'true';
- event.target.setAttribute('aria-checked', !expanded);
+ const target = /** @type {!Element} */ (event.target);
+ if (target.classList.contains('network-fetch-timing-bar-clickable')) {
+ const expanded = target.getAttribute('aria-checked') === 'true';
+ target.setAttribute('aria-checked', String(!expanded));
fetchDetailsElement.classList.toggle('network-fetch-timing-bar-details-collapsed');
fetchDetailsElement.classList.toggle('network-fetch-timing-bar-details-expanded');
@@ -553,4 +564,5 @@
]);
/** @typedef {{name: !RequestTimeRangeNames, start: number, end: number}} */
+// @ts-ignore typedef
export let RequestTimeRange;
