release: v2.3.0

CHANGELOG.md

@@ -1,3 +1,9 @@
+## v2.3.0 (28 Apr 2020)
+
+* feat: refresh notification
+* fix(console): safari bounce effect
+* fix(elements): highlight
+
 ## v2.2.2 (17 Apr 2020)
 
 * fix(console): extra info from

build/webpack.base.js

@@ -17,7 +17,7 @@ const postcssLoader = {
     plugins: [
       prefixer({
         prefix: '_',
-        ignore: [/luna-object-viewer/]
+        ignore: [/luna-object-viewer/, /luna-notification/]
       }),
       autoprefixer,
       clean()

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eruda",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "description": "Console for Mobile Browsers",
   "main": "eruda.js",
   "scripts": {
@@ -61,6 +61,7 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^4.0.2",
     "licia": "^1.19.0",
+    "luna-notification": "^0.1.2",
     "luna-object-viewer": "^0.1.1",
     "node-sass": "^4.13.1",
     "postcss-clean": "^1.1.0",

src/Console/Logger.js

@@ -622,6 +622,10 @@ export default class Logger extends Emitter {
       }
 
       const { scrollHeight, offsetHeight, scrollTop } = this._container
+      // safari bounce effect
+      if (scrollTop < 0) return
+      if (offsetHeight + scrollTop > scrollHeight) return
+
       let isAtBottom = false
       if (scrollHeight === offsetHeight) {
         isAtBottom = true

src/DevTools/DevTools.js

@@ -15,6 +15,7 @@ import {
   isDarkMode
 } from '../lib/util'
 import evalCss from '../lib/evalCss'
+import LunaNotification from 'luna-notification'
 
 export default class DevTools extends Emitter {
   constructor($container) {
@@ -33,6 +34,7 @@ export default class DevTools extends Emitter {
 
     this._appendTpl()
     this._initNavBar()
+    this._initNotification()
     this._bindEvent()
   }
   show() {
@@ -176,7 +178,9 @@ export default class DevTools extends Emitter {
       })
       .separator()
   }
-
+  notify(content, options) {
+    this._notification.notify(content, options)
+  }
   destroy() {
     evalCss.remove(this._style)
     this.removeAll()
@@ -206,6 +210,14 @@ export default class DevTools extends Emitter {
     this._navBar = new NavBar(this._$el.find('.eruda-nav-bar-container'))
     this._navBar.on('showTool', name => this.showTool(name))
   }
+  _initNotification() {
+    this._notification = new LunaNotification(this._$el.get(0), {
+      position: {
+        x: 'center',
+        y: 'top'
+      }
+    })
+  }
   _bindEvent() {
     const $navBar = this._$el.find('.eruda-nav-bar')
     const startListener = e => {

src/Elements/Elements.js

@@ -216,7 +216,10 @@ export default class Elements extends Tool {
     const $bottomBar = this._$el.find('.eruda-bottom-bar')
 
     $bottomBar
-      .on('click', '.eruda-refresh', () => this._render())
+      .on('click', '.eruda-refresh', () => {
+        this._render()
+        container.notify('Refreshed')
+      })
       .on('click', '.eruda-highlight', () => this._toggleHighlight())
       .on('click', '.eruda-select', () => this._toggleSelect())
       .on('click', '.eruda-reset', () => this.set(this._htmlEl))

src/Elements/Highlight.js

@@ -46,38 +46,63 @@ export default class Highlight {
     const mt = getNumStyle('margin-top')
     const mb = getNumStyle('margin-bottom')
 
-    this._$margin.css({
-      left: -ml,
-      top: -mt,
-      width: width + ml + mr,
-      height: height + mt + mb
-    })
-
     const bl = getNumStyle('border-left-width')
     const br = getNumStyle('border-right-width')
     const bt = getNumStyle('border-top-width')
     const bb = getNumStyle('border-bottom-width')
 
-    const bw = width - bl - br
-    const bh = height - bt - bb
-
-    this._$padding.css({
-      left: bl,
-      top: bt,
-      width: bw,
-      height: bh
-    })
-
     const pl = getNumStyle('padding-left')
     const pr = getNumStyle('padding-right')
     const pt = getNumStyle('padding-top')
     const pb = getNumStyle('padding-bottom')
 
+    const pw = width - bl - br
+    const ph = height - bt - bb
+
+    const marginColor = 'rgba(246, 178, 107, 0.66)'
+    const borderColor = 'rgba(255, 229, 153, 0.66)'
+    const paddingColor = 'rgba(147, 196, 125, 0.55)'
+    const contentColor = 'rgba(111, 168, 220, 0.66)'
+
+    this._$margin.css({
+      left: -ml,
+      top: -mt,
+      width: width + ml + mr,
+      height: height + mt + mb,
+      borderTop: `${mt}px solid ${marginColor}`,
+      borderLeft: `${ml}px solid ${marginColor}`,
+      borderRight: `${mr}px solid ${marginColor}`,
+      borderBottom: `${mb}px solid ${marginColor}`
+    })
+
+    this._$border.css({
+      left: 0,
+      top: 0,
+      width,
+      height,
+      borderTop: `${bt}px solid ${borderColor}`,
+      borderLeft: `${bl}px solid ${borderColor}`,
+      borderRight: `${br}px solid ${borderColor}`,
+      borderBottom: `${bb}px solid ${borderColor}`
+    })
+
+    this._$padding.css({
+      left: bl,
+      top: bt,
+      width: pw,
+      height: ph,
+      borderTop: `${pt}px solid ${paddingColor}`,
+      borderLeft: `${pl}px solid ${paddingColor}`,
+      borderRight: `${pr}px solid ${paddingColor}`,
+      borderBottom: `${pb}px solid ${paddingColor}`
+    })
+
     this._$content.css({
       left: bl + pl,
       top: bl + pt,
-      width: bw - pl - pr,
-      height: bh - pt - pb
+      width: pw - pl - pr,
+      height: ph - pt - pb,
+      background: contentColor
     })
 
     this._$size
@@ -104,6 +129,7 @@ export default class Highlight {
     this._$margin = $el.find('.eruda-margin')
     this._$padding = $el.find('.eruda-padding')
     this._$content = $el.find('.eruda-content')
+    this._$border = $el.find('.eruda-border')
     this._$size = $el.find('.eruda-size')
   }
 }

src/Elements/Highlight.scss

@@ -11,7 +11,6 @@
     pointer-events: none !important;
   }
   .indicator {
-    opacity: 0.5;
     position: absolute;
     left: 0;
     right: 0;
@@ -20,7 +19,6 @@
   }
   .margin {
     position: absolute;
-    background: #e8925b;
     z-index: 100;
   }
   .border {
@@ -29,17 +27,14 @@
     right: 0;
     width: 100%;
     height: 100%;
-    background: #ffcd7c;
     z-index: 200;
   }
   .padding {
     position: absolute;
-    background: #86af76;
     z-index: 300;
   }
   .content {
     position: absolute;
-    background: #5e88c1;
     z-index: 400;
   }
   .size {

src/Resources/Resources.js

@@ -220,25 +220,34 @@ export default class Resources extends Tool {
     const container = this._container
 
     $el
-      .on('click', '.eruda-refresh-local-storage', () =>
+      .on('click', '.eruda-refresh-local-storage', () => {
+        container.notify('Refreshed')
         this.refreshLocalStorage()._render()
-      )
-      .on('click', '.eruda-refresh-session-storage', () =>
+      })
+      .on('click', '.eruda-refresh-session-storage', () => {
+        container.notify('Refreshed')
         this.refreshSessionStorage()._render()
-      )
-      .on('click', '.eruda-refresh-cookie', () =>
+      })
+      .on('click', '.eruda-refresh-cookie', () => {
+        container.notify('Refreshed')
         this.refreshCookie()._render()
-      )
-      .on('click', '.eruda-refresh-script', () =>
+      })
+      .on('click', '.eruda-refresh-script', () => {
+        container.notify('Refreshed')
         this.refreshScript()._render()
-      )
-      .on('click', '.eruda-refresh-stylesheet', () =>
+      })
+      .on('click', '.eruda-refresh-stylesheet', () => {
+        container.notify('Refreshed')
         this.refreshStylesheet()._render()
-      )
-      .on('click', '.eruda-refresh-iframe', () =>
+      })
+      .on('click', '.eruda-refresh-iframe', () => {
+        container.notify('Refreshed')
         this.refreshIframe()._render()
-      )
-      .on('click', '.eruda-refresh-image', () => this.refreshImage()._render())
+      })
+      .on('click', '.eruda-refresh-image', () => {
+        container.notify('Refreshed')
+        this.refreshImage()._render()
+      })
       .on('click', '.eruda-search', function() {
         const $this = $(this)
         const type = $this.data('type')

src/eruda.js

@@ -199,6 +199,7 @@ export default {
 
     evalCss(
       require('luna-object-viewer/luna-object-viewer.css') +
+      require('luna-notification/luna-notification.css') + 
       require('./style/style.scss') +
         require('./style/reset.scss') +
         require('./style/icon.css')

src/style/luna.scss

@@ -35,3 +35,26 @@
   border-top-color: transparent;
   border-left-color: var(--foreground);
 }
+
+.luna-notification {
+  pointer-events: none !important;
+  padding: $padding;
+  z-index: 1000;
+}
+
+.luna-notification-item {
+  z-index: 500;
+  color: var(--foreground);
+  background: var(--background);
+  box-shadow: none;
+  padding: 5px 10px;
+  border: 1px solid var(--border);
+}
+
+.luna-notification-upper {
+  margin-bottom: 10px;
+}
+
+.luna-notification-lower {
+  margin-top: 10px;
+}

src/style/reset.scss

@@ -1,7 +1,4 @@
 .container {
-  html,
-  body,
-  div,
   span,
   applet,
   object,