diff --git a/doc/UTIL_API.md b/doc/UTIL_API.md index 9945608..708bb79 100644 --- a/doc/UTIL_API.md +++ b/doc/UTIL_API.md @@ -2287,6 +2287,24 @@ const start = perfNow(); console.log(perfNow() - start); ``` +## pick + +Return a filtered copy of an object. + +|Name |Type |Desc | +|------|---------------------|---------------| +|object|object |Source object | +|filter|string array function|Object filter | +|return|object |Filtered object| + +```javascript +pick({a: 1, b: 2}, 'a'); // -> {a: 1} +pick({a: 1, b: 2, c: 3}, ['b', 'c']) // -> {b: 2, c: 3} +pick({a: 1, b: 2, c: 3, d: 4}, function (val, key) { + return val % 2; +}); // -> {a: 1, c: 3} +``` + ## prefix Add vendor prefixes to a CSS attribute. diff --git a/src/Console/Console.scss b/src/Console/Console.scss index 91f75cf..1564c74 100644 --- a/src/Console/Console.scss +++ b/src/Console/Console.scss @@ -90,6 +90,9 @@ .icon-arrow-right { display: none; } + textarea { + padding-left: 10px; + } } .buttons { display: none; @@ -124,6 +127,7 @@ textarea { pointer-events: all; padding: 3px 10px; + padding-left: 25px; outline: none; border: none; font-size: $font-size; diff --git a/src/Elements/Elements.hbs b/src/Elements/Elements.hbs index 80d79e7..03ef58c 100644 --- a/src/Elements/Elements.hbs +++ b/src/Elements/Elements.hbs @@ -59,12 +59,14 @@ {{/if}} {{#if computedStyle}}
-

Computed Style +

Computed Style
+ {{#if computedStyleSearchText}}{{computedStyleSearchText}}{{/if}} + {{#if rmDefComputedStyle}} - + {{else}} - + {{/if}}

@@ -78,7 +80,7 @@ }}
padding
{{boxModel.padding.top}}

{{boxModel.padding.left}}
{{! }}
- {{boxModel.content.width}} × {{boxModel.content.height}} + {{boxModel.content.width}} × {{boxModel.content.height}}
{{! }}
{{boxModel.padding.right}}

{{boxModel.padding.bottom}}
{{! }}
{{! diff --git a/src/Elements/Elements.js b/src/Elements/Elements.js index ef83630..f6e0420 100644 --- a/src/Elements/Elements.js +++ b/src/Elements/Elements.js @@ -24,7 +24,11 @@ import { nextTick, Emitter, contain, - unique + unique, + isNull, + trim, + lowerCase, + pick } from '../lib/util' import evalCss from '../lib/evalCss' @@ -40,6 +44,7 @@ export default class Elements extends Tool { this._highlightElement = false this._selectElement = false this._observeElement = true + this._computedStyleSearchText = '' this._history = [] Emitter.mixin(this) @@ -200,6 +205,13 @@ export default class Elements extends Tool { .on('click', '.eruda-toggle-all-computed-style', () => this._toggleAllComputedStyle() ) + .on('click', '.eruda-computed-style-search', () => { + let filter = prompt('Filter') + if (isNull(filter)) return + filter = trim(filter) + this._computedStyleSearchText = filter + this._render() + }) const $bottomBar = this._$el.find('.eruda-bottom-bar') @@ -271,6 +283,7 @@ export default class Elements extends Tool { const { className, id, attributes, tagName } = el + ret.computedStyleSearchText = this._computedStyleSearchText ret.parents = getParents(el) ret.children = formatChildNodes(el.childNodes) ret.attributes = formatAttr(attributes) @@ -320,6 +333,15 @@ export default class Elements extends Tool { computedStyle = rmDefComputedStyle(computedStyle, styles) } ret.rmDefComputedStyle = this._rmDefComputedStyle + const computedStyleSearchText = lowerCase(ret.computedStyleSearchText) + if (computedStyleSearchText) { + computedStyle = pick(computedStyle, (val, property) => { + return ( + contain(property, computedStyleSearchText) || + contain(val, computedStyleSearchText) + ) + }) + } processStyleRules(computedStyle) ret.computedStyle = computedStyle diff --git a/src/Elements/Elements.scss b/src/Elements/Elements.scss index ba32927..8f91612 100644 --- a/src/Elements/Elements.scss +++ b/src/Elements/Elements.scss @@ -50,13 +50,16 @@ h2 { color: var(--primary); .btn { - margin-left: 10px; float: right; text-align: center; - width: 18px; - height: 18px; line-height: 18px; font-size: $font-size-s; + .search-text { + vertical-align: top; + } + span { + margin-left: 5px; + } } background: var(--darker-background); border-top: 1px solid var(--border); diff --git a/src/lib/util.js b/src/lib/util.js index a497156..05e9beb 100644 --- a/src/lib/util.js +++ b/src/lib/util.js @@ -7248,6 +7248,67 @@ export var perfNow = _.perfNow = (function (exports) { return exports; })({}); +/* ------------------------------ pick ------------------------------ */ + +export var pick = _.pick = (function (exports) { + /* Return a filtered copy of an object. + * + * |Name |Type |Desc | + * |------|---------------------|---------------| + * |object|object |Source object | + * |filter|string array function|Object filter | + * |return|object |Filtered object| + */ + + /* example + * pick({a: 1, b: 2}, 'a'); // -> {a: 1} + * pick({a: 1, b: 2, c: 3}, ['b', 'c']) // -> {b: 2, c: 3} + * pick({a: 1, b: 2, c: 3, d: 4}, function (val, key) { + * return val % 2; + * }); // -> {a: 1, c: 3} + */ + + /* typescript + * export declare function pick( + * object: any, + * filter: string | string[] | Function, + * ): any; + */ + + /* dependencies + * isStr isArr contain each + */ + + exports = function(obj, filter, omit) { + if (isStr(filter)) filter = [filter]; + + if (isArr(filter)) { + var keys = filter; + + filter = function(val, key) { + return contain(keys, key); + }; + } + + var ret = {}; + + var iteratee = function(val, key) { + if (filter(val, key)) ret[key] = val; + }; + + if (omit) { + iteratee = function(val, key) { + if (!filter(val, key)) ret[key] = val; + }; + } + + each(obj, iteratee); + return ret; + }; + + return exports; +})({}); + /* ------------------------------ pxToNum ------------------------------ */ export var pxToNum = _.pxToNum = (function (exports) {