From 0fb1f11976d7d2f82e56353e40d2dc7324819d4e Mon Sep 17 00:00:00 2001
From: redhoodsu <redhoodsu@tencent.com>
Date: Fri, 12 Jul 2024 16:42:40 +0800
Subject: [PATCH] feat: inline mode

---
 src/DevTools/DevTools.js | 37 ++++++++++++++++++++++++++-----------
 src/eruda.js             |  5 +++--
 src/style/style.scss     |  3 ---
 3 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/DevTools/DevTools.js b/src/DevTools/DevTools.js
index 9eda665fc..120f252df 100644
--- a/src/DevTools/DevTools.js
+++ b/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()
diff --git a/src/eruda.js b/src/eruda.js
index a02a974c6..c534ba5b2 100644
--- a/src/eruda.js
+++ b/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() {
diff --git a/src/style/style.scss b/src/style/style.scss
index 6dc292781..e52c25dbc 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -45,9 +45,6 @@
   }
   &.inline {
     position: static;
-    .dev-tools {
-      height: 100% !important;
-    }
   }
 }