mirror of
https://github.com/liriliri/eruda.git
synced 2026-04-01 10:18:35 +08:00
Dev: Settings
This commit is contained in:
surunzi
@@ -50,6 +50,7 @@ export default class CssStore
|
||||
{
|
||||
var matchesEl = false;
|
||||
|
||||
// Mobile safari will throw DOM Exception 12 error, need to try catch it.
|
||||
try {
|
||||
matchesEl = this._elMatchesSel(cssRule.selectorText);
|
||||
} catch (e) {}
|
||||
|
||||
@@ -90,6 +90,22 @@ function getAttrStyle(attribute)
|
||||
return ret;
|
||||
}
|
||||
|
||||
var defComputedStyle = require('./defComputedStyle.json');
|
||||
|
||||
function rmDefComputedStyle(computedStyle)
|
||||
{
|
||||
var ret = {};
|
||||
|
||||
util.each(computedStyle, (val, key) =>
|
||||
{
|
||||
if (val === defComputedStyle[key]) return;
|
||||
|
||||
ret[key] = val;
|
||||
});
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
var noStyleTag = ['script', 'style', 'meta', 'title', 'link', 'head'];
|
||||
|
||||
function needNoStyle(tagName)
|
||||
@@ -106,6 +122,7 @@ export default class Elements extends Tool
|
||||
super();
|
||||
this.name = 'elements';
|
||||
this._tpl = require('./Elements.hbs');
|
||||
this._rmDefComputedStyle = true;
|
||||
}
|
||||
init($el)
|
||||
{
|
||||
@@ -119,6 +136,12 @@ export default class Elements extends Tool
|
||||
this._htmlEl = document.getElementsByTagName('html')[0];
|
||||
this._setEl(this._htmlEl, 0);
|
||||
}
|
||||
show()
|
||||
{
|
||||
super.show();
|
||||
|
||||
this._render();
|
||||
}
|
||||
_back()
|
||||
{
|
||||
if (this._curEl === this._htmlEl) return;
|
||||
@@ -139,6 +162,9 @@ export default class Elements extends Tool
|
||||
level = self._curLevel + 1;
|
||||
|
||||
self._setEl(el, level);
|
||||
}).on('click', '.toggle-all-computed-style', () =>
|
||||
{
|
||||
this._toggleAllComputedStyle();
|
||||
});
|
||||
|
||||
var $bottomBar = this._$el.find('.eruda-bottom-bar');
|
||||
@@ -148,6 +174,12 @@ export default class Elements extends Tool
|
||||
.on('click', '.highlight', () => this._highlight())
|
||||
.on('click', '.reset', () => this._setEl(this._htmlEl, 0));
|
||||
}
|
||||
_toggleAllComputedStyle()
|
||||
{
|
||||
this._rmDefComputedStyle = !this._rmDefComputedStyle;
|
||||
|
||||
this._render();
|
||||
}
|
||||
_highlight()
|
||||
{
|
||||
this._$curEl.toggleClass('eruda-highlight');
|
||||
@@ -162,6 +194,7 @@ export default class Elements extends Tool
|
||||
this._$curEl = util.$(el);
|
||||
this._curLevel = level;
|
||||
this._curCssStore = new CssStore(el);
|
||||
this._rmDefComputedStyle = true;
|
||||
|
||||
this._render();
|
||||
}
|
||||
@@ -188,7 +221,9 @@ export default class Elements extends Tool
|
||||
|
||||
if (needNoStyle(tagName)) return ret;
|
||||
|
||||
ret.computedStyle = cssStore.getComputedStyle();
|
||||
var computedStyle = cssStore.getComputedStyle();
|
||||
if (this._rmDefComputedStyle) computedStyle = rmDefComputedStyle(computedStyle);
|
||||
ret.computedStyle = computedStyle;
|
||||
|
||||
var styles = cssStore.getMatchedCSSRules();
|
||||
styles.unshift(getAttrStyle(attributes));
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
</div>
|
||||
{{#if computedStyle}}
|
||||
<div class="eruda-computed-style eruda-section">
|
||||
<h2>Computed Style</h2>
|
||||
<h2 class="toggle-all-computed-style">Computed Style</h2>
|
||||
<div class="eruda-table-wrapper">
|
||||
<table>
|
||||
<tbody>
|
||||
|
||||
352
src/Elements/defComputedStyle.json
Normal file
352
src/Elements/defComputedStyle.json
Normal file
@@ -0,0 +1,352 @@
|
||||
{
|
||||
"align-content": "stretch",
|
||||
"align-items": "stretch",
|
||||
"align-self": "start",
|
||||
"alignment-baseline": "auto",
|
||||
"all": "",
|
||||
"animation": "none 0s ease 0s 1 normal none running",
|
||||
"animation-delay": "0s",
|
||||
"animation-direction": "normal",
|
||||
"animation-duration": "0s",
|
||||
"animation-fill-mode": "none",
|
||||
"animation-iteration-count": "1",
|
||||
"animation-name": "none",
|
||||
"animation-play-state": "running",
|
||||
"animation-timing-function": "ease",
|
||||
"backface-visibility": "visible",
|
||||
"background": "rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box",
|
||||
"background-attachment": "scroll",
|
||||
"background-blend-mode": "normal",
|
||||
"background-clip": "border-box",
|
||||
"background-color": "rgba(0, 0, 0, 0)",
|
||||
"background-image": "none",
|
||||
"background-origin": "padding-box",
|
||||
"background-position": "0% 0%",
|
||||
"background-position-x": "0%",
|
||||
"background-position-y": "0%",
|
||||
"background-repeat": "repeat",
|
||||
"background-repeat-x": "",
|
||||
"background-repeat-y": "",
|
||||
"background-size": "auto",
|
||||
"baseline-shift": "0px",
|
||||
"border": "0px none rgb(0, 0, 0)",
|
||||
"border-bottom": "0px none rgb(0, 0, 0)",
|
||||
"border-bottom-color": "rgb(0, 0, 0)",
|
||||
"border-bottom-left-radius": "0px",
|
||||
"border-bottom-right-radius": "0px",
|
||||
"border-bottom-style": "none",
|
||||
"border-bottom-width": "0px",
|
||||
"border-collapse": "separate",
|
||||
"border-color": "rgb(0, 0, 0)",
|
||||
"border-image": "none",
|
||||
"border-image-outset": "0px",
|
||||
"border-image-repeat": "stretch",
|
||||
"border-image-slice": "100%",
|
||||
"border-image-source": "none",
|
||||
"border-image-width": "1",
|
||||
"border-left": "0px none rgb(0, 0, 0)",
|
||||
"border-left-color": "rgb(0, 0, 0)",
|
||||
"border-left-style": "none",
|
||||
"border-left-width": "0px",
|
||||
"border-radius": "0px",
|
||||
"border-right": "0px none rgb(0, 0, 0)",
|
||||
"border-right-color": "rgb(0, 0, 0)",
|
||||
"border-right-style": "none",
|
||||
"border-right-width": "0px",
|
||||
"border-spacing": "0px 0px",
|
||||
"border-style": "none",
|
||||
"border-top": "0px none rgb(0, 0, 0)",
|
||||
"border-top-color": "rgb(0, 0, 0)",
|
||||
"border-top-left-radius": "0px",
|
||||
"border-top-right-radius": "0px",
|
||||
"border-top-style": "none",
|
||||
"border-top-width": "0px",
|
||||
"border-width": "0px",
|
||||
"bottom": "auto",
|
||||
"box-shadow": "none",
|
||||
"box-sizing": "content-box",
|
||||
"buffered-rendering": "auto",
|
||||
"caption-side": "top",
|
||||
"clear": "none",
|
||||
"clip": "auto",
|
||||
"clip-path": "none",
|
||||
"clip-rule": "nonzero",
|
||||
"color": "rgb(0, 0, 0)",
|
||||
"color-interpolation": "sRGB",
|
||||
"color-interpolation-filters": "linearRGB",
|
||||
"color-rendering": "auto",
|
||||
"content": "",
|
||||
"counter-increment": "none",
|
||||
"counter-reset": "none",
|
||||
"cursor": "auto",
|
||||
"cx": "0px",
|
||||
"cy": "0px",
|
||||
"direction": "ltr",
|
||||
"display": "block",
|
||||
"dominant-baseline": "auto",
|
||||
"empty-cells": "show",
|
||||
"fill": "rgb(0, 0, 0)",
|
||||
"fill-opacity": "1",
|
||||
"fill-rule": "nonzero",
|
||||
"filter": "none",
|
||||
"flex": "0 1 auto",
|
||||
"flex-basis": "auto",
|
||||
"flex-direction": "row",
|
||||
"flex-flow": "row nowrap",
|
||||
"flex-grow": "0",
|
||||
"flex-shrink": "1",
|
||||
"flex-wrap": "nowrap",
|
||||
"float": "none",
|
||||
"flood-color": "rgb(0, 0, 0)",
|
||||
"flood-opacity": "1",
|
||||
"font": "normal normal normal normal 16px / normal simsun",
|
||||
"font-family": "Simsun",
|
||||
"font-feature-settings": "normal",
|
||||
"font-kerning": "auto",
|
||||
"font-size": "16px",
|
||||
"font-stretch": "normal",
|
||||
"font-style": "normal",
|
||||
"font-variant": "normal",
|
||||
"font-variant-ligatures": "normal",
|
||||
"font-weight": "normal",
|
||||
"image-rendering": "auto",
|
||||
"isolation": "auto",
|
||||
"justify-content": "flex-start",
|
||||
"left": "auto",
|
||||
"letter-spacing": "normal",
|
||||
"lighting-color": "rgb(255, 255, 255)",
|
||||
"line-height": "normal",
|
||||
"list-style": "disc outside none",
|
||||
"list-style-image": "none",
|
||||
"list-style-position": "outside",
|
||||
"list-style-type": "disc",
|
||||
"margin": "0px",
|
||||
"margin-bottom": "0px",
|
||||
"margin-left": "0px",
|
||||
"margin-right": "0px",
|
||||
"margin-top": "0px",
|
||||
"marker": "",
|
||||
"marker-end": "none",
|
||||
"marker-mid": "none",
|
||||
"marker-start": "none",
|
||||
"mask": "none",
|
||||
"mask-type": "luminance",
|
||||
"max-height": "none",
|
||||
"max-width": "none",
|
||||
"max-zoom": "",
|
||||
"min-height": "0px",
|
||||
"min-width": "0px",
|
||||
"min-zoom": "",
|
||||
"mix-blend-mode": "normal",
|
||||
"motion": "none 0px auto 0deg",
|
||||
"motion-offset": "0px",
|
||||
"motion-path": "none",
|
||||
"motion-rotation": "auto 0deg",
|
||||
"object-fit": "fill",
|
||||
"object-position": "50% 50%",
|
||||
"opacity": "1",
|
||||
"order": "0",
|
||||
"orientation": "",
|
||||
"orphans": "auto",
|
||||
"outline": "rgb(0, 0, 0) none 0px",
|
||||
"outline-color": "rgb(0, 0, 0)",
|
||||
"outline-offset": "0px",
|
||||
"outline-style": "none",
|
||||
"outline-width": "0px",
|
||||
"overflow": "visible",
|
||||
"overflow-wrap": "normal",
|
||||
"overflow-x": "visible",
|
||||
"overflow-y": "visible",
|
||||
"padding": "0px",
|
||||
"padding-bottom": "0px",
|
||||
"padding-left": "0px",
|
||||
"padding-right": "0px",
|
||||
"padding-top": "0px",
|
||||
"page": "",
|
||||
"page-break-after": "auto",
|
||||
"page-break-before": "auto",
|
||||
"page-break-inside": "auto",
|
||||
"paint-order": "fill stroke markers",
|
||||
"perspective": "none",
|
||||
"pointer-events": "auto",
|
||||
"position": "static",
|
||||
"quotes": "",
|
||||
"r": "0px",
|
||||
"resize": "none",
|
||||
"right": "auto",
|
||||
"rx": "0px",
|
||||
"ry": "0px",
|
||||
"shape-image-threshold": "0",
|
||||
"shape-margin": "0px",
|
||||
"shape-outside": "none",
|
||||
"shape-rendering": "auto",
|
||||
"size": "",
|
||||
"speak": "normal",
|
||||
"src": "",
|
||||
"stop-color": "rgb(0, 0, 0)",
|
||||
"stop-opacity": "1",
|
||||
"stroke": "none",
|
||||
"stroke-dasharray": "none",
|
||||
"stroke-dashoffset": "0px",
|
||||
"stroke-linecap": "butt",
|
||||
"stroke-linejoin": "miter",
|
||||
"stroke-miterlimit": "4",
|
||||
"stroke-opacity": "1",
|
||||
"stroke-width": "1px",
|
||||
"tab-size": "8",
|
||||
"table-layout": "auto",
|
||||
"text-align": "start",
|
||||
"text-align-last": "auto",
|
||||
"text-anchor": "start",
|
||||
"text-combine-upright": "none",
|
||||
"text-decoration": "none",
|
||||
"text-indent": "0px",
|
||||
"text-orientation": "mixed",
|
||||
"text-overflow": "clip",
|
||||
"text-rendering": "auto",
|
||||
"text-shadow": "none",
|
||||
"text-transform": "none",
|
||||
"top": "auto",
|
||||
"touch-action": "auto",
|
||||
"transform": "none",
|
||||
"transform-style": "flat",
|
||||
"transition": "all 0s ease 0s",
|
||||
"transition-delay": "0s",
|
||||
"transition-duration": "0s",
|
||||
"transition-property": "all",
|
||||
"transition-timing-function": "ease",
|
||||
"unicode-bidi": "normal",
|
||||
"unicode-range": "",
|
||||
"user-zoom": "",
|
||||
"vector-effect": "none",
|
||||
"vertical-align": "baseline",
|
||||
"visibility": "visible",
|
||||
"-webkit-app-region": "no-drag",
|
||||
"-webkit-appearance": "none",
|
||||
"-webkit-background-clip": "border-box",
|
||||
"-webkit-background-composite": "source-over",
|
||||
"-webkit-background-origin": "padding-box",
|
||||
"-webkit-border-after": "0px none rgb(0, 0, 0)",
|
||||
"-webkit-border-after-color": "rgb(0, 0, 0)",
|
||||
"-webkit-border-after-style": "none",
|
||||
"-webkit-border-after-width": "0px",
|
||||
"-webkit-border-before": "0px none rgb(0, 0, 0)",
|
||||
"-webkit-border-before-color": "rgb(0, 0, 0)",
|
||||
"-webkit-border-before-style": "none",
|
||||
"-webkit-border-before-width": "0px",
|
||||
"-webkit-border-end": "0px none rgb(0, 0, 0)",
|
||||
"-webkit-border-end-color": "rgb(0, 0, 0)",
|
||||
"-webkit-border-end-style": "none",
|
||||
"-webkit-border-end-width": "0px",
|
||||
"-webkit-border-horizontal-spacing": "0px",
|
||||
"-webkit-border-image": "none",
|
||||
"-webkit-border-start": "0px none rgb(0, 0, 0)",
|
||||
"-webkit-border-start-color": "rgb(0, 0, 0)",
|
||||
"-webkit-border-start-style": "none",
|
||||
"-webkit-border-start-width": "0px",
|
||||
"-webkit-border-vertical-spacing": "0px",
|
||||
"-webkit-box-align": "stretch",
|
||||
"-webkit-box-decoration-break": "slice",
|
||||
"-webkit-box-direction": "normal",
|
||||
"-webkit-box-flex": "0",
|
||||
"-webkit-box-flex-group": "1",
|
||||
"-webkit-box-lines": "single",
|
||||
"-webkit-box-ordinal-group": "1",
|
||||
"-webkit-box-orient": "horizontal",
|
||||
"-webkit-box-pack": "start",
|
||||
"-webkit-box-reflect": "none",
|
||||
"-webkit-clip-path": "none",
|
||||
"-webkit-column-break-after": "auto",
|
||||
"-webkit-column-break-before": "auto",
|
||||
"-webkit-column-break-inside": "auto",
|
||||
"-webkit-column-count": "auto",
|
||||
"-webkit-column-gap": "normal",
|
||||
"-webkit-column-rule": "0px none rgb(0, 0, 0)",
|
||||
"-webkit-column-rule-color": "rgb(0, 0, 0)",
|
||||
"-webkit-column-rule-style": "none",
|
||||
"-webkit-column-rule-width": "0px",
|
||||
"-webkit-column-span": "none",
|
||||
"-webkit-column-width": "auto",
|
||||
"-webkit-columns": "auto auto",
|
||||
"-webkit-filter": "none",
|
||||
"-webkit-font-size-delta": "",
|
||||
"-webkit-font-smoothing": "auto",
|
||||
"-webkit-highlight": "none",
|
||||
"-webkit-hyphenate-character": "auto",
|
||||
"-webkit-line-break": "auto",
|
||||
"-webkit-line-clamp": "none",
|
||||
"-webkit-locale": "auto",
|
||||
"-webkit-logical-height": "8px",
|
||||
"-webkit-logical-width": "980px",
|
||||
"-webkit-margin-after": "0px",
|
||||
"-webkit-margin-after-collapse": "collapse",
|
||||
"-webkit-margin-before": "0px",
|
||||
"-webkit-margin-before-collapse": "collapse",
|
||||
"-webkit-margin-bottom-collapse": "collapse",
|
||||
"-webkit-margin-collapse": "",
|
||||
"-webkit-margin-end": "0px",
|
||||
"-webkit-margin-start": "0px",
|
||||
"-webkit-margin-top-collapse": "collapse",
|
||||
"-webkit-mask": "",
|
||||
"-webkit-mask-box-image": "none",
|
||||
"-webkit-mask-box-image-outset": "0px",
|
||||
"-webkit-mask-box-image-repeat": "stretch",
|
||||
"-webkit-mask-box-image-slice": "0 fill",
|
||||
"-webkit-mask-box-image-source": "none",
|
||||
"-webkit-mask-box-image-width": "auto",
|
||||
"-webkit-mask-clip": "border-box",
|
||||
"-webkit-mask-composite": "source-over",
|
||||
"-webkit-mask-image": "none",
|
||||
"-webkit-mask-origin": "border-box",
|
||||
"-webkit-mask-position": "0% 0%",
|
||||
"-webkit-mask-position-x": "0%",
|
||||
"-webkit-mask-position-y": "0%",
|
||||
"-webkit-mask-repeat": "repeat",
|
||||
"-webkit-mask-repeat-x": "",
|
||||
"-webkit-mask-repeat-y": "",
|
||||
"-webkit-mask-size": "auto",
|
||||
"-webkit-max-logical-height": "none",
|
||||
"-webkit-max-logical-width": "none",
|
||||
"-webkit-min-logical-height": "0px",
|
||||
"-webkit-min-logical-width": "0px",
|
||||
"-webkit-padding-after": "0px",
|
||||
"-webkit-padding-before": "0px",
|
||||
"-webkit-padding-end": "0px",
|
||||
"-webkit-padding-start": "0px",
|
||||
"-webkit-perspective-origin-x": "",
|
||||
"-webkit-perspective-origin-y": "",
|
||||
"-webkit-print-color-adjust": "economy",
|
||||
"-webkit-rtl-ordering": "logical",
|
||||
"-webkit-ruby-position": "before",
|
||||
"-webkit-tap-highlight-color": "rgba(0, 0, 0, 0.180392)",
|
||||
"-webkit-text-combine": "none",
|
||||
"-webkit-text-decorations-in-effect": "none",
|
||||
"-webkit-text-emphasis": "",
|
||||
"-webkit-text-emphasis-color": "rgb(0, 0, 0)",
|
||||
"-webkit-text-emphasis-position": "over",
|
||||
"-webkit-text-emphasis-style": "none",
|
||||
"-webkit-text-fill-color": "rgb(0, 0, 0)",
|
||||
"-webkit-text-orientation": "vertical-right",
|
||||
"-webkit-text-security": "none",
|
||||
"-webkit-text-stroke": "",
|
||||
"-webkit-text-stroke-color": "rgb(0, 0, 0)",
|
||||
"-webkit-text-stroke-width": "0px",
|
||||
"-webkit-transform-origin-x": "",
|
||||
"-webkit-transform-origin-y": "",
|
||||
"-webkit-transform-origin-z": "",
|
||||
"-webkit-user-drag": "auto",
|
||||
"-webkit-user-modify": "read-only",
|
||||
"-webkit-user-select": "text",
|
||||
"-webkit-writing-mode": "horizontal-tb",
|
||||
"white-space": "normal",
|
||||
"widows": "1",
|
||||
"will-change": "auto",
|
||||
"word-break": "normal",
|
||||
"word-spacing": "0px",
|
||||
"word-wrap": "normal",
|
||||
"writing-mode": "horizontal-tb",
|
||||
"x": "0px",
|
||||
"y": "0px",
|
||||
"z-index": "0",
|
||||
"zoom": "1"
|
||||
}
|
||||
Reference in New Issue
Block a user