diff --git a/src/Console/Console.es6 b/src/Console/Console.es6 index e3a49c3..7d1eb76 100644 --- a/src/Console/Console.es6 +++ b/src/Console/Console.es6 @@ -143,7 +143,7 @@ export default class Console extends Tool { if (log.type === 'error' && this.config.get('displayIfErr')) { - parent.show().showTool('console'); + parent.showTool('console').show(); } }); } diff --git a/src/Elements/Highlight.es6 b/src/Elements/Highlight.es6 index d4b810c..1904dce 100644 --- a/src/Elements/Highlight.es6 +++ b/src/Elements/Highlight.es6 @@ -90,6 +90,11 @@ export default class Highlight width: bw - pl - pr, height: bh - pt - pb }); + + this._$size.css({ + top: -mt - (top < 25 ? 0 : 25), + left: -ml + }).html(`${formatElName(this._target)} | ${width} × ${height}`); } _bindEvent() { @@ -103,9 +108,31 @@ export default class Highlight { $parent.append(require('./Highlight.hbs')()); - this._$el = util.$('.eruda-elements-highlight'); - this._$margin = this._$el.find('.eruda-margin'); - this._$padding = this._$el.find('.eruda-padding'); - this._$content = this._$el.find('.eruda-content'); + var $el = this._$el = util.$('.eruda-elements-highlight'); + this._$margin = $el.find('.eruda-margin'); + this._$padding = $el.find('.eruda-padding'); + this._$content = $el.find('.eruda-content'); + this._$size = $el.find('.eruda-size'); } } + +function formatElName(el) +{ + var {id, className} = el; + + var ret = `${el.tagName.toLowerCase()}`; + + if (id !== '') ret += `#${id}`; + + var classes = ''; + util.each(className.split(/\s+/g), (val) => + { + if (util.trim(val) === '') return; + + classes += `.${val}`; + }); + + ret += `${classes}`; + + return ret; +} \ No newline at end of file diff --git a/src/Elements/Highlight.hbs b/src/Elements/Highlight.hbs index df481a8..132419a 100644 --- a/src/Elements/Highlight.hbs +++ b/src/Elements/Highlight.hbs @@ -1,6 +1,9 @@
-
-
-
-
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/src/Elements/Highlight.scss b/src/Elements/Highlight.scss index 6f10fc8..69d6330 100644 --- a/src/Elements/Highlight.scss +++ b/src/Elements/Highlight.scss @@ -1,14 +1,23 @@ +@import "../variable"; + .elements-highlight { display: none; position: absolute; left: 0; right: 0; - opacity: .5; z-index: -100; pointer-events: none !important; * { pointer-events: none !important; } + .indicator { + opacity: .5; + position: absolute; + left: 0; + right: 0; + width: 100%; + height: 100%; + } .margin { position: absolute; background: #e8925b; @@ -33,4 +42,18 @@ background: #5e88c1; z-index: 400; } + .size { + position: absolute; + top: 0; + left: 0; + background: #333740; + color: #d9d9d9; + font-size: 12px; + height: 25px; + line-height: 25px; + text-align: center; + padding: 0 5px; + white-space: nowrap; + overflow-x: hidden; + } } \ No newline at end of file diff --git a/src/Sources/image.hbs b/src/Sources/image.hbs index 0a2c180..edd15d4 100644 --- a/src/Sources/image.hbs +++ b/src/Sources/image.hbs @@ -2,5 +2,5 @@
-
{{width}}px * {{height}}px
+
{{width}}px × {{height}}px
\ No newline at end of file diff --git a/test/index.html b/test/index.html index c0fdf5a..0a1e712 100644 --- a/test/index.html +++ b/test/index.html @@ -17,7 +17,7 @@
One
Two
-
+
This is a very long text! This is a very long text! This is a very long text!