release: v2.7.4

CHANGELOG.md

@@ -1,3 +1,11 @@
+## 2.7.4 (10 Dec 2022)
+
+* fix: firefox document.body is null error [#293](https://github.com/liriliri/eruda/issues/293)
+
+## 2.7.3 (8 Dec 2022)
+
+* fix: remove tabs horizontal scrollbar [#236](https://github.com/liriliri/eruda/issues/236)
+
 ## 2.7.2 (7 Dec 2022)
 
 * fix: luna modal style

README.md

@@ -126,6 +126,10 @@ If you want to create a plugin yourself, follow the guides [here](./doc/PLUGIN.m
 * [chii](https://github.com/liriliri/chii): Remote debugging tool.
 * [chobitsu](https://github.com/liriliri/chobitsu): Chrome devtools protocol JavaScript implementation.
 * [licia](https://github.com/liriliri/licia): Utility library used by eruda.
+
+## Third Party
+
+* [eruda-pixel](https://github.com/Faithree/eruda-pixel): UI pixel restoration tool.
 * [eruda-webpack-plugin](https://github.com/huruji/eruda-webpack-plugin): Eruda webpack plugin.
 
 ## Backers

README_CN.md

@@ -125,5 +125,5 @@ eruda.init({
 ## 相关项目
 
 * [chii](https://github.com/liriliri/chii)：远程调试工具。
+* [chobitsu](https://github.com/liriliri/chobitsu): Chrome devtools 协议 JavaScript 实现。
 * [licia](https://github.com/liriliri/licia)：Eruda 使用的工具库。 
-* [eruda-webpack-plugin](https://github.com/huruji/eruda-webpack-plugin)：Eruda webpack 插件。

build/loaders/css-minifier-loader.js

@@ -1,12 +0,0 @@
-const cssMap = require('../../src/lib/cssMap')
-const escapeRegExp = require('licia/escapeRegExp')
-const each = require('licia/each')
-
-module.exports = function (src) {
-    each(cssMap, (val, key) => {
-        src = src.replace(new RegExp(escapeRegExp(';' + key + ':'), 'g'), ';$' + val + ':')
-        src = src.replace(new RegExp(escapeRegExp('{' + key + ':'), 'g'), '{$' + val + ':')
-    })    
-
-    return src
-}

build/webpack.base.js

@@ -17,14 +17,7 @@ const postcssLoader = {
     plugins: [
       prefixer({
         prefix: '_',
-        ignore: [
-          /luna-console/,
-          /luna-object-viewer/,
-          /luna-notification/,
-          /luna-data-grid/,
-          /luna-dom-viewer/,
-          /luna-modal/,
-        ],
+        ignore: [/luna-*/],
       }),
       autoprefixer,
       clean(),
@@ -32,11 +25,6 @@ const postcssLoader = {
   },
 }
 
-const cssMinifierLoader = {
-  loader: path.resolve(__dirname, './loaders/css-minifier-loader'),
-  options: {},
-}
-
 const rawLoader = {
   loader: 'raw-loader',
   options: {
@@ -70,7 +58,12 @@ module.exports = {
     rules: [
       {
         test: /\.js$/,
-        exclude: /node_modules|index\.js/,
+        include: [
+          path.resolve(__dirname, '../src'),
+          path.resolve(__dirname, '../node_modules/luna-console'),
+          path.resolve(__dirname, '../node_modules/luna-modal'),
+          path.resolve(__dirname, '../node_modules/luna-tab'),
+        ],
         use: [
           {
             loader: 'babel-loader',
@@ -87,12 +80,12 @@ module.exports = {
       },
       {
         test: /\.scss$/,
-        use: [cssMinifierLoader, 'css-loader', postcssLoader, 'sass-loader'],
+        use: ['css-loader', postcssLoader, 'sass-loader'],
       },
       {
         test: /\.css$/,
         exclude: /luna-dom-highlighter/,
-        use: [cssMinifierLoader, 'css-loader', postcssLoader],
+        use: ['css-loader', postcssLoader],
       },
       {
         test: /luna-dom-highlighter\.css$/,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eruda",
-  "version": "2.7.2",
+  "version": "2.7.4",
   "description": "Console for Mobile Browsers",
   "main": "eruda.js",
   "browserslist": [
@@ -68,19 +68,20 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^5.0.0",
     "licia": "^1.37.0",
-    "luna-console": "^1.1.2",
+    "luna-console": "^1.1.3",
     "luna-data-grid": "^0.2.1",
     "luna-dom-viewer": "^1.0.2",
-    "luna-modal": "^0.1.2",
+    "luna-modal": "^1.0.0",
     "luna-notification": "^0.1.4",
     "luna-object-viewer": "^0.2.2",
+    "luna-tab": "^0.1.2",
     "node-sass": "^7.0.1",
     "postcss-clean": "^1.1.0",
     "postcss-loader": "^3.0.0",
     "postcss-prefixer": "^2.1.2",
     "raw-loader": "^4.0.2",
     "sass-loader": "^13.0.2",
-    "webpack": "^5.73.0",
+    "webpack": "^5.75.0",
     "webpack-bundle-analyzer": "^4.7.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.9.3"

src/Console/Console.scss

@@ -96,6 +96,7 @@
         display: none;
       }
       textarea {
+        overflow: auto;
         padding-left: 10px;
       }
     }
@@ -129,6 +130,7 @@
       }
     }
     textarea {
+      overflow: hidden;
       pointer-events: all;
       padding: 3px 10px;
       padding-left: 25px;

src/DevTools/DevTools.js

@@ -1,4 +1,3 @@
-import NavBar from './NavBar'
 import logger from '../lib/logger'
 import Tool from './Tool'
 import Settings from '../Settings/Settings'
@@ -17,6 +16,7 @@ import evalCss from '../lib/evalCss'
 import { isDarkTheme } from '../lib/themes'
 import LunaNotification from 'luna-notification'
 import LunaModal from 'luna-modal'
+import LunaTab from 'luna-tab'
 import { classPrefix as c } from '../lib/util'
 
 export default class DevTools extends Emitter {
@@ -44,7 +44,7 @@ export default class DevTools extends Emitter {
     this._resizeStartSize = 0
 
     this._appendTpl()
-    this._initNavBar()
+    this._initTab()
     this._initNotification()
     this._initModal()
     this._bindEvent()
@@ -53,7 +53,7 @@ export default class DevTools extends Emitter {
     this._isShow = true
 
     this._$el.show()
-    this._navBar.resetBottomBar()
+    this._tab.updateSlider()
 
     // Need a delay after show to enable transition effect.
     setTimeout(() => {
@@ -77,6 +77,8 @@ export default class DevTools extends Emitter {
     return this._isShow ? this.hide() : this.show()
   }
   add(tool) {
+    const tab = this._tab
+
     if (!(tool instanceof Tool)) {
       const { init, show, hide, destroy } = new Tool()
       defaults(tool, { init, show, hide, destroy })
@@ -94,7 +96,17 @@ export default class DevTools extends Emitter {
     tool.active = false
     this._tools[name] = tool
 
-    this._navBar.add(name)
+    if (name === 'settings') {
+      tab.append({
+        id: name,
+        title: name,
+      })
+    } else {
+      tab.insert(tab.length - 1, {
+        id: name,
+        title: name,
+      })
+    }
 
     return this
   }
@@ -103,7 +115,7 @@ export default class DevTools extends Emitter {
 
     if (!tools[name]) return logger.warn(`Tool ${name} doesn't exist`)
 
-    this._navBar.remove(name)
+    this._tab.remove(name)
 
     const tool = tools[name]
     delete tools[name]
@@ -147,7 +159,7 @@ export default class DevTools extends Emitter {
     tool.active = true
     tool.show()
 
-    this._navBar.activateTool(name)
+    this._tab.select(name)
 
     this.emit('showTool', name, lastTool)
 
@@ -192,7 +204,7 @@ export default class DevTools extends Emitter {
   destroy() {
     evalCss.remove(this._style)
     this.removeAll()
-    this._navBar.destroy()
+    this._tab.destroy()
     this._$el.remove()
   }
   _setTheme(theme) {
@@ -223,10 +235,7 @@ export default class DevTools extends Emitter {
       c(`
       <div class="dev-tools">
         <div class="resizer"></div>
-        <div class="nav-bar-container">
-          <div class="nav-bar"></div>
-          <div class="bottom-bar"></div>
-        </div>
+        <div class="tab"></div>
         <div class="tools"></div>
         <div class="notification"></div>
         <div class="modal"></div>
@@ -237,9 +246,11 @@ export default class DevTools extends Emitter {
     this._$el = $container.find(c('.dev-tools'))
     this._$tools = this._$el.find(c('.tools'))
   }
-  _initNavBar() {
-    this._navBar = new NavBar(this._$el.find(c('.nav-bar-container')))
-    this._navBar.on('showTool', (name) => this.showTool(name))
+  _initTab() {
+    this._tab = new LunaTab(this._$el.find(c('.tab')).get(0), {
+      height: 40,
+    })
+    this._tab.on('select', (id) => this.showTool(id))
   }
   _initNotification() {
     this._notification = new LunaNotification(

src/DevTools/DevTools.scss

@@ -13,6 +13,7 @@
   padding-top: 40px !important;
   opacity: 0;
   transition: opacity $anim-duration;
+  border-top: 1px solid var(--border);
   .resizer {
     position: absolute;
     width: 100%;

src/DevTools/NavBar.js

@@ -1,102 +0,0 @@
-import Emitter from 'licia/Emitter'
-import $ from 'licia/$'
-import isNum from 'licia/isNum'
-import evalCss from '../lib/evalCss'
-import { classPrefix as c } from '../lib/util'
-
-export default class NavBar extends Emitter {
-  constructor($el) {
-    super()
-
-    this._style = evalCss(require('./NavBar.scss'))
-
-    this._$el = $el.find(c('.nav-bar'))
-    this._$bottomBar = $el.find(c('.bottom-bar'))
-    this._len = 0
-
-    this._bindEvent()
-  }
-  add(name) {
-    const $el = this._$el
-    this._len++
-
-    const $last = $el.find(c('.nav-bar-item')).last()
-    const html = `<div class="${c('nav-bar-item')}">${name}</div>`
-    if ($last.length > 0 && $last.text() === 'settings') {
-      $last.before(html)
-    } else {
-      $el.append(html)
-    }
-    this.resetBottomBar()
-  }
-  remove(name) {
-    this._len--
-    this._$el.find(c('.nav-bar-item')).each(function () {
-      const $this = $(this)
-      if ($this.text().toLowerCase() === name.toLowerCase()) $this.remove()
-    })
-    this.resetBottomBar()
-  }
-  activateTool(name) {
-    const self = this
-
-    this._$el.find(c('.nav-bar-item')).each(function () {
-      const $this = $(this)
-
-      if ($this.text() === name) {
-        $this.addClass(c('active'))
-        self.resetBottomBar()
-        self._scrollItemToView()
-      } else {
-        $this.rmClass(c('active'))
-      }
-    })
-  }
-  destroy() {
-    evalCss.remove(this._style)
-    this._$el.remove()
-  }
-  _scrollItemToView() {
-    const $el = this._$el
-    const li = $el.find(c('.active')).get(0)
-    const container = $el.get(0)
-
-    const itemLeft = li.offsetLeft
-    const itemWidth = li.offsetWidth
-    const containerWidth = container.offsetWidth
-    const scrollLeft = container.scrollLeft
-    let targetScrollLeft
-
-    if (itemLeft < scrollLeft) {
-      targetScrollLeft = itemLeft
-    } else if (itemLeft + itemWidth > containerWidth + scrollLeft) {
-      targetScrollLeft = itemLeft + itemWidth - containerWidth
-    }
-
-    if (!isNum(targetScrollLeft)) return
-
-    container.scrollLeft = targetScrollLeft
-  }
-  resetBottomBar() {
-    const $bottomBar = this._$bottomBar
-    const $el = this._$el
-
-    const li = $el.find(c('.active')).get(0)
-
-    if (!li) return
-
-    $bottomBar.css({
-      width: li.offsetWidth,
-      left: li.offsetLeft - $el.get(0).scrollLeft,
-    })
-  }
-  _bindEvent() {
-    const self = this
-
-    this._$el
-      .on('click', c('.nav-bar-item'), function () {
-        self.emit('showTool', $(this).text())
-      })
-      .on('scroll', () => this.resetBottomBar())
-  }
-}

src/DevTools/NavBar.scss

@@ -1,49 +0,0 @@
-@import '../style/variable';
-@import '../style/mixin';
-
-$height: 40px;
-
-.container {
-  .nav-bar-container {
-    @include absolute(100%, $height);
-    z-index: 100;
-    .nav-bar {
-      @include overflow-auto(x);
-      border-top: 1px solid var(--border);
-      border-bottom: 1px solid var(--border);
-      width: 100%;
-      height: 100%;
-      background: var(--darker-background);
-      font-size: 0;
-      white-space: nowrap;
-    }
-    .nav-bar-item {
-      cursor: pointer;
-      display: inline-block;
-      height: $height - 2;
-      line-height: $height - 2;
-      padding: 0 10px;
-      color: var(--foreground);
-      font-size: $font-size-s;
-      text-align: center;
-      text-transform: capitalize;
-      transition: all $anim-duration;
-      &:active {
-        background: var(--highlight);
-        color: var(--select-foreground);
-      }
-      &.active {
-        background: var(--highlight);
-        color: var(--select-foreground);
-      }
-    }
-    .bottom-bar {
-      transition: left $anim-duration, width $anim-duration;
-      height: 1px;
-      background: var(--accent);
-      position: absolute;
-      bottom: 0;
-      left: 0;
-    }
-  }
-}

src/Elements/Elements.scss

@@ -10,6 +10,7 @@
   }
   .parents {
     @include overflow-auto(x);
+    overflow-y: hidden;
     background: var(--darker-background);
     color: var(--primary);
     padding: 0 $padding;

src/eruda.js

@@ -210,6 +210,7 @@ export default {
       require('luna-data-grid/luna-data-grid.css') +
       require('luna-dom-viewer/luna-dom-viewer.css') +
       require('luna-modal/luna-modal.css') +
+      require('luna-tab/luna-tab.css') +
       require('./style/style.scss') +
       require('./style/icon.css')
     )

src/lib/cssMap.js

@@ -1,55 +0,0 @@
-module.exports = {
-  background: 'b',
-  'background-image': 'bi',
-  border: 'bo',
-  'border-bottom': 'bb',
-  'border-collapse': 'bc',
-  'border-left-color': 'blc',
-  'border-right': 'br',
-  'border-radius': 'bra',
-  'border-top': 'bt',
-  'border-top-color': 'btc',
-  'box-shadow': 'bs',
-  'box-sizing': 'bsi',
-  clear: 'cl',
-  color: 'c',
-  content: 'co',
-  cursor: 'cu',
-  display: 'd',
-  flex: 'fl',
-  'flex-shrink': 'fsh',
-  float: 'f',
-  'font-family': 'ff',
-  'font-size': 'fs',
-  'font-weight': 'fw',
-  height: 'h',
-  left: 'l',
-  'line-height': 'lh',
-  margin: 'm',
-  'margin-bottom': 'mb',
-  'margin-left': 'ml',
-  'margin-top': 'mt',
-  'min-height': 'mh',
-  outline: 'ou',
-  overflow: 'o',
-  'overflow-x': 'ox',
-  'overflow-y': 'oy',
-  padding: 'p',
-  'padding-bottom': 'pb',
-  'padding-left': 'pl',
-  'padding-top': 'pt',
-  'pointer-events': 'pe',
-  position: 'po',
-  'text-align': 'ta',
-  'text-transform': 'tt',
-  top: 't',
-  transition: 'tr',
-  'user-select': 'us',
-  'vertical-aligin': 'va',
-  visibility: 'v',
-  width: 'w',
-  'will-change': 'wc',
-  'white-space': 'ws',
-  '-webkit-overflow-scrolling': 'wos',
-  'z-index': 'z',
-}

src/lib/evalCss.js

@@ -5,9 +5,7 @@ import isStr from 'licia/isStr'
 import keys from 'licia/keys'
 import kebabCase from 'licia/kebabCase'
 import defaults from 'licia/defaults'
-import escapeRegExp from 'licia/escapeRegExp'
 import themes from './themes'
-import cssMap from './cssMap'
 
 let styleList = []
 let scale = 1
@@ -71,9 +69,6 @@ function resetStyles() {
 function resetStyle({ css, el }) {
   css = css.replace(/(\d+)px/g, ($0, $1) => +$1 * scale + 'px')
   css = css.replace(/_/g, 'eruda-')
-  each(cssMap, (val, key) => {
-    css = css.replace(new RegExp(escapeRegExp(`$${val}:`), 'g'), key + ':')
-  })
   const _keys = keys(themes.Light)
   each(_keys, (key) => {
     css = css.replace(

src/style/luna.scss

@@ -132,6 +132,12 @@
   border-top-color: transparent;
   border-left-color: var(--foreground);
 }
+.luna-object-viewer-icon-caret-right {
+  top: 0;
+}
+.luna-object-viewer-icon-caret-down {
+  top: 1px;
+}
 
 .luna-notification {
   pointer-events: none !important;
@@ -244,6 +250,7 @@
 }
 
 .luna-modal-input {
+  user-select: text !important;
   border-color: var(--border);
 }
 
@@ -264,3 +271,27 @@
     }
   }
 }
+
+.luna-tab {
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: var(--foreground);
+  background: var(--darker-background);
+}
+
+.luna-tab-tabs-container {
+  border-color: var(--border);
+}
+
+.luna-tab-item {
+  &.luna-tab-selected,
+  &:hover {
+    background: var(--highlight);
+    color: var(--select-foreground);
+  }
+}
+
+.luna-tab-slider {
+  background: var(--accent);
+}