From 26d8d081b35a3efc47da27cc9787c4b2f85e51dd Mon Sep 17 00:00:00 2001 From: surunzi Date: Mon, 6 Jan 2020 17:37:38 +0800 Subject: [PATCH] release: v2.0.0 --- CHANGELOG.md | 4 ++++ index.html | 34 ++++++++++++++++++++++------------ package.json | 6 +++--- src/style.scss | 42 +++++++++++++++++------------------------- src/timing.js | 5 +++-- 5 files changed, 49 insertions(+), 42 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d4eca49..9e24a02 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## v2.0.0 (6 Jan 2019) + +* feat: theme support + ## v1.1.3 (8 Nov 2019) * chore: update refresh icon style diff --git a/index.html b/index.html index ff6468f..a313655 100644 --- a/index.html +++ b/index.html @@ -1,14 +1,24 @@ - - - - Eruda-timing - - - - - - - - \ No newline at end of file + + + + Eruda-timing + + + + + + + + diff --git a/package.json b/package.json index 31cabcc..b94b112 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,12 @@ { "name": "eruda-timing", - "version": "1.1.3", + "version": "2.0.0", "main": "eruda-timing.js", "description": "Eruda plugin for performance and resource timing", "scripts": { "dev": "webpack-dev-server --host 0.0.0.0", "build": "webpack -p", - "format": "prettier src/index.js src/style.scss *.js --write", + "format": "prettier src/index.js src/style.scss *.js index.html --write", "ci": "npm run lint && npm run build", "lint": "eslint src/**/*.js" }, @@ -38,7 +38,7 @@ "autoprefixer": "^9.7.1", "babel-loader": "^8.0.6", "css-loader": "^3.2.0", - "eruda": "^1.10.2", + "eruda": "^2.0.0", "eslint": "^6.6.0", "handlebars": "^4.5.1", "handlebars-loader": "^1.7.1", diff --git a/src/style.scss b/src/style.scss index eed35b1..1b5b914 100644 --- a/src/style.scss +++ b/src/style.scss @@ -8,14 +8,9 @@ } $padding: 10px; -$blue: #2196f3; $font-size-s: 12px; $font-size-l: 16px; -$red: #f44336; -$gray: #707d8b; -$gray-dark: #263238; $font-size: 14px; -$gray-light: #eceffe; $anim-duration: 0.3s; .timing { @@ -23,16 +18,15 @@ $anim-duration: 0.3s; .performance-timing { padding: $padding 0; .inner-wrapper { - background: $blue; + background: var(--darker-background); .bar { @include overflow-auto(x); - border-bottom: 1px solid #fff; + border-bottom: 1px solid var(--border); span { font-size: $font-size-s; white-space: nowrap; - color: #fff; padding: 5px 0; - background: $red; + background: var(--highlight); display: inline-block; } &:last-child { @@ -46,13 +40,11 @@ $anim-duration: 0.3s; text-align: center; table { width: 100%; - background: #fff; border-collapse: collapse; text-align: left; th { - background: $gray; + background: var(--darker-background); text-align: left; - color: #fff; font-size: $font-size; } td { @@ -61,18 +53,21 @@ $anim-duration: 0.3s; th, td { padding: 10px; + border: 1px solid var(--border); + } + tr:nth-child(even) { + background: var(--contrast); } } } .title { - background: $gray; + border-top: 1px solid var(--border); + background: var(--darker-background); padding: $padding; - color: #fff; .btn { display: flex; margin-left: 5px; float: right; - color: #fff; width: 18px; height: 18px; justify-content: center; @@ -81,20 +76,19 @@ $anim-duration: 0.3s; cursor: pointer; transition: color $anim-duration; &:active { - color: $gray-dark; + color: var(--select-foreground); } } } .entries { - background: #fff; - border-bottom: 1px solid $gray-light; + border-bottom: 1px solid var(--border); margin-bottom: 10px; @include overflow-auto(x); table { min-width: 100%; cursor: pointer; tr:nth-child(4n-1) { - background: $gray-light; + background: var(--contrast); } td.timeline { padding: 0; @@ -106,7 +100,7 @@ $anim-duration: 0.3s; } } td { - border: 1px solid $gray-light; + border: 1px solid var(--border); padding: 10px; white-space: nowrap; } @@ -116,13 +110,11 @@ $anim-duration: 0.3s; } } .not-supported { - background: $red; - color: #fff; + background: var(--console-error-background); + border: 1px solid var(--console-error-border); + color: var(--console-error-foreground); margin: 10px; padding: $padding; - border-radius: 4px; text-align: center; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 4px 0 rgba(0, 0, 0, 0.08), - 0 3px 1px -2px rgba(0, 0, 0, 0.2); } } diff --git a/src/timing.js b/src/timing.js index 4a57e33..86be671 100644 --- a/src/timing.js +++ b/src/timing.js @@ -216,9 +216,10 @@ export default function(eruda) { renderData.timing = this._performanceTiming renderData.showPerformanceDetail = this._showPerformanceDetail - if (!renderData.timing && !renderData.entries) + if (!renderData.timing && !renderData.entries) { renderData.notSupported = true - + } + this._renderHtml(this._tpl(renderData)) } _renderHtml(html) {