release: v2.0.0

liriliri · Jan 6, 2020 · 26d8d08 · 26d8d08
1 parent c1c180a
commit 26d8d08
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 42 deletions.
diff --git 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
@@ -1,14 +1,24 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-        <title>Eruda-timing</title>
-    </head>
-    <body>
-        <script src="node_modules/eruda/eruda.js"></script>
-        <script>eruda.init({tool: ['sources']});</script>
-        <script src="assets/eruda-timing.js"></script>
-        <script>eruda.add(erudaTiming).show('timing').show();</script>
-    </body>
-</html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
+    />
+    <title>Eruda-timing</title>
+  </head>
+  <body>
+    <script src="node_modules/eruda/eruda.js"></script>
+    <script>
+      eruda.init({ tool: ['sources'] })
+    </script>
+    <script src="assets/eruda-timing.js"></script>
+    <script>
+      eruda
+        .add(erudaTiming)
+        .show('timing')
+        .show()
+    </script>
+  </body>
+</html>
diff --git 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
@@ -8,31 +8,25 @@
 }
 
 $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 {
   @include overflow-auto(y);
   .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
@@ -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) {