googlechrome
/
chromium-dashboard
зеркало из https://github.com/GoogleChrome/chromium-dashboard.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Using rollup for components (#679) 

* Import lit-virtualizer

* misc

* Add rollup and add it to gulp task

* Update gulp

* Downgrade paper-toggle-button to input checkbox

* Include all css to lit-elements

* Add rollup minify. Remove unused packages.

* Fix code review feedback

* Fixes based on code review.

* Remove two unnecessary .call(this, ...)

* Bind _onFeatureToggled (used inside lit-virtualizer) in the constructor

* Add lit-analyzer

* Update lit-analyzer script
This commit is contained in:
Yangguang 2019-11-11 14:32:32 -08:00 коммит произвёл Jason Robbins
Родитель 6872191c8c
Коммит a448e6f9bf
38 изменённых файлов: 3580 добавлений и 2753 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

15
.babelrc
Просмотреть файл

@ -1,3 +1,16 @@
{
"presets": ["es2015"],
"presets": [
[
"@babel/preset-env",
{
"modules": false,
"targets": {
"esmodules": true
}
}
]
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}

1
.eslintrc
Просмотреть файл

@ -4,6 +4,7 @@
"browser": true,
"es6": true
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 8,
"sourceType": "module"

15
README.md
Просмотреть файл

@ -15,11 +15,8 @@ Chrome Platform Status
1. [Google App Engine SDK for Python](https://developers.google.com/appengine/downloads#Google_App_Engine_SDK_for_Python).
1. pip, node, npm.
1. Gulp `npm install -g gulp`
1. Install Site, followed by postinstall script
```bash
npm install`
```
1. Install npm dependencies `npm ci`
1. Install other dependencies `npm run deps`
##### Add env_vars.yaml
@ -47,6 +44,14 @@ To start front end code watching (sass, js lint check, babel, minify files), run
npm run watch
```
To run lint & lit-analyzer:
```bash
npm run lint
```
Note: featurelist is temporarily excluded because lit-analyzer throws `Maximum call stack size exceeded`.
There are some developing information in developer-documentation.md.
##### FCM setup

70
gulpfile.babel.js
Просмотреть файл

@ -1,19 +1,20 @@
'use strict';
// This gulpfile makes use of new JavaScript features.
// Babel handles this without us having to do anything. It just works.
// You can read more about the new JavaScript features here:
// https://babeljs.io/docs/learn-es2015/
import path from 'path';
import gulp from 'gulp';
import del from 'del';
import swPrecache from 'sw-precache';
import * as uglifyEs from 'gulp-uglify-es';
const path = require('path');
const gulp = require('gulp');
const babel = require("gulp-babel");
const del = require('del');
const swPrecache = require('sw-precache');
const uglifyEs = require('gulp-uglify-es');
const uglify = uglifyEs.default;
import gulpLoadPlugins from 'gulp-load-plugins';
const gulpLoadPlugins = require('gulp-load-plugins');
const eslintIfFixed = require('gulp-eslint-if-fixed');
const $ = gulpLoadPlugins();
const rollup = require('rollup');
const rollupResolve = require('rollup-plugin-node-resolve');
const rollupLitCss = require('rollup-plugin-lit-css');
const rollupBabel = require('rollup-plugin-babel');
const rollupMinify = require('rollup-plugin-babel-minify');
function minifyHtml() {
return $.minifyHtml({
@ -76,12 +77,33 @@ gulp.task('styles', () => {
.pipe(gulp.dest('static/css'));
});
gulp.task('rollup', () => {
return rollup.rollup({
input: 'static/components.js',
plugins: [
rollupLitCss({include: []}),
rollupResolve(),
rollupBabel({
plugins: ["@babel/plugin-syntax-dynamic-import"]
}),
rollupMinify({comments: false}),
],
}).then(bundle => {
return bundle.write({
dir: 'static/dist',
format: 'es',
sourcemap: true,
compact: true,
});
});
});
// Run scripts through babel.
gulp.task('js', () => {
return gulp.src([
'static/js-src/**/*.js',
])
.pipe($.babel()) // Defaults are in .babelrc
.pipe(babel()) // Defaults are in .babelrc
.pipe(uglifyJS())
.pipe(license()) // Add license to top.
.pipe($.rename({suffix: '.min'}))
@ -178,24 +200,22 @@ gulp.task('generate-service-worker', () => {
});
});
// Build production files, the default task
gulp.task('watch', gulp.series(
'clean',
'styles',
'js',
'lint-fix',
'generate-service-worker',
function watch() {
gulp.watch(['static/sass/**/*.scss'], gulp.series('styles'));
gulp.watch(['static/js-src/**/*.js', 'static/elements/*.js'], gulp.series(['lint', 'js']));
}
));
// Build production files, the default task
gulp.task('default', gulp.series(
'clean',
'styles',
'js',
'lint-fix',
'rollup',
'generate-service-worker',
));
// Build production files, the default task
gulp.task('watch', gulp.series(
'default',
function watch() {
gulp.watch(['static/sass/**/*.scss'], gulp.series('styles'));
gulp.watch(['static/js-src/**/*.js', 'static/elements/*.js'], gulp.series(['lint', 'js']));
gulp.watch(['static/components.js', 'static/elements/*.js'], gulp.series(['rollup']));
}
));

5846
package-lock.json сгенерированный
Просмотреть файл

Разница между файлами не показана из-за своего большого размера Загрузить разницу

42
package.json
Просмотреть файл

@ -7,13 +7,12 @@
"node": ">=6.0.0"
},
"scripts": {
"postinstall": "npm run deps && npm run build",
"deps": "pip install -t lib -r requirements.txt",
"lint": "gulp lint",
"lint": "gulp lint-fix && lit-analyzer \"static/elements/chromedash-!(featurelist)*.js\"",
"build": "gulp",
"watch": "gulp watch",
"deploy": "./scripts/deploy_site.sh",
"start": "./scripts/start_server.sh"
"deploy": "npm run build && ./scripts/deploy_site.sh",
"start": "npm run build && ./scripts/start_server.sh"
},
"repository": {
"type": "git",
@ -23,20 +22,22 @@
"url": "https://github.com/GoogleChrome/chromium-dashboard/issues"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-preset-es2015": "^6.9.0",
"@babel/core": "^7.6.2",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/preset-env": "^7.6.2",
"@babel/register": "^7.6.2",
"babel-eslint": "^10.0.3",
"del": "^3.0.0",
"eslint": "^5.2.0",
"eslint-config-google": "^0.9.1",
"gulp": "^4.0.0",
"gulp-autoprefixer": "^5.0.0",
"gulp-babel": "^7.0.1",
"gulp-crisper": "^1.1.0",
"gulp-babel": "^8.0.0",
"gulp-eslint": "^5.0.0",
"gulp-eslint-if-fixed": "^1.0.0",
"gulp-if": "^2.0.1",
"gulp-license": "^1.1.0",
"gulp-load-plugins": "^1.2.4",
"gulp-load-plugins": "^1.6.0",
"gulp-minify-html": "^1.0.6",
"gulp-rename": "^1.4.0",
"gulp-sass": "^4.0.1",
@ -44,8 +45,27 @@
"gulp-util": "^3.0.7",
"http2-push-manifest": "^1.0.0",
"lighthouse-ci": "https://github.com/ebidel/lighthouse-ci",
"lit-analyzer": "^1.1.9",
"regenerator-runtime": "^0.13.3",
"rollup": "^1.17.0",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-babel-minify": "^9.1.0",
"rollup-plugin-lit-css": "^2.0.0",
"rollup-plugin-node-resolve": "^5.2.0",
"sw-precache": "^5.2.1",
"sw-toolbox": "^3.6.0"
},
"dependencies": {}
"dependencies": {
"@polymer/app-layout": "^3.1.0",
"@polymer/iron-icon": "^3.0.1",
"@polymer/iron-iconset-svg": "^3.0.1",
"@polymer/lit-element": "^0.7.1",
"@polymer/paper-item": "^3.0.1",
"@polymer/paper-listbox": "^3.0.1",
"@polymer/paper-ripple": "^3.0.1",
"@polymer/paper-styles": "^3.0.1",
"lit-element": "^2.1.0",
"lit-html": "^1.1.2",
"lit-virtualizer": "^0.4.1"
}
}

27
static/components.js Normal file
Просмотреть файл

@ -0,0 +1,27 @@
/** This is the entry file for rollup. It bundles all the web components: polymer-paper components and our own components */
// polymer components
import '@polymer/app-layout';
import '@polymer/app-layout/app-scroll-effects/effects/waterfall';
import '@polymer/iron-icon';
import '@polymer/iron-iconset-svg';
import '@polymer/lit-element';
import '@polymer/paper-item';
import '@polymer/paper-listbox';
import '@polymer/paper-ripple';
import '@polymer/paper-styles/color.js';
// chromedash components
import './elements/icons';
import './elements/chromedash-color-status';
import './elements/chromedash-feature';
import './elements/chromedash-featurelist';
import './elements/chromedash-legend';
import './elements/chromedash-metadata';
import './elements/chromedash-metrics';
import './elements/chromedash-sample-panel';
import './elements/chromedash-schedule';
import './elements/chromedash-timeline';
import './elements/chromedash-toast';
import './elements/chromedash-userlist';
import './elements/chromedash-x-meter';

8
static/elements/chromedash-color-status.js
Просмотреть файл

@ -1,9 +1,13 @@
import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';
import {LitElement, html} from 'lit-element';
import style from '../css/elements/chromedash-color-status.css';
const CYAN = 120;
const DEFAULT_MAX = 7;
class ChromedashColorStatus extends LitElement {
static styles = style;
static get properties() {
return {
max: {type: Number},
@ -19,8 +23,6 @@ class ChromedashColorStatus extends LitElement {
render() {
const color = `hsl(${Math.round(CYAN - this.value * CYAN / this.max)}, 100%, 50%)`;
return html`
<link rel="stylesheet" href="/static/css/elements/chromedash-color-status.css">
<span id="status" style="background-color: ${color}"></span>
`;
}

56
static/elements/chromedash-feature.js
Просмотреть файл

@ -1,17 +1,20 @@
import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';
import {nothing} from 'https://unpkg.com/lit-html/lit-html.js?module';
import 'https://unpkg.com/@polymer/iron-icon/iron-icon.js?module';
import './chromedash-color-status.js';
import {LitElement, html} from 'lit-element';
import {nothing} from 'lit-html';
import {ifDefined} from 'lit-html/directives/if-defined.js';
import '@polymer/iron-icon';
import './chromedash-color-status';
import style from '../css/elements/chromedash-feature.css';
import sharedStyle from '../css/shared.css';
const MAX_STANDARDS_VAL = 6;
const MAX_VENDOR_VIEW = 7;
const MAX_WEBDEV_VIEW = 6;
const MAX_RISK = MAX_VENDOR_VIEW + MAX_WEBDEV_VIEW + MAX_STANDARDS_VAL;
const IS_PUSH_NOTIFIER_ENABLED = window.PushNotifier.GRANTED_ACCESS;
const IS_PUSH_NOTIFIER_SUPPORTED = window.PushNotifier.SUPPORTS_NOTIFICATIONS;
class ChromedashFeature extends LitElement {
static styles = style;
static get properties() {
return {
feature: {type: Object},
@ -194,8 +197,6 @@ class ChromedashFeature extends LitElement {
render() {
return html`
<link rel="stylesheet" href="/static/css/elements/chromedash-feature.css">
<hgroup @click="${this._togglePanelExpansion}">
<chromedash-color-status class="tooltip corner"
title="Interoperability risk: perceived interest from browser
@ -212,11 +213,14 @@ class ChromedashFeature extends LitElement {
`: nothing}
</h2>
<div class="iconrow
${IS_PUSH_NOTIFIER_SUPPORTED ?
${window.PushNotifier && window.PushNotifier.SUPPORTS_NOTIFICATIONS ?
'supports-push-notifications' : nothing}">
<button class="category tooltip category-tooltip" @click="${this.categoryFilter}"
title="Filter by category ${this.feature.category}">
${this.feature.category}</button>
<span class="tooltip category-tooltip"
title="Filter by category ${this.feature.category}">
<a href="#" class="category"
@click="${this.categoryFilter}">
${this.feature.category}</a>
</span>
<div class="topcorner">
${this.feature.browsers.chrome.status.text === 'Removed' ? html`
<span class="tooltip" title="Removed feature">
@ -249,18 +253,20 @@ class ChromedashFeature extends LitElement {
class="intervention" data-tooltip></iron-icon>
</span>
` : nothing}
${IS_PUSH_NOTIFIER_SUPPORTED ? html`
<button @click="${this.subscribeToFeature}" data-tooltip class="tooltip"
title="Receive a push notification when there are updates">
<iron-icon icon="${this._receivePush ?
'chromestatus:notifications' :
'chromestatus:notifications-off'}"
class="pushicon ${IS_PUSH_NOTIFIER_ENABLED ?
nothing : 'disabled'}"></iron-icon>
</button>
${window.PushNotifier && window.PushNotifier.SUPPORTS_NOTIFICATIONS ? html`
<span class="tooltip"
title="Receive a push notification when there are updates">
<a href="#" @click="${this.subscribeToFeature}" data-tooltip>
<iron-icon icon="${this._receivePush ?
'chromestatus:notifications' :
'chromestatus:notifications-off'}"
class="pushicon ${window.PushNotifier && window.PushNotifier.GRANTED_ACCESS ?
'' : 'disabled'}"></iron-icon>
</a>
</span>
` : nothing}
<span class="tooltip" title="File a bug against this feature">
<a href="${this._newBugUrl}" data-tooltip>
<a href="${ifDefined(this._newBugUrl)}" data-tooltip>
<iron-icon icon="chromestatus:bug-report"></iron-icon>
</a>
</span>
@ -465,6 +471,8 @@ customElements.define('chromedash-feature', ChromedashFeature);
class ChromedashMultiLinks extends LitElement {
static styles = sharedStyle;
static get properties() {
return {
title: {type: String}, // From parent
@ -480,8 +488,6 @@ class ChromedashMultiLinks extends LitElement {
render() {
return html`
<link rel="stylesheet" href="/static/css/shared.css">
${this.links.map((link, index) => html`
<a href="${link}" target="_blank"
class="${index < this.links.length - 1 ? 'comma' : ''}"

10
static/elements/chromedash-featurelist.js
Просмотреть файл

@ -1,8 +1,12 @@
import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';
import 'https://unpkg.com/lit-virtualizer?module';
import './chromedash-feature.js';
import {LitElement, html} from 'lit-element';
// eslint-disable-next-line no-unused-vars
import {LitVirtualizer} from 'lit-virtualizer';
import './chromedash-feature';
import style from '../css/elements/chromedash-featurelist.css';
class ChromedashFeaturelist extends LitElement {
static styles = style;
static get properties() {
return {
whitelisted: {type: Boolean},

15
static/elements/chromedash-legend.js
Просмотреть файл

@ -1,9 +1,12 @@
import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';
import {nothing} from 'https://unpkg.com/lit-html/lit-html.js?module';
import 'https://unpkg.com/@polymer/iron-icon/iron-icon.js?module';
import './chromedash-color-status.js';
import {LitElement, html} from 'lit-element';
import {nothing} from 'lit-html';
import '@polymer/iron-icon';
import './chromedash-color-status';
import style from '../css/elements/chromedash-legend.css';
class ChromedashLegend extends LitElement {
static styles = style;
static get properties() {
return {
opened: {type: Boolean, reflect: true},
@ -21,8 +24,6 @@ class ChromedashLegend extends LitElement {
return nothing;
}
return html`
<link rel="stylesheet" href="/static/css/elements/chromedash-legend.css">
<div id="overlay">
<h3>About the data</h3>
<section class="content-wrapper">
@ -39,7 +40,7 @@ class ChromedashLegend extends LitElement {
<h3>Color legend</h3>
<p>Colors indicate the "interoperability risk" for a given feature. The
risk increases as
<chromedash-color-status .value="1"
<chromedash-color-status value="0"
.max="${this.views.vendors.length}"></chromedash-color-status> →
<chromedash-color-status .value="${this.views.vendors.length}"
.max="${this.views.vendors.length}"></chromedash-color-status>, and the

10
static/elements/chromedash-metadata.js
Просмотреть файл

@ -1,6 +1,10 @@
import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';
import {LitElement, html} from 'lit-element';
import {ifDefined} from 'lit-html/directives/if-defined.js';
import style from '../css/elements/chromedash-metadata.css';
class ChromedashMetadata extends LitElement {
static styles = style;
static get properties() {
return {
implStatuses: {type: Array}, // Read in chromedash-featurelist.
@ -95,9 +99,7 @@ class ChromedashMetadata extends LitElement {
render() {
return html`
<link rel="stylesheet" href="/static/css/elements/chromedash-metadata.css">
<ul id="versionlist" class="${this._className}">
<ul id="versionlist" class="${ifDefined(this._className)}">
${this._versions.map((version) => html`
<li data-version="${version}" @click="${this._clickMilestone}"
?selected="${this.selected === version}">${version}</li>

17
static/elements/chromedash-metrics.js
Просмотреть файл

@ -1,8 +1,13 @@
import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';
import 'https://unpkg.com/@polymer/iron-icon/iron-icon.js?module';
import './chromedash-x-meter.js';
import {LitElement, html} from 'lit-element';
import {ifDefined} from 'lit-html/directives/if-defined.js';
import '@polymer/iron-icon';
import './chromedash-x-meter';
import style from '../css/elements/chromedash-metrics.css';
class ChromedashMetrics extends LitElement {
static styles = style;
static get properties() {
return {
type: {type: String},
@ -107,16 +112,14 @@ class ChromedashMetrics extends LitElement {
render() {
return html`
<link rel="stylesheet" href="/static/css/elements/chromedash-metrics.css">
<b>Showing <span>${this.viewList.length}</span> properties</b>
<ol id="stack-rank-list">
<li class="header">
<span @click="${this.sort}" data-order="property_name">
Property name <iron-icon icon="${this.propertyNameSortIcon}"></iron-icon>
Property name <iron-icon icon="${ifDefined(this.propertyNameSortIcon)}"></iron-icon>
</span>
<span @click="${this.sort}" data-order="percentage" class="percent_label">
Percentage <iron-icon icon="${this.percentSortIcon}"></iron-icon>
Percentage <iron-icon icon="${ifDefined(this.percentSortIcon)}"></iron-icon>
</span>
</li>
${this.viewList.map((item) => html`

11
static/elements/chromedash-sample-panel.js
Просмотреть файл

@ -1,8 +1,11 @@
import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';
import {nothing} from 'https://unpkg.com/lit-html/lit-html.js?module';
import 'https://unpkg.com/@polymer/iron-icon/iron-icon.js?module';
import {LitElement, html} from 'lit-element';
import {nothing} from 'lit-html';
import '@polymer/iron-icon';
import style from '../css/elements/chromedash-sample-panel.css';
class ChromedashSamplePanel extends LitElement {
static styles = style;
static get properties() {
return {
categories: {attribute: false}, // Edited in static/js/samples.js
@ -120,8 +123,6 @@ class ChromedashSamplePanel extends LitElement {
return nothing;
}
return html`
<link rel="stylesheet" href="/static/css/elements/chromedash-sample-panel.css">
<ul>
${this.filtered.map((feature) => html`
<li>

21
static/elements/chromedash-schedule.js
Просмотреть файл

@ -1,6 +1,7 @@
import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';
import {nothing} from 'https://unpkg.com/lit-html/lit-html.js?module';
import 'https://unpkg.com/@polymer/iron-icon/iron-icon.js?module';
import {LitElement, html} from 'lit-element';
import {nothing} from 'lit-html';
import '@polymer/iron-icon';
import style from '../css/elements/chromedash-schedule.css';
const TEMPLATE_CONTENT = {
stable: {
@ -31,10 +32,10 @@ const TEMPLATE_CONTENT = {
const REMOVED_STATUS = ['Removed'];
const DEPRECATED_STATUS = ['Deprecated', 'No longer pursuing'];
const IS_PUSH_NOTIFIER_SUPPORTED = window.PushNotifier.SUPPORTS_NOTIFICATIONS;
const IS_PUSH_NOTIFIER_ENABLED = window.PushNotifier.GRANTED_ACCESS;
class ChromedashSchedule extends LitElement {
static styles = style;
static get properties() {
return {
channels: {attribute: false}, // Assigned in schedule.js, value from Django
@ -101,8 +102,6 @@ class ChromedashSchedule extends LitElement {
return html``;
}
return html`
<link rel="stylesheet" href="/static/css/elements/chromedash-schedule.css">
${['stable', 'beta', 'dev'].map((type) => html`
<section class="release ${this.hideBlink ? 'no-components' : nothing}">
<div class="layout vertical center">
@ -155,15 +154,15 @@ class ChromedashSchedule extends LitElement {
<iron-icon icon="chromestatus:warning" class="deprecated" data-tooltip></iron-icon>
</span>
` : nothing}
${IS_PUSH_NOTIFIER_SUPPORTED ? html`
${window.PushNotifier && window.PushNotifier.SUPPORTS_NOTIFICATIONS ? html`
<span class="tooltip" title="Subscribe to notification updates">
<iron-icon icon="chromestatus:notifications-off"
class="pushicon ${IS_PUSH_NOTIFIER_ENABLED ? nothing : 'disabled'}"
class="pushicon ${window.PushNotifier && window.PushNotifier.GRANTED_ACCESS ? nothing : 'disabled'}"
data-feature-id="${f.id}"
@click="${this._subscribeToFeature}"></iron-icon>
</span>
</span>
` : nothing}
` : nothing}
</span>
</li>
`)}
</ul>

14
static/elements/chromedash-timeline.js
Просмотреть файл

@ -1,8 +1,10 @@
// TODO(yangguang): This component is not tested. Data is not available in devserver, so cannot be tested locally.
import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';
import {LitElement, html} from 'lit-element';
import style from '../css/elements/chromedash-timeline.css';
class ChromedashTimeline extends LitElement {
static styles = style;
static get properties() {
return {
type: {type: String},
@ -21,7 +23,7 @@ class ChromedashTimeline extends LitElement {
constructor() {
super();
this.selectedBucketId = 1;
this.selectedBucketId = '1';
this.showAllHistoricalData = false;
this.title = '';
this.type = '';
@ -143,7 +145,7 @@ class ChromedashTimeline extends LitElement {
}
_updateTimeline() {
if (this.selectedBucketId === 1) {
if (this.selectedBucketId === '1') {
return;
}
@ -187,8 +189,6 @@ ORDER BY yyyymmdd DESC, client`;
render() {
return html`
<link rel="stylesheet" href="/static/css/elements/chromedash-timeline.css">
<select .value="${this.selectedBucketId}" @change="${this.updateSelectedBucketId}">
<option disabled value="1">Select a property</option>
${this.props.map((prop) => html`
@ -207,7 +207,7 @@ ORDER BY yyyymmdd DESC, client`;
This is also the reason for the abrupt spike around 2017-10-26.
</p>
<h3 id="httparchive" class="header_title">Adoption of the feature on top sites</h3>
<p class="description">The chart below shows the adoption of the feature by the top URLs on the internet. Data from <a href="https://httparchive.org/" target="blank">HTTP Archive</a>.</p>
<p class="description">The chart below shows the adoption of the feature by the top URLs on the internet. Data from <a href="https://httparchive.org/" target="_blank">HTTP Archive</a>.</p>
<iframe id="httparchivedata"></iframe>
<p class="callout">
<b>Note</b>: The jump around July and December 2018 are because the corpus of URLs crawled by HTTP Archive increased. These jumps have no correlation with the jump in the top graph.

7
static/elements/chromedash-toast.js
Просмотреть файл

@ -1,9 +1,12 @@
import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';
import {LitElement, html} from 'lit-element';
import style from '../css/elements/chromedash-toast.css';
// Keeps track of the toast currently opened.
let _currentToast = null;
class ChromedashToast extends LitElement {
static styles = style;
static get properties() {
return {
msg: {type: String},
@ -75,8 +78,6 @@ class ChromedashToast extends LitElement {
render() {
return html`
<link rel="stylesheet" href="/static/css/elements/chromedash-toast.css">
<span id="msg">${this.msg}</span>
<a href="#" id="action">${this.actionLabel}</a>
`;

9
static/elements/chromedash-userlist.js
Просмотреть файл

@ -1,6 +1,9 @@
import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';
import {LitElement, html} from 'lit-element';
import style from '../css/elements/chromedash-userlist.css';
class ChromedashUserlist extends LitElement {
static styles = style;
static get properties() {
return {
actionPath: {type: String},
@ -69,9 +72,7 @@ class ChromedashUserlist extends LitElement {
render() {
return html`
<link rel="stylesheet" href="/static/css/elements/chromedash-userlist.css">
<form id="form" name="user_form" method="post" action="${this.actionPath}" onsubmit="return false;">
<form id="form" name="user_form" method="POST" action="${this.actionPath}" onsubmit="return false;">
<input type="email" placeholder="Email address" name="email" id="id_email" required>
<td><input type="submit" @click="${this.ajaxSubmit}">
</form>

7
static/elements/chromedash-x-meter.js
Просмотреть файл

@ -1,6 +1,9 @@
import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';
import {LitElement, html} from 'lit-element';
import style from '../css/elements/chromedash-x-meter.css';
class ChromedashXMeter extends LitElement {
static styles = style;
static get properties() {
return {
value: {type: Number},
@ -21,8 +24,6 @@ class ChromedashXMeter extends LitElement {
render() {
return html`
<link rel="stylesheet" href="/static/css/elements/chromedash-x-meter.css">
<div style="width: ${(this.value / this.max * 100)}%">
<span>${this.valueFormatted}</span>
</div>

6
static/elements/icons.js
Просмотреть файл

@ -3,9 +3,9 @@
* This file uses a similar pattern used in iron-icons (https://github.com/PolymerElements/iron-icons/blob/master/iron-icons.js)
*/
import {html} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';
import 'https://unpkg.com/@polymer/iron-icon/iron-icon.js?module';
import 'https://unpkg.com/@polymer/iron-iconset-svg/iron-iconset-svg.js?module';
import {html} from 'lit-element';
import '@polymer/iron-icon';
import '@polymer/iron-iconset-svg';
const template = html`
<iron-iconset-svg name="chromestatus" size="24">

2
static/js-src/schedule-page.js
Просмотреть файл

@ -3,7 +3,7 @@ const url = location.hostname == 'localhost' ?
'https://www.chromestatus.com/features.json' : '/features.json';
const featuresPromise = fetch(url).then((res) => res.json());
document.querySelector('paper-toggle-button').addEventListener('change', e => {
document.querySelector('.paper-toggle-button').addEventListener('change', e => {
e.stopPropagation();
document.querySelector('chromedash-schedule').hideBlink = e.target.checked;
});

5
static/sass/blink.scss
Просмотреть файл

@ -9,11 +9,6 @@ body {
display: none !important;
}
#subheader {
paper-toggle-button {
--paper-toggle-button-checked-bar-color: $chromium-color-medium;
--paper-toggle-button-checked-button-color: $chromium-color-center;
cursor: pointer;
}
.subheader_toggles {
display: flex !important;
justify-content: flex-end;

10
static/sass/schedule.scss
Просмотреть файл

@ -14,13 +14,11 @@ body[data-path*='features/schedule'] {
}
.hide-blink-checkbox {
margin-right: 8px;
}
#subheader {
max-width: 100%;
justify-content: center;
}
paper-toggle-button {
--paper-toggle-button-checked-bar-color: $chromium-color-medium;
--paper-toggle-button-checked-button-color: $chromium-color-center;
cursor: pointer;
}

20
templates/_base.html
Просмотреть файл

@ -59,18 +59,15 @@ limitations under the License.
</style>
{% block css %}{% endblock %}
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@^2.0.0/webcomponents-loader.js"></script>
{# Metric is need by sw registration and page code. #}
<script>{% inline_file "/static/js/metric.min.js" %}</script>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js" defer></script>
<script type="module">
import 'https://unpkg.com/@polymer/paper-styles/color.js?module';
import '/static/elements/icons.js';
import 'https://unpkg.com/@polymer/app-layout/app-drawer-layout/app-drawer-layout.js?module';
import 'https://unpkg.com/@polymer/app-layout/app-header-layout/app-header-layout.js?module';
import 'https://unpkg.com/@polymer/app-layout/app-scroll-effects/app-scroll-effects.js?module';
import 'https://unpkg.com/@polymer/app-layout/app-drawer/app-drawer.js?module';
import 'https://unpkg.com/@polymer/app-layout/app-header/app-header.js?module';
import '/static/elements/chromedash-toast.js';
WebComponents.waitFor(() => {
return import('/static/dist/components.js');
});
</script>
{% block preload %}{% endblock %}
@ -115,9 +112,6 @@ limitations under the License.
<!-- https://github.com/ljosa/urlize.js.git. This package does not have ES module support. It sets window.urlize in browsers. -->
<script src="https://unpkg.com/urlize.js/urlize.js"></script>
{# Metric is need by sw registration and page code. #}
<script>{% inline_file "/static/js/metric.min.js" %}</script>
{% block js %}{% endblock %}
<script>

6
templates/_base_embed.html
Просмотреть файл

@ -67,9 +67,11 @@ limitations under the License.
{% block css %}{% endblock %}
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js" defer></script>
<script type="module">
import 'https://unpkg.com/@polymer/paper-styles/color.js?module';
import '/static/elements/icons.js';
WebComponents.waitFor(() => {
return import('/static/dist/components.js');
});
</script>
{% block preload %}{% endblock %}

12
templates/admin/blink.html
Просмотреть файл

@ -2,12 +2,6 @@
{% load verbatim %}
{% load inline_file %}
{% block preload %}
<script type="module">
import 'https://unpkg.com/@polymer/paper-toggle-button/paper-toggle-button.js?module';
</script>
{% endblock %}
{% block css %}
<style>{% inline_file "/static/css/blink.css" %}</style>
{% endblock %}
@ -26,7 +20,9 @@
<a href="/admin/subscribers" class="view_owners_linke">List by owner &amp; their features →</a>
</div>
<div class="layout horizontal subheader_toggles">
<paper-toggle-button noink>Edit mode</paper-toggle-button>
<!-- <paper-toggle-button> doesn't working here. Related links:
https://github.com/PolymerElements/paper-toggle-button/pull/132 -->
<label><input type="checkbox" class="paper-toggle-button">Edit mode</label>
</div>
</div>
{% endblock %}
@ -102,7 +98,7 @@
(function() {
'use strict';
document.querySelector('paper-toggle-button').addEventListener('change', e => {
document.querySelector('.paper-toggle-button').addEventListener('change', e => {
e.stopPropagation();
document.querySelector('#components_list').classList.toggle('editing', e.target.checked);
});

6
templates/admin/users/new.html
Просмотреть файл

@ -4,12 +4,6 @@
<link rel="stylesheet" href="/static/css/forms.css">
{% endblock %}
{% block preload %}
<script type="module">
import '/static/elements/chromedash-userlist.js';
</script>
{% endblock %}
{% block subheader %}
<div id="subheader">
<h2>Whitelist a user</h2>

6
templates/feature.html
Просмотреть файл

@ -17,12 +17,6 @@
<link rel="alternate" type="application/rss+xml" href="https://www.chromestatus.com/features.xml" title="All features" />
{% endblock %}
{% block preload %}
<script type="module">
import 'https://unpkg.com/@polymer/iron-icon/iron-icon.js?module';
</script>
{% endblock %}
{% block content %}
<div id="feature">
<section id="name">

8
templates/features.html
Просмотреть файл

@ -19,14 +19,6 @@
{% endcache %}
{% endblock %}
{% block preload %}
<script type="module">
import '/static/elements/chromedash-featurelist.js';
import '/static/elements/chromedash-legend.js';
import '/static/elements/chromedash-metadata.js';
</script>
{% endblock %}
{% block subheader %}
<div id="subheader">
<div class="feature-count">

3
templates/header.html
Просмотреть файл

@ -1,6 +1,3 @@
<script type="module">
import 'https://unpkg.com/@polymer/iron-icon/iron-icon.js?module';
</script>
<header>
<aside>
<iron-icon icon="chromestatus:menu" drawer-toggle></iron-icon>

6
templates/metrics/css/animated.html
Просмотреть файл

@ -5,12 +5,6 @@
<style>{% inline_file "/static/css/metrics.css" %}</style>
{% endblock %}
{% block preload %}
<script type="module">
import '/static/elements/chromedash-metrics.js';
</script>
{% endblock %}
{% block drawer %}
{% include "metrics/css/_css_metric_nav.html" %}
{% endblock %}

6
templates/metrics/css/popularity.html
Просмотреть файл

@ -5,12 +5,6 @@
<style>{% inline_file "/static/css/metrics.css" %}</style>
{% endblock %}
{% block preload %}
<script type="module">
import '/static/elements/chromedash-metrics.js';
</script>
{% endblock %}
{% block drawer %}
{% include "metrics/css/_css_metric_nav.html" %}
{% endblock %}

3
templates/metrics/css/timeline/animated.html
Просмотреть файл

@ -7,9 +7,6 @@
{% block preload %}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="module">
import '/static/elements/chromedash-timeline.js';
</script>
{% endblock %}
{% block drawer %}

3
templates/metrics/css/timeline/popularity.html
Просмотреть файл

@ -7,9 +7,6 @@
{% block preload %}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="module">
import '/static/elements/chromedash-timeline.js';
</script>
{% endblock %}
{% block drawer %}

6
templates/metrics/feature/popularity.html
Просмотреть файл

@ -5,12 +5,6 @@
<style>{% inline_file "/static/css/metrics.css" %}</style>
{% endblock %}
{% block preload %}
<script type="module">
import '/static/elements/chromedash-metrics.js';
</script>
{% endblock %}
{% block drawer %}
{% include "metrics/feature/_feature_metric_nav.html" %}
{% endblock %}

3
templates/metrics/feature/timeline/popularity.html
Просмотреть файл

@ -7,9 +7,6 @@
{% block preload %}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="module">
import '/static/elements/chromedash-timeline.js';
</script>
{% endblock %}
{% block drawer %}

10
templates/samples.html
Просмотреть файл

@ -10,16 +10,6 @@
<style>{% inline_file "/static/css/samples.css" %}</style>
{% endblock %}
{% block preload %}
<script type="module">
import 'https://unpkg.com/@polymer/paper-listbox/paper-listbox.js?module';
import 'https://unpkg.com/@polymer/paper-ripple/paper-ripple.js?module';
import 'https://unpkg.com/@polymer/paper-item/paper-item.js?module';
import 'https://unpkg.com/@polymer/iron-icon/iron-icon.js?module';
import '/static/elements/chromedash-sample-panel.js';
</script>
{% endblock %}
{% block drawer %}
<h3>Category filter</h3>
{% verbatim %}

11
templates/schedule.html
Просмотреть файл

@ -6,13 +6,6 @@
<style>{% inline_file "/static/css/schedule.css" %}</style>
{% endblock %}
{% block preload %}
<script type="module">
import 'https://unpkg.com/@polymer/paper-toggle-button/paper-toggle-button.js?module';
import '/static/elements/chromedash-schedule.js';
</script>
{% endblock %}
{% block subheader %}
<div id="subheader">
<!--<h2>Chrome release timeline</h2>-->
@ -20,7 +13,9 @@
<h3>Release timeline</h3>
<p class="description">Please note, all dates are estimates and are subject to change.</p>
</div>
<paper-toggle-button noink>Hide Blink components</paper-toggle-button>
<!-- <paper-toggle-button> doesn't working here. Related links:
https://github.com/PolymerElements/paper-toggle-button/pull/132 -->
<label><input type="checkbox" class="hide-blink-checkbox">Hide Blink components</label>
</div>
{% endblock %}