feat: inline mode

src/DevTools/DevTools.js

@@ -30,7 +30,7 @@ import {
 } from '../lib/util'
 
 export default class DevTools extends Emitter {
-  constructor($container, { defaults = {} } = {}) {
+  constructor($container, { defaults = {}, inline = false } = {}) {
     super()
 
     this._defCfg = extend(
@@ -52,6 +52,7 @@ export default class DevTools extends Emitter {
     this._resizeTimer = null
     this._resizeStartY = 0
     this._resizeStartSize = 0
+    this._inline = inline
 
     this._initTpl()
     this._initTab()
@@ -201,16 +202,22 @@ export default class DevTools extends Emitter {
         'System preference',
         ...keys(evalCss.getThemes()),
       ])
-      .range(cfg, 'transparency', 'Transparency', {
-        min: 0.2,
-        max: 1,
-        step: 0.01,
-      })
-      .range(cfg, 'displaySize', 'Display Size', {
-        min: 40,
-        max: 100,
-        step: 1,
-      })
+
+    if (!this._inline) {
+      settings
+        .range(cfg, 'transparency', 'Transparency', {
+          min: 0.2,
+          max: 1,
+          step: 0.01,
+        })
+        .range(cfg, 'displaySize', 'Display Size', {
+          min: 40,
+          max: 100,
+          step: 1,
+        })
+    }
+
+    settings
       .button('Restore defaults and reload', function () {
         const store = safeStorage('local')
 
@@ -270,6 +277,10 @@ export default class DevTools extends Emitter {
     if (this._isShow) this._$el.css({ opacity })
   }
   _setDisplaySize(height) {
+    if (this._inline) {
+      height = 100
+    }
+
     if (!isNum(height)) return
 
     this._$el.css({ height: height + '%' })
@@ -323,6 +334,10 @@ export default class DevTools extends Emitter {
     const $navBar = this._$el.find(c('.nav-bar'))
     const $document = $(document)
 
+    if (this._inline) {
+      $resizer.hide()
+    }
+
     const startListener = (e) => {
       e.preventDefault()
       e.stopPropagation()

src/eruda.js

@@ -48,7 +48,7 @@ export default {
 
     this._initContainer(container, useShadowDom)
     this._initStyle()
-    this._initDevTools(defaults)
+    this._initDevTools(defaults, inline)
     this._initEntryBtn()
     this._initSettings()
     this._initTools(tool)
@@ -239,9 +239,10 @@ export default {
 
     this._$el = $(el)
   },
-  _initDevTools(defaults) {
+  _initDevTools(defaults, inline) {
     this._devTools = new DevTools(this._$el, {
       defaults,
+      inline,
     })
   },
   _initStyle() {

src/style/style.scss

@@ -45,9 +45,6 @@
   }
   &.inline {
     position: static;
-    .dev-tools {
-      height: 100% !important;
-    }
   }
 }