liriliri / eruda
Showing 2 of 6 files from the diff.

@@ -1,157 +1,33 @@
Loading
1 -
import { $, isStr, each, trim } from '../lib/util'
2 -
import { pxToNum } from '../lib/fione'
3 -
import evalCss from '../lib/evalCss'
1 +
import chobitsu from 'chobitsu'
4 2
5 3
export default class Highlight {
6 -
  constructor($container) {
7 -
    this._style = evalCss(require('./Highlight.scss'))
8 -
4 +
  constructor() {
9 5
    this._isShow = false
10 6
11 -
    this._appendTpl($container)
12 -
    this._bindEvent()
7 +
    chobitsu.domain('Overlay').enable()
13 8
  }
14 9
  setEl(el) {
15 -
    this._$target = $(el)
16 10
    this._target = el
17 11
  }
18 12
  show() {
19 13
    this._isShow = true
20 -
    this.render()
21 -
    this._$el.show()
14 +
    const { nodeId } = chobitsu.domain('DOM').getNodeId({ node: this._target })
15 +
    chobitsu.domain('Overlay').highlightNode({
16 +
      nodeId,
17 +
      highlightConfig: {
18 +
        showInfo: true,
19 +
        contentColor: 'rgba(111, 168, 220, .66)',
20 +
        paddingColor: 'rgba(147, 196, 125, .55)',
21 +
        borderColor: 'rgba(255, 229, 153, .66)',
22 +
        marginColor: 'rgba(246, 178, 107, .66)',
23 +
      },
24 +
    })
22 25
  }
23 26
  destroy() {
24 -
    evalCss.remove(this._style)
27 +
    chobitsu.domain('Overlay').disable()
25 28
  }
26 29
  hide() {
27 30
    this._isShow = false
28 -
    this._$el.hide()
29 -
  }
30 -
  render() {
31 -
    const { left, width, top, height } = this._$target.offset()
32 -
33 -
    this._$el.css({ left, top: top - window.scrollY, width, height })
34 -
35 -
    const computedStyle = getComputedStyle(this._target, '')
36 -
37 -
    if (computedStyle.display === 'none') {
38 -
      return this._$el.css('visibility', 'hidden')
39 -
    } else {
40 -
      this._$el.css('visibility', 'visible')
41 -
    }
42 -
43 -
    const getNumStyle = (name) => pxToNum(computedStyle.getPropertyValue(name))
44 -
45 -
    const ml = getNumStyle('margin-left')
46 -
    const mr = getNumStyle('margin-right')
47 -
    const mt = getNumStyle('margin-top')
48 -
    const mb = getNumStyle('margin-bottom')
49 -
50 -
    const bl = getNumStyle('border-left-width')
51 -
    const br = getNumStyle('border-right-width')
52 -
    const bt = getNumStyle('border-top-width')
53 -
    const bb = getNumStyle('border-bottom-width')
54 -
55 -
    const pl = getNumStyle('padding-left')
56 -
    const pr = getNumStyle('padding-right')
57 -
    const pt = getNumStyle('padding-top')
58 -
    const pb = getNumStyle('padding-bottom')
59 -
60 -
    const pw = width - bl - br
61 -
    const ph = height - bt - bb
62 -
63 -
    const marginColor = 'rgba(246, 178, 107, 0.66)'
64 -
    const borderColor = 'rgba(255, 229, 153, 0.66)'
65 -
    const paddingColor = 'rgba(147, 196, 125, 0.55)'
66 -
    const contentColor = 'rgba(111, 168, 220, 0.66)'
67 -
68 -
    this._$margin.css({
69 -
      left: -ml,
70 -
      top: -mt,
71 -
      width: width + ml + mr,
72 -
      height: height + mt + mb,
73 -
      borderTop: `${mt}px solid ${marginColor}`,
74 -
      borderLeft: `${ml}px solid ${marginColor}`,
75 -
      borderRight: `${mr}px solid ${marginColor}`,
76 -
      borderBottom: `${mb}px solid ${marginColor}`,
77 -
    })
78 -
79 -
    this._$border.css({
80 -
      left: 0,
81 -
      top: 0,
82 -
      width,
83 -
      height,
84 -
      borderTop: `${bt}px solid ${borderColor}`,
85 -
      borderLeft: `${bl}px solid ${borderColor}`,
86 -
      borderRight: `${br}px solid ${borderColor}`,
87 -
      borderBottom: `${bb}px solid ${borderColor}`,
88 -
    })
89 -
90 -
    this._$padding.css({
91 -
      left: bl,
92 -
      top: bt,
93 -
      width: pw,
94 -
      height: ph,
95 -
      borderTop: `${pt}px solid ${paddingColor}`,
96 -
      borderLeft: `${pl}px solid ${paddingColor}`,
97 -
      borderRight: `${pr}px solid ${paddingColor}`,
98 -
      borderBottom: `${pb}px solid ${paddingColor}`,
99 -
    })
100 -
101 -
    this._$content.css({
102 -
      left: bl + pl,
103 -
      top: bt + pt,
104 -
      width: pw - pl - pr,
105 -
      height: ph - pt - pb,
106 -
      background: contentColor,
107 -
    })
108 -
109 -
    this._$size
110 -
      .css({
111 -
        top: -mt - (top - mt < 25 ? 0 : 25),
112 -
        left: -ml,
113 -
      })
114 -
      .html(`${formatElName(this._target)} | ${width} × ${height}`)
115 -
  }
116 -
  _bindEvent() {
117 -
    window.addEventListener(
118 -
      'scroll',
119 -
      () => {
120 -
        if (!this._isShow) return
121 -
        this.render()
122 -
      },
123 -
      false
124 -
    )
125 -
  }
126 -
  _appendTpl($container) {
127 -
    $container.append(require('./Highlight.hbs')())
128 -
129 -
    const $el = (this._$el = $container.find('.eruda-elements-highlight'))
130 -
    this._$margin = $el.find('.eruda-margin')
131 -
    this._$padding = $el.find('.eruda-padding')
132 -
    this._$content = $el.find('.eruda-content')
133 -
    this._$border = $el.find('.eruda-border')
134 -
    this._$size = $el.find('.eruda-size')
135 -
  }
136 -
}
137 -
138 -
function formatElName(el) {
139 -
  const { id, className } = el
140 -
141 -
  let ret = `<span style="color:#881280;">${el.tagName.toLowerCase()}</span>`
142 -
143 -
  if (id !== '') ret += `<span style="color:1a1aa8;">#${id}</span>`
144 -
145 -
  let classes = ''
146 -
  if (isStr(className)) {
147 -
    each(className.split(/\s+/g), (val) => {
148 -
      if (trim(val) === '') return
149 -
150 -
      classes += `.${val}`
151 -
    })
31 +
    chobitsu.domain('Overlay').hideHighlight()
152 32
  }
153 -
154 -
  ret += `<span style="color:1a1aa8;">${classes}</span>`
155 -
156 -
  return ret
157 33
}

@@ -4,8 +4,6 @@
Loading
4 4
import evalCss from '../lib/evalCss'
5 5
import chobitsu from 'chobitsu'
6 6
7 -
chobitsu.domain('Network').enable()
8 -
9 7
export default class Network extends Tool {
10 8
  constructor() {
11 9
    super()
@@ -160,6 +158,8 @@
Loading
160 158
      container.showTool('sources')
161 159
    }
162 160
161 +
    chobitsu.domain('Network').enable()
162 +
163 163
    const network = chobitsu.domain('Network')
164 164
    network.on('requestWillBeSent', this._reqWillBeSent)
165 165
    network.on('responseReceivedExtraInfo', this._resReceivedExtraInfo)
Files Coverage
src 65.41%
Project Totals (27 files) 65.41%
Notifications are pending CI completion. Waiting for GitHub's status webhook to queue notifications. Push notifications now.
Sunburst
The inner-most circle is the entire project, moving away from the center are folders then, finally, a single file. The size and color of each slice is representing the number of statements and the coverage, respectively.
Icicle
The top section represents the entire project. Proceeding with folders and finally individual files. The size and color of each slice is representing the number of statements and the coverage, respectively.
Grid
Each block represents a single file in the project. The size and color of each block is represented by the number of statements and the coverage, respectively.
Loading