Permalink
Browse files

feat(warning-msg): adds a warning message on Render pane for timings …

…being inaccurate

chore: applies various Fixes as per review, more Ember-y code

chore:- fixes style and renames a action handler for better semantic

chore: code fixes as per review

chore: minor updates and fixes as requested
  • Loading branch information...
1 parent 6796430 commit cf612fa76075a8abd4217a04bb3572dcd9dc2bda @arjunkathuria arjunkathuria committed Sep 24, 2016
@@ -1,20 +1,14 @@
import Ember from 'ember';
import { task, timeout } from 'ember-concurrency';
import ResizableColumns from 'ember-inspector/libs/resizable-columns';
+import LocalStorageService from "ember-inspector/services/storage/local";
+
const { Component, run, computed, inject, $ } = Ember;
const { scheduleOnce } = run;
const { service } = inject;
const { readOnly, reads } = computed;
const CHECK_HTML = '✓';
-let LOCAL_STORAGE_SUPPORTED;
-try {
- LOCAL_STORAGE_SUPPORTED = !!window.localStorage;
-} catch (e) {
- // Security setting in chrome that disables storage for third party
- // throws an error when `localStorage` is accessed.
- LOCAL_STORAGE_SUPPORTED = false;
-}
export default Component.extend({
/**
@@ -71,7 +65,7 @@ export default Component.extend({
* @property storage
* @return {Service}
*/
- storage: service(`storage/${LOCAL_STORAGE_SUPPORTED ? 'local' : 'memory'}`),
+ storage: service(`storage/${LocalStorageService.SUPPORTED ? 'local' : 'memory'}`),
/**
* The key used to cache the current schema. Defaults
@@ -1,8 +1,9 @@
import Ember from "ember";
import escapeRegExp from "ember-inspector/utils/escape-reg-exp";
import debounceComputed from "ember-inspector/computed/debounce";
+import LocalStorageService from "ember-inspector/services/storage/local";
-const { computed, isEmpty, Controller, inject: { controller } } = Ember;
+const { computed, isEmpty, Controller, inject: { controller, service } } = Ember;
const { and, equal, filter } = computed;
const get = Ember.get;
@@ -12,6 +13,59 @@ export default Controller.extend({
modelEmpty: equal('model.length', 0),
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).
+ *
+ * @property storage
+ * @type {Service}
+ */
+ storage: service(`storage/${LocalStorageService.SUPPORTED ? 'local' : 'memory'}`),
+
+ /**
+ * Checks if the user previously closed the warning by referencing localStorage
+ * it is a computed get/set property.
+ *
+ * @property isWarningClosed
+ * @type {Boolean}
+ */
+ isWarningClosed: computed({
+ get() {
+ return !!this.get('storage').getItem('is-render-tree-warning-closed');
+ },
+ set(key, value) {
+ this.get('storage').setItem('is-render-tree-warning-closed', value);
+ return value;
+ }
+ }),
+
+ /**
+ * Indicate the table's header's height in pixels.
+ *
+ * @property headerHeight
+ * @type {Number}
+ */
+ headerHeight: computed('isWarningClosed', function() {
+ return this.get('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
searchField: debounceComputed('search', 300),
@@ -8,8 +8,9 @@
import Ember from 'ember';
const { Service, isNone } = Ember;
const { parse, stringify } = JSON;
+let LOCAL_STORAGE_SUPPORTED;
-export default Service.extend({
+const LocalStorage = Service.extend({
/**
* Reads a stored json string and parses it to
* and object.
@@ -62,3 +63,26 @@ export default Service.extend({
return keys;
}
});
+
+try {
+ localStorage.setItem('test', 0);
+ localStorage.removeItem('test');
+ LOCAL_STORAGE_SUPPORTED = true;
+} catch (e) {
+ // Security setting in chrome that disables storage for third party
+ // throws an error when `localStorage` is accessed. Safari in Private mode
+ // also throws an error.
+ LOCAL_STORAGE_SUPPORTED = false;
+}
+
+LocalStorage.reopenClass({
+ /**
+ * Checks if `localStorage` is supported.
+ *
+ * @property SUPPORTED
+ * @type {Boolean}
+ */
+ SUPPORTED: LOCAL_STORAGE_SUPPORTED
+});
+
+export default LocalStorage;
View
@@ -38,3 +38,4 @@
@import "sidebar_toggle";
@import "split";
@import "toolbar";
+@import "warning";
@@ -0,0 +1,31 @@
+.warning {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ background: #FFFEC2;
+ font-size: 11px;
+ padding: 0;
+}
+
+.warning__image {
+ display: inline;
+ max-width:15px;
+ max-height:15px;
+ margin: 5px;
+}
+
+.warning__text {
+ margin: 5px 0;
+ padding: 0;
+}
+
+.warning__close {
+ font-weight: 200;
+ color: #6E68C6;
+ text-decoration: underline;
+ background: #FFFEC2;
+ border: hidden;
+ cursor: pointer;
+ padding: 0;
+ margin: 5px 10px 5px auto;
+}
@@ -0,0 +1,5 @@
+<div class="warning">
+ <img class="warning__image" src="assets/images/warning.png" alt="warning icon">
+ <p class="warning__text">Render times may be inaccurate due to instrumentation and environment</p>
+ <button class="warning__close" {{action close}}> hide </button>
+</div>
@@ -1,11 +1,15 @@
+{{#unless isWarningClosed}}
+ {{warning-message close=(action "closeWarning")}}
+{{/unless}}
+
{{#if showEmpty}}
<div class="notice js-render-tree-empty">
<p>No rendering metrics have been collected. Try reloading or navigating around your application.</p>
<p><strong>Note:</strong> Very fast rendering times (&lt;1ms) are excluded.</p>
<button class="js-toolbar-page-refresh-btn" {{action "refreshPage"}}>Reload</button>
</div>
{{else}}
- {{#x-list name="render-tree" schema=(schema-for "render-tree") class="list_no-alternate-color js-render-tree" as |list|}}
+ {{#x-list name="render-tree" schema=(schema-for "render-tree") class="list_no-alternate-color js-render-tree" headerHeight=headerHeight as |list|}}
<tbody>
{{#each filtered as |item|}}
{{render-item model=item search=search list=list}}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit cf612fa

Please sign in to comment.