release: v3.3.0

CHANGELOG.md

@@ -1,3 +1,11 @@
+## 3.3.0 (9 Sep 2024)
+
+* feat: add vue devtools plugin
+
+## 3.2.3 (10 AUG 2024)
+
+* fix: WebSocket message base64 encoded [#447](https://github.com/liriliri/eruda/issues/447)
+
 ## 3.2.2 (8 AUG 2024)
 
 * chore: update plugin versions

README.md

@@ -29,11 +29,11 @@ Console for Mobile Browsers.
 [license-image]: https://img.shields.io/npm/l/eruda?style=flat-square
 [donate-image]: https://img.shields.io/badge/$-donate-0070ba.svg?style=flat-square
 
-<img src="https://eruda.liriliri.io/img/screenshot.jpg" style="width:100%">
+<img src="https://eruda.liriliri.io/screenshot.jpg" style="width:100%">
 
 ## Demo
 
-![Demo](https://eruda.liriliri.io/img/qrcode.png)
+![Demo](https://eruda.liriliri.io/qrcode.png)
 
 Browse it on your phone: [https://eruda.liriliri.io/](https://eruda.liriliri.io/)
 
@@ -71,7 +71,7 @@ Add this script to your page.
 It's also available on [jsDelivr](http://www.jsdelivr.com/projects/eruda) and [cdnjs](https://cdnjs.com/libraries/eruda).
 
 ```html
-<script src="//cdn.jsdelivr.net/npm/eruda"></script>
+<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
 <script>eruda.init();</script>
 ```
 
@@ -124,6 +124,7 @@ eruda.init({
 * [eruda-geolocation](https://github.com/liriliri/eruda-geolocation): Test geolocation.
 * [eruda-orientation](https://github.com/liriliri/eruda-orientation): Test orientation api.
 * [eruda-touches](https://github.com/liriliri/eruda-touches): Visualize screen touches.
+* [eruda-vue](https://github.com/liriliri/eruda-vue): Vue devtools.
 
 If you want to create a plugin yourself, follow the guides [here](https://eruda.liriliri.io/docs/plugin.html).
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eruda",
-  "version": "3.2.2",
+  "version": "3.3.0",
   "description": "Console for Mobile Browsers",
   "main": "eruda.js",
   "browserslist": [
@@ -45,7 +45,7 @@
     "autoprefixer": "^9.7.4",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.5",
-    "chobitsu": "^1.4.6",
+    "chobitsu": "^1.5.1",
     "core-js": "^3.37.1",
     "css-loader": "^3.4.2",
     "es-check": "^6.2.1",
@@ -62,7 +62,7 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^5.0.0",
     "licia": "^1.41.0",
-    "luna-box-model": "^0.1.0",
+    "luna-box-model": "^1.0.0",
     "luna-console": "^1.3.4",
     "luna-data-grid": "^0.6.0",
     "luna-dom-viewer": "^1.3.0",

src/Elements/Detail.js

@@ -17,6 +17,7 @@ import isBool from 'licia/isBool'
 import safeGet from 'licia/safeGet'
 import $ from 'licia/$'
 import h from 'licia/h'
+import extend from 'licia/extend'
 import MutationObserver from 'licia/MutationObserver'
 import CssStore from './CssStore'
 import Settings from '../Settings/Settings'
@@ -31,10 +32,10 @@ export default class Detail {
     this._$container = $container
     this._devtools = devtools
     this._curEl = document.documentElement
-    this._bindEvent()
     this._initObserver()
     this._initCfg()
     this._initTpl()
+    this._bindEvent()
   }
   show(el) {
     this._curEl = el
@@ -42,18 +43,7 @@ export default class Detail {
     this._computedStyleSearchKeyword = ''
     this._enableObserver()
     this._render()
-
-    const { nodeId } = chobitsu.domain('DOM').getNodeId({ node: el })
-    chobitsu.domain('Overlay').highlightNode({
-      nodeId,
-      highlightConfig: {
-        showInfo: true,
-        contentColor: 'rgba(111, 168, 220, .66)',
-        paddingColor: 'rgba(147, 196, 125, .55)',
-        borderColor: 'rgba(255, 229, 153, .66)',
-        marginColor: 'rgba(246, 178, 107, .66)',
-      },
-    })
+    this._highlight()
   }
   hide = () => {
     this._$container.hide()
@@ -87,6 +77,36 @@ export default class Detail {
     if (this._origAddEvent) winEventProto.addEventListener = this._origAddEvent
     if (this._origRmEvent) winEventProto.removeEventListener = this._origRmEvent
   }
+  _highlight = (type) => {
+    const el = this._curEl
+
+    const highlightConfig = {
+      showInfo: false,
+    }
+    if (!type || type === 'all') {
+      extend(highlightConfig, {
+        showInfo: true,
+        contentColor: 'rgba(111, 168, 220, .66)',
+        paddingColor: 'rgba(147, 196, 125, .55)',
+        borderColor: 'rgba(255, 229, 153, .66)',
+        marginColor: 'rgba(246, 178, 107, .66)',
+      })
+    } else if (type === 'margin') {
+      highlightConfig.marginColor = 'rgba(246, 178, 107, .66)'
+    } else if (type === 'border') {
+      highlightConfig.borderColor = 'rgba(255, 229, 153, .66)'
+    } else if (type === 'padding') {
+      highlightConfig.paddingColor = 'rgba(147, 196, 125, .55)'
+    } else if (type === 'content') {
+      highlightConfig.contentColor = 'rgba(111, 168, 220, .66)'
+    }
+
+    const { nodeId } = chobitsu.domain('DOM').getNodeId({ node: el })
+    chobitsu.domain('Overlay').highlightNode({
+      nodeId,
+      highlightConfig,
+    })
+  }
   _initTpl() {
     const $container = this._$container
 
@@ -321,6 +341,8 @@ export default class Detail {
         this._render()
         devtools.notify('Refreshed', { icon: 'success' })
       })
+
+    this._boxModel.on('highlight', this._highlight)
   }
   _initObserver() {
     this._observer = new MutationObserver((mutations) => {

src/Resources/Resources.js

@@ -230,11 +230,10 @@ export default class Resources extends Tool {
     const imageState = getState('image', imageData.length)
     let imageDataHtml = '<li>Empty</li>'
     if (!isEmpty(imageData)) {
+      // prettier-ignore
       imageDataHtml = map(imageData, (image) => {
         return `<li class="${c('image')}">
-          <img src="${escape(image)}" data-exclude="true" class="${c(
-          'img-link'
-        )}"/>
+          <img src="${escape(image)}" data-exclude="true" class="${c('img-link')}"/>
         </li>`
       }).join('')
     }

src/Resources/Resources.scss

@@ -56,12 +56,19 @@
     font-size: $font-size-s;
     display: flex;
     flex-wrap: wrap;
-    padding: $padding !important;
-    @include clear-float();
+    padding-left: $padding;
+    padding-top: $padding;
+    &::after {
+      content: '';
+      flex-grow: 1000;
+    }
     li {
       flex-grow: 1;
       cursor: pointer;
       overflow-y: hidden;
+      margin-right: $padding;
+      margin-bottom: $padding;
+      border: 1px solid var(--border);
       &.image {
         height: 100px;
         font-size: 0;

src/Snippets/defSnippets.js

@@ -93,6 +93,13 @@ export default [
     },
     desc: 'Scale down the whole page to fit screen',
   },
+  {
+    name: 'Load Vue Plugin',
+    fn() {
+      loadPlugin('vue')
+    },
+    desc: 'Vue devtools',
+  },
   {
     name: 'Load Monitor Plugin',
     fn() {
@@ -225,4 +232,5 @@ const pluginVersion = {
   geolocation: '2.1.0',
   orientation: '2.1.1',
   touches: '2.1.0',
+  vue: '1.1.1',
 }

src/style/luna.scss

@@ -449,9 +449,14 @@
 }
 
 .luna-box-model {
-  background: transparent;
+  background: var(--background);
 }
 
-.luna-box-model-position {
+.luna-box-model-position,
+.luna-box-model-margin,
+.luna-box-model-border,
+.luna-box-model-padding,
+.luna-box-model-content {
   color: var(--foreground);
+  background: var(--background);
 }