diff --git a/src/Elements/Elements.es6 b/src/Elements/Elements.es6
index 88dde63..85f7c5a 100644
--- a/src/Elements/Elements.es6
+++ b/src/Elements/Elements.es6
@@ -272,14 +272,18 @@ export default class Elements extends Tool
}
}
-var regColor = /rgba?\((.*?)\)/g;
-
function processStyleRules(style)
{
- util.each(style, (val, key) =>
- {
- style[key] = val.replace(regColor, '$&');
- });
+ util.each(style, (val, key) => style[key] = processStyleRule(val));
+}
+
+let regColor = /rgba?\((.*?)\)/g,
+ regCssUrl = /url\("?(.*?)"?\)/g;
+
+function processStyleRule(val)
+{
+ return val.replace(regColor, '$&')
+ .replace(regCssUrl, (match, url) => `url("${wrapLink(url)}")`);
}
const isElExist = val => util.isEl(val) && val.parentNode;
@@ -313,7 +317,14 @@ function formatElName(data)
var formatAttr = attributes => util.map(attributes, attr =>
{
- return {name: attr.name, value: attr.value};
+ let {name, value} = attr;
+ value = util.escape(value);
+
+ let isLink = (name === 'src' || name === 'href') && !util.startWith(value, 'data');
+ if (isLink) value = wrapLink(value);
+ if (name === 'style') value = processStyleRule(value);
+
+ return {name, value};
});
function formatChildNodes(nodes)
@@ -428,3 +439,5 @@ function rmEvent(el, type, listener, useCapture = false)
}
var getWinEventProto = () => (window.EventTarget && window.EventTarget.prototype) || window.Node.prototype;
+
+let wrapLink = link => `${link}`;
diff --git a/src/Elements/Elements.hbs b/src/Elements/Elements.hbs
index 499ed83..2638540 100644
--- a/src/Elements/Elements.hbs
+++ b/src/Elements/Elements.hbs
@@ -17,7 +17,7 @@
{{#each attributes}}
| {{name}} |
- {{value}} |
+ {{{value}}} |
{{/each}}
{{else}}
diff --git a/src/Elements/Elements.scss b/src/Elements/Elements.scss
index 2e95848..cfae5a7 100644
--- a/src/Elements/Elements.scss
+++ b/src/Elements/Elements.scss
@@ -43,7 +43,7 @@
border-bottom: 1px solid $gray-light;
li {
@include overflow-auto(x);
- cursor: pointer;
+ cursor: default;
padding: $padding;
border-top: 1px solid $gray-light;
white-space: nowrap;
@@ -51,6 +51,9 @@
span {
transition: color $anim-duration;
}
+ &.active-effect {
+ cursor: pointer;
+ }
&.active-effect:active {
background: $blue;
color: #fff;
@@ -63,6 +66,9 @@
.attributes {
background: #fff;
font-size: 12px;
+ a {
+ color: $blue;
+ }
.table-wrapper {
@include overflow-auto(x);
}
@@ -89,6 +95,9 @@
.computed-style {
background: #fff;
font-size: 12px;
+ a {
+ color: $blue;
+ }
.table-wrapper {
@include overflow-auto(y);
max-height: 200px;
@@ -117,6 +126,9 @@
.rule {
padding-left: 2em;
word-break: break-all;
+ a {
+ color: $blue;
+ }
span {
color: $red;
}
diff --git a/test/index.html b/test/index.html
index 9a01516..26a7cae 100644
--- a/test/index.html
+++ b/test/index.html
@@ -10,7 +10,7 @@