diff --git a/build/webpack.base.js b/build/webpack.base.js
index 9e1f537..080449d 100644
--- a/build/webpack.base.js
+++ b/build/webpack.base.js
@@ -17,7 +17,13 @@ const postcssLoader = {
plugins: [
prefixer({
prefix: '_',
- ignore: [/luna-console/, /luna-object-viewer/, /luna-notification/],
+ ignore: [
+ /luna-console/,
+ /luna-object-viewer/,
+ /luna-notification/,
+ /luna-data-grid/,
+ /luna-dom-viewer/,
+ ],
}),
autoprefixer,
clean(),
diff --git a/package.json b/package.json
index d34e5e4..34dd09c 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,9 @@
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^5.0.0",
"licia": "^1.37.0",
- "luna-console": "^0.3.1",
+ "luna-console": "^1.0.0",
+ "luna-data-grid": "^0.2.0",
+ "luna-dom-viewer": "^1.0.2",
"luna-notification": "^0.1.4",
"luna-object-viewer": "^0.2.1",
"node-sass": "^7.0.1",
diff --git a/src/Elements/Elements.scss b/src/Elements/Elements.scss
index 9945783..786c1ba 100644
--- a/src/Elements/Elements.scss
+++ b/src/Elements/Elements.scss
@@ -12,11 +12,13 @@
@include overflow-auto(x);
background: var(--darker-background);
color: var(--primary);
- padding: $padding;
+ padding: 0 $padding;
+ height: 40px;
+ line-height: 40px;
white-space: nowrap;
border-bottom: 1px solid var(--border);
cursor: pointer;
- font-size: $font-size-s;
+ font-size: $font-size;
li {
display: inline-block;
.parent {
@@ -27,9 +29,9 @@
}
}
.icon-arrow-right {
- font-size: 8px;
+ font-size: $font-size-s;
position: relative;
- top: -1px;
+ top: 1px;
}
}
.breadcrumb {
diff --git a/src/eruda.js b/src/eruda.js
index bc05dab..ac5d2e3 100644
--- a/src/eruda.js
+++ b/src/eruda.js
@@ -166,7 +166,7 @@ export default {
// font-face doesn't work inside shadow dom.
evalCss.container = document.head
evalCss(require('./style/icon.css') +
- require('luna-console/luna-console.css') + require('luna-object-viewer/luna-object-viewer.css'))
+ require('luna-console/luna-console.css') + require('luna-object-viewer/luna-object-viewer.css') + require('luna-dom-viewer/luna-dom-viewer.css'))
el = document.createElement('div')
shadowRoot.appendChild(el)
@@ -203,12 +203,14 @@ export default {
}
evalCss(
+ require('./style/reset.scss') +
require('luna-object-viewer/luna-object-viewer.css') +
require('luna-console/luna-console.css') +
require('luna-notification/luna-notification.css') +
+ require('luna-data-grid/luna-data-grid.css') +
+ require('luna-dom-viewer/luna-dom-viewer.css') +
require('./style/style.scss') +
- require('./style/reset.scss') +
- require('./style/icon.css')
+ require('./style/icon.css')
)
},
_initEntryBtn() {
diff --git a/src/lib/fione.js b/src/lib/fione.js
index ec0ed2a..f76e4fc 100644
--- a/src/lib/fione.js
+++ b/src/lib/fione.js
@@ -1008,7 +1008,14 @@ export var ltrim = _.ltrim = (function (exports) {
var regSpace = /^\s+/;
exports = function(str, chars) {
- if (chars == null) return str.replace(regSpace, '');
+ if (chars == null) {
+ if (str.trimLeft) {
+ return str.trimLeft();
+ }
+
+ return str.replace(regSpace, '');
+ }
+
var start = 0;
var len = str.length;
var charLen = chars.length;
@@ -1765,10 +1772,15 @@ export var rtrim = _.rtrim = (function (exports) {
/* typescript
* export declare function rtrim(str: string, chars?: string | string[]): string;
*/
- var regSpace = /\s+$/;
-
exports = function(str, chars) {
- if (chars == null) return str.replace(regSpace, '');
+ if (chars == null) {
+ if (str.trimRight) {
+ return str.trimRight();
+ }
+
+ chars = ' \r\n\t\f\v';
+ }
+
var end = str.length - 1;
var charLen = chars.length;
var found = true;
@@ -1821,10 +1833,11 @@ export var trim = _.trim = (function (exports) {
* ltrim rtrim
*/
- var regSpace = /^\s+|\s+$/g;
-
exports = function(str, chars) {
- if (chars == null) return str.replace(regSpace, '');
+ if (chars == null && str.trim) {
+ return str.trim();
+ }
+
return ltrim(rtrim(str, chars), chars);
};
diff --git a/src/style/luna.scss b/src/style/luna.scss
index 5adbc66..af8bcde 100644
--- a/src/style/luna.scss
+++ b/src/style/luna.scss
@@ -46,6 +46,17 @@
}
}
+.luna-console-log-container {
+ &.luna-console-selected {
+ .luna-console-log-item {
+ background: var(--contrast);
+ &:not(.luna-console-error):not(.luna-console-warn) {
+ border-color: var(--border);
+ }
+ }
+ }
+}
+
.luna-console-log-item {
border-bottom-color: var(--border);
color: var(--foreground);
@@ -64,7 +75,8 @@
}
}
.luna-console-count {
- background: var(--text-color);
+ color: var(--select-foreground);
+ background: var(--highlight);
}
&.luna-console-warn {
color: var(--console-warn-foreground);
@@ -79,36 +91,18 @@
background: var(--console-error-foreground);
}
}
- &.luna-console-table {
- table {
- color: var(--foreground);
- th {
- background: var(--darker-background);
- }
- th,
- td {
- border-color: var(--border);
- }
- tr:nth-child(even) {
- background: var(--contrast);
- }
- }
- }
.luna-console-code {
@include luna-console-highlight();
}
}
-.luna-console-abstract {
+.luna-console-preview {
@include luna-console-highlight();
}
.luna-object-viewer {
color: var(--primary);
font-size: 12px !important;
- & > li {
- padding: $padding 0 !important;
- }
}
.luna-object-viewer-null {
color: var(--operator-color);
@@ -161,3 +155,80 @@
.luna-notification-lower {
margin-top: 10px;
}
+
+.luna-data-grid {
+ color: var(--foreground);
+ background: var(--background);
+ border-color: var(--border);
+ th,
+ td {
+ border-color: var(--border);
+ }
+ th {
+ background: var(--darker-background);
+ &.luna-data-grid-sortable {
+ &:hover {
+ background: var(--darker-background);
+ }
+ }
+ }
+ .luna-data-grid-data-container {
+ tr:nth-child(even) {
+ background: var(--contrast);
+ }
+ }
+}
+
+.luna-dom-viewer {
+ color: var(--foreground);
+ .luna-dom-viewer-html-tag,
+ .luna-dom-viewer-tag-name {
+ color: var(--tag-name-color);
+ }
+ .luna-dom-viewer-attribute-name {
+ color: var(--attribute-name-color);
+ }
+ .luna-dom-viewer-attribute-value {
+ color: var(--string-color);
+ }
+ .luna-dom-viewer-html-comment {
+ color: var(--comment-color);
+ }
+ .luna-dom-viewer-selection {
+ background: var(--highlight);
+ }
+ .luna-dom-viewer-text-node {
+ .luna-dom-viewer-key {
+ color: var(--var-color);
+ }
+ .luna-dom-viewer-number {
+ color: var(--number-color);
+ }
+ .luna-dom-viewer-null {
+ color: var(--operator-color);
+ }
+ .luna-dom-viewer-string {
+ color: var(--string-color);
+ }
+ .luna-dom-viewer-boolean {
+ color: var(--keyword-color);
+ }
+ .luna-dom-viewer-special {
+ color: var(--operator-color);
+ }
+ .luna-dom-viewer-keyword {
+ color: var(--keyword-color);
+ }
+ .luna-dom-viewer-operator {
+ color: var(--operator-color);
+ }
+ .luna-dom-viewer-comment {
+ color: var(--comment-color);
+ }
+ }
+}
+
+.luna-dom-viewer-children {
+ margin: 0;
+ padding-left: 15px !important;
+}
diff --git a/src/style/reset.scss b/src/style/reset.scss
index 0eb377e..d075a17 100644
--- a/src/style/reset.scss
+++ b/src/style/reset.scss
@@ -81,8 +81,6 @@
padding: 0;
border: 0;
font-size: 100%;
- font: inherit;
- vertical-align: baseline;
}
article,
aside,
diff --git a/test/manual.html b/test/manual.html
index 29d2dd3..596a4ba 100644
--- a/test/manual.html
+++ b/test/manual.html
@@ -134,20 +134,27 @@
addClickEvent('log', () => {
console.clear()
console.log('log')
+ for (let i = 0; i < 10; i++) {
+ console.log('repeat log')
+ }
console.warn('warn')
console.error(Error('test'))
console.info('info')
console.debug('debug')
- console.dir(document.createElement('div'))
console.time('test')
console.timeEnd('test')
- console.count('eruda')
- console.count('eruda')
+ console.count('luna')
+ console.count('luna')
console.assert(true, 'assert msg')
var site1 = { name: 'Runoob', site: 'www.runoob.com' }
var site2 = { name: 'Google', site: 'www.google.com' }
var site3 = { name: 'Taobao', site: 'www.taobao.com' }
console.table([site1, site2, site3], ['site'])
+ const el = util.toEl(
+ ''
+ )
+ console.log('test dom', el)
+ console.dir(el)
console.log('%c Oh my heavens!', 'background: #222; color: #bada55')
console.log('This is the outer level')
console.group()
@@ -159,9 +166,12 @@
console.log('Back to level 2')
console.groupEnd()
console.log('Back to the outer level')
- console.log(navigator)
- console.log(location)
- console.log(performance)
+ console.log(
+ 'navigator: %o location: %o performance: %o',
+ navigator,
+ location,
+ performance
+ )
var arr = []
for (var i = 0; i < 10000; i++) arr.push(i)
console.log(arr)
diff --git a/test/util.js b/test/util.js
index c892aac..7934994 100644
--- a/test/util.js
+++ b/test/util.js
@@ -571,9 +571,10 @@
_.evalCss = (function (exports) {
/* Load css into page.
*
- * |Name|Desc |
- * |----|--------|
- * |css |Css code|
+ * |Name |Desc |
+ * |------|-------------|
+ * |css |Css code |
+ * |return|Style element|
*/
/* example
@@ -581,13 +582,14 @@
*/
/* typescript
- * export declare function evalCss(css: string): void;
+ * export declare function evalCss(css: string): HTMLStyleElement;
*/
exports = function(css) {
var style = document.createElement('style');
style.textContent = css;
style.type = 'text/css';
document.head.appendChild(style);
+ return style;
};
return exports;
@@ -1546,6 +1548,31 @@
return exports;
})({});
+ /* ------------------------------ isSymbol ------------------------------ */
+
+ var isSymbol = _.isSymbol = (function (exports) {
+ /* Check if value is a symbol.
+ *
+ * |Name |Desc |
+ * |------|-------------------------|
+ * |val |Value to check |
+ * |return|True if value is a symbol|
+ */
+
+ /* example
+ * isSymbol(Symbol('test')); // -> true
+ */
+
+ /* typescript
+ * export declare function isSymbol(val: any): boolean;
+ */
+ exports = function(val) {
+ return typeof val === 'symbol';
+ };
+
+ return exports;
+ })({});
+
/* ------------------------------ lowerCase ------------------------------ */
var lowerCase = _.lowerCase = (function (exports) {
@@ -1600,7 +1627,14 @@
var regSpace = /^\s+/;
exports = function(str, chars) {
- if (chars == null) return str.replace(regSpace, '');
+ if (chars == null) {
+ if (str.trimLeft) {
+ return str.trimLeft();
+ }
+
+ return str.replace(regSpace, '');
+ }
+
var start = 0;
var len = str.length;
var charLen = chars.length;
@@ -2826,10 +2860,15 @@
/* typescript
* export declare function rtrim(str: string, chars?: string | string[]): string;
*/
- var regSpace = /\s+$/;
-
exports = function(str, chars) {
- if (chars == null) return str.replace(regSpace, '');
+ if (chars == null) {
+ if (str.trimRight) {
+ return str.trimRight();
+ }
+
+ chars = ' \r\n\t\f\v';
+ }
+
var end = str.length - 1;
var charLen = chars.length;
var found = true;
@@ -2882,10 +2921,11 @@
* ltrim rtrim
*/
- var regSpace = /^\s+|\s+$/g;
-
exports = function(str, chars) {
- if (chars == null) return str.replace(regSpace, '');
+ if (chars == null && str.trim) {
+ return str.trim();
+ }
+
return ltrim(rtrim(str, chars), chars);
};
@@ -3112,7 +3152,7 @@
if (type === 'GET') {
data = query.stringify(data);
- url += url.indexOf('?') > -1 ? '&' + data : '?' + data;
+ if (data) url += url.indexOf('?') > -1 ? '&' + data : '?' + data;
} else if (options.contentType === 'application/x-www-form-urlencoded') {
if (isObj(data)) data = query.stringify(data);
} else if (options.contentType === 'application/json') {
@@ -3207,7 +3247,7 @@
*/
/* dependencies
- * castPath isUndef
+ * castPath isUndef toStr isSymbol isStr
*/
exports = function(obj, path, val) {
@@ -3217,6 +3257,11 @@
prop = path.shift();
while (!isUndef(prop)) {
+ // #25
+ if (!isStr(prop) && !isSymbol(prop)) {
+ prop = toStr(prop);
+ }
+
if (
prop === '__proto__' ||
prop === 'constructor' ||
@@ -3874,5 +3919,46 @@
return exports;
})({});
+ /* ------------------------------ toEl ------------------------------ */
+ _.toEl = (function (exports) {
+ /* Convert html string to dom elements.
+ *
+ * There should be only one root element.
+ *
+ * |Name |Desc |
+ * |------|------------|
+ * |str |Html string |
+ * |return|Html element|
+ */
+
+ /* example
+ * toEl('test
');
+ */
+
+ /* typescript
+ * export declare function toEl(str: string): Element;
+ */
+ var doc = document;
+
+ exports = function(str) {
+ var fragment = doc.createElement('body');
+ fragment.innerHTML = str;
+ return fragment.childNodes[0];
+ };
+
+ if (doc.createRange && doc.body) {
+ var range = doc.createRange();
+ range.selectNode(doc.body);
+
+ if (range.createContextualFragment) {
+ exports = function(str) {
+ return range.createContextualFragment(str).childNodes[0];
+ };
+ }
+ }
+
+ return exports;
+ })({});
+
return _;
}));
\ No newline at end of file