Skip to content

Instantly share code, notes, and snippets.

@paulrouget

paulrouget/fiddle.css

Created October 4, 2011 11:52
Show Gist options
  • Save paulrouget/1261452 to your computer and use it in GitHub Desktop.
Save paulrouget/1261452 to your computer and use it in GitHub Desktop.
Download ZIP
Firefox HTML Tree Panel
Raw
fiddle.css
html {
background-color: -moz-dialog;
}
body {
margin: 0;
overflow: auto;
font-family: Lucida Grande, sans-serif;
font-size: 11px;
border-top: 1px solid #BBB9BA;
}
h1 {
font-size: 17px;
border-bottom: 1px solid threedlightshadow;
}
a {
color: #0000ff;
}
pre {
margin: 0;
font: inherit;
}
code {
display: block;
white-space: pre;
}
/* DOMPlate */
.objectLink-element,
.objectLink-textNode,
.objectLink-function,
.objectBox-stackTrace,
.objectLink-profile {
font-family: Menlo, Andale Mono, monospace;
}
.objectLink-textNode {
white-space: pre-wrap;
}
.objectLink-styleRule,
.objectLink-element,
.objectLink-textNode {
color: #000088;
}
.selectorTag,
.selectorId,
.selectorClass {
font-family: Menlo, Andale Mono, monospace;
font-weight: normal;
}
.selectorTag {
color: #0000FF;
}
.selectorId {
color: DarkBlue;
}
.selectorClass {
color: red;
}
.selectorHidden > .selectorTag {
color: #5F82D9;
}
.selectorHidden > .selectorId {
color: #888888;
}
.selectorHidden > .selectorClass {
color: #D86060;
}
.selectorValue {
font-family: Menlo, Andale Mono, monospace;
font-style: italic;
color: #555555;
}
.panelNode-html {
-moz-box-sizing: padding-box;
padding: 4px 0 0 2px;
}
.nodeBox {
position: relative;
font-family: Menlo, Andale Mono, monospace;
padding-left: 13px;
-moz-user-select: -moz-none;
}
.nodeBox.search-selection {
-moz-user-select: text;
}
.twisty {
position: absolute;
left: 0px;
top: 0px;
width: 14px;
height: 14px;
}
.nodeChildBox {
margin-left: 12px;
display: none;
}
.nodeLabel,
.nodeCloseLabel {
margin: -2px 2px 0 2px;
border: 2px solid transparent;
border-radius: 3px;
padding: 0 2px;
color: #000088;
}
.nodeCloseLabel {
display: none;
}
.nodeTag {
cursor: pointer;
color: blue;
}
.nodeValue {
color: #FF0000;
font-weight: normal;
}
.nodeText,
.nodeComment {
margin: 0 2px;
vertical-align: top;
}
.nodeText {
color: #333333;
}
.docType {
position: absolute;
/* position DOCTYPE element above/outside the "nodeBox" that contains it */
/* Note: to be fixed in Bug #688439 */
top: -16px;
font-family: Menlo, Andale Mono, monospace;
padding-left: 8px;
color: #999;
white-space: nowrap;
font-style: italic;
}
.htmlNodeBox {
/* make room for DOCTYPE element to be rendered above/outside "nodeBox" */
/* Note: to be fixed in Bug #688439 */
margin-top: 16px;
}
.nodeWhiteSpace {
border: 1px solid LightGray;
white-space: pre; /* otherwise the border will be collapsed around zero pixels */
margin-left: 1px;
color: gray;
}
.nodeWhiteSpace_Space {
border: 1px solid #ddd;
}
.nodeTextEntity {
border: 1px solid gray;
white-space: pre; /* otherwise the border will be collapsed around zero pixels */
margin-left: 1px;
}
.nodeComment {
color: DarkGreen;
}
.nodeBox.highlightOpen > .nodeLabel {
background-color: #EEEEEE;
}
.nodeBox.highlightOpen > .nodeCloseLabel,
.nodeBox.highlightOpen > .nodeChildBox,
.nodeBox.open > .nodeCloseLabel,
.nodeBox.open > .nodeChildBox {
display: block;
}
.nodeBox.selected > .nodeLabel > .nodeLabelBox,
.nodeBox.selected > .nodeLabel {
border-color: Highlight;
background-color: Highlight;
color: HighlightText !important;
}
.nodeBox.selected > .nodeLabel > .nodeLabelBox,
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeTag,
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeAttr > .nodeValue,
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeText {
color: inherit !important;
}
.nodeBox.highlighted > .nodeLabel {
border-color: Highlight !important;
background-color: cyan !important;
color: #000000 !important;
}
.nodeBox.highlighted > .nodeLabel > .nodeLabelBox,
.nodeBox.highlighted > .nodeLabel > .nodeLabelBox > .nodeTag,
.nodeBox.highlighted > .nodeLabel > .nodeLabelBox > .nodeAttr > .nodeValue,
.nodeBox.highlighted > .nodeLabel > .nodeLabelBox > .nodeText {
color: #000000 !important;
}
.nodeBox.nodeHidden .nodeLabel > .nodeLabelBox,
.nodeBox.nodeHidden .nodeCloseLabel,
.nodeBox.nodeHidden .nodeLabel > .nodeLabelBox > .nodeText,
.nodeBox.nodeHidden .nodeText {
color: #888888;
}
.nodeBox.nodeHidden .nodeLabel > .nodeLabelBox > .nodeTag,
.nodeBox.nodeHidden .nodeCloseLabel > .nodeCloseLabelBox > .nodeTag {
color: #5F82D9;
}
.nodeBox.nodeHidden .nodeLabel > .nodeLabelBox > .nodeAttr > .nodeValue {
color: #D86060;
}
.nodeBox.nodeHidden.selected > .nodeLabel > .nodeLabelBox,
.nodeBox.nodeHidden.selected > .nodeLabel > .nodeLabelBox > .nodeTag,
.nodeBox.nodeHidden.selected > .nodeLabel > .nodeLabelBox > .nodeAttr > .nodeValue,
.nodeBox.nodeHidden.selected > .nodeLabel > .nodeLabelBox > .nodeText {
color: SkyBlue !important;
}
.nodeBox.mutated > .nodeLabel,
.nodeAttr.mutated,
.nodeValue.mutated,
.nodeText.mutated,
.nodeBox.mutated > .nodeText {
background-color: #EFFF79;
color: #FF0000 !important;
}
.nodeBox.selected.mutated > .nodeLabel,
.nodeBox.selected.mutated > .nodeLabel > .nodeLabelBox,
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeAttr.mutated > .nodeValue,
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeAttr > .nodeValue.mutated,
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeText.mutated {
background-color: #EFFF79;
border-color: #EFFF79;
color: #FF0000 !important;
}
.logRow-dirxml {
padding-left: 0;
}
.soloElement > .nodeBox {
padding-left: 0;
}
.nodeBox.selected > .nodeLabel > .nodeLabelBox,
.nodeBox.selected > .nodeLabel {
border-color: #3875d7;
background-color: #3875d7;
color: #FFFFFF !important;
}
.nodeBox.highlighted > .nodeLabel {
border-color: #3875d7 !important;
}
/************************************************************************************************/
/* Twisties */
.twisty
{
-moz-appearance: treetwisty;
}
.nodeBox.highlightOpen > .nodeLabel > .twisty,
.nodeBox.open > .nodeLabel > .twisty
{
-moz-appearance: treetwistyopen;
}
.memberRow.hasChildren > .memberLabelCell > .memberLabel,
.hasHeaders .netHrefLabel {
background-position: 2px 2px;
}
.nodeBox.selected > .nodeLabel > .nodeLabelBox,
.nodeBox.selected > .nodeLabel {
border-color: #3875d7;
background-color: #3875d7;
color: #FFFFFF !important;
}
.nodeBox.highlighted > .nodeLabel {
border-color: #3875d7 !important;
}
.editingAttributeValue {
background-color: #492;
}
#attribute-editor {
visibility: hidden;
position: absolute;
z-index: 5000;
background-color: #fff;
border: 1px solid #000;
}
#attribute-editor.editing {
visibility: visible;
}
#attribute-editor-input {
border: none;
padding: 2px 5px;
font-family: Menlo, Andale Mono, monospace;
font-size: 11px;
}
Raw
fiddle.html
<body>
<div>
<div role="presentation" class="nodeBox htmlNodeBox containerNodeBox repIgnore open">
<div class="docType">
&lt;!DOCTYPE html&gt;
</div>
<div role="presentation" class="nodeLabel">
<img role="presentation" class="twisty"><span role="treeitem" aria-expanded=
"true" class="nodeLabelBox repTarget">&lt;<span class=
"nodeTag">html</span><span class="nodeAttr editGroup">&nbsp;<span class=
"nodeName editable">xmlns</span>="<span data-attributename="xmlns" class=
"nodeValue editable">http://www.w3.org/1999/xhtml</span>"</span><span class=
"nodeBracket editable insertBefore">&gt;</span></span>
</div>
<div role="group" class="nodeChildBox">
<div role="presentation" class="nodeBox containerNodeBox repIgnore">
<div role="presentation" class="nodeLabel">
<img role="presentation" class="twisty"><span role="treeitem" aria-expanded=
"false" class="nodeLabelBox repTarget">&lt;<span class=
"nodeTag">head</span><span class=
"nodeBracket editable insertBefore">&gt;</span></span>
</div>
<div role="group" class="nodeChildBox"></div>
<div role="presentation" class="nodeCloseLabel">
<span class="nodeCloseLabelBox repTarget">&lt;/<span class=
"nodeTag">head</span>&gt;</span>
</div>
</div>
<div role="presentation" class=
"nodeBox containerNodeBox repIgnore open selected">
<div role="presentation" class="nodeLabel">
<img role="presentation" class="twisty"><span role="treeitem" aria-expanded=
"true" class="nodeLabelBox repTarget">&lt;<span class=
"nodeTag">body</span><span class="nodeAttr editGroup">&nbsp;<span class=
"nodeName editable">dir</span>="<span data-attributename="dir" class=
"nodeValue editable">ltr</span>"</span><span class=
"nodeAttr editGroup">&nbsp;<span class=
"nodeName editable">onload</span>="<span data-attributename="onload" class=
"nodeValue editable">onLoad(event)</span>"</span><span class=
"nodeBracket editable insertBefore">&gt;</span></span>
</div>
<div role="group" class="nodeChildBox">
<div role="presentation" class="nodeBox textNodeBox repIgnore">
<div role="presentation" class="nodeLabel">
<span role="treeitem" class="nodeLabelBox repTarget">&lt;<span class=
"nodeTag">div</span><span class="nodeAttr editGroup">&nbsp;<span class=
"nodeName editable">id</span>="<span data-attributename="id" class=
"nodeValue editable">brandStartSpacer</span>"</span><span class=
"nodeBracket editable insertBefore">&gt;</span>&lt;/<span class=
"nodeTag">div</span>&gt;</span>
</div>
</div>
<div role="presentation" class="nodeBox containerNodeBox repIgnore">
<div role="presentation" class="nodeLabel">
<img role="presentation" class="twisty"><span role="treeitem"
aria-expanded="false" class="nodeLabelBox repTarget">&lt;<span class=
"nodeTag">div</span><span class="nodeAttr editGroup">&nbsp;<span class=
"nodeName editable">id</span>="<span data-attributename="id" class=
"nodeValue editable">brandStart</span>"</span><span class=
"nodeBracket editable insertBefore">&gt;</span></span>
</div>
<div role="group" class="nodeChildBox"></div>
<div role="presentation" class="nodeCloseLabel">
<span class="nodeCloseLabelBox repTarget">&lt;/<span class=
"nodeTag">div</span>&gt;</span>
</div>
</div>
<div role="presentation" class="nodeBox containerNodeBox repIgnore">
<div role="presentation" class="nodeLabel">
<img role="presentation" class="twisty"><span role="treeitem"
aria-expanded="false" class="nodeLabelBox repTarget">&lt;<span class=
"nodeTag">div</span><span class="nodeAttr editGroup">&nbsp;<span class=
"nodeName editable">id</span>="<span data-attributename="id" class=
"nodeValue editable">searchContainer</span>"</span><span class=
"nodeBracket editable insertBefore">&gt;</span></span>
</div>
<div role="group" class="nodeChildBox"></div>
<div role="presentation" class="nodeCloseLabel">
<span class="nodeCloseLabelBox repTarget">&lt;/<span class=
"nodeTag">div</span>&gt;</span>
</div>
</div>
<div role="presentation" class="nodeBox containerNodeBox repIgnore">
<div role="presentation" class="nodeLabel">
<img role="presentation" class="twisty"><span role="treeitem"
aria-expanded="false" class="nodeLabelBox repTarget">&lt;<span class=
"nodeTag">div</span><span class="nodeAttr editGroup">&nbsp;<span class=
"nodeName editable">id</span>="<span data-attributename="id" class=
"nodeValue editable">contentContainer</span>"</span><span class=
"nodeBracket editable insertBefore">&gt;</span></span>
</div>
<div role="group" class="nodeChildBox"></div>
<div role="presentation" class="nodeCloseLabel">
<span class="nodeCloseLabelBox repTarget">&lt;/<span class=
"nodeTag">div</span>&gt;</span>
</div>
</div>
<div role="presentation" class="nodeBox containerNodeBox repIgnore open">
<div role="presentation" class="nodeLabel">
<img role="presentation" class="twisty"><span role="treeitem"
aria-expanded="true" class="nodeLabelBox repTarget">&lt;<span class=
"nodeTag">div</span><span class="nodeAttr editGroup">&nbsp;<span class=
"nodeName editable">id</span>="<span data-attributename="id" class=
"nodeValue editable">bottomSection</span>"</span><span class=
"nodeBracket editable insertBefore">&gt;</span></span>
</div>
<div role="group" class="nodeChildBox">
<div role="presentation" class="nodeBox containerNodeBox repIgnore open">
<div role="presentation" class="nodeLabel">
<img role="presentation" class="twisty"><span role="treeitem"
aria-expanded="true" class="nodeLabelBox repTarget">&lt;<span class=
"nodeTag">div</span><span class=
"nodeAttr editGroup">&nbsp;<span class=
"nodeName editable">id</span>="<span data-attributename="id" class=
"nodeValue editable">aboutMozilla</span>"</span><span class=
"nodeBracket editable insertBefore">&gt;</span></span>
</div>
<div role="group" class="nodeChildBox">
<div role="presentation" class="nodeBox textNodeBox repIgnore">
<div role="presentation" class="nodeLabel">
<span role="treeitem" class=
"nodeLabelBox repTarget">&lt;<span class=
"nodeTag">a</span><span class=
"nodeAttr editGroup">&nbsp;<span class=
"nodeName editable">href</span>="<span data-attributename="href"
class=
"nodeValue editable">http://www.mozilla.com/about/</span>"</span><span class="nodeBracket editable insertBefore">&gt;</span><span class="nodeText editable"><span class="">About
Mozilla</span></span>&lt;/<span class=
"nodeTag">a</span>&gt;</span>
</div>
</div>
</div>
<div role="presentation" class="nodeCloseLabel">
<span class="nodeCloseLabelBox repTarget">&lt;/<span class=
"nodeTag">div</span>&gt;</span>
</div>
</div>
</div>
<div role="presentation" class="nodeCloseLabel">
<span class="nodeCloseLabelBox repTarget">&lt;/<span class=
"nodeTag">div</span>&gt;</span>
</div>
</div>
</div>
<div role="presentation" class="nodeCloseLabel">
<span class="nodeCloseLabelBox repTarget">&lt;/<span class=
"nodeTag">body</span>&gt;</span>
</div>
</div>
</div>
<div role="presentation" class="nodeCloseLabel">
<span class="nodeCloseLabelBox repTarget">&lt;/<span class=
"nodeTag">html</span>&gt;</span>
</div>
</div>
</div>
</body>
Raw
fiddle.js
/* (Firefox only)
So what you see here is a HTML Panel. It will be part of Firefox, and will be used by Web Developers to debug a page. To see it in action, look at this screenshot:
# http://i.imgur.com/d6fOI.png
You can see more mockups here:
# http://people.mozilla.com/~shorlander/devTools/devTools.html
We would really appreciate if you can make this look better. Something less boring and more sexy. Don't touch the HTML. Play only with the CSS.
Ping me on Twitter if you manage to do something: @paulrouget
Related gist: https://gist.github.com/1261452
Thank you! … and welcome to the Open Source world :)
*/
Raw
fiddle.manifest
name: Firefox HTML Tree view
description: The design of the current HTML Tree view in Firefox is pretty basic. We should improve that.
authors:
- Mozilla
normalize_css: no
@pivanov
Copy link

pivanov commented Oct 4, 2011

looks great :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment