feat(elements): computed style filter

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.

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;

src/Elements/Elements.hbs

@@ -59,12 +59,14 @@
 {{/if}}
 {{#if computedStyle}}
   <div {{{class 'computed-style section'}}}>
-    <h2 {{{class 'toggle-all-computed-style active-effect'}}}>Computed Style
+    <h2>Computed Style
       <div {{{class 'btn'}}}>
+        {{#if computedStyleSearchText}}<span {{{class 'search-text'}}}>{{computedStyleSearchText}}</span>{{/if}}
+        <span {{{class 'icon-search computed-style-search'}}}></span>
         {{#if rmDefComputedStyle}}
-          <span {{{class 'icon-compress'}}}></span>
+          <span {{{class 'toggle-all-computed-style icon-compress'}}}></span>
         {{else}}
-          <span {{{class 'icon-expand'}}}></span>
+          <span {{{class 'toggle-all-computed-style icon-expand'}}}></span>
         {{/if}}
       </div>
     </h2>
@@ -78,7 +80,7 @@
             }}<div {{{class 'padding'}}}>
               <div {{{class 'label'}}}>padding</div><div {{{class 'top'}}}>{{boxModel.padding.top}}</div><br><div {{{class 'left'}}}>{{boxModel.padding.left}}</div>{{!
               }}<div {{{class 'content'}}}>
-                <span>{{boxModel.content.width}}</span> × <span>{{boxModel.content.height}}</span>
+                <span>{{boxModel.content.width}}</span>&nbsp;×&nbsp;<span>{{boxModel.content.height}}</span>
               </div>{{!
               }}<div {{{class 'right'}}}>{{boxModel.padding.right}}</div><br><div {{{class 'bottom'}}}>{{boxModel.padding.bottom}}</div>{{!
               }}</div>{{!

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
 

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);

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) {