Skip to content

Commit d041849

Browse files
marijnhmarijnh
committed
Improve display of console.log in sandbox
1 parent da14063 commit d041849

1 file changed

Lines changed: 51 additions & 40 deletions

File tree

‎html/js/sandbox.js‎

Lines changed: 51 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -128,67 +128,75 @@
128128
wrap.className = "sandbox-output-" + type;
129129
for (var i = 0; i < args.length; ++i) {
130130
var arg = args[i];
131+
if (i) wrap.appendChild(document.createTextNode(" "));
131132
if (typeof arg == "string")
132133
wrap.appendChild(document.createTextNode(arg));
133134
else
134-
wrap.appendChild(represent(arg, [50]));
135+
wrap.appendChild(represent(arg, 53));
135136
}
136137
this.div.appendChild(wrap);
137138
}
138139
};
139140

140-
function span(type, text, space) {
141-
if (space) space[0] -= text.length;
141+
function span(type, text) {
142142
var sp = document.createElement("span");
143143
sp.className = "sandbox-output-" + type;
144144
sp.appendChild(document.createTextNode(text));
145145
return sp;
146146
}
147147

148+
function eltSize(elt) {
149+
return elt.textContent.length;
150+
}
151+
148152
function represent(val, space) {
149-
if (typeof val == "boolean") return span("bool", String(val), space);
150-
if (typeof val == "number") return span("number", String(val), space);
151-
if (typeof val == "string") return representString(val, space);
152-
if (val == null) return span("null", String(val), space);
153+
if (typeof val == "boolean") return span("bool", String(val));
154+
if (typeof val == "number") return span("number", String(val));
155+
if (typeof val == "string") return span("string", JSON.stringify(val));
156+
if (val == null) return span("null", String(val));
153157
if (Array.isArray(val)) return representArray(val, space);
154158
else return representObj(val, space);
155159
}
156160

157-
function representString(val, space) {
158-
var json = JSON.stringify(val);
159-
if (json.length < space[0] + 3) return span("string", json, space);
160-
var wrap = span("string", json.slice(0, Math.max(1, space[0])), space);
161-
wrap.appendChild(span("etc", "…", space)).addEventListener("click", function(e) {
162-
wrap.innerHTML = "";
163-
wrap.appendChild(document.createTextNode(json));
164-
});
165-
wrap.appendChild(document.createTextNode("\""));
166-
return wrap;
167-
}
168-
169161
function representArray(val, space) {
170-
space[0] -= 2;
162+
space -= 2;
171163
var wrap = document.createElement("span");
172164
wrap.appendChild(document.createTextNode("["));
173165
for (var i = 0; i < val.length; ++i) {
174166
if (i) {
175167
wrap.appendChild(document.createTextNode(", "));
176-
space[0] -= 2;
168+
space -= 2;
177169
}
178-
if (space[0] <= 0 && i < val.length - 2) {
179-
wrap.appendChild(span("etc", "…", space)).addEventListener("click", function(e) {
180-
replaceEtc(e.target, "array", val, i);
170+
var next = space > 0 && represent(val[i], space);
171+
var nextSize = next ? eltSize(next) : 0;
172+
if (space - nextSize <= 0) {
173+
wrap.appendChild(span("etc", "…")).addEventListener("click", function(e) {
174+
expandObj(wrap, "array", val);
181175
});
182176
break;
183177
}
184-
wrap.appendChild(represent(val[i], space));
178+
space -= nextSize;
179+
wrap.appendChild(next);
185180
}
186181
wrap.appendChild(document.createTextNode("]"));
187182
return wrap;
188183
}
189184

190185
function representObj(val, space) {
191-
space[0] -= 2;
186+
var string = val.toString(), m;
187+
if (/^\[object .*\]$/.test(string))
188+
return representSimpleObj(val, space);
189+
if (val.call && (m = string.match(/^\s*(function[^(]*\([^)]*\))/)))
190+
string = m[1] + "{…}";
191+
var elt = span("etc", string);
192+
elt.addEventListener("click", function(e) {
193+
expandObj(elt, "obj", val);
194+
});
195+
return elt;
196+
}
197+
198+
function representSimpleObj(val, space) {
199+
space -= 2;
192200
var wrap = document.createElement("span");
193201
wrap.appendChild(document.createTextNode("{"));
194202
try {
@@ -197,18 +205,20 @@
197205
if (first) {
198206
first = false;
199207
} else {
200-
space[0] -= 2;
208+
space -= 2;
201209
wrap.appendChild(document.createTextNode(", "));
202210
}
203-
if (space[0] <= 0) {
204-
wrap.appendChild(span("etc", "…", space)).addEventListener("click", function(e) {
205-
replaceEtc(e.target, "obj", val, prop);
211+
var next = space > 0 && represent(val[prop], space);
212+
var nextSize = next ? prop.length + 2 + eltSize(next) : 0;
213+
if (space - nextSize <= 0) {
214+
wrap.appendChild(span("etc", "…")).addEventListener("click", function(e) {
215+
expandObj(wrap, "obj", val);
206216
});
207217
break;
208218
}
209-
space[0] -= prop.length + 2;
219+
space -= nextSize;
210220
wrap.appendChild(document.createTextNode(prop + ": "));
211-
wrap.appendChild(represent(val[prop], space));
221+
wrap.appendChild(next);
212222
}
213223
} catch (e) {
214224
wrap.appendChild(document.createTextNode("…"));
@@ -217,22 +227,23 @@
217227
return wrap;
218228
}
219229

220-
function replaceEtc(node, type, val, from) {
221-
var block = document.createElement("div");
230+
function expandObj(node, type, val) {
231+
var wrap = document.createElement("span");
232+
wrap.appendChild(document.createTextNode(type == "array" ? "[" : "{"));
233+
var block = wrap.appendChild(document.createElement("div"));
222234
block.className = "sandbox-output-etc-block";
223235
var table = block.appendChild(document.createElement("table"));
224236
function addProp(name) {
225237
var row = table.appendChild(document.createElement("tr"));
226238
row.appendChild(document.createElement("td")).appendChild(document.createTextNode(name + ":"));
227-
row.appendChild(document.createElement("td")).appendChild(represent(val[name], [30]));
239+
row.appendChild(document.createElement("td")).appendChild(represent(val[name], 40));
228240
}
229241
if (type == "array") {
230-
for (var i = from; i < val.length; ++i) addProp(i);
242+
for (var i = 0; i < val.length; ++i) addProp(i);
231243
} else {
232-
var showing = false;
233-
for (var prop in val)
234-
if (showing = showing || prop == from) addProp(prop);
244+
for (var prop in val) if (Object.hasOwnProperty.call(val, prop)) addProp(prop);
235245
}
236-
node.parentNode.replaceChild(block, node);
246+
wrap.appendChild(document.createTextNode(type == "array" ? "]" : "}"));
247+
node.parentNode.replaceChild(wrap, node);
237248
}
238249
})();

0 commit comments

Comments
 (0)