From a4fbd1d1e480b225b911143fa22d07e3b13566a2 Mon Sep 17 00:00:00 2001 From: Jerry Nummi Date: Wed, 11 Sep 2019 19:14:52 -0700 Subject: [PATCH] Tidy up render-tree tab - fix table striping - remove observer - fix search highlighting - action, this, {{on}}, etc. - use Ui:Disclosure --- app/components/render-item.js | 46 +------------ app/controllers/render-tree.js | 41 ++++-------- app/templates/components/deprecation-item.hbs | 12 ++-- app/templates/components/render-item.hbs | 65 +++++++++++-------- app/templates/render-tree-toolbar.hbs | 2 +- app/templates/render-tree.hbs | 16 +++-- .../{accordion.js => disclosure.js} | 0 lib/ui/addon/styles/_list.scss | 6 ++ lib/ui/app/components/ui/accordion.js | 1 - lib/ui/app/components/ui/disclosure.js | 1 + .../app/templates/components/ui/accordion.hbs | 4 -- .../components/ui/disclosure-triangle.hbs | 24 ++++--- .../templates/components/ui/disclosure.hbs | 6 ++ tests/acceptance/render-tree-test.js | 18 ----- 14 files changed, 97 insertions(+), 145 deletions(-) rename lib/ui/addon/components/{accordion.js => disclosure.js} (100%) delete mode 100644 lib/ui/app/components/ui/accordion.js create mode 100644 lib/ui/app/components/ui/disclosure.js delete mode 100644 lib/ui/app/templates/components/ui/accordion.hbs create mode 100644 lib/ui/app/templates/components/ui/disclosure.hbs diff --git a/app/components/render-item.js b/app/components/render-item.js index aaffc26853..da0c903d54 100644 --- a/app/components/render-item.js +++ b/app/components/render-item.js @@ -1,32 +1,14 @@ import Component from '@ember/component'; import { isNone, isEmpty } from '@ember/utils'; -import { run } from '@ember/runloop'; -import { observer, computed } from '@ember/object'; +import { computed } from '@ember/object'; import { htmlSafe } from '@ember/string'; import escapeRegExp from 'ember-inspector/utils/escape-reg-exp'; import { gt } from '@ember/object/computed'; -const { once } = run; - export default Component.extend({ tagName: '', - search: null, - - isExpanded: false, - - expand() { - this.set('isExpanded', true); - }, - - searchChanged: observer('search', function() { - let search = this.search; - if (!isEmpty(search)) { - once(this, 'expand'); - } - }), - searchMatch: computed('search', 'name', function() { let search = this.search; if (isEmpty(search)) { @@ -59,18 +41,6 @@ export default Component.extend({ hasChildren: gt('model.children.length', 0), - expandedClass: computed('hasChildren', 'isExpanded', function() { - if (!this.hasChildren) { - return; - } - - if (this.isExpanded) { - return 'list__cell_arrow_expanded'; - } else { - return 'list__cell_arrow_collapsed'; - } - }), - readableTime: computed('model.timestamp', function() { let d = new Date(this.get('model.timestamp')); let ms = d.getMilliseconds(); @@ -79,17 +49,5 @@ export default Component.extend({ let hours = d.getHours().toString().length === 1 ? `0${d.getHours()}` : d.getHours(); return `${hours}:${minutes}:${seconds}:${ms}`; - }), - - init() { - this._super(...arguments); - - this.searchChanged(); - }, - - actions: { - toggleExpand() { - this.toggleProperty('isExpanded'); - } - } + }) }); diff --git a/app/controllers/render-tree.js b/app/controllers/render-tree.js index aff1b65081..d8b423505b 100644 --- a/app/controllers/render-tree.js +++ b/app/controllers/render-tree.js @@ -1,4 +1,4 @@ -import { computed, get } from '@ember/object'; +import { action, computed, get } from '@ember/object'; import { isEmpty } from '@ember/utils'; import Controller, { inject as controller } from '@ember/controller'; import { inject as service } from '@ember/service'; @@ -14,13 +14,7 @@ export default Controller.extend({ showEmpty: and('initialEmpty', 'modelEmpty'), /** - * Service used for storage. Storage is - * needed for remembering if the user closed the warning - * as it might get mildly annoying for devs to see and close - * the trivial warning every time. - * The default storage service is local storage however we - * fall back to memory storage if local storage is disabled (For - * example as a security setting in Chrome). + * Storage is needed for remembering if the user closed the warning * * @property storage * @type {Service} @@ -30,7 +24,6 @@ export default Controller.extend({ /** * Checks if the user previously closed the warning by referencing localStorage - * it is a computed get/set property. * * @property isWarningClosed * @type {Boolean} @@ -55,18 +48,6 @@ export default Controller.extend({ return this.isWarningClosed ? 31 : 56; }), - actions: { - /** - * This action when triggered, closes the warning message for rendering times being inaccurate - * and sets `isWarningClosed` value to true, thus preventing the warning from being shown further. - * - * @method closeWarning - */ - closeWarning() { - this.set('isWarningClosed', true); - } - }, - // bound to the input field, updates the `search` property // 300ms after changing searchValue: debounceComputed('search', 300), @@ -79,15 +60,19 @@ export default Controller.extend({ }), filtered: computed('model.@each.name', 'search', function() { - return get(this, 'model').filter((item) => { - let search = this.escapedSearch; - if (isEmpty(search)) { - return true; - } - let regExp = new RegExp(search); - return !!recursiveMatch(item, regExp); + if (isEmpty(this.escapedSearch)) { + return this.model; + } + + return this.model.filter((item) => { + const regExp = new RegExp(this.escapedSearch); + return recursiveMatch(item, regExp); }); }), + + closeWarning: action(function() { + this.set('isWarningClosed', true); + }) }); function recursiveMatch(item, regExp) { diff --git a/app/templates/components/deprecation-item.hbs b/app/templates/components/deprecation-item.hbs index a02f26b80e..b870c31f23 100644 --- a/app/templates/components/deprecation-item.hbs +++ b/app/templates/components/deprecation-item.hbs @@ -1,15 +1,13 @@ - +
{{#if @model.hasSourceMap}}
- - {{svg-jar "disclosure-triangle" width="9px" height="9px"}} - +
{{/if}} @@ -49,7 +47,7 @@ {{/if}}
- {{#if (and @model.hasSourceMap accordion.isExpanded)}} + {{#if (and @model.hasSourceMap disclosure.isExpanded)}} {{#each @model.sources as |single|}}
@@ -83,4 +81,4 @@ {{/each}} {{/if}}
- \ No newline at end of file + \ No newline at end of file diff --git a/app/templates/components/render-item.hbs b/app/templates/components/render-item.hbs index 661311914b..7e0fc4f0f2 100644 --- a/app/templates/components/render-item.hbs +++ b/app/templates/components/render-item.hbs @@ -1,32 +1,41 @@ - - {{#list.cell - class=(concat "list__cell_main " expandedClass " js-render-main-cell") - on-click=(action "toggleExpand") - style=nameStyle - }} - + + + {{#list.cell + class="list__cell_main js-render-main-cell" + on-click=disclosure.toggle + style=this.nameStyle + }} + {{#if this.hasChildren}} + + {{/if}} - - {{model.name}} - - {{/list.cell}} + + {{@model.name}} + + {{/list.cell}} - {{#list.cell class="list__cell_value_numeric"}} - - {{ms-to-time model.duration}} - - {{/list.cell}} + {{#list.cell class="list__cell_value_numeric"}} + + {{ms-to-time @model.duration}} + + {{/list.cell}} - {{#list.cell class="list__cell_value_numeric js-render-profile-timestamp"}} - {{readableTime}} - {{/list.cell}} - + {{#list.cell class="list__cell_value_numeric js-render-profile-timestamp"}} + {{this.readableTime}} + {{/list.cell}} + -{{#if isExpanded}} - {{#each model.children as |child|}} - {{render-item model=child target=this list=list}} - {{/each}} -{{/if}} + {{#if disclosure.isExpanded}} + {{#each @model.children as |child|}} + + {{/each}} + {{/if}} + \ No newline at end of file diff --git a/app/templates/render-tree-toolbar.hbs b/app/templates/render-tree-toolbar.hbs index 93d23f1a69..dd1cf004cb 100644 --- a/app/templates/render-tree-toolbar.hbs +++ b/app/templates/render-tree-toolbar.hbs @@ -3,7 +3,7 @@ @action={{action send "clearProfiles"}} /> - {{#unless showEmpty}} + {{#unless this.showEmpty}} +{{#unless this.isWarningClosed}} + Render times may be inaccurate due to instrumentation and environment {{/unless}} -{{#if showEmpty}} +{{#if this.showEmpty}}

No rendering metrics have been collected. Try reloading or navigating around your application.

Note: Very fast rendering times (<1ms) are excluded.

@@ -12,14 +12,18 @@ {{else}} - {{#each filtered as |item|}} - {{render-item model=item search=search list=list}} + {{#each this.filtered as |item|}} + {{/each}} diff --git a/lib/ui/addon/components/accordion.js b/lib/ui/addon/components/disclosure.js similarity index 100% rename from lib/ui/addon/components/accordion.js rename to lib/ui/addon/components/disclosure.js diff --git a/lib/ui/addon/styles/_list.scss b/lib/ui/addon/styles/_list.scss index 0aeecd87bb..ee5b906c5d 100644 --- a/lib/ui/addon/styles/_list.scss +++ b/lib/ui/addon/styles/_list.scss @@ -58,6 +58,12 @@ } } +.list.list--css-striping { + .list__row:nth-child(even) { + background: var(--base00); + } +} + .list__cell-content { width: 100%; } diff --git a/lib/ui/app/components/ui/accordion.js b/lib/ui/app/components/ui/accordion.js deleted file mode 100644 index 4bf9e5cbfa..0000000000 --- a/lib/ui/app/components/ui/accordion.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'ui/components/accordion'; diff --git a/lib/ui/app/components/ui/disclosure.js b/lib/ui/app/components/ui/disclosure.js new file mode 100644 index 0000000000..3ebabc944b --- /dev/null +++ b/lib/ui/app/components/ui/disclosure.js @@ -0,0 +1 @@ +export { default } from 'ui/components/disclosure'; diff --git a/lib/ui/app/templates/components/ui/accordion.hbs b/lib/ui/app/templates/components/ui/accordion.hbs deleted file mode 100644 index d01977422f..0000000000 --- a/lib/ui/app/templates/components/ui/accordion.hbs +++ /dev/null @@ -1,4 +0,0 @@ -{{yield (hash - isExpanded=this.isExpanded - toggle=this.toggle -)}} diff --git a/lib/ui/app/templates/components/ui/disclosure-triangle.hbs b/lib/ui/app/templates/components/ui/disclosure-triangle.hbs index 7c4174a397..145f72417e 100644 --- a/lib/ui/app/templates/components/ui/disclosure-triangle.hbs +++ b/lib/ui/app/templates/components/ui/disclosure-triangle.hbs @@ -1,8 +1,16 @@ - - +{{#if @toggle}} + +{{else}} + + {{svg-jar "disclosure-triangle" width="9px" height="9px"}} + +{{/if}} \ No newline at end of file diff --git a/lib/ui/app/templates/components/ui/disclosure.hbs b/lib/ui/app/templates/components/ui/disclosure.hbs new file mode 100644 index 0000000000..5670cc5f2a --- /dev/null +++ b/lib/ui/app/templates/components/ui/disclosure.hbs @@ -0,0 +1,6 @@ +{{yield (hash + isExpanded=this.isExpanded + toggle=this.toggle + triangleIcon=(component "ui/disclosure-triangle" expanded=this.isExpanded) + triangleButton=(component "ui/disclosure-triangle" expanded=this.isExpanded toggle=this.toggle) +)}} diff --git a/tests/acceptance/render-tree-test.js b/tests/acceptance/render-tree-test.js index 122c8a5414..fd650a5170 100644 --- a/tests/acceptance/render-tree-test.js +++ b/tests/acceptance/render-tree-test.js @@ -114,24 +114,6 @@ module('Render Tree Tab', function(hooks) { assert.dom(rows[0].querySelector('.js-render-profile-name')).hasText('First View Rendering'); assert.dom(rows[1].querySelector('.js-render-profile-name')).hasText('Second View Rendering'); - await fillIn('.js-render-profiles-search input', 'first'); - - rows = findAll('.js-render-profile-item'); - assert.equal(rows.length, 2, "The first parent is rendered with the child"); - assert.dom(rows[0].querySelector('.js-render-profile-name')).hasText('First View Rendering'); - assert.dom(rows[1].querySelector('.js-render-profile-name')).hasText('Child view'); - - // Minimize to hide child view - await click('.js-render-main-cell'); - - await fillIn('.js-render-profiles-search input', ''); - - rows = findAll('.js-render-profile-item'); - assert.equal(rows.length, 2, "filter is reset"); - - assert.dom(rows[0].querySelector('.js-render-profile-name')).hasText('First View Rendering'); - assert.dom(rows[1].querySelector('.js-render-profile-name')).hasText('Second View Rendering'); - await fillIn('.js-render-profiles-search input', 'Second'); rows = findAll('.js-render-profile-item');