api-console-assets
Version:
This repo only exists to publish api console components to npm
97 lines (87 loc) • 3.01 kB
HTML
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>request-timings demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../paper-styles/typography.html">
<link rel="import" href="../../arc-demo-helpers/arc-demo-snippet.html">
<link rel="import" href="../request-timings-panel.html">
<style is="custom-style" include="demo-pages-shared-styles">
.vertical-section-container {
max-width: 600px;
}
:root {
--request-timings: {
color: rgba(0, 0, 0, 0.74);
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
--arc-font-subhead: {
@apply(--paper-font-subhead);
}
}
</style>
</head>
<body unresolved>
<div class="vertical-section-container centered">
<h3>The request-timings element</h3>
<arc-demo-snippet>
<template>
<request-timings-panel></request-timings-panel>
<script>
var timings = {
startTime: 1483368432132,
blocked: 7.75,
dns: 279.38,
connect: 883.12,
ssl: 633.05,
send: 0.29,
wait: 649.88,
receive: 1.71
};
var redirects = [{
startTime: '2017-01-02T16:22:26.212Z',
blocked: 10.697000019718,
dns: -1,
connect: -1,
send: 0.34099997719749986,
wait: 155.50400002393852,
receive: 4.751000029500744,
ssl: -1
},{
startTime: '2017-01-02T16:22:26.212Z',
blocked: 3.36500001139939,
dns: -1,
connect: -1,
send: 0.06499997107311994,
wait: 138.7439999962225,
receive: 4.986000014469084,
ssl: -1
}];
// So the IE11 will notice the element...
window.setTimeout(function() {
document.querySelector('request-timings-panel').timings = timings;
document.querySelector('request-timings-panel').redirects = redirects;
}, 1000);
</script>
</template>
</arc-demo-snippet>
</div>
</body>
</html>