Merge branch 'lmccart-console'

This commit is contained in:
Cassie Tarakajian 2016-10-05 14:02:56 -04:00
commit 2608efbc13
5 changed files with 34 additions and 12 deletions

View file

@ -25,7 +25,7 @@ class Console extends React.Component {
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (nextProps.isPlaying && !this.props.isPlaying) { if (nextProps.isPlaying && !this.props.isPlaying) {
this.children = []; this.children = [];
} else if (nextProps.consoleEvent !== this.props.consoleEvent) { } else if (nextProps.isExpanded && nextProps.consoleEvent !== this.props.consoleEvent) {
const args = nextProps.consoleEvent.arguments; const args = nextProps.consoleEvent.arguments;
const method = nextProps.consoleEvent.method; const method = nextProps.consoleEvent.method;
const nextChild = ( const nextChild = (

View file

@ -40,8 +40,29 @@ function hijackConsoleLogsScript() {
'debug', 'clear', 'error', 'info', 'log', 'warn' 'debug', 'clear', 'error', 'info', 'log', 'warn'
]; ];
function throttle(fn, threshhold, scope) {
var last, deferTimer;
return function() {
var context = scope || this;
var now = +new Date,
args = arguments;
if (last && now < last + threshhold) {
// hold on to it
clearTimeout(deferTimer);
deferTimer = setTimeout(function() {
last = now;
fn.apply(context, args);
}, threshhold);
} else {
last = now;
fn.apply(context, args);
}
};
}
methods.forEach( function(method) { methods.forEach( function(method) {
iframeWindow.console[method] = function() { iframeWindow.console[method] = throttle(function() {
originalConsole[method].apply(originalConsole, arguments); originalConsole[method].apply(originalConsole, arguments);
var args = Array.from(arguments); var args = Array.from(arguments);
@ -56,11 +77,12 @@ function hijackConsoleLogsScript() {
arguments: args, arguments: args,
source: 'sketch' source: 'sketch'
}, '*'); }, '*');
}; }, 100);
}); });
</script>`; </script>`;
return s; return s;
} }
function hijackConsoleErrorsScript(offs) { function hijackConsoleErrorsScript(offs) {
const s = `<script> const s = `<script>
function getScriptOff(line) { function getScriptOff(line) {

View file

@ -10,7 +10,7 @@ $themes: (
primary-text-color: #333, primary-text-color: #333,
secondary-text-color: #6b6b6b, secondary-text-color: #6b6b6b,
inactive-text-color: #b5b5b5, inactive-text-color: #b5b5b5,
background-color: #fdfdfd, background-color: #fbfbfb,
button-background-color: #f4f4f4, button-background-color: #f4f4f4,
button-color: $black, button-color: $black,
button-border-color: #979797, button-border-color: #979797,
@ -20,7 +20,7 @@ $themes: (
button-background-active-color: #f10046, button-background-active-color: #f10046,
button-hover-color: $white, button-hover-color: $white,
button-active-color: $white, button-active-color: $white,
modal-background-color: #f4f4f4, modal-background-color: #fdfdfd,
modal-button-background-color: #e6e6e6, modal-button-background-color: #e6e6e6,
modal-border-color: #B9D0E1, modal-border-color: #B9D0E1,
icon-color: #8b8b8b, icon-color: #8b8b8b,
@ -30,7 +30,7 @@ $themes: (
console-header-background-color: #d6d6d6, console-header-background-color: #d6d6d6,
console-header-color: #b1b1b1, console-header-color: #b1b1b1,
ide-border-color: #f4f4f4, ide-border-color: #f4f4f4,
editor-gutter-color: #f7f7f7, editor-gutter-color: #f4f4f4,
file-selected-color: #f4f4f4, file-selected-color: #f4f4f4,
input-text-color: #333, input-text-color: #333,
input-border-color: #979797, input-border-color: #979797,

View file

@ -1,15 +1,16 @@
.nav { .nav {
width: 100%; width: 100%;
padding: #{10 / $base-font-size}rem #{70 / $base-font-size}rem; padding: #{10 / $base-font-size}rem #{70 / $base-font-size}rem;
padding-left: #{170 / $base-font-size}rem; padding-left: #{33 / $base-font-size}rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
font-size: #{12 / $base-font-size}rem;
} }
.nav__items-left, .nav__items-right { .nav__items-left, .nav__items-right {
@include themify() { @include themify() {
border-bottom: 2px dashed map-get($theme-map, 'inactive-text-color'); border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
} }
list-style: none; list-style: none;
display: flex; display: flex;
@ -19,10 +20,9 @@
} }
.nav__item { .nav__item {
& + & {
margin-left: #{20 / $base-font-size}rem;
}
position: relative; position: relative;
min-width: #{72 / $base-font-size}rem;
text-align: center;
} }
.nav__dropdown { .nav__dropdown {

View file

@ -55,7 +55,7 @@
} }
.toolbar { .toolbar {
padding: #{20 / $base-font-size}rem #{60 / $base-font-size}rem; padding: #{15 / $base-font-size}rem #{34 / $base-font-size}rem;
display: flex; display: flex;
align-items: center; align-items: center;
} }