Bug 858493 - Twisties in the markup panel are very off-centered and their sizes differ. r=jwalker

This commit is contained in:
Paul Rouget 2013-07-08 08:57:00 +02:00
parent 17c8bbc03e
commit e76f9816af
23 changed files with 41 additions and 569 deletions

View File

@ -18,7 +18,7 @@
<div id="root"></div>
<div id="templates" style="display:none">
<ul>
<li id="template-container" save="${elt}" class="container"><span save="${expander}" class="theme-twisty expander"></span><span save="${codeBox}" class="codebox"><ul save="${children}" class="children"></ul></span></li>
<li id="template-container" save="${elt}" class="container"><span save="${codeBox}" class="codebox"><span save="${expander}" class="theme-twisty expander"></span><ul save="${children}" class="children"></ul></span></li>
<li id="template-more-nodes" class="more-nodes devtools-class-comment" save="${elt}"><span>${showing}</span> <button href="#" onclick="${allButtonClick}">${showAll}</button></li>
</ul>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 707 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 700 B

View File

@ -87,10 +87,6 @@ body {
margin-left: -12px!important;
}
.expander[open] {
margin-left: -17px!important;
}
.expandable {
visibility: visible;
}

View File

@ -1,104 +0,0 @@
/* vim:set ts=2 sw=2 sts=2 et: */
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* According to:
* https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17
*/
.theme-body {
background: #131c26;
color: #8fa1b2
}
.theme-twisty {
cursor: pointer;
margin-right: 5px;
}
.theme-twisty:-moz-focusring {
outline-style: none;
}
.theme-twisty:not([open]) {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid rgba(255,255,255,0.5);
margin-left: 5px;
}
.theme-twisty[open] {
width: 10px;
height: 10px;
background-image: linear-gradient(to bottom right, transparent 68%, rgba(255,255,255,0.5) 68%);
}
.theme-checkbox {
display: inline-block;
border: 0;
width: 14px;
height: 14px;
padding: 0;
outline: none;
background: url("chrome://browser/skin/devtools/checkbox-dark.png") no-repeat;
}
.theme-checkbox[checked] {
background: url("chrome://browser/skin/devtools/checkbox-dark.png") 14px 0;
}
.theme-selected {
background: #26384E;
}
.theme-bg-darker {
background-color: rgba(0,0,0,0.1);
}
.theme-link { /* blue */
color: #3689b2;
}
.theme-comment { /* grey */
color: #5c6773;
}
.theme-gutter {
background-color: #0f171f;
color: #667380;
border-color: #303b47;
}
.theme-separator { /* grey */
border-color: #303b47;
}
.theme-fg-color1 { /* green */
color: #5c9966;
}
.theme-fg-color2 { /* blue */
color: #3689b2;
}
.theme-fg-color3 { /* pink/lavender */
color: #a673bf;
}
.theme-fg-color4 { /* purple/violet */
color: #6270b2;
}
.theme-fg-color5 { /* Yellow */
color: #a18650;
}
.theme-fg-color6 { /* Orange */
color: #b26b47;
}
.theme-fg-color7 { /* Red */
color: #bf5656;
}

View File

@ -1,104 +0,0 @@
/* vim:set ts=2 sw=2 sts=2 et: */
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* According to:
* https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17
*/
.theme-body {
background: white;
color: black;
}
.theme-twisty {
cursor: pointer;
margin-right: 5px;
}
.theme-twisty:-moz-focusring {
outline-style: none;
}
.theme-twisty:not([open]) {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid rgba(0,0,0,0.5);
margin-left: 5px;
}
.theme-twisty[open] {
width: 10px;
height: 10px;
background-image: linear-gradient(to bottom right, transparent 68%, rgba(0,0,0,0.5) 68%);
}
.theme-checkbox {
display: inline-block;
border: 0;
width: 14px;
height: 14px;
padding: 0;
outline: none;
background: url("chrome://browser/skin/devtools/checkbox-light.png") no-repeat;
}
.theme-checkbox[checked] {
background: url("chrome://browser/skin/devtools/checkbox-light.png") 14px 0;
}
.theme-selected {
background-color: hsl(0,0%,90%);
}
.theme-bg-darker {
background: #F9F9F9;
}
.theme-link { /* blue */
color: hsl(208,56%,40%);
}
.theme-comment { /* grey */
color: hsl(90,2%,46%);
}
.theme-gutter {
background-color: hsl(0,0%,90%);
color: #667380;
border-color: hsl(0,0%,65%);
}
.theme-separator { /* grey */
border-color: #cddae5;
}
.theme-fg-color1 { /* green */
color: hsl(72,100%,27%);
}
.theme-fg-color2 { /* blue */
color: hsl(208,56%,40%);
}
.theme-fg-color3 { /* dark blue */
color: hsl(208,81%,21%)
}
.theme-fg-color4 { /* Orange */
color: hsl(24,85%,39%);
}
.theme-fg-color5 { /* Yellow */
color: #a18650;
}
.theme-fg-color6 { /* Orange */
color: hsl(24,85%,39%);
}
.theme-fg-color7 { /* Red */
color: #bf5656;
}

View File

@ -123,8 +123,9 @@ browser.jar:
skin/classic/browser/tabview/tabview.png (tabview/tabview.png)
skin/classic/browser/tabview/tabview.css (tabview/tabview.css)
* skin/classic/browser/devtools/common.css (devtools/common.css)
skin/classic/browser/devtools/dark-theme.css (devtools/dark-theme.css)
skin/classic/browser/devtools/light-theme.css (devtools/light-theme.css)
skin/classic/browser/devtools/dark-theme.css (../shared/devtools/dark-theme.css)
skin/classic/browser/devtools/light-theme.css (../shared/devtools/light-theme.css)
skin/classic/browser/devtools/controls.png (../shared/devtools/controls.png)
skin/classic/browser/devtools/widgets.css (devtools/widgets.css)
skin/classic/browser/devtools/commandline-icon.png (devtools/commandline-icon.png)
skin/classic/browser/devtools/command-paintflashing.png (devtools/command-paintflashing.png)
@ -136,10 +137,8 @@ browser.jar:
* skin/classic/browser/devtools/webconsole.css (devtools/webconsole.css)
skin/classic/browser/devtools/webconsole_networkpanel.css (devtools/webconsole_networkpanel.css)
skin/classic/browser/devtools/webconsole.png (devtools/webconsole.png)
skin/classic/browser/devtools/checkbox-dark.png (devtools/checkbox-dark.png)
skin/classic/browser/devtools/checkbox-light.png (devtools/checkbox-light.png)
skin/classic/browser/devtools/commandline.css (devtools/commandline.css)
skin/classic/browser/devtools/markup-view.css (devtools/markup-view.css)
skin/classic/browser/devtools/markup-view.css (../shared/devtools/markup-view.css)
skin/classic/browser/devtools/orion.css (devtools/orion.css)
skin/classic/browser/devtools/orion-container.css (devtools/orion-container.css)
skin/classic/browser/devtools/orion-task.png (devtools/orion-task.png)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 707 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 700 B

View File

@ -105,10 +105,6 @@ body {
margin-left: -12px!important;
}
.expander[open] {
margin-left: -17px!important;
}
.expandable {
visibility: visible;
}

View File

@ -1,104 +0,0 @@
/* vim:set ts=2 sw=2 sts=2 et: */
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* According to:
* https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17
*/
.theme-body {
background: white;
color: black;
}
.theme-twisty {
cursor: pointer;
margin-right: 5px;
}
.theme-twisty:-moz-focusring {
outline-style: none;
}
.theme-twisty:not([open]) {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid rgba(0,0,0,0.5);
margin-left: 5px;
}
.theme-twisty[open] {
width: 10px;
height: 10px;
background-image: linear-gradient(to bottom right, transparent 68%, rgba(0,0,0,0.5) 68%);
}
.theme-checkbox {
display: inline-block;
border: 0;
width: 14px;
height: 14px;
padding: 0;
outline: none;
background: url("chrome://browser/skin/devtools/checkbox-light.png") no-repeat;
}
.theme-checkbox[checked] {
background: url("chrome://browser/skin/devtools/checkbox-light.png") 14px 0;
}
.theme-selected {
background-color: hsl(0,0%,90%);
}
.theme-bg-darker {
background: #F9F9F9;
}
.theme-link { /* blue */
color: hsl(208,56%,40%);
}
.theme-comment { /* grey */
color: hsl(90,2%,46%);
}
.theme-gutter {
background-color: hsl(0,0%,90%);
color: #667380;
border-color: hsl(0,0%,65%);
}
.theme-separator { /* grey */
border-color: #cddae5;
}
.theme-fg-color1 { /* green */
color: hsl(72,100%,27%);
}
.theme-fg-color2 { /* blue */
color: hsl(208,56%,40%);
}
.theme-fg-color3 { /* dark blue */
color: hsl(208,81%,21%)
}
.theme-fg-color4 { /* Orange */
color: hsl(24,85%,39%);
}
.theme-fg-color5 { /* Yellow */
color: #a18650;
}
.theme-fg-color6 { /* Orange */
color: hsl(24,85%,39%);
}
.theme-fg-color7 { /* Red */
color: #bf5656;
}

View File

@ -1,44 +0,0 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
* {
padding: 0;
margin: 0;
}
.newattr {
cursor: pointer;
}
.selected {
background-color: hsl(0,0%,90%);
}
/* Give some padding to focusable elements to match the editor input
* that will replace them. */
span[tabindex] {
display: inline-block;
padding: 1px 0;
}
li.container {
position: relative;
padding: 2px 0 0 2px;
}
.codebox {
padding-left: 14px;
}
.expander {
position: absolute;
}
.more-nodes {
padding-left: 16px;
}
.styleinspector-propertyeditor {
border: 1px solid #CCC;
}

View File

@ -211,8 +211,9 @@ browser.jar:
skin/classic/browser/tabview/tabview.png (tabview/tabview.png)
skin/classic/browser/tabview/tabview.css (tabview/tabview.css)
* skin/classic/browser/devtools/common.css (devtools/common.css)
skin/classic/browser/devtools/dark-theme.css (devtools/dark-theme.css)
skin/classic/browser/devtools/light-theme.css (devtools/light-theme.css)
skin/classic/browser/devtools/dark-theme.css (../shared/devtools/dark-theme.css)
skin/classic/browser/devtools/light-theme.css (../shared/devtools/light-theme.css)
skin/classic/browser/devtools/controls.png (../shared/devtools/controls.png)
skin/classic/browser/devtools/widgets.css (devtools/widgets.css)
skin/classic/browser/devtools/commandline-icon.png (devtools/commandline-icon.png)
skin/classic/browser/devtools/command-paintflashing.png (devtools/command-paintflashing.png)
@ -222,9 +223,7 @@ browser.jar:
skin/classic/browser/devtools/alerticon-warning.png (devtools/alerticon-warning.png)
skin/classic/browser/devtools/ruleview.css (devtools/ruleview.css)
skin/classic/browser/devtools/commandline.css (devtools/commandline.css)
skin/classic/browser/devtools/checkbox-dark.png (devtools/checkbox-dark.png)
skin/classic/browser/devtools/checkbox-light.png (devtools/checkbox-light.png)
skin/classic/browser/devtools/markup-view.css (devtools/markup-view.css)
skin/classic/browser/devtools/markup-view.css (../shared/devtools/markup-view.css)
skin/classic/browser/devtools/orion.css (devtools/orion.css)
skin/classic/browser/devtools/orion-container.css (devtools/orion-container.css)
skin/classic/browser/devtools/orion-task.png (devtools/orion-task.png)

Binary file not shown.

After

Width:  |  Height:  |  Size: 668 B

View File

@ -13,26 +13,19 @@
.theme-twisty {
cursor: pointer;
margin-right: 5px;
width: 14px;
height: 14px;
background-repeat: no-repeat;
background-image: url("chrome://browser/skin/devtools/controls.png");
background-position: -28px -14px;
}
.theme-twisty:-moz-focusring {
outline-style: none;
}
.theme-twisty:not([open]) {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid rgba(255,255,255,0.5);
margin-left: 5px;
}
.theme-twisty[open] {
width: 10px;
height: 10px;
background-image: linear-gradient(to bottom right, transparent 68%, rgba(255,255,255,0.5) 68%);
background-position: -42px -14px;
}
.theme-checkbox {
@ -42,11 +35,12 @@
height: 14px;
padding: 0;
outline: none;
background: url("chrome://browser/skin/devtools/checkbox-dark.png") no-repeat;
background-image: url("chrome://browser/skin/devtools/controls.png");
background-position: -28px 0;
}
.theme-checkbox[checked] {
background: url("chrome://browser/skin/devtools/checkbox-dark.png") 14px 0;
background-position: -42px 0;
}
.theme-selected {

View File

@ -13,26 +13,19 @@
.theme-twisty {
cursor: pointer;
margin-right: 5px;
width: 14px;
height: 14px;
background-repeat: no-repeat;
background-image: url("chrome://browser/skin/devtools/controls.png");
background-position: 0 -14px;
}
.theme-twisty:-moz-focusring {
outline-style: none;
}
.theme-twisty:not([open]) {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid rgba(0,0,0,0.5);
margin-left: 5px;
}
.theme-twisty[open] {
width: 10px;
height: 10px;
background-image: linear-gradient(to bottom right, transparent 68%, rgba(0,0,0,0.5) 68%);
background-position: -14px -14px;
}
.theme-checkbox {
@ -42,11 +35,12 @@
height: 14px;
padding: 0;
outline: none;
background: url("chrome://browser/skin/devtools/checkbox-light.png") no-repeat;
background-image: url("chrome://browser/skin/devtools/controls.png");
background-position: 0 0;
}
.theme-checkbox[checked] {
background: url("chrome://browser/skin/devtools/checkbox-light.png") 14px 0;
background-position: -14px 0;
}
.theme-selected {

View File

@ -23,7 +23,6 @@ span[tabindex] {
}
li.container {
position: relative;
padding: 2px 0 0 2px;
}
@ -31,8 +30,13 @@ li.container {
padding-left: 14px;
}
.codebox > * {
vertical-align: middle;
}
.expander {
position: absolute;
display: inline-block;
margin-left: -14px;
}
.more-nodes {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 707 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 700 B

View File

@ -105,10 +105,6 @@ body {
margin-left: -12px!important;
}
.expander[open] {
margin-left: -17px!important;
}
.expandable {
visibility: visible;
}

View File

@ -1,104 +0,0 @@
/* vim:set ts=2 sw=2 sts=2 et: */
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* According to:
* https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17
*/
.theme-body {
background: #131c26;
color: #8fa1b2
}
.theme-twisty {
cursor: pointer;
margin-right: 5px;
}
.theme-twisty:-moz-focusring {
outline-style: none;
}
.theme-twisty:not([open]) {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid rgba(255,255,255,0.5);
margin-left: 5px;
}
.theme-twisty[open] {
width: 10px;
height: 10px;
background-image: linear-gradient(to bottom right, transparent 68%, rgba(255,255,255,0.5) 68%);
}
.theme-checkbox {
display: inline-block;
border: 0;
width: 14px;
height: 14px;
padding: 0;
outline: none;
background: url("chrome://browser/skin/devtools/checkbox-dark.png") no-repeat;
}
.theme-checkbox[checked] {
background: url("chrome://browser/skin/devtools/checkbox-dark.png") 14px 0;
}
.theme-selected {
background: #26384E;
}
.theme-bg-darker {
background-color: rgba(0,0,0,0.1);
}
.theme-link { /* blue */
color: #3689b2;
}
.theme-comment { /* grey */
color: #5c6773;
}
.theme-gutter {
background-color: #0f171f;
color: #667380;
border-color: #303b47;
}
.theme-separator { /* grey */
border-color: #303b47;
}
.theme-fg-color1 { /* green */
color: #5c9966;
}
.theme-fg-color2 { /* blue */
color: #3689b2;
}
.theme-fg-color3 { /* pink/lavender */
color: #a673bf;
}
.theme-fg-color4 { /* purple/violet */
color: #6270b2;
}
.theme-fg-color5 { /* Yellow */
color: #a18650;
}
.theme-fg-color6 { /* Orange */
color: #b26b47;
}
.theme-fg-color7 { /* Red */
color: #bf5656;
}

View File

@ -1,44 +0,0 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
* {
padding: 0;
margin: 0;
}
.newattr {
cursor: pointer;
}
.selected {
background-color: hsl(0,0%,90%);
}
/* Give some padding to focusable elements to match the editor input
* that will replace them. */
span[tabindex] {
display: inline-block;
padding: 1px 0;
}
li.container {
position: relative;
padding: 2px 0 0 2px;
}
.codebox {
padding-left: 14px;
}
.expander {
position: absolute;
}
.more-nodes {
padding-left: 16px;
}
.styleinspector-propertyeditor {
border: 1px solid #CCC;
}

View File

@ -149,8 +149,9 @@ browser.jar:
skin/classic/browser/tabview/tabview-inverted.png (tabview/tabview-inverted.png)
skin/classic/browser/tabview/tabview.css (tabview/tabview.css)
* skin/classic/browser/devtools/common.css (devtools/common.css)
skin/classic/browser/devtools/dark-theme.css (devtools/dark-theme.css)
skin/classic/browser/devtools/light-theme.css (devtools/light-theme.css)
skin/classic/browser/devtools/dark-theme.css (../shared/devtools/dark-theme.css)
skin/classic/browser/devtools/light-theme.css (../shared/devtools/light-theme.css)
skin/classic/browser/devtools/controls.png (../shared/devtools/controls.png)
skin/classic/browser/devtools/widgets.css (devtools/widgets.css)
skin/classic/browser/devtools/commandline-icon.png (devtools/commandline-icon.png)
skin/classic/browser/devtools/alerticon-warning.png (devtools/alerticon-warning.png)
@ -160,9 +161,7 @@ browser.jar:
skin/classic/browser/devtools/command-responsivemode.png (devtools/command-responsivemode.png)
skin/classic/browser/devtools/command-scratchpad.png (devtools/command-scratchpad.png)
skin/classic/browser/devtools/command-tilt.png (devtools/command-tilt.png)
skin/classic/browser/devtools/checkbox-dark.png (devtools/checkbox-dark.png)
skin/classic/browser/devtools/checkbox-light.png (devtools/checkbox-light.png)
skin/classic/browser/devtools/markup-view.css (devtools/markup-view.css)
skin/classic/browser/devtools/markup-view.css (../shared/devtools/markup-view.css)
skin/classic/browser/devtools/orion.css (devtools/orion.css)
skin/classic/browser/devtools/orion-container.css (devtools/orion-container.css)
skin/classic/browser/devtools/orion-task.png (devtools/orion-task.png)
@ -404,20 +403,19 @@ browser.jar:
skin/classic/aero/browser/tabview/tabview-inverted.png (tabview/tabview-inverted.png)
skin/classic/aero/browser/tabview/tabview.css (tabview/tabview.css)
* skin/classic/aero/browser/devtools/common.css (devtools/common.css)
skin/classic/aero/browser/devtools/dark-theme.css (devtools/dark-theme.css)
skin/classic/aero/browser/devtools/light-theme.css (devtools/light-theme.css)
skin/classic/aero/browser/devtools/dark-theme.css (../shared/devtools/dark-theme.css)
skin/classic/aero/browser/devtools/light-theme.css (../shared/devtools/light-theme.css)
skin/classic/aero/browser/devtools/controls.png (../shared/devtools/controls.png)
skin/classic/aero/browser/devtools/widgets.css (devtools/widgets.css)
skin/classic/aero/browser/devtools/commandline-icon.png (devtools/commandline-icon.png)
skin/classic/aero/browser/devtools/command-paintflashing.png (devtools/command-paintflashing.png)
skin/classic/aero/browser/devtools/command-responsivemode.png (devtools/command-responsivemode.png)
skin/classic/aero/browser/devtools/command-scratchpad.png (devtools/command-scratchpad.png)
skin/classic/aero/browser/devtools/command-tilt.png (devtools/command-tilt.png)
skin/classic/aero/browser/devtools/checkbox-dark.png (devtools/checkbox-dark.png)
skin/classic/aero/browser/devtools/checkbox-light.png (devtools/checkbox-light.png)
skin/classic/aero/browser/devtools/alerticon-warning.png (devtools/alerticon-warning.png)
skin/classic/aero/browser/devtools/ruleview.css (devtools/ruleview.css)
skin/classic/aero/browser/devtools/commandline.css (devtools/commandline.css)
skin/classic/aero/browser/devtools/markup-view.css (devtools/markup-view.css)
skin/classic/aero/browser/devtools/markup-view.css (../shared/devtools/markup-view.css)
skin/classic/aero/browser/devtools/orion.css (devtools/orion.css)
skin/classic/aero/browser/devtools/orion-container.css (devtools/orion-container.css)
skin/classic/aero/browser/devtools/orion-task.png (devtools/orion-task.png)