Skip to content

Commit

Permalink
bugfix(debug): Fixes the debug features (#112)
Browse files Browse the repository at this point in the history
  • Loading branch information
@pzuraq
pzuraq authored Jul 25, 2017
1 parent 7af8856 commit 2b6863d
Show file tree
Hide file tree
Showing 8 changed files with 161 additions and 328 deletions.
134 changes: 34 additions & 100 deletions addon/-debug/edge-visualization/debug-mixin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,134 +4,73 @@ import Container from '../../-private';

const {
assert,
warn,
computed,
Mixin
} = Ember;
} = Ember;

import {
styleIsOneOf,
hasStyleValue,
hasStyleWithNonZeroValue
} from '../utils/validate-style';

import {
hasCSSRule
} from '../utils/validate-css';

import {
hasDimensionAbove,
hasDimensionEqual
} from '../utils/validate-rect';

export default Mixin.create({
debug: false,
debugVis: false,
debugCSS: false,
showEdges: computed.deprecatingAlias('debug'),

_nextVisualization: null,
__visualization: null,

didRender() {
this._super();
if (this.get('debug')) {
this.visualizeDebugger();
}
init() {
this._super(...arguments);

if (this.get('debugCSS')) {
this._radar._debugDidUpdate = () => {
this.updateVisualization();
this.detectIssuesWithCSS();
}
};
},

detectIssuesWithCSS() {
let defaultHeight = this.get('defaultHeight');
if (this.get('debugCSS') === false) {
return;
}

let radar = this._radar;
let styles, rules, rect;
let styles;

// check telescope
if (radar.telescope !== Container) {
styles = window.getComputedStyle(radar.telescope);
rules = window.getMatchedCSSRules(radar.telescope);
rect = radar.telescope.getBoundingClientRect();
if (radar.scrollContainer !== Container) {
styles = window.getComputedStyle(radar.scrollContainer);
} else {
styles = window.getComputedStyle(document.body);
rules = window.getMatchedCSSRules(document.body);
rect = radar.telescope.getBoundingClientRect();
}

assert(`Telescope cannot be inline.`, styleIsOneOf(styles, 'display', ['block', 'inline-block', 'flex', 'inline-flex']));
assert(`Telescope must define position`, styleIsOneOf(styles, 'position', ['static', 'relative', 'absolute']));
assert(`Telescope must define height`, hasStyleWithNonZeroValue(styles, 'height'));
assert(`Telescope must define max-height`, hasStyleWithNonZeroValue(styles, 'max-height'));
assert(`Telescope has height greater than the default height when no items are present`, hasDimensionAbove(rect, 'height', defaultHeight));
assert(`scrollContainer cannot be inline.`, styleIsOneOf(styles, 'display', ['block', 'inline-block', 'flex', 'inline-flex']));
assert(`scrollContainer must define position`, styleIsOneOf(styles, 'position', ['static', 'relative', 'absolute']));
assert(`scrollContainer must define height or max-height`, hasStyleWithNonZeroValue(styles, 'height') || hasStyleWithNonZeroValue(styles, 'max-height'));

// conditional perf check for non-body scrolling
if (radar.telescope !== Container) {
warn(`Telescope must define -webkit-overflow-scrolling`, hasCSSRule(rules, '-webkit-overflow-scrolling', 'touch'), { id: 'smoke-and-mirrors:debug-css-webkit-scroll' });
warn(`Telescope must define overflow-scrolling`, hasCSSRule(styles, 'overflow-scrolling', 'touch'), { id: 'smoke-and-mirrors:debug-css-scroll' });
assert(`Telescope must define overflow-y`, hasStyleValue(styles, 'overflow-y', 'scroll') || hasStyleValue(styles, 'overflow', 'scroll'));
if (radar.scrollContainer !== Container) {
assert(`scrollContainer must define overflow-y`, hasStyleValue(styles, 'overflow-y', 'scroll') || hasStyleValue(styles, 'overflow', 'scroll'));
}

// check sky
styles = window.getComputedStyle(radar.sky);
rules = window.getMatchedCSSRules(radar.sky);
rect = radar.sky.getBoundingClientRect();
// check itemContainer
styles = window.getComputedStyle(radar.itemContainer);

assert(`Sky cannot be inline.`, styleIsOneOf(styles, 'display', ['block', 'inline-block', 'flex', 'inline-flex']));
assert(`Sky must define position`, styleIsOneOf(styles, 'position', ['static', 'relative', 'absolute']));
assert(`Sky must define height`, hasStyleWithNonZeroValue(styles, 'height'));
assert(`Sky must define min-height`, hasStyleWithNonZeroValue(styles, 'min-height'));
assert(`Sky has height greater than the default height when no items are present`, hasDimensionAbove(rect, 'height', defaultHeight));
assert(`itemContainer cannot be inline.`, styleIsOneOf(styles, 'display', ['block', 'inline-block', 'flex', 'inline-flex']));
assert(`itemContainer must define position`, styleIsOneOf(styles, 'position', ['static', 'relative', 'absolute']));

// check item defaults
requestAnimationFrame(() => {
this.set('shouldRender', false);

assert(`You must supply at least one item to the collection to debug it's CSS.`, this.get('items.length'));

let element = radar.sky.firstElementChild;

styles = window.getComputedStyle(element);
rules = window.getMatchedCSSRules(element);
rect = element.getBoundingClientRect();

assert(`Item cannot be inline.`, styleIsOneOf(styles, 'display', ['block', 'inline-block', 'flex', 'inline-flex']));
assert(`Item must define position`, styleIsOneOf(styles, 'position', ['static', 'relative', 'absolute']));
assert(`Item must define height`, hasStyleWithNonZeroValue(styles, 'height'));
assert(`Item must define min-height`, hasStyleWithNonZeroValue(styles, 'min-height'));
assert(`Item has height equal to the default height when not rendered`, hasDimensionEqual(rect, 'height', defaultHeight));

this.set('shouldRender', true);

requestAnimationFrame(() => {
element.style.minHeight = '';
element.style.height = '';

if (element.children.length === 1) {
element = element.firstElementChild;
styles = window.getComputedStyle(element);
rules = window.getMatchedCSSRules(element);
rect = element.getBoundingClientRect();

assert(`Item yield cannot be inline.`, styleIsOneOf(styles, 'display', ['block', 'inline-block', 'flex', 'inline-flex']));
assert(`Item yield has height equal to the default height when rendered`, hasDimensionAbove(rect, 'height', defaultHeight));
} else {
styles = window.getComputedStyle(element);
rules = window.getMatchedCSSRules(element);
rect = element.getBoundingClientRect();

assert(`Item has height at least equal to the default height when rendered`, hasDimensionAbove(rect, 'height', defaultHeight));
}
});
});
},
assert(`You must supply at least one item to the collection to debug it's CSS.`, this.get('items.length'));

visualizeDebugger() {
if (this.isDestroying || this.isDestroyed) {
return;
}
let element = radar.itemContainer.firstElementChild;

styles = window.getComputedStyle(element);

assert(`Item cannot be inline.`, styleIsOneOf(styles, 'display', ['block', 'inline-block', 'flex', 'inline-flex']));
assert(`Item must define position`, styleIsOneOf(styles, 'position', ['static', 'relative', 'absolute']));
},

if (!this.get('debug')) {
updateVisualization() {
if (this.get('debugVis') === false) {
if (this.__visualization !== null) {
console.info('tearing down existing visualization'); // eslint-disable-line no-console
this.__visualization.destroy();
Expand All @@ -141,15 +80,10 @@ export default Mixin.create({
}

if (this.__visualization === null) {
this.__visualization = new Visualization(this);
// TODO @runspired figure out why this fails silently if done in the constructor
this.__visualization.setupViewport();
this.__visualization = new Visualization(this._radar);
}

this.__visualization.render();
requestAnimationFrame(() => {
this.visualizeDebugger();
});
},

willDestroy() {
Expand Down
Loading

0 comments on commit 2b6863d

Please sign in to comment.