refactor(resources): cookie

liriliri · Jan 9, 2023 · 00396ec · 00396ec
1 parent 7f1c5bd
commit 00396ec
Show file tree

Hide file tree

Showing 11 changed files with 164 additions and 152 deletions.
diff --git a/build/webpack.analyser.js b/build/webpack.analyser.js
@@ -1,5 +1,5 @@
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
-  .BundleAnalyzerPlugin
+const BundleAnalyzerPlugin =
+  require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
 exports = require('./webpack.prod')
 

diff --git a/src/Elements/Detail.js b/src/Elements/Detail.js
@@ -181,7 +181,7 @@ export default class Detail {
           </div>
           ${
             data.computedStyleSearchKeyword
-              ? `<div class="${c('btn search-keyword')}">${escape(
+              ? `<div class="${c('btn filter-text')}">${escape(
                   data.computedStyleSearchKeyword
                 )}</div>`
               : ''

diff --git a/src/Elements/Elements.scss b/src/Elements/Elements.scss
@@ -91,6 +91,7 @@
       background: var(--darker-background);
       border-top: 1px solid var(--border);
       padding: $padding;
+      line-height: 18px;
       font-size: $font-size;
       transition: background-color $anim-duration;
       &.active-effect {

diff --git a/src/Network/Network.scss b/src/Network/Network.scss
@@ -95,6 +95,7 @@
           background: var(--darker-background);
           color: var(--primary);
           padding: $padding;
+          line-height: 18px;
           font-size: $font-size;
         }
         margin-top: 10px;

diff --git a/src/Resources/Cookie.js b/src/Resources/Cookie.js
@@ -0,0 +1,107 @@
+import map from 'licia/map'
+import isEmpty from 'licia/isEmpty'
+import $ from 'licia/$'
+import trim from 'licia/trim'
+import isNull from 'licia/isNull'
+import escape from 'licia/escape'
+import LunaModal from 'luna-modal'
+import { setState, getState, filterData } from './util'
+import chobitsu from '../lib/chobitsu'
+import { classPrefix as c } from '../lib/util'
+
+export default class Cookie {
+  constructor($container, devtools) {
+    this._$container = $container
+    this._devtools = devtools
+    this._filter = ''
+
+    this._bindEvent()
+  }
+  refresh() {
+    const $container = this._$container
+    const filter = this._filter
+
+    const { cookies } = chobitsu.domain('Network').getCookies()
+    let cookieData = map(cookies, ({ name, value }) => ({
+      key: name,
+      val: value,
+    }))
+
+    cookieData = filterData(cookieData, filter)
+    const cookieState = getState('cookie', cookieData.length)
+
+    let cookieDataHtml = '<tr><td>Empty</td></tr>'
+    if (!isEmpty(cookieData)) {
+      cookieDataHtml = map(cookieData, ({ key, val }) => {
+        key = escape(key)
+
+        return `<tr>
+          <td class="${c('key')}">${key}</td>
+          <td>${escape(val)}</td>
+          <td class="${c('control')}">
+            <span class="${c(
+              'icon-delete delete-cookie'
+            )}" data-key="${key}"></span>
+          </td>
+        </tr>`
+      }).join('')
+    }
+
+    setState($container, cookieState)
+
+    $container.html(`<h2 class="${c('title')}">
+      Cookie
+      <div class="${c('btn refresh-cookie')}">
+        <span class="${c('icon-refresh')}"></span>
+      </div>
+      <div class="${c('btn clear-cookie')}">
+        <span class="${c('icon-clear')}"></span>
+      </div>
+      <div class="${c('btn filter')}" data-type="cookie">
+        <span class="${c('icon-filter')}"></span>
+      </div>
+      ${
+        filter
+          ? `<div class="${c('btn filter-text')}">${escape(filter)}</div>`
+          : ''
+      }
+    </h2>
+    <div class="${c('content')}">
+      <table>
+        <tbody>
+          ${cookieDataHtml}
+        </tbody>
+      </table>
+    </div>`)
+  }
+  _bindEvent() {
+    const devtools = this._devtools
+    const self = this
+
+    this._$container
+      .on('click', c('.refresh-cookie'), () => {
+        devtools.notify('Refreshed')
+        this.refresh()
+      })
+      .on('click', c('.clear-cookie'), () => {
+        chobitsu.domain('Storage').clearDataForOrigin({
+          storageTypes: 'cookies',
+        })
+        this.refresh()
+      })
+      .on('click', c('.delete-cookie'), function () {
+        const key = $(this).data('key')
+
+        chobitsu.domain('Network').deleteCookies({ name: key })
+        self.refresh()
+      })
+      .on('click', c('.filter'), () => {
+        LunaModal.prompt('Filter').then((filter) => {
+          if (isNull(filter)) return
+          filter = trim(filter)
+          this._filter = filter
+          this.refresh()
+        })
+      })
+  }
+}
diff --git a/src/Resources/Resources.js b/src/Resources/Resources.js
@@ -5,20 +5,17 @@ import escape from 'licia/escape'
 import isEmpty from 'licia/isEmpty'
 import unique from 'licia/unique'
 import each from 'licia/each'
-import trim from 'licia/trim'
 import sameOrigin from 'licia/sameOrigin'
 import ajax from 'licia/ajax'
 import MutationObserver from 'licia/MutationObserver'
 import toArr from 'licia/toArr'
 import concat from 'licia/concat'
-import isNull from 'licia/isNull'
 import map from 'licia/map'
 import { isErudaEl, classPrefix as c } from '../lib/util'
 import evalCss from '../lib/evalCss'
-import chobitsu from '../lib/chobitsu'
-import LunaModal from 'luna-modal'
 import Storage from './Storage'
-import { filterData } from './util'
+import Cookie from './Cookie'
+import { setState, getState } from './util'
 
 export default class Resources extends Tool {
   constructor() {
@@ -27,12 +24,7 @@ export default class Resources extends Tool {
     this._style = evalCss(require('./Resources.scss'))
 
     this.name = 'resources'
-    this._localStoreData = []
-    this._localStoreSearchKeyword = ''
     this._hideErudaSetting = false
-    this._sessionStoreData = []
-    this._sessionStoreSearchKeyword = ''
-    this._cookieSearchKeyword = ''
     this._observeElement = true
   }
   init($el, container) {
@@ -53,6 +45,7 @@ export default class Resources extends Tool {
       this,
       'session'
     )
+    this._cookie = new Cookie(this._$cookie, container)
 
     this._bindEvent()
     this._initObserver()
@@ -196,63 +189,7 @@ export default class Resources extends Tool {
     return this
   }
   refreshCookie() {
-    const { cookies } = chobitsu.domain('Network').getCookies()
-    let cookieData = map(cookies, ({ name, value }) => ({
-      key: name,
-      val: value,
-    }))
-
-    const cookieSearchKeyword = this._cookieSearchKeyword
-    cookieData = filterData(cookieData, cookieSearchKeyword)
-    const cookieState = getState('cookie', cookieData.length)
-
-    let cookieDataHtml = '<tr><td>Empty</td></tr>'
-    if (!isEmpty(cookieData)) {
-      cookieDataHtml = map(cookieData, ({ key, val }) => {
-        key = escape(key)
-
-        return `<tr>
-          <td class="${c('key')}">${key}</td>
-          <td>${escape(val)}</td>
-          <td class="${c('control')}">
-            <span class="${c(
-              'icon-delete delete-cookie'
-            )}" data-key="${key}"></span>
-          </td>
-        </tr>`
-      }).join('')
-    }
-
-    const cookieHtml = `<h2 class="${c('title')}">
-      Cookie
-      <div class="${c('btn refresh-cookie')}">
-        <span class="${c('icon-refresh')}"></span>
-      </div>
-      <div class="${c('btn clear-cookie')}">
-        <span class="${c('icon-clear')}"></span>
-      </div>
-      <div class="${c('btn search')}" data-type="cookie">
-        <span class="${c('icon-filter')}"></span>
-      </div>
-      ${
-        cookieSearchKeyword
-          ? `<div class="${c('btn search-keyword')}">${escape(
-              cookieSearchKeyword
-            )}</div>`
-          : ''
-      }
-    </h2>
-    <div class="${c('content')}">
-      <table>
-        <tbody>
-          ${cookieDataHtml}
-        </tbody>
-      </table>
-    </div>`
-
-    const $cookie = this._$cookie
-    setState($cookie, cookieState)
-    $cookie.html(cookieHtml)
+    this._cookie.refresh()
 
     return this
   }
@@ -323,7 +260,6 @@ export default class Resources extends Tool {
   }
   _initTpl() {
     const $el = this._$el
-    console.log('init tpl')
     $el.html(
       c(`<div class="section local-storage"></div>
       <div class="section session-storage"></div>
@@ -342,15 +278,10 @@ export default class Resources extends Tool {
     this._$image = $el.find(c('.image'))
   }
   _bindEvent() {
-    const self = this
     const $el = this._$el
     const container = this._container
 
     $el
-      .on('click', '.eruda-refresh-cookie', () => {
-        container.notify('Refreshed')
-        this.refreshCookie()
-      })
       .on('click', '.eruda-refresh-script', () => {
         container.notify('Refreshed')
         this.refreshScript()
@@ -367,33 +298,6 @@ export default class Resources extends Tool {
         container.notify('Refreshed')
         this.refreshImage()
       })
-      .on('click', '.eruda-search', function () {
-        const $this = $(this)
-        const type = $this.data('type')
-
-        LunaModal.prompt('Filter').then((filter) => {
-          if (isNull(filter)) return
-          filter = trim(filter)
-          switch (type) {
-            case 'cookie':
-              self._cookieSearchKeyword = filter
-              self.refreshCookie()
-              break
-          }
-        })
-      })
-      .on('click', '.eruda-delete-cookie', function () {
-        const key = $(this).data('key')
-
-        chobitsu.domain('Network').deleteCookies({ name: key })
-        self.refreshCookie()
-      })
-      .on('click', '.eruda-clear-cookie', () => {
-        chobitsu.domain('Storage').clearDataForOrigin({
-          storageTypes: 'cookies',
-        })
-        this.refreshCookie()
-      })
       .on('click', '.eruda-img-link', function () {
         const src = $(this).attr('src')
 
@@ -523,45 +427,6 @@ export default class Resources extends Tool {
   }
 }
 
-function setState($el, state) {
-  $el
-    .rmClass(c('ok'))
-    .rmClass(c('danger'))
-    .rmClass(c('warn'))
-    .addClass(c(state))
-}
-
-function getState(type, len) {
-  if (len === 0) return ''
-
-  let warn = 0
-  let danger = 0
-
-  switch (type) {
-    case 'cookie':
-      warn = 30
-      danger = 60
-      break
-    case 'script':
-      warn = 5
-      danger = 10
-      break
-    case 'stylesheet':
-      warn = 4
-      danger = 8
-      break
-    case 'image':
-      warn = 50
-      danger = 100
-      break
-  }
-
-  if (len >= danger) return 'danger'
-  if (len >= warn) return 'warn'
-
-  return 'ok'
-}
-
 function getLowerCaseTagName(el) {
   if (!el.tagName) return ''
   return el.tagName.toLowerCase()

diff --git a/src/Resources/Resources.scss b/src/Resources/Resources.scss
@@ -31,6 +31,7 @@
   .title {
     @include right-btn();
     padding: $padding;
+    line-height: 18px;
     color: var(--primary);
     background: var(--darker-background);
   }

diff --git a/src/Resources/Storage.js b/src/Resources/Storage.js
@@ -59,7 +59,7 @@ export default class Storage {
       </div>
       ${
         filter
-          ? `<div class="${c('btn search-keyword')}">${escape(filter)}</div>`
+          ? `<div class="${c('btn filter-text')}">${escape(filter)}</div>`
           : ''
       }
     </h2>
@@ -134,12 +134,12 @@ export default class Storage {
           showSources('raw', val)
         }
       })
-      .on('click', c('.filter'), function () {
+      .on('click', c('.filter'), () => {
         LunaModal.prompt('Filter').then((filter) => {
           if (isNull(filter)) return
           filter = trim(filter)
-          self._filter = filter
-          self.refresh()
+          this._filter = filter
+          this.refresh()
         })
       })
       .on('click', c('.delete-storage'), function () {