wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 687702 - Skin the Style Editor according to shorlander's mockups. r=dao

Browse Source
This commit is contained in:
Paul Rouget 2011-12-19 15:14:58 +01:00
parent 9a80191e1b
commit 8993d92b27
38 changed files with 1061 additions and 744 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
browser/base/content/browser.xul
View File

@ -55,6 +55,7 @@
<?xml-stylesheet href="chrome://browser/content/browser.css" type="text/css"?>
<?xml-stylesheet href="chrome://browser/content/places/places.css" type="text/css"?>
<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
<?xml-stylesheet href="chrome://browser/skin/devtools/webconsole.css" type="text/css"?>
<?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
@ -971,7 +972,9 @@
<splitter id="devtools-side-splitter" hidden="true"/>
<vbox id="devtools-sidebar-box" hidden="true"
style="min-width: 18em; width: 22em; max-width: 42em;" persist="width">
<toolbar id="devtools-sidebar-toolbar" nowindowdrag="true"/>
<toolbar id="devtools-sidebar-toolbar"
class="devtools-toolbar"
nowindowdrag="true"/>
<deck id="devtools-sidebar-deck" flex="1"/>
</vbox>
<vbox id="browser-border-end" hidden="true" layer="true"/>
@ -987,6 +990,7 @@
<vbox id="browser-bottombox" layer="true">
<toolbar id="inspector-toolbar"
class="devtools-toolbar"
nowindowdrag="true"
hidden="true">
<vbox flex="1">
@ -1001,6 +1005,7 @@
tooltiptext="&inspectCloseButton.tooltiptext;"/>
#endif
<toolbarbutton id="inspector-inspect-toolbutton"
class="devtools-toolbarbutton"
label="&inspectButton.label;"
accesskey="&inspectButton.accesskey;"
command="Inspector:Inspect"/>
@ -1009,11 +1014,13 @@
clicktoscroll="true"/>
<hbox id="inspector-tools">
<toolbarbutton id="inspector-3D-button"
class="devtools-toolbarbutton"
hidden="true"
label="&inspect3DButton.label;"
accesskey="&inspect3DButton.accesskey;"
command="Inspector:Tilt"/>
<toolbarbutton id="inspector-style-button"
class="devtools-toolbarbutton"
label="&inspectStyleButton.label;"
accesskey="&inspectStyleButton.accesskey;"
command="Inspector:Sidebar"/>

2
browser/devtools/highlighter/inspector.jsm
View File

@ -1672,6 +1672,7 @@ InspectorUI.prototype = {
btn = this.chromeDoc.createElement("toolbarbutton");
let buttonId = this.getToolbarButtonId(aRegObj.id);
btn.setAttribute("id", buttonId);
btn.setAttribute("class", "devtools-toolbarbutton");
btn.setAttribute("label", aRegObj.label);
btn.setAttribute("tooltiptext", aRegObj.tooltiptext);
btn.setAttribute("accesskey", aRegObj.accesskey);
@ -1733,6 +1734,7 @@ InspectorUI.prototype = {
btn.id = buttonId;
btn.setAttribute("label", aRegObj.label);
btn.setAttribute("class", "devtools-toolbarbutton");
btn.setAttribute("tooltiptext", aRegObj.tooltiptext);
btn.setAttribute("accesskey", aRegObj.accesskey);
btn.setAttribute("image", aRegObj.icon || "");

38
browser/devtools/styleeditor/SplitView.jsm
View File

@ -20,6 +20,7 @@
*
* Contributor(s):
* Cedric Vivier <cedricv@neonux.com> (original author)
* Paul Rouget <paul@mozilla.com>
*
* Alternatively, the contents of this file may be used under the terms of
* either the GNU General Public License Version 2 or later (the "GPL"), or
@ -232,9 +233,6 @@ SplitView.prototype = {
* string and will be hidden.
* - object data
* Object to pass to the callbacks above.
* - boolean disableAnimations
* If true there is no animation or scrolling when this item is
* appended. Set this when batch appending (eg. initial population).
* - number ordinal
* Items with a lower ordinal are displayed before those with a
* higher ordinal.
@ -247,10 +245,6 @@ SplitView.prototype = {
binding._details = aDetails;
aSummary.setUserData(BINDING_USERDATA, binding, null);
if (!binding.disableAnimations) {
aSummary.classList.add("splitview-slide");
aSummary.classList.add("splitview-flash");
}
this._nav.appendChild(aSummary);
aSummary.addEventListener("click", function onSummaryClick(aEvent) {
@ -266,11 +260,6 @@ SplitView.prototype = {
binding.onCreate(aSummary, aDetails, binding.data);
}, 0);
}
if (!binding.disableAnimations) {
scheduleAnimation(aSummary, "splitview-slide", "splitview-flash");
aSummary.scrollIntoView();
}
},
/**
@ -462,28 +451,3 @@ SplitView.prototype = {
}
}
};
//
// private helpers
/**
* Schedule one or multiple CSS animation(s) on an element.
*
* @param DOMElement aElement
* @param string ...
* One or multiple animation class name(s).
*/
function scheduleAnimation(aElement)
{
let classes = Array.prototype.slice.call(arguments, 1);
for each (let klass in classes) {
aElement.classList.add(klass);
}
let window = aElement.ownerDocument.defaultView;
window.mozRequestAnimationFrame(function triggerAnimation() {
for each (let klass in classes) {
aElement.classList.remove(klass);
}
});
}

2
browser/devtools/styleeditor/StyleEditorChrome.jsm
View File

@ -351,7 +351,7 @@ StyleEditorChrome.prototype = {
*/
_disableChrome: function SEC__disableChrome()
{
let matches = this._root.querySelectorAll("button,input,select");
let matches = this._root.querySelectorAll("button,toolbarbutton,textbox");
for (let i = 0; i < matches.length; ++i) {
matches[i].setAttribute("disabled", "disabled");
}

30
browser/devtools/styleeditor/splitview.css
View File

@ -20,6 +20,7 @@
*
* Contributor(s):
* Cedric Vivier <cedricv@neonux.com> (original author)
* Paul Rouget <paul@mozilla.com>
*
* Alternatively, the contents of this file may be used under the terms of
* either the GNU General Public License Version 2 or later (the "GPL"), or
@ -41,17 +42,24 @@ box,
-moz-box-orient: vertical;
}
.splitview-nav-container {
-moz-box-pack: center;
}
.splitview-controller,
.splitview-main {
-moz-box-flex: 0;
}
.splitview-controller {
min-height: 8em;
min-height: 3em;
max-height: 14em;
}
.splitview-nav {
display: -moz-box;
overflow-x: hidden;
overflow-y: auto;
}
/* only the active details pane is shown */
@ -62,13 +70,16 @@ box,
display: -moz-box;
}
.splitview-landscape-resizer {
cursor: ew-resize;
}
/* this is to keep in sync with SplitView.jsm's LANDSCAPE_MEDIA_QUERY */
@media (min-aspect-ratio: 5/3) {
.splitview-root {
-moz-box-orient: horizontal;
}
.splitview-controller {
-moz-box-flex: 0;
max-height: none;
}
.splitview-details {
@ -94,3 +105,18 @@ ol.splitview-nav > li.splitview-filtered {
.splitview-nav:empty ~ .splitview-nav.placeholder.empty {
display: -moz-box;
}
.splitview-portrait-resizer {
display: none;
}
/* portrait mode */
@media (max-aspect-ratio: 5/3) {
#splitview-details-toolbar {
display: none;
}
.splitview-portrait-resizer {
display: -moz-box;
}
}

80
browser/devtools/styleeditor/styleeditor.css
View File

@ -35,9 +35,85 @@
*
* ***** END LICENSE BLOCK ***** */
.splitview-nav > li hgroup > .stylesheet-error-message {
.stylesheet-error-message {
display: none;
}
.splitview-nav > li.error hgroup > .stylesheet-error-message {
li.error > .stylesheet-info > .stylesheet-more > .stylesheet-error-message {
display: block;
}
.splitview-nav > li,
.stylesheet-info,
.stylesheet-more {
display: -moz-box;
}
.splitview-nav > li {
-moz-box-orient: horizontal;
}
.splitview-nav > li > hgroup {
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-flex: 1;
}
.stylesheet-info > h1 {
-moz-box-flex: 1;
}
.stylesheet-name {
/* clip the text at the beginning */
display: -moz-box;
direction: rtl;
text-align: left;
overflow: hidden;
}
.splitview-nav > li > hgroup.stylesheet-info {
-moz-box-pack: center;
}
.splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before,
.splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after {
content: "* ";
}
.stylesheet-enabled {
display: -moz-box;
}
.stylesheet-saveButton {
display: none;
}
.stylesheet-rule-count,
li:hover > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton {
display: -moz-box;
}
.stylesheet-more > spacer {
-moz-box-flex: 1;
}
/* portrait mode */
@media (max-aspect-ratio: 5/3) {
li:hover > hgroup > .stylesheet-more > .stylesheet-rule-count {
display: none;
}
.stylesheet-more {
-moz-box-flex: 1;
-moz-box-direction: reverse;
}
.splitview-nav > li > hgroup.stylesheet-info {
-moz-box-orient: horizontal;
-moz-box-flex: 1;
}
.stylesheet-more > spacer {
-moz-box-flex: 0;
}
}

55
browser/devtools/styleeditor/styleeditor.xul
View File

@ -20,6 +20,7 @@
-
- Contributor(s):
- Cedric Vivier <cedricv@neonux.com> (original author)
- Paul Rouget <paul@mozilla.com>
-
- Alternatively, the contents of this file may be used under the terms of
- either the GNU General Public License Version 2 or later (the "GPL"), or
@ -40,6 +41,7 @@
]>
<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
<?xml-stylesheet href="chrome://browser/content/splitview.css" type="text/css"?>
<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
<?xml-stylesheet href="chrome://browser/skin/devtools/splitview.css" type="text/css"?>
<?xml-stylesheet href="chrome://browser/content/styleeditor.css" type="text/css"?>
<?xml-stylesheet href="chrome://browser/skin/devtools/styleeditor.css" type="text/css"?>
@ -53,24 +55,23 @@
<xul:script type="application/javascript" src="chrome://global/content/globalOverlay.js"/>
<xul:box id="style-editor-chrome" class="splitview-root">
<xul:box class="splitview-side-details"></xul:box>
<xul:box class="splitview-controller">
<xul:box class="splitview-controller" id="stylesheets-controller" persist="width height">
<xul:box class="splitview-main">
<xul:box class="toolbar">
<xul:button class="style-editor-newButton"
<xul:toolbar class="devtools-toolbar">
<xul:toolbarbutton class="style-editor-newButton devtools-toolbarbutton"
accesskey="&newButton.accesskey;"
tooltiptext="&newButton.tooltip;"
label="&newButton.label;"></xul:button>
<xul:button class="style-editor-importButton"
label="&newButton.label;"/>
<xul:toolbarbutton class="style-editor-importButton devtools-toolbarbutton"
accesskey="&importButton.accesskey;"
tooltiptext="&importButton.tooltip;"
label="&importButton.label;"></xul:button>
<xul:box class="spacer" flex="1"></xul:box>
<xul:textbox class="splitview-filter"
type="search"
label="&importButton.label;"/>
<xul:spacer flex="1"/>
<xul:textbox class="splitview-filter devtools-searchinput"
type="search" flex="1"
tooltiptext="&searchInput.tooltip;"
placeholder="&searchInput.placeholder;"/>
</xul:box>
</xul:toolbar>
</xul:box>
<xul:box class="splitview-nav-container">
<ol class="splitview-nav" tabindex="0"></ol>
@ -90,6 +91,7 @@
</div>
</xul:box> <!-- .splitview-nav-container -->
</xul:box> <!-- .splitview-controller -->
<xul:box class="splitview-side-details"/>
<div id="splitview-templates" hidden="true">
<li id="splitview-tpl-summary-stylesheet" tabindex="0">
@ -98,24 +100,29 @@
accesskey="&saveButton.accesskey;"></a>
<hgroup class="stylesheet-info">
<h1><a class="stylesheet-name" href="#"></a></h1>
<h2 class="stylesheet-title"></h2>
<h3 class="stylesheet-error-message"></h3>
</hgroup>
<div class="stylesheet-more">
<hgroup class="stylesheet-stats">
<div class="stylesheet-more">
<h3 class="stylesheet-title"></h3>
<h3 class="stylesheet-rule-count"></h3>
</hgroup>
<hgroup class="stylesheet-actions">
<h1><a class="stylesheet-saveButton" href="#"
<h3 class="stylesheet-error-message"></h3>
<xul:spacer/>
<h3><a class="stylesheet-saveButton" href="#"
title="&saveButton.tooltip;"
accesskey="&saveButton.accesskey;">&saveButton.label;</a></h1>
</hgroup>
</div>
accesskey="&saveButton.accesskey;">&saveButton.label;</a></h3>
</div>
</hgroup>
</li>
<xul:box id="splitview-tpl-details-stylesheet" class="splitview-details">
<div class="stylesheet-editor-input textbox"
data-placeholder="&editorTextbox.placeholder;"></div>
<xul:resizer class="splitview-portrait-resizer"
dir="bottom"
element="stylesheets-controller"/>
<xul:toolbar id="splitview-details-toolbar" class="devtools-toolbar">
<xul:resizer class="splitview-landscape-resizer"
dir="bottomend"
element="stylesheets-controller"/>
</xul:toolbar>
<xul:box class="stylesheet-editor-input textbox"
data-placeholder="&editorTextbox.placeholder;"/>
</xul:box>
</div> <!-- #splitview-templates -->
</xul:box> <!-- .splitview-root -->

2
browser/devtools/styleeditor/test/browser_styleeditor_readonly.js
View File

@ -51,7 +51,7 @@ function run(aChrome)
let elements;
disabledCount = 0;
elements = document.querySelectorAll("button,input,select");
elements = document.querySelectorAll("button,toolbarbutton,textbox");
for (let i = 0; i < elements.length; ++i) {
if (elements[i].hasAttribute("disabled")) {
disabledCount++;

55
browser/themes/gnomestripe/browser.css
View File

@ -1983,11 +1983,7 @@ panel[dimmed="true"] {
/* Highlighter toolbar */
#inspector-toolbar {
-moz-appearance: none;
padding: 4px 3px;
border-top: 1px solid hsla(210, 8%, 5%, .65);
box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
background-image: -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
}
#inspector-toolbar[treepanel-open] {
@ -1995,13 +1991,6 @@ panel[dimmed="true"] {
-moz-padding-end: 0;
}
#devtools-sidebar-toolbar {
-moz-appearance: none;
padding: 4px 3px;
box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
background-image: -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
}
#devtools-side-splitter {
-moz-appearance: none;
border: 0;
@ -2013,50 +2002,6 @@ panel[dimmed="true"] {
position: relative;
}
#inspector-inspect-toolbutton,
#inspector-tools > toolbarbutton,
#devtools-sidebar-toolbar > toolbarbutton {
-moz-appearance: none;
min-width: 78px;
min-height: 22px;
color: hsl(210,30%,85%);
text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
border: 1px solid hsla(210,8%,5%,.45);
border-radius: 3px;
background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
margin: 0 3px;
}
#inspector-inspect-toolbutton:not([checked]):hover:active,
#inspector-tools > toolbarbutton:not([checked]):hover:active,
#devtools-sidebar-toolbar > toolbarbutton:not([checked]):hover:active {
border-color: hsla(210,8%,5%,.6);
background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
}
#inspector-inspect-toolbutton[checked],
#inspector-tools > toolbarbutton[checked],
#devtools-sidebar-toolbar > toolbarbutton[checked] {
color: hsl(208,100%,60%) !important;
border-color: hsla(210,8%,5%,.6) !important;
background: -moz-linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
}
#inspector-inspect-toolbutton[checked]:hover,
#inspector-tools > toolbarbutton[checked]:hover,
#devtools-sidebar-toolbar > toolbarbutton[checked]:hover {
background-color: transparent !important;
}
#inspector-inspect-toolbutton[checked]:hover:active,
#inspector-tools > toolbarbutton[checked]:hover:active,
#devtools-sidebar-toolbar > toolbarbutton[checked]:hover:active {
background-color: hsla(210,8%,5%,.2) !important;
}
/* Highlighter - toolbar resizers */
.inspector-resizer {

112
browser/themes/gnomestripe/devtools/common.css Normal file
View File

@ -0,0 +1,112 @@
/* vim:set ts=2 sw=2 sts=2 et: */
/* ***** BEGIN LICENSE BLOCK *****
* Version: MPL 1.1/GPL 2.0/LGPL 2.1
*
* The contents of this file are subject to the Mozilla Public License Version
* 1.1 (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
* http://www.mozilla.org/MPL/
*
* Software distributed under the License is distributed on an "AS IS" basis,
* WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
* for the specific language governing rights and limitations under the
* License.
*
* The Original Code is DevTools code.
*
* The Initial Developer of the Original Code is Mozilla Foundation.
* Portions created by the Initial Developer are Copyright (C) 2011
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
* Paul Rouget <paul@mozilla.com> (original author)
*
* Alternatively, the contents of this file may be used under the terms of
* either the GNU General Public License Version 2 or later (the "GPL"), or
* the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
* in which case the provisions of the GPL or the LGPL are applicable instead
* of those above. If you wish to allow use of your version of this file only
* under the terms of either the GPL or the LGPL, and not to allow others to
* use your version of this file under the terms of the MPL, indicate your
* decision by deleting the provisions above and replace them with the notice
* and other provisions required by the GPL or the LGPL. If you do not delete
* the provisions above, a recipient may use your version of this file under
* the terms of any one of the MPL, the GPL or the LGPL.
*
* ***** END LICENSE BLOCK ***** */
/* Toolbar and Toolbar items */
.devtools-toolbar {
-moz-appearance: none;
padding: 4px 3px;
box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
background: -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
}
.devtools-toolbarbutton {
-moz-appearance: none;
min-width: 78px;
min-height: 22px;
color: hsl(210,30%,85%);
text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
border: 1px solid hsla(210,8%,5%,.45);
border-radius: 3px;
background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
margin: 0 3px;
}
.devtools-toolbarbutton:not([checked]):hover:active {
border-color: hsla(210,8%,5%,.6);
background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
}
.devtools-toolbarbutton[checked] {
color: hsl(208,100%,60%) !important;
border-color: hsla(210,8%,5%,.6) !important;
background: -moz-linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
}
.devtools-toolbarbutton[checked]:hover {
background-color: transparent !important;
}
.devtools-toolbarbutton[checked]:hover:active {
background-color: hsla(210,8%,5%,.2) !important;
}
/* Search input */
.devtools-searchinput {
-moz-appearance: none;
margin: 0 3px;
background-color: transparent;
border: 1px solid hsla(210,8%,5%,.6);
border-radius: 20px;
background-image: url(magnifying-glass.png), -moz-linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
background-repeat: no-repeat;
background-position: 4px 3px, top left, top left;
padding-top: 0;
padding-bottom: 0;
-moz-padding-start: 18px;
-moz-padding-end: 12px;
box-shadow: 0 1px 1px hsla(210,8%,5%,.3) inset,
0 0 0 1px hsla(210,16%,76%,.1) inset,
0 1px 0 hsla(210,16%,76%,.15);
color: hsl(210,30%,85%);
}
.devtools-searchinput:-moz-locale-dir(rtl) {
background-position: -moz-calc(100% - 4px) 3px, top left, top left;
}
.devtools-searchinput > .textbox-input-box > .textbox-search-icons {
display: none;
}
.devtools-searchinput > .textbox-input-box > .textbox-input:-moz-placeholder {
color: hsl(208,10%,66%);
}

BIN
browser/themes/gnomestripe/devtools/eye-toggle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 784 B

BIN
browser/themes/gnomestripe/devtools/itemArrow-ltr.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
browser/themes/gnomestripe/devtools/itemArrow-rtl.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
browser/themes/gnomestripe/devtools/itemToggle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
browser/themes/gnomestripe/devtools/magnifying-glass.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 275 B

165
browser/themes/gnomestripe/devtools/splitview.css
View File

@ -20,6 +20,7 @@
*
* Contributor(s):
* Cedric Vivier <cedricv@neonux.com> (original author)
* Paul Rouget <paul@mozilla.com>
*
* Alternatively, the contents of this file may be used under the terms of
* either the GNU General Public License Version 2 or later (the "GPL"), or
@ -35,90 +36,124 @@
*
* ***** END LICENSE BLOCK ***** */
.splitview-root {
margin-top: 4px;
}
.splitview-filter {
-moz-box-flex: 1;
-moz-margin-start: 1ex;
max-width: 25ex;
}
.splitview-nav-container {
-moz-box-pack: center;
margin: 4px;
border: 1px inset WindowFrame;
border-radius: 4px;
background-color: -moz-default-background-color;
color: -moz-default-color;
background-color: hsl(208,11%,27%);
color: white;
}
ol.splitview-nav {
overflow-x: hidden;
overflow-y: auto;
.splitview-nav {
-moz-appearance: none;
margin: 0;
box-shadow: inset -1px 0 0 #222426;
}
.splitview-nav > li {
color: white;
background-clip: padding-box;
border-bottom: 1px solid hsla(210,16%,76%,.1);
box-shadow: inset 0 -1px 0 hsla(210,8%,5%,.25);
-moz-padding-end: 8px;
-moz-box-align: center;
}
.splitview-nav {
list-style-image: none;
list-style: none;
padding: 0;
margin: 0;
}
ol.splitview-nav > li {
display: -moz-box;
-moz-box-orient: vertical;
.splitview-nav > li {
outline: 0;
border-bottom: 1px solid ThreeDShadow;
padding: 2px;
padding-top: 4px;
vertical-align: bottom;
color: black;
-moz-transition-property: background-color, max-height;
-moz-transition-duration: 1s;
max-height: 2048px; /* for slide transition */
}
ol.splitview-nav > li.splitview-active {
background-color: #eaf2fe; /* same as orion.css's .line_caret */
}
ol.splitview-nav > li:hover,
ol.splitview-nav > li:focus {
background-color: #f0f5fd; /* slightly lighter .line_caret */
}
ol.splitview-nav > li.splitview-flash {
background-color: #faf0e1; /* complement of .line_caret */
}
ol.splitview-nav > li.splitview-slide {
max-height: 0;
overflow: hidden;
}
.splitview-side-details {
margin: 2px;
}
.splitview-nav.splitview-all-filtered ~ .splitview-nav.placeholder.all-filtered,
.splitview-nav:empty ~ .splitview-nav.placeholder.empty {
-moz-box-flex: 0;
.placeholder {
-moz-box-flex: 1;
-moz-box-back: center;
text-align: center;
}
.splitview-main .toolbar,
.splitview-main .toolbar > * {
display: -moz-box;
}
.splitview-main .toolbar {
-moz-box-flex: 1;
-moz-box-orient: horizontal;
-moz-padding-start: 3px;
.splitview-nav > li.splitview-active {
background-image: url(itemArrow-ltr.png),
-moz-linear-gradient(left, black, black),
-moz-linear-gradient(hsl(206,61%,40%), hsl(206,61%,31%));
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: center right, top right, top left;
background-size: auto, 1px 100%, auto;
border-bottom: 1px solid hsla(210,8%,5%,.25);
box-shadow: inset 0 1px 0 hsla(210,40%,83%,.15),
inset 0 -1px 0 hsla(210,40%,83%,.05);
}
a {
color: -moz-hyperlinktext;
text-decoration: underline;
.splitview-nav > li.splitview-active:-moz-locale-dir(rtl) {
background-image: url(itemArrow-rtl.png),
-moz-linear-gradient(left, black, black),
-moz-linear-gradient(hsl(206,61%,40%), hsl(206,61%,31%));
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: center left, top left, top right;
}
button {
margin: 0;
/* Toolbars */
.devtools-toolbar {
height: 26px;
background-origin: border-box;
background-clip: border-box;
border-top: 1px solid hsla(210,8%,5%,.5);
border-bottom: 1px solid hsla(210,8%,5%,.65);
padding: 3px;
}
.splitview-main > toolbar:-moz-locale-dir(ltr) {
border-right: 1px solid hsla(210,8%,5%,.5);
}
.splitview-main > toolbar:-moz-locale-dir(rtl) {
border-left: 1px solid hsla(210,8%,5%,.5);
}
.devtools-toolbarbutton {
font-size: 11px;
padding: 0 8px;
width: auto;
min-width: 48px;
min-height: 0;
}
/* Resizers */
.splitview-landscape-resizer {
-moz-appearance: none;
width: 7px;
background-image: -moz-linear-gradient(left, black 1px, rgba(255,255,255,0.2) 1px);
background-size: 2px 10px;
background-clip: padding-box;
background-repeat: repeat-x;
border-width: 1px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.05);
margin: 5px 0;
-moz-transform: translateX(-7px);
}
.splitview-landscape-resizer:-moz-locale-dir(rtl) {
-moz-transform: translateX(7px);
}
.splitview-portrait-resizer {
-moz-appearance: none;
background: -moz-linear-gradient(top, black 1px, rgba(255,255,255,0.2) 1px),
-moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
height: 12px;
background-size: 10px 2px, 100% 12px;
background-clip: content-box, border-box;
background-repeat: repeat-y, no-repeat;
background-position: center center;
padding: 2px 0;
border-top: 1px solid hsla(210,8%,5%,.5);
border-bottom: 1px solid hsla(210,8%,5%,.5);
}
/* limited width mode (hide search unless it has focus [search-on-type]) */
@ -128,8 +163,6 @@ button {
position: fixed;
margin: 0;
bottom: -4em;
-moz-transition-property: bottom;
-moz-transition-duration: 0.2s;
}
.splitview-filter[focused="true"] {
bottom: 0;

187
browser/themes/gnomestripe/devtools/styleeditor.css
View File

@ -20,6 +20,7 @@
*
* Contributor(s):
* Cedric Vivier <cedricv@neonux.com> (original author)
* Paul Rouget <paul@mozilla.com>
*
* Alternatively, the contents of this file may be used under the terms of
* either the GNU General Public License Version 2 or later (the "GPL"), or
@ -35,136 +36,89 @@
*
* ***** END LICENSE BLOCK ***** */
ol.splitview-nav:focus {
.stylesheet-title,
.stylesheet-name {
text-decoration: none;
color: hsl(207,17%,88%);
}
.stylesheet-name {
font-size: 13px;
}
.stylesheet-rule-count,
.stylesheet-saveButton {
color: hsl(211,12%,60%);
}
.stylesheet-saveButton {
text-decoration: underline;
cursor: pointer;
}
.splitview-active .stylesheet-title,
.splitview-active .stylesheet-name {
color: hsl(0,0%,100%);
}
.splitview-active .stylesheet-rule-count,
.splitview-active .stylesheet-saveButton {
color: hsl(200,66%,70%);
}
.splitview-nav:focus {
outline: 0; /* focus ring is on the stylesheet name */
}
.splitview-nav > li:-moz-locale-dir(ltr),
.splitview-nav > li hgroup:-moz-locale-dir(ltr) {
float: left;
}
.splitview-nav > li:-moz-locale-dir(rtl),
.splitview-nav > li hgroup:-moz-locale-dir(rtl) {
float: right;
}
.splitview-nav > li > hgroup.stylesheet-info {
max-width: 66%;
}
.splitview-nav > li > hgroup .stylesheet-name {
display: inline-block;
width: 100%;
max-width: 34ex;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.splitview-nav > li.unsaved > hgroup .stylesheet-name {
font-style: italic;
}
.splitview-nav > li.unsaved > hgroup .stylesheet-name:before:-moz-locale-dir(ltr),
.splitview-nav > li.unsaved > hgroup .stylesheet-name:after:-moz-locale-dir(rtl) {
.splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before,
.splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after {
font-style: italic;
content: "* ";
}
.splitview-nav > li > .stylesheet-enabled {
float: left;
width: 20px;
height: 20px;
-moz-margin-end: 6px;
border: 1px solid transparent;
background-image: url(eye-toggle.png);
background-position: center center;
.stylesheet-enabled {
padding: 8px 0;
margin: 0 8px;
background-image: url(itemToggle.png);
background-repeat: no-repeat;
background-clip: content-box;
background-position: 0 8px;
width: 24px;
height: 40px;
}
.splitview-nav > li > .stylesheet-enabled:-moz-locale-dir(rtl) {
float: right;
}
.splitview-nav > li.disabled > .stylesheet-enabled {
background-image: none;
.disabled > .stylesheet-enabled {
background-position: -24px 8px;
}
.splitview-nav > li > .stylesheet-enabled:focus,
.splitview-nav > li:hover > .stylesheet-enabled {
outline: 0;
border: 1px inset WindowFrame;
-moz-margin-end: 6px;
}
.splitview-nav > li hgroup .stylesheet-title {
color: GrayText;
font-size: 0.8em;
}
.splitview-nav > li.error hgroup > .stylesheet-error-message {
.stylesheet-error-message {
color: red;
font-size: 0.8em;
}
.splitview-nav > li > .stylesheet-more {
position: relative;
right: 0;
}
.splitview-nav > li > .stylesheet-more:-moz-locale-dir(rtl) {
left: 0;
.stylesheet-more > h3 {
font-size: 11px;
-moz-margin-end: 2px;
}
.splitview-nav > li hgroup.stylesheet-stats,
.splitview-nav > li hgroup.stylesheet-actions {
position: absolute;
z-index: 2;
-moz-transition-property: left, right;
-moz-transition-duration: 0.2s;
-moz-transition-delay: 0.2s;
-moz-transition-timing-function: ease-in-out;
.devtools-searchinput {
max-width: 25ex;
font-size: 11px;
}
.splitview-nav > li hgroup.stylesheet-stats {
z-index: 1;
-moz-transition-delay: 0.4s;
color: GrayText;
padding-left: 6px; /* Fitts */
padding-right: 6px;
}
.splitview-nav > li hgroup.stylesheet-actions a {
color: ButtonText;
padding-left: 6px; /* Fitts */
padding-right: 6px;
.placeholder {
color: white;
}
.splitview-nav > li hgroup.stylesheet-actions:-moz-locale-dir(ltr),
.splitview-nav > li:hover hgroup.stylesheet-stats:-moz-locale-dir(ltr),
.splitview-nav > li:focus hgroup.stylesheet-stats:-moz-locale-dir(ltr),
.splitview-nav > li.splitview-active hgroup.stylesheet-stats:-moz-locale-dir(ltr) {
right: -50ex;
}
.splitview-nav > li hgroup.stylesheet-actions:-moz-locale-dir(rtl),
.splitview-nav > li:hover hgroup.stylesheet-stats:-moz-locale-dir(rtl),
.splitview-nav > li:focus hgroup.stylesheet-stats:-moz-locale-dir(rtl),
.splitview-nav > li.splitview-active hgroup.stylesheet-stats:-moz-locale-dir(rtl) {
left: -50ex;
}
.splitview-nav > li hgroup.stylesheet-stats:-moz-locale-dir(ltr),
.splitview-nav > li:hover hgroup.stylesheet-actions:-moz-locale-dir(ltr),
.splitview-nav > li:focus hgroup.stylesheet-actions:-moz-locale-dir(ltr),
.splitview-nav > li.splitview-active hgroup.stylesheet-actions:-moz-locale-dir(ltr) {
right: 0;
}
.splitview-nav > li hgroup.stylesheet-stats:-moz-locale-dir(rtl),
.splitview-nav > li:hover hgroup.stylesheet-actions:-moz-locale-dir(rtl),
.splitview-nav > li:focus hgroup.stylesheet-actions:-moz-locale-dir(rtl),
.splitview-nav > li.splitview-active hgroup.stylesheet-actions:-moz-locale-dir(rtl) {
left: 0;
}
.stylesheet-editor-input {
display: -moz-box;
-moz-box-flex: 1;
overflow: hidden;
min-height: 8em;
margin: 3px;
margin-top: 0;
border: 1px inset WindowFrame;
border-radius: 4px;
background-color: -moz-default-background-color;
.placeholder a {
text-decoration: underline;
}
h1,
@ -175,3 +129,28 @@ h3 {
margin: 0;
padding: 0;
}
/* portrait mode */
@media (max-aspect-ratio: 5/3) {
.splitview-nav {
box-shadow: none;
}
.splitview-nav > li.splitview-active {
background-size: 0 0, 0 0, auto;
}
.stylesheet-enabled {
padding: 0;
background-position: 0 0;
height: 24px;
}
.disabled > .stylesheet-enabled {
background-position: -24px 0;
}
.splitview-nav > li > hgroup.stylesheet-info {
-moz-box-align: baseline;
}
}

6
browser/themes/gnomestripe/jar.mn
View File

@ -82,6 +82,7 @@ browser.jar:
skin/classic/browser/tabview/stack-expander.png (tabview/stack-expander.png)
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/arrows.png (devtools/arrows.png)
skin/classic/browser/devtools/goto-mdn.png (devtools/goto-mdn.png)
skin/classic/browser/devtools/csshtmltree.css (devtools/csshtmltree.css)
@ -115,7 +116,10 @@ browser.jar:
skin/classic/browser/devtools/breadcrumbs/rtl-start-selected.png (devtools/breadcrumbs/rtl-start-selected.png)
skin/classic/browser/devtools/splitview.css (devtools/splitview.css)
skin/classic/browser/devtools/styleeditor.css (devtools/styleeditor.css)
skin/classic/browser/devtools/eye-toggle.png (devtools/eye-toggle.png)
skin/classic/browser/devtools/magnifying-glass.png (devtools/magnifying-glass.png)
skin/classic/browser/devtools/itemToggle.png (devtools/itemToggle.png)
skin/classic/browser/devtools/itemArrow-rtl.png (devtools/itemArrow-rtl.png)
skin/classic/browser/devtools/itemArrow-ltr.png (devtools/itemArrow-ltr.png)
#ifdef MOZ_SERVICES_SYNC
skin/classic/browser/sync-16-throbber.png
skin/classic/browser/sync-16.png

53
browser/themes/pinstripe/browser.css
View File

@ -2722,10 +2722,7 @@ panel[dimmed="true"] {
/* Highlighter toolbar */
#inspector-toolbar {
-moz-appearance: none;
border-top: 1px solid hsla(210, 8%, 5%, .65);
box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
background-image: -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
padding: 4px 16px 4px 0; /* use -moz-padding-end: 16px when/if bug 631729 gets fixed */
}
@ -2733,13 +2730,6 @@ panel[dimmed="true"] {
padding: 0 0 4px;
}
#devtools-sidebar-toolbar {
-moz-appearance: none;
padding: 4px 3px;
box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
background-image: -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
}
#devtools-side-splitter {
background-image: none !important;
border: 0;
@ -2751,49 +2741,6 @@ panel[dimmed="true"] {
position: relative;
}
#inspector-inspect-toolbutton,
#inspector-tools > toolbarbutton,
#devtools-sidebar-toolbar > toolbarbutton {
-moz-appearance: none;
min-width: 78px;
min-height: 22px;
color: hsl(210,30%,85%);
text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
border: 1px solid hsla(210,8%,5%,.45);
border-radius: @toolbarbuttonCornerRadius@;
background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
}
#inspector-inspect-toolbutton > .toolbarbutton-text ,
#inspector-tools > toolbarbutton > .toolbarbutton-text,
#devtools-sidebar-toolbar > toolbarbutton > .toolbarbutton-text {
margin: 1px 6px;
}
#inspector-inspect-toolbutton:not([checked]):hover:active,
#inspector-tools > toolbarbutton:not([checked]):hover:active,
#devtools-sidebar-toolbar > toolbarbutton:not([checked]):hover:active {
border-color: hsla(210,8%,5%,.6);
background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
}
#inspector-inspect-toolbutton[checked],
#inspector-tools > toolbarbutton[checked],
#devtools-sidebar-toolbar > toolbarbutton[checked] {
color: hsl(208,100%,60%) !important;
border-color: hsla(210,8%,5%,.6);
background: -moz-linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
}
#inspector-inspect-toolbutton[checked]:hover:active,
#inspector-tools > toolbarbutton[checked]:hover:active,
#devtools-sidebar-toolbar > toolbarbutton[checked]:hover:active {
background-color: hsla(210,8%,5%,.2);
}
/* Highlighter - toolbar resizers */
.inspector-resizer {

113
browser/themes/pinstripe/devtools/common.css Normal file
View File

@ -0,0 +1,113 @@
/* vim:set ts=2 sw=2 sts=2 et: */
/* ***** BEGIN LICENSE BLOCK *****
* Version: MPL 1.1/GPL 2.0/LGPL 2.1
*
* The contents of this file are subject to the Mozilla Public License Version
* 1.1 (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
* http://www.mozilla.org/MPL/
*
* Software distributed under the License is distributed on an "AS IS" basis,
* WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
* for the specific language governing rights and limitations under the
* License.
*
* The Original Code is DevTools code.
*
* The Initial Developer of the Original Code is Mozilla Foundation.
* Portions created by the Initial Developer are Copyright (C) 2011
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
* Paul Rouget <paul@mozilla.com> (original author)
*
* Alternatively, the contents of this file may be used under the terms of
* either the GNU General Public License Version 2 or later (the "GPL"), or
* the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
* in which case the provisions of the GPL or the LGPL are applicable instead
* of those above. If you wish to allow use of your version of this file only
* under the terms of either the GPL or the LGPL, and not to allow others to
* use your version of this file under the terms of the MPL, indicate your
* decision by deleting the provisions above and replace them with the notice
* and other provisions required by the GPL or the LGPL. If you do not delete
* the provisions above, a recipient may use your version of this file under
* the terms of any one of the MPL, the GPL or the LGPL.
*
* ***** END LICENSE BLOCK ***** */
%include ../shared.inc
/* Toolbar and Toolbar items */
.devtools-toolbar {
-moz-appearance: none;
padding: 4px 3px;
box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
background-image: -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
}
.devtools-toolbarbutton {
-moz-appearance: none;
min-width: 78px;
min-height: 22px;
color: hsl(210,30%,85%);
text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
border: 1px solid hsla(210,8%,5%,.45);
border-radius: @toolbarbuttonCornerRadius@;
background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
}
.devtools-toolbarbutton > .toolbarbutton-text {
margin: 1px 6px;
}
.devtools-toolbarbutton:not([checked]):hover:active {
border-color: hsla(210,8%,5%,.6);
background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
}
.devtools-toolbarbutton[checked] {
color: hsl(208,100%,60%) !important;
border-color: hsla(210,8%,5%,.6);
background: -moz-linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
}
.devtools-toolbarbutton[checked]:hover:active {
background-color: hsla(210,8%,5%,.2);
}
/* Search input */
.devtools-searchinput {
-moz-appearance: none;
margin: 0 3px;
background-color: transparent;
border: 1px solid hsla(210,8%,5%,.6);
border-radius: 20px;
background-image: url(magnifying-glass.png), -moz-linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
background-repeat: no-repeat;
background-position: 4px 3px, top left, top left;
padding-top: 0;
padding-bottom: 0;
-moz-padding-start: 18px;
-moz-padding-end: 12px;
box-shadow: 0 1px 1px hsla(210,8%,5%,.3) inset,
0 0 0 1px hsla(210,16%,76%,.1) inset,
0 1px 0 hsla(210,16%,76%,.15);
color: hsl(210,30%,85%);
}
.devtools-searchinput:-moz-locale-dir(rtl) {
background-position: -moz-calc(100% - 4px) 3px, top left, top left;
}
.devtools-searchinput > .textbox-input-box > .textbox-search-icons {
display: none;
}
.devtools-searchinput > .textbox-input-box > .textbox-input:-moz-placeholder {
color: hsl(208,10%,66%);
}

BIN
browser/themes/pinstripe/devtools/eye-toggle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 784 B

BIN
browser/themes/pinstripe/devtools/itemArrow-ltr.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
browser/themes/pinstripe/devtools/itemArrow-rtl.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
browser/themes/pinstripe/devtools/itemToggle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
browser/themes/pinstripe/devtools/magnifying-glass.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 275 B

165
browser/themes/pinstripe/devtools/splitview.css
View File

@ -20,6 +20,7 @@
*
* Contributor(s):
* Cedric Vivier <cedricv@neonux.com> (original author)
* Paul Rouget <paul@mozilla.com>
*
* Alternatively, the contents of this file may be used under the terms of
* either the GNU General Public License Version 2 or later (the "GPL"), or
@ -35,90 +36,124 @@
*
* ***** END LICENSE BLOCK ***** */
.splitview-root {
margin-top: 4px;
}
.splitview-filter {
-moz-box-flex: 1;
-moz-margin-start: 1ex;
max-width: 25ex;
}
.splitview-nav-container {
-moz-box-pack: center;
margin: 4px;
border: 1px inset WindowFrame;
border-radius: 4px;
background-color: -moz-default-background-color;
color: -moz-default-color;
background-color: hsl(208,11%,27%);
color: white;
}
ol.splitview-nav {
overflow-x: hidden;
overflow-y: auto;
.splitview-nav {
-moz-appearance: none;
margin: 0;
box-shadow: inset -1px 0 0 #222426;
}
.splitview-nav > li {
color: white;
background-clip: padding-box;
border-bottom: 1px solid hsla(210,16%,76%,.1);
box-shadow: inset 0 -1px 0 hsla(210,8%,5%,.25);
-moz-padding-end: 8px;
-moz-box-align: center;
}
.splitview-nav {
list-style-image: none;
list-style: none;
padding: 0;
margin: 0;
}
ol.splitview-nav > li {
display: -moz-box;
-moz-box-orient: vertical;
.splitview-nav > li {
outline: 0;
border-bottom: 1px solid ThreeDShadow;
padding: 2px;
padding-top: 4px;
vertical-align: bottom;
color: black;
-moz-transition-property: background-color, max-height;
-moz-transition-duration: 1s;
max-height: 2048px; /* for slide transition */
}
ol.splitview-nav > li.splitview-active {
background-color: #eaf2fe; /* same as orion.css's .line_caret */
}
ol.splitview-nav > li:hover,
ol.splitview-nav > li:focus {
background-color: #f0f5fd; /* slightly lighter .line_caret */
}
ol.splitview-nav > li.splitview-flash {
background-color: #faf0e1; /* complement of .line_caret */
}
ol.splitview-nav > li.splitview-slide {
max-height: 0;
overflow: hidden;
}
.splitview-side-details {
margin: 2px;
}
.splitview-nav.splitview-all-filtered ~ .splitview-nav.placeholder.all-filtered,
.splitview-nav:empty ~ .splitview-nav.placeholder.empty {
-moz-box-flex: 0;
.placeholder {
-moz-box-flex: 1;
-moz-box-back: center;
text-align: center;
}
.splitview-main .toolbar,
.splitview-main .toolbar > * {
display: -moz-box;
}
.splitview-main .toolbar {
-moz-box-flex: 1;
-moz-box-orient: horizontal;
-moz-padding-start: 3px;
.splitview-nav > li.splitview-active {
background-image: url(itemArrow-ltr.png),
-moz-linear-gradient(left, black, black),
-moz-linear-gradient(hsl(206,61%,40%), hsl(206,61%,31%));
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: center right, top right, top left;
background-size: auto, 1px 100%, auto;
border-bottom: 1px solid hsla(210,8%,5%,.25);
box-shadow: inset 0 1px 0 hsla(210,40%,83%,.15),
inset 0 -1px 0 hsla(210,40%,83%,.05);
}
a {
color: -moz-hyperlinktext;
text-decoration: underline;
.splitview-nav > li.splitview-active:-moz-locale-dir(rtl) {
background-image: url(itemArrow-rtl.png),
-moz-linear-gradient(left, black, black),
-moz-linear-gradient(hsl(206,61%,40%), hsl(206,61%,31%));
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: center left, top left, top right;
}
button {
margin: 0;
/* Toolbars */
.devtools-toolbar {
height: 26px;
background-origin: border-box;
background-clip: border-box;
border-top: 1px solid hsla(210,8%,5%,.5);
border-bottom: 1px solid hsla(210,8%,5%,.65);
padding: 3px;
}
.splitview-main > toolbar:-moz-locale-dir(ltr) {
border-right: 1px solid hsla(210,8%,5%,.5);
}
.splitview-main > toolbar:-moz-locale-dir(rtl) {
border-left: 1px solid hsla(210,8%,5%,.5);
}
.devtools-toolbarbutton {
font-size: 11px;
padding: 0 8px;
width: auto;
min-width: 48px;
min-height: 0;
}
/* Resizers */
.splitview-landscape-resizer {
-moz-appearance: none;
width: 7px;
background-image: -moz-linear-gradient(left, black 1px, rgba(255,255,255,0.2) 1px);
background-size: 2px 10px;
background-clip: padding-box;
background-repeat: repeat-x;
border-width: 1px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.05);
margin: 5px 0;
-moz-transform: translateX(-7px);
}
.splitview-landscape-resizer:-moz-locale-dir(rtl) {
-moz-transform: translateX(7px);
}
.splitview-portrait-resizer {
-moz-appearance: none;
background: -moz-linear-gradient(top, black 1px, rgba(255,255,255,0.2) 1px),
-moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
height: 12px;
background-size: 10px 2px, 100% 12px;
background-clip: content-box, border-box;
background-repeat: repeat-y, no-repeat;
background-position: center center;
padding: 2px 0;
border-top: 1px solid hsla(210,8%,5%,.5);
border-bottom: 1px solid hsla(210,8%,5%,.5);
}
/* limited width mode (hide search unless it has focus [search-on-type]) */
@ -128,8 +163,6 @@ button {
position: fixed;
margin: 0;
bottom: -4em;
-moz-transition-property: bottom;
-moz-transition-duration: 0.2s;
}
.splitview-filter[focused="true"] {
bottom: 0;

187
browser/themes/pinstripe/devtools/styleeditor.css
View File

@ -20,6 +20,7 @@
*
* Contributor(s):
* Cedric Vivier <cedricv@neonux.com> (original author)
* Paul Rouget <paul@mozilla.com>
*
* Alternatively, the contents of this file may be used under the terms of
* either the GNU General Public License Version 2 or later (the "GPL"), or
@ -35,136 +36,89 @@
*
* ***** END LICENSE BLOCK ***** */
ol.splitview-nav:focus {
.stylesheet-title,
.stylesheet-name {
text-decoration: none;
color: hsl(207,17%,88%);
}
.stylesheet-name {
font-size: 13px;
}
.stylesheet-rule-count,
.stylesheet-saveButton {
color: hsl(211,12%,60%);
}
.stylesheet-saveButton {
text-decoration: underline;
cursor: pointer;
}
.splitview-active .stylesheet-title,
.splitview-active .stylesheet-name {
color: hsl(0,0%,100%);
}
.splitview-active .stylesheet-rule-count,
.splitview-active .stylesheet-saveButton {
color: hsl(200,66%,70%);
}
.splitview-nav:focus {
outline: 0; /* focus ring is on the stylesheet name */
}
.splitview-nav > li:-moz-locale-dir(ltr),
.splitview-nav > li hgroup:-moz-locale-dir(ltr) {
float: left;
}
.splitview-nav > li:-moz-locale-dir(rtl),
.splitview-nav > li hgroup:-moz-locale-dir(rtl) {
float: right;
}
.splitview-nav > li > hgroup.stylesheet-info {
max-width: 66%;
}
.splitview-nav > li > hgroup .stylesheet-name {
display: inline-block;
width: 100%;
max-width: 34ex;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.splitview-nav > li.unsaved > hgroup .stylesheet-name {
font-style: italic;
}
.splitview-nav > li.unsaved > hgroup .stylesheet-name:before:-moz-locale-dir(ltr),
.splitview-nav > li.unsaved > hgroup .stylesheet-name:after:-moz-locale-dir(rtl) {
.splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before,
.splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after {
font-style: italic;
content: "* ";
}
.splitview-nav > li > .stylesheet-enabled {
float: left;
width: 20px;
height: 20px;
-moz-margin-end: 6px;
border: 1px solid transparent;
background-image: url(eye-toggle.png);
background-position: center center;
.stylesheet-enabled {
padding: 8px 0;
margin: 0 8px;
background-image: url(itemToggle.png);
background-repeat: no-repeat;
background-clip: content-box;
background-position: 0 8px;
width: 24px;
height: 40px;
}
.splitview-nav > li > .stylesheet-enabled:-moz-locale-dir(rtl) {
float: right;
}
.splitview-nav > li.disabled > .stylesheet-enabled {
background-image: none;
.disabled > .stylesheet-enabled {
background-position: -24px 8px;
}
.splitview-nav > li > .stylesheet-enabled:focus,
.splitview-nav > li:hover > .stylesheet-enabled {
outline: 0;
border: 1px inset WindowFrame;
-moz-margin-end: 6px;
}
.splitview-nav > li hgroup .stylesheet-title {
color: GrayText;
font-size: 0.8em;
}
.splitview-nav > li.error hgroup > .stylesheet-error-message {
.stylesheet-error-message {
color: red;
font-size: 0.8em;
}
.splitview-nav > li > .stylesheet-more {
position: relative;
right: 0;
}
.splitview-nav > li > .stylesheet-more:-moz-locale-dir(rtl) {
left: 0;
.stylesheet-more > h3 {
font-size: 11px;
-moz-margin-end: 2px;
}
.splitview-nav > li hgroup.stylesheet-stats,
.splitview-nav > li hgroup.stylesheet-actions {
position: absolute;
z-index: 2;
-moz-transition-property: left, right;
-moz-transition-duration: 0.2s;
-moz-transition-delay: 0.2s;
-moz-transition-timing-function: ease-in-out;
.devtools-searchinput {
max-width: 25ex;
font-size: 11px;
}
.splitview-nav > li hgroup.stylesheet-stats {
z-index: 1;
-moz-transition-delay: 0.4s;
color: GrayText;
padding-left: 6px; /* Fitts */
padding-right: 6px;
}
.splitview-nav > li hgroup.stylesheet-actions a {
color: ButtonText;
padding-left: 6px; /* Fitts */
padding-right: 6px;
.placeholder {
color: white;
}
.splitview-nav > li hgroup.stylesheet-actions:-moz-locale-dir(ltr),
.splitview-nav > li:hover hgroup.stylesheet-stats:-moz-locale-dir(ltr),
.splitview-nav > li:focus hgroup.stylesheet-stats:-moz-locale-dir(ltr),
.splitview-nav > li.splitview-active hgroup.stylesheet-stats:-moz-locale-dir(ltr) {
right: -50ex;
}
.splitview-nav > li hgroup.stylesheet-actions:-moz-locale-dir(rtl),
.splitview-nav > li:hover hgroup.stylesheet-stats:-moz-locale-dir(rtl),
.splitview-nav > li:focus hgroup.stylesheet-stats:-moz-locale-dir(rtl),
.splitview-nav > li.splitview-active hgroup.stylesheet-stats:-moz-locale-dir(rtl) {
left: -50ex;
}
.splitview-nav > li hgroup.stylesheet-stats:-moz-locale-dir(ltr),
.splitview-nav > li:hover hgroup.stylesheet-actions:-moz-locale-dir(ltr),
.splitview-nav > li:focus hgroup.stylesheet-actions:-moz-locale-dir(ltr),
.splitview-nav > li.splitview-active hgroup.stylesheet-actions:-moz-locale-dir(ltr) {
right: 0;
}
.splitview-nav > li hgroup.stylesheet-stats:-moz-locale-dir(rtl),
.splitview-nav > li:hover hgroup.stylesheet-actions:-moz-locale-dir(rtl),
.splitview-nav > li:focus hgroup.stylesheet-actions:-moz-locale-dir(rtl),
.splitview-nav > li.splitview-active hgroup.stylesheet-actions:-moz-locale-dir(rtl) {
left: 0;
}
.stylesheet-editor-input {
display: -moz-box;
-moz-box-flex: 1;
overflow: hidden;
min-height: 8em;
margin: 3px;
margin-top: 0;
border: 1px inset WindowFrame;
border-radius: 4px;
background-color: -moz-default-background-color;
.placeholder a {
text-decoration: underline;
}
h1,
@ -175,3 +129,28 @@ h3 {
margin: 0;
padding: 0;
}
/* portrait mode */
@media (max-aspect-ratio: 5/3) {
.splitview-nav {
box-shadow: none;
}
.splitview-nav > li.splitview-active {
background-size: 0 0, 0 0, auto;
}
.stylesheet-enabled {
padding: 0;
background-position: 0 0;
height: 24px;
}
.disabled > .stylesheet-enabled {
background-position: -24px 0;
}
.splitview-nav > li > hgroup.stylesheet-info {
-moz-box-align: baseline;
}
}

6
browser/themes/pinstripe/jar.mn
View File

@ -121,6 +121,7 @@ browser.jar:
skin/classic/browser/tabview/stack-expander.png (tabview/stack-expander.png)
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/arrows.png (devtools/arrows.png)
skin/classic/browser/devtools/goto-mdn.png (devtools/goto-mdn.png)
skin/classic/browser/devtools/csshtmltree.css (devtools/csshtmltree.css)
@ -155,7 +156,10 @@ browser.jar:
skin/classic/browser/devtools/breadcrumbs/rtl-start-selected.png (devtools/breadcrumbs/rtl-start-selected.png)
skin/classic/browser/devtools/splitview.css (devtools/splitview.css)
skin/classic/browser/devtools/styleeditor.css (devtools/styleeditor.css)
skin/classic/browser/devtools/eye-toggle.png (devtools/eye-toggle.png)
skin/classic/browser/devtools/magnifying-glass.png (devtools/magnifying-glass.png)
skin/classic/browser/devtools/itemToggle.png (devtools/itemToggle.png)
skin/classic/browser/devtools/itemArrow-rtl.png (devtools/itemArrow-rtl.png)
skin/classic/browser/devtools/itemArrow-ltr.png (devtools/itemArrow-ltr.png)
#ifdef MOZ_SERVICES_SYNC
skin/classic/browser/sync-throbber.png
skin/classic/browser/sync-16.png

54
browser/themes/winstripe/browser.css
View File

@ -2654,11 +2654,7 @@ panel[dimmed="true"] {
/* Highlighter toolbar */
#inspector-toolbar {
-moz-appearance: none;
padding: 4px 3px;
border-top: 1px solid hsla(211,68%,6%,.65) !important;
box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
background-image: -moz-linear-gradient(top, hsl(209,18%,34%), hsl(210,24%,16%));
}
#inspector-toolbar[treepanel-open] {
@ -2666,13 +2662,6 @@ panel[dimmed="true"] {
-moz-padding-end: 0;
}
#devtools-sidebar-toolbar {
-moz-appearance: none;
padding: 4px 3px;
box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
background-image: -moz-linear-gradient(top, hsl(209,18%,34%), hsl(210,24%,16%));
}
#devtools-side-splitter {
border: 0;
-moz-border-start: 1px solid #242b33;
@ -2683,49 +2672,6 @@ panel[dimmed="true"] {
position: relative;
}
#inspector-inspect-toolbutton,
#inspector-tools > toolbarbutton,
#devtools-sidebar-toolbar > toolbarbutton {
-moz-appearance: none;
min-width: 78px;
min-height: 22px;
color: hsl(210,30%,85%);
text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
border: 1px solid hsla(211,68%,6%,.5);
border-radius: 3px;
background: -moz-linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2)) padding-box;
box-shadow: 0 1px 0 hsla(209,29%,72%,.15) inset, 0 0 0 1px hsla(209,29%,72%,.1) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
}
#inspector-inspect-toolbutton > .toolbarbutton-icon,
#inspector-tools > toolbarbutton > .toolbarbutton-icon,
#devtools-sidebar-toolbar > toolbarbutton > .toolbarbutton-icon {
margin: 0;
}
#inspector-inspect-toolbutton:not([checked]):hover:active,
#inspector-tools > toolbarbutton:not([checked]):hover:active,
#devtools-sidebar-toolbar > toolbarbutton:not([checked]):hover:active {
background-color: hsla(210,18%,9%,.1);
background-image: -moz-linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2));
box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
}
#inspector-inspect-toolbutton[checked],
#inspector-tools > toolbarbutton[checked],
#devtools-sidebar-toolbar > toolbarbutton[checked] {
border-color: hsla(211,68%,6%,.6);
background: -moz-linear-gradient(hsla(211,68%,6%,.1), hsla(211,68%,6%,.2));
box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
color: hsl(200,100%,60%) !important;
}
#inspector-inspect-toolbutton[checked]:hover:active,
#inspector-tools > toolbarbutton[checked]:hover:active,
#devtools-sidebar-toolbar > toolbarbutton[checked]:hover:active {
background-color: hsla(211,68%,6%,.2);
}
/* Highlighter - toolbar resizers */
.inspector-resizer {

120
browser/themes/winstripe/devtools/common.css Normal file
View File

@ -0,0 +1,120 @@
/* vim:set ts=2 sw=2 sts=2 et: */
/* ***** BEGIN LICENSE BLOCK *****
* Version: MPL 1.1/GPL 2.0/LGPL 2.1
*
* The contents of this file are subject to the Mozilla Public License Version
* 1.1 (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
* http://www.mozilla.org/MPL/
*
* Software distributed under the License is distributed on an "AS IS" basis,
* WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
* for the specific language governing rights and limitations under the
* License.
*
* The Original Code is DevTools code.
*
* The Initial Developer of the Original Code is Mozilla Foundation.
* Portions created by the Initial Developer are Copyright (C) 2011
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
* Paul Rouget <paul@mozilla.com> (original author)
*
* Alternatively, the contents of this file may be used under the terms of
* either the GNU General Public License Version 2 or later (the "GPL"), or
* the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
* in which case the provisions of the GPL or the LGPL are applicable instead
* of those above. If you wish to allow use of your version of this file only
* under the terms of either the GPL or the LGPL, and not to allow others to
* use your version of this file under the terms of the MPL, indicate your
* decision by deleting the provisions above and replace them with the notice
* and other provisions required by the GPL or the LGPL. If you do not delete
* the provisions above, a recipient may use your version of this file under
* the terms of any one of the MPL, the GPL or the LGPL.
*
* ***** END LICENSE BLOCK ***** */
/* Toolbar and Toolbar items */
.devtools-toolbar {
-moz-appearance: none;
padding: 4px 3px;
box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
background-image: -moz-linear-gradient(top, hsl(209,18%,34%), hsl(210,24%,16%));
}
.devtools-toolbarbutton {
-moz-appearance: none;
min-width: 78px;
min-height: 22px;
color: hsl(210,30%,85%);
text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
border: 1px solid hsla(211,68%,6%,.5);
border-radius: 3px;
background: -moz-linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2)) padding-box;
box-shadow: 0 1px 0 hsla(209,29%,72%,.15) inset, 0 0 0 1px hsla(209,29%,72%,.1) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
-moz-margin-end: 3px;
}
.devtools-toolbarbutton > .toolbarbutton-icon {
margin: 0;
}
.devtools-toolbarbutton:not([checked]):hover:active {
background-color: hsla(210,18%,9%,.1);
background-image: -moz-linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2));
box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
}
.devtools-toolbarbutton[checked] {
border-color: hsla(211,68%,6%,.6);
background: -moz-linear-gradient(hsla(211,68%,6%,.1), hsla(211,68%,6%,.2));
box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
color: hsl(200,100%,60%) !important;
}
.devtools-toolbarbutton:[checked]:hover:active {
background-color: hsla(211,68%,6%,.2);
}
/* Search input */
.devtools-searchinput {
-moz-appearance: none;
margin: 0 3px;
border: 1px solid hsla(211,68%,6%,.6);
box-shadow: inset 0 1px 0 hsla(211,68%,6%,.05), 0 0 0 1px hsla(210,40%,83%,.1);
border-radius: 2px;
background-color: transparent;
background-image: url(magnifying-glass.png), -moz-linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
background-repeat: no-repeat;
background-position: 4px 3px, top left, top left;
padding-top: 0;
padding-bottom: 0;
-moz-padding-start: 18px;
-moz-padding-end: 12px;
color: hsl(210,30%,85%);
-moz-transition-property: background-color, border-color, box-shadow;
-moz-transition-duration: 150ms;
-moz-transition-timing-function: ease;
}
.devtools-searchinput[focused] {
border-color: hsl(200,70%,40%) hsl(200,75%,37%) hsl(200,80%,35%);
background-origin: padding-box;
background-clip: padding-box;
box-shadow: inset 0 0 0 1px hsla(211,68%,6%,.1);
}
.devtools-searchinput:-moz-locale-dir(rtl) {
background-position: -moz-calc(100% - 4px) 3px, top left, top left;
}
.devtools-searchinput > .textbox-input-box > .textbox-search-icons {
display: none;
}
.devtools-searchinput > .textbox-input-box > .textbox-input:-moz-placeholder {
color: hsl(208,10%,66%);
}

BIN
browser/themes/winstripe/devtools/eye-toggle.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 784 B

BIN
browser/themes/winstripe/devtools/itemArrow-ltr.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
browser/themes/winstripe/devtools/itemArrow-rtl.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
browser/themes/winstripe/devtools/itemToggle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
browser/themes/winstripe/devtools/magnifying-glass.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

165
browser/themes/winstripe/devtools/splitview.css
View File

@ -20,6 +20,7 @@
*
* Contributor(s):
* Cedric Vivier <cedricv@neonux.com> (original author)
* Paul Rouget <paul@mozilla.com>
*
* Alternatively, the contents of this file may be used under the terms of
* either the GNU General Public License Version 2 or later (the "GPL"), or
@ -35,90 +36,124 @@
*
* ***** END LICENSE BLOCK ***** */
.splitview-root {
margin-top: 4px;
}
.splitview-filter {
-moz-box-flex: 1;
-moz-margin-start: 1ex;
max-width: 25ex;
}
.splitview-nav-container {
-moz-box-pack: center;
margin: 4px;
border: 1px inset WindowFrame;
border-radius: 4px;
background-color: -moz-default-background-color;
color: -moz-default-color;
background-color: hsl(211,21%,26%);
color: white;
}
ol.splitview-nav {
overflow-x: hidden;
overflow-y: auto;
.splitview-nav {
-moz-appearance: none;
margin: 0;
box-shadow: inset -1px 0 0 #222426;
}
.splitview-nav > li {
color: white;
background-clip: padding-box;
border-bottom: 1px solid hsla(210,40%,83%,.1);
box-shadow: inset 0 -1px 0 hsla(211,68%,6%,.3);
-moz-padding-end: 8px;
-moz-box-align: center;
}
.splitview-nav {
list-style-image: none;
list-style: none;
padding: 0;
margin: 0;
}
ol.splitview-nav > li {
display: -moz-box;
-moz-box-orient: vertical;
.splitview-nav > li {
outline: 0;
border-bottom: 1px solid ThreeDShadow;
padding: 2px;
padding-top: 4px;
vertical-align: bottom;
color: black;
-moz-transition-property: background-color, max-height;
-moz-transition-duration: 1s;
max-height: 2048px; /* for slide transition */
}
ol.splitview-nav > li.splitview-active {
background-color: #eaf2fe; /* same as orion.css's .line_caret */
}
ol.splitview-nav > li:hover,
ol.splitview-nav > li:focus {
background-color: #f0f5fd; /* slightly lighter .line_caret */
}
ol.splitview-nav > li.splitview-flash {
background-color: #faf0e1; /* complement of .line_caret */
}
ol.splitview-nav > li.splitview-slide {
max-height: 0;
overflow: hidden;
}
.splitview-side-details {
margin: 2px;
}
.splitview-nav.splitview-all-filtered ~ .splitview-nav.placeholder.all-filtered,
.splitview-nav:empty ~ .splitview-nav.placeholder.empty {
-moz-box-flex: 0;
.placeholder {
-moz-box-flex: 1;
-moz-box-back: center;
text-align: center;
}
.splitview-main .toolbar,
.splitview-main .toolbar > * {
display: -moz-box;
}
.splitview-main .toolbar {
-moz-box-flex: 1;
-moz-box-orient: horizontal;
-moz-padding-start: 3px;
.splitview-nav > li.splitview-active {
background-image: url(itemArrow-ltr.png),
-moz-linear-gradient(left, black, black),
-moz-linear-gradient(hsl(200,100%,33%), hsl(200,100%,25%));
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: center right, top right, top left;
background-size: auto, 1px 100%, auto;
border-bottom: 1px solid hsla(210,8%,5%,.25);
box-shadow: inset 0 1px 0 hsla(210,40%,83%,.15),
inset 0 -1px 0 hsla(210,40%,83%,.05);
}
a {
color: -moz-hyperlinktext;
text-decoration: underline;
.splitview-nav > li.splitview-active:-moz-locale-dir(rtl) {
background-image: url(itemArrow-rtl.png),
-moz-linear-gradient(left, black, black),
-moz-linear-gradient(hsl(200,100%,33%), hsl(200,100%,25%));
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: center left, top left, top right;
}
button {
margin: 0;
/* Toolbars */
.devtools-toolbar {
height: 26px;
background-origin: border-box;
background-clip: border-box;
border-top: 1px solid hsla(210,8%,5%,.5);
border-bottom: 1px solid hsla(210,8%,5%,.65);
padding: 3px;
}
.splitview-main > toolbar:-moz-locale-dir(ltr) {
border-right: 1px solid hsla(210,8%,5%,.5);
}
.splitview-main > toolbar:-moz-locale-dir(rtl) {
border-left: 1px solid hsla(210,8%,5%,.5);
}
.devtools-toolbarbutton {
font-size: 11px;
padding: 0 8px;
width: auto;
min-width: 48px;
min-height: 0;
}
/* Resizers */
.splitview-landscape-resizer {
-moz-appearance: none;
width: 7px;
background-image: -moz-linear-gradient(left, black 1px, rgba(255,255,255,0.2) 1px);
background-size: 2px 10px;
background-clip: padding-box;
background-repeat: repeat-x;
border-width: 1px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.05);
margin: 5px 0;
-moz-transform: translateX(-7px);
}
.splitview-landscape-resizer:-moz-locale-dir(rtl) {
-moz-transform: translateX(7px);
}
.splitview-portrait-resizer {
-moz-appearance: none;
background: -moz-linear-gradient(top, black 1px, rgba(255,255,255,0.2) 1px),
-moz-linear-gradient(top, hsl(209,18%,34%), hsl(210,24%,16%));
height: 12px;
background-size: 10px 2px, 100% 12px;
background-clip: content-box, border-box;
background-repeat: repeat-y, no-repeat;
background-position: center center;
padding: 2px 0;
border-top: 1px solid hsla(210,8%,5%,.5);
border-bottom: 1px solid hsla(210,8%,5%,.5);
}
/* limited width mode (hide search unless it has focus [search-on-type]) */
@ -128,8 +163,6 @@ button {
position: fixed;
margin: 0;
bottom: -4em;
-moz-transition-property: bottom;
-moz-transition-duration: 0.2s;
}
.splitview-filter[focused="true"] {
bottom: 0;

187
browser/themes/winstripe/devtools/styleeditor.css
View File

@ -20,6 +20,7 @@
*
* Contributor(s):
* Cedric Vivier <cedricv@neonux.com> (original author)
* Paul Rouget <paul@mozilla.com>
*
* Alternatively, the contents of this file may be used under the terms of
* either the GNU General Public License Version 2 or later (the "GPL"), or
@ -35,136 +36,89 @@
*
* ***** END LICENSE BLOCK ***** */
ol.splitview-nav:focus {
.stylesheet-title,
.stylesheet-name {
text-decoration: none;
color: hsl(210,30%,85%);
}
.stylesheet-name {
font-size: 13px;
}
.stylesheet-rule-count,
.stylesheet-saveButton {
color: hsl(210,16%,53%);
}
.stylesheet-saveButton {
text-decoration: underline;
cursor: pointer;
}
.splitview-active .stylesheet-title,
.splitview-active .stylesheet-name {
color: hsl(0,0%,100%);
}
.splitview-active .stylesheet-rule-count,
.splitview-active .stylesheet-saveButton {
color: hsl(205,50%,70%);
}
.splitview-nav:focus {
outline: 0; /* focus ring is on the stylesheet name */
}
.splitview-nav > li:-moz-locale-dir(ltr),
.splitview-nav > li hgroup:-moz-locale-dir(ltr) {
float: left;
}
.splitview-nav > li:-moz-locale-dir(rtl),
.splitview-nav > li hgroup:-moz-locale-dir(rtl) {
float: right;
}
.splitview-nav > li > hgroup.stylesheet-info {
max-width: 66%;
}
.splitview-nav > li > hgroup .stylesheet-name {
display: inline-block;
width: 100%;
max-width: 34ex;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.splitview-nav > li.unsaved > hgroup .stylesheet-name {
font-style: italic;
}
.splitview-nav > li.unsaved > hgroup .stylesheet-name:before:-moz-locale-dir(ltr),
.splitview-nav > li.unsaved > hgroup .stylesheet-name:after:-moz-locale-dir(rtl) {
.splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before,
.splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after {
font-style: italic;
content: "* ";
}
.splitview-nav > li > .stylesheet-enabled {
float: left;
width: 20px;
height: 20px;
-moz-margin-end: 6px;
border: 1px solid transparent;
background-image: url(eye-toggle.png);
background-position: center center;
.stylesheet-enabled {
padding: 8px 0;
margin: 0 8px;
background-image: url(itemToggle.png);
background-repeat: no-repeat;
background-clip: content-box;
background-position: 0 8px;
width: 24px;
height: 40px;
}
.splitview-nav > li > .stylesheet-enabled:-moz-locale-dir(rtl) {
float: right;
}
.splitview-nav > li.disabled > .stylesheet-enabled {
background-image: none;
.disabled > .stylesheet-enabled {
background-position: -24px 8px;
}
.splitview-nav > li > .stylesheet-enabled:focus,
.splitview-nav > li:hover > .stylesheet-enabled {
outline: 0;
border: 1px inset WindowFrame;
-moz-margin-end: 6px;
}
.splitview-nav > li hgroup .stylesheet-title {
color: GrayText;
font-size: 0.8em;
}
.splitview-nav > li.error hgroup > .stylesheet-error-message {
.stylesheet-error-message {
color: red;
font-size: 0.8em;
}
.splitview-nav > li > .stylesheet-more {
position: relative;
right: 0;
}
.splitview-nav > li > .stylesheet-more:-moz-locale-dir(rtl) {
left: 0;
.stylesheet-more > h3 {
font-size: 11px;
-moz-margin-end: 2px;
}
.splitview-nav > li hgroup.stylesheet-stats,
.splitview-nav > li hgroup.stylesheet-actions {
position: absolute;
z-index: 2;
-moz-transition-property: left, right;
-moz-transition-duration: 0.2s;
-moz-transition-delay: 0.2s;
-moz-transition-timing-function: ease-in-out;
.devtools-searchinput {
max-width: 25ex;
font-size: 11px;
}
.splitview-nav > li hgroup.stylesheet-stats {
z-index: 1;
-moz-transition-delay: 0.4s;
color: GrayText;
padding-left: 6px; /* Fitts */
padding-right: 6px;
}
.splitview-nav > li hgroup.stylesheet-actions a {
color: ButtonText;
padding-left: 6px; /* Fitts */
padding-right: 6px;
.placeholder {
color: white;
}
.splitview-nav > li hgroup.stylesheet-actions:-moz-locale-dir(ltr),
.splitview-nav > li:hover hgroup.stylesheet-stats:-moz-locale-dir(ltr),
.splitview-nav > li:focus hgroup.stylesheet-stats:-moz-locale-dir(ltr),
.splitview-nav > li.splitview-active hgroup.stylesheet-stats:-moz-locale-dir(ltr) {
right: -50ex;
}
.splitview-nav > li hgroup.stylesheet-actions:-moz-locale-dir(rtl),
.splitview-nav > li:hover hgroup.stylesheet-stats:-moz-locale-dir(rtl),
.splitview-nav > li:focus hgroup.stylesheet-stats:-moz-locale-dir(rtl),
.splitview-nav > li.splitview-active hgroup.stylesheet-stats:-moz-locale-dir(rtl) {
left: -50ex;
}
.splitview-nav > li hgroup.stylesheet-stats:-moz-locale-dir(ltr),
.splitview-nav > li:hover hgroup.stylesheet-actions:-moz-locale-dir(ltr),
.splitview-nav > li:focus hgroup.stylesheet-actions:-moz-locale-dir(ltr),
.splitview-nav > li.splitview-active hgroup.stylesheet-actions:-moz-locale-dir(ltr) {
right: 0;
}
.splitview-nav > li hgroup.stylesheet-stats:-moz-locale-dir(rtl),
.splitview-nav > li:hover hgroup.stylesheet-actions:-moz-locale-dir(rtl),
.splitview-nav > li:focus hgroup.stylesheet-actions:-moz-locale-dir(rtl),
.splitview-nav > li.splitview-active hgroup.stylesheet-actions:-moz-locale-dir(rtl) {
left: 0;
}
.stylesheet-editor-input {
display: -moz-box;
-moz-box-flex: 1;
overflow: hidden;
min-height: 8em;
margin: 3px;
margin-top: 0;
border: 1px inset WindowFrame;
border-radius: 4px;
background-color: -moz-default-background-color;
.placeholder a {
text-decoration: underline;
}
h1,
@ -175,3 +129,28 @@ h3 {
margin: 0;
padding: 0;
}
/* portrait mode */
@media (max-aspect-ratio: 5/3) {
.splitview-nav {
box-shadow: none;
}
.splitview-nav > li.splitview-active {
background-size: 0 0, 0 0, auto;
}
.stylesheet-enabled {
padding: 0;
background-position: 0 0;
height: 24px;
}
.disabled > .stylesheet-enabled {
background-position: -24px 0;
}
.splitview-nav > li > hgroup.stylesheet-info {
-moz-box-align: baseline;
}
}

12
browser/themes/winstripe/jar.mn
View File

@ -105,6 +105,7 @@ browser.jar:
skin/classic/browser/tabview/tabview.png (tabview/tabview.png)
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/arrows.png (devtools/arrows.png)
skin/classic/browser/devtools/goto-mdn.png (devtools/goto-mdn.png)
skin/classic/browser/devtools/csshtmltree.css (devtools/csshtmltree.css)
@ -139,7 +140,10 @@ browser.jar:
skin/classic/browser/devtools/breadcrumbs/rtl-start-selected.png (devtools/breadcrumbs/rtl-start-selected.png)
skin/classic/browser/devtools/splitview.css (devtools/splitview.css)
skin/classic/browser/devtools/styleeditor.css (devtools/styleeditor.css)
skin/classic/browser/devtools/eye-toggle.png (devtools/eye-toggle.png)
skin/classic/browser/devtools/magnifying-glass.png (devtools/magnifying-glass.png)
skin/classic/browser/devtools/itemToggle.png (devtools/itemToggle.png)
skin/classic/browser/devtools/itemArrow-rtl.png (devtools/itemArrow-rtl.png)
skin/classic/browser/devtools/itemArrow-ltr.png (devtools/itemArrow-ltr.png)
#ifdef MOZ_SERVICES_SYNC
skin/classic/browser/sync-throbber.png
skin/classic/browser/sync-16.png
@ -260,6 +264,7 @@ browser.jar:
skin/classic/aero/browser/tabview/tabview.png (tabview/tabview.png)
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/arrows.png (devtools/arrows.png)
skin/classic/aero/browser/devtools/goto-mdn.png (devtools/goto-mdn.png)
skin/classic/aero/browser/devtools/csshtmltree.css (devtools/csshtmltree.css)
@ -294,7 +299,10 @@ browser.jar:
skin/classic/aero/browser/devtools/breadcrumbs/rtl-start-selected.png (devtools/breadcrumbs/rtl-start-selected.png)
skin/classic/aero/browser/devtools/splitview.css (devtools/splitview.css)
skin/classic/aero/browser/devtools/styleeditor.css (devtools/styleeditor.css)
skin/classic/aero/browser/devtools/eye-toggle.png (devtools/eye-toggle.png)
skin/classic/aero/browser/devtools/magnifying-glass.png (devtools/magnifying-glass.png)
skin/classic/aero/browser/devtools/itemToggle.png (devtools/itemToggle.png)
skin/classic/aero/browser/devtools/itemArrow-rtl.png (devtools/itemArrow-rtl.png)
skin/classic/aero/browser/devtools/itemArrow-ltr.png (devtools/itemArrow-ltr.png)
#ifdef MOZ_SERVICES_SYNC
skin/classic/aero/browser/sync-throbber.png
skin/classic/aero/browser/sync-16.png