release: v2.7.3

CHANGELOG.md

@@ -1,3 +1,15 @@
+## 2.7.3 (8 Dec 2022)
+
+* fix: remove tabs horizontal scrollbar #236
+
+## 2.7.2 (7 Dec 2022)
+
+* fix: luna modal style
+
+## 2.7.1 (7 Dec 2022)
+
+* fix: remove debug log
+
 ## 2.7.0 (7 Dec 2022)
 
 * feat: drag to resize

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/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(),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eruda",
-  "version": "2.7.0",
+  "version": "2.7.3",
   "description": "Console for Mobile Browsers",
   "main": "eruda.js",
   "browserslist": [
@@ -68,12 +68,13 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^5.0.0",
     "licia": "^1.37.0",
-    "luna-console": "^1.1.1",
+    "luna-console": "^1.1.2",
     "luna-data-grid": "^0.2.1",
     "luna-dom-viewer": "^1.0.2",
-    "luna-modal": "^0.1.1",
+    "luna-modal": "^0.1.2",
     "luna-notification": "^0.1.4",
     "luna-object-viewer": "^0.2.2",
+    "luna-tab": "^0.1.0",
     "node-sass": "^7.0.1",
     "postcss-clean": "^1.1.0",
     "postcss-loader": "^3.0.0",

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'
@@ -16,6 +15,8 @@ import extend from 'licia/extend'
 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 {
@@ -43,15 +44,16 @@ export default class DevTools extends Emitter {
     this._resizeStartSize = 0
 
     this._appendTpl()
-    this._initNavBar()
+    this._initTab()
     this._initNotification()
+    this._initModal()
     this._bindEvent()
   }
   show() {
     this._isShow = true
 
     this._$el.show()
-    this._navBar.resetBottomBar()
+    this._tab.updateSlider()
 
     // Need a delay after show to enable transition effect.
     setTimeout(() => {
@@ -75,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 })
@@ -92,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
   }
@@ -101,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]
@@ -145,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)
 
@@ -190,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) {
@@ -221,12 +235,10 @@ 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>
       </div>
       `)
     )
@@ -234,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(
@@ -249,6 +263,9 @@ export default class DevTools extends Emitter {
       }
     )
   }
+  _initModal() {
+    LunaModal.setContainer(this._$el.find(c('.modal')).get(0))
+  }
   _bindEvent() {
     const $resizer = this._$el.find(c('.resizer'))
     const $navBar = this._$el.find(c('.nav-bar'))

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/eruda.js

@@ -194,9 +194,6 @@ export default {
     const className = 'eruda-style-container'
     const $el = this._$el
 
-    evalCss.container = document.head
-    evalCss(require('luna-modal/luna-modal.css'))
-
     if (this._shadowRoot) {
       evalCss.container = this._shadowRoot
       evalCss(':host { all: initial }')
@@ -212,6 +209,8 @@ export default {
       require('luna-notification/luna-notification.css') + 
       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/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,18 +250,17 @@
 }
 
 .luna-modal-input {
+  user-select: text !important;
   border-color: var(--border);
 }
 
 .luna-modal-button-group {
   .luna-modal-secondary {
-    overflow: hidden;
     border-color: var(--border);
     color: var(--foreground);
     background: var(--background);
   }
   .luna-modal-primary {
-    overflow: hidden;
     background: var(--accent);
   }
   .luna-modal-button {
@@ -266,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);
+}