feat: inline mode

src/Console/Console.js

@@ -248,7 +248,7 @@ export default class Console extends Tool {
       })
       .on('click', c('.copy'), () => {
         this._selectedLog.copy()
-        container.notify('Copied')
+        container.notify('Copied', { icon: 'success' })
       })
 
     $inputBtns

src/DevTools/DevTools.js

@@ -78,6 +78,10 @@ export default class DevTools extends Emitter {
     return this
   }
   hide() {
+    if (this._inline) {
+      return
+    }
+
     this._isShow = false
     this.emit('hide')
 

src/Elements/Detail.js

@@ -319,7 +319,7 @@ export default class Detail {
       .on('click', c('.back'), this.hide)
       .on('click', c('.refresh'), () => {
         this._render()
-        devtools.notify('Refreshed')
+        devtools.notify('Refreshed', { icon: 'success' })
       })
   }
   _initObserver() {

src/Elements/Elements.js

@@ -229,7 +229,7 @@ export default class Elements extends Tool {
       copy(node.nodeValue)
     }
 
-    this._container.notify('Copied')
+    this._container.notify('Copied', { icon: 'success' })
   }
   _toggleSelect = () => {
     this._$el.find(c('.select')).toggleClass(c('active'))
@@ -261,8 +261,11 @@ export default class Elements extends Tool {
   _inspectNodeRequested = ({ backendNodeId }) => {
     this._container.show()
     this._toggleSelect()
-    const { node } = chobitsu.domain('DOM').getNode({ nodeId: backendNodeId })
-    this.select(node)
+    try {
+      const { node } = chobitsu.domain('DOM').getNode({ nodeId: backendNodeId })
+      this.select(node)
+      /* eslint-disable no-empty */
+    } catch (e) {}
   }
   _setNode = (node) => {
     if (node === this._curNode) return

src/Info/Info.js

@@ -112,7 +112,7 @@ export default class Info extends Tool {
       const name = $li.find(c('.title')).text()
       const content = $li.find(c('.content')).text()
       copy(`${name}: ${content}`)
-      container.notify('Copied')
+      container.notify('Copied', { icon: 'success' })
     })
   }
   _renderHtml(html) {

src/Network/Detail.js

@@ -118,7 +118,7 @@ export default class Detail extends Emitter {
     }
 
     copy(data)
-    this._devtools.notify('Copied')
+    this._devtools.notify('Copied', { icon: 'success' })
   }
   _bindEvent() {
     const devtools = this._devtools

src/Network/Network.js

@@ -232,7 +232,7 @@ export default class Network extends Tool {
       })
     )
 
-    this._container.notify('Copied')
+    this._container.notify('Copied', { icon: 'success' })
   }
   _updateButtons() {
     const $control = this._$control

src/Resources/Cookie.js

@@ -126,7 +126,7 @@ export default class Cookie {
 
     this._$container
       .on('click', c('.refresh-cookie'), () => {
-        devtools.notify('Refreshed')
+        devtools.notify('Refreshed', { icon: 'success' })
         this.refresh()
       })
       .on('click', c('.clear-cookie'), () => {
@@ -154,7 +154,7 @@ export default class Cookie {
       .on('click', c('.copy-cookie'), () => {
         const key = this._selectedItem
         copy(this._getVal(key))
-        devtools.notify('Copied')
+        devtools.notify('Copied', { icon: 'success' })
       })
       .on('click', c('.filter'), () => {
         LunaModal.prompt('Filter').then((filter) => {

src/Resources/Resources.js

@@ -291,19 +291,19 @@ export default class Resources extends Tool {
 
     $el
       .on('click', '.eruda-refresh-script', () => {
-        container.notify('Refreshed')
+        container.notify('Refreshed', { icon: 'success' })
         this.refreshScript()
       })
       .on('click', '.eruda-refresh-stylesheet', () => {
-        container.notify('Refreshed')
+        container.notify('Refreshed', { icon: 'success' })
         this.refreshStylesheet()
       })
       .on('click', '.eruda-refresh-iframe', () => {
-        container.notify('Refreshed')
+        container.notify('Refreshed', { icon: 'success' })
         this.refreshIframe()
       })
       .on('click', '.eruda-refresh-image', () => {
-        container.notify('Refreshed')
+        container.notify('Refreshed', { icon: 'success' })
         this.refreshImage()
       })
       .on('click', '.eruda-img-link', function () {

src/Resources/Storage.js

@@ -155,7 +155,7 @@ export default class Storage {
 
     this._$container
       .on('click', c('.refresh-storage'), () => {
-        devtools.notify('Refreshed')
+        devtools.notify('Refreshed', { icon: 'success' })
         this.refresh()
       })
       .on('click', c('.clear-storage'), () => {
@@ -181,7 +181,7 @@ export default class Storage {
       .on('click', c('.copy-storage'), () => {
         const key = this._selectedItem
         copy(this._getVal(key))
-        devtools.notify('Copied')
+        devtools.notify('Copied', { icon: 'success' })
       })
       .on('click', c('.filter'), () => {
         LunaModal.prompt('Filter').then((filter) => {

src/eruda.js

@@ -215,7 +215,8 @@ export default {
             require('luna-console/luna-console.css') +
             require('luna-object-viewer/luna-object-viewer.css') +
             require('luna-dom-viewer/luna-dom-viewer.css') +
-            require('luna-text-viewer/luna-text-viewer.css')
+            require('luna-text-viewer/luna-text-viewer.css') +
+            require('luna-notification/luna-notification.css')
         )
 
         el = document.createElement('div')

src/style/luna.scss

@@ -276,6 +276,13 @@
   padding-left: 15px !important;
 }
 
+.inline {
+  .luna-modal,
+  .luna-notification {
+    position: absolute;
+  }
+}
+
 .luna-modal {
   z-index: 9999999;
 }

test/inline.html

@@ -16,7 +16,7 @@
     <script>
       const content = document.createElement('div')
       const win = new LunaWindow({
-        title: 'Window Title',
+        title: 'DevTools',
         x: 50,
         y: 50,
         width: window.innerWidth - 100,