Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-20 00:35:44 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 695440 - Create sidebar for Highlighter tools; f=zpao; r=dcamp,dao

Browse Source
This commit is contained in:
Rob Campbell 2011-11-03 10:37:14 -03:00
parent 15b73c1c54
commit f0b75982e1
10 changed files with 430 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
browser/base/content/browser-sets.inc
View File

@ -145,12 +145,8 @@
<commandset id="inspectorCommands">
<command id="Inspector:Inspect"
oncommand="InspectorUI.toggleInspection();"/>
<command id="Inspector:Previous"
oncommand="InspectorUI.inspectPrevious();"
disabled="true"/>
<command id="Inspector:Next"
oncommand="InspectorUI.inspectNext();"
disabled="true"/>
<command id="Inspector:Sidebar"
oncommand="InspectorUI.toggleSidebar();"/>
</commandset>
<broadcasterset id="mainBroadcasterSet">

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

@ -966,6 +966,12 @@
onclick="return contentAreaClick(event, false);"/>
<statuspanel id="statusbar-display" inactive="true"/>
</vbox>
<splitter id="devtools-side-splitter" hidden="true"/>
<vbox id="devtools-sidebar-box" hidden="true" flex="1"
style="min-width: 18em; width: 22em; max-width: 42em;" persist="width">
<toolbar id="devtools-sidebar-toolbar" nowindowdrag="true"/>
<deck id="devtools-sidebar-deck" flex="1"/>
</vbox>
<vbox id="browser-border-end" hidden="true" layer="true"/>
</hbox>
@ -1000,6 +1006,10 @@
flex="1" orient="horizontal"
clicktoscroll="true"/>
<hbox id="inspector-tools">
<toolbarbutton id="inspector-style-button"
label="&inspectStyleButton.label;"
accesskey="&inspectStyleButton.accesskey;"
command="Inspector:Sidebar"/>
<!-- registered tools go here -->
</hbox>
#ifndef XP_MACOSX

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

@ -758,6 +758,57 @@ InspectorUI.prototype = {
}
},
/**
* Show the Sidebar.
*/
showSidebar: function IUI_showSidebar()
{
this.sidebarBox.removeAttribute("hidden");
this.sidebarSplitter.removeAttribute("hidden");
this.stylingButton.checked = true;
// Activate the first tool in the sidebar, only if none previously-
// selected. We'll want to do a followup to remember selected tool-states.
if (!Array.some(this.sidebarToolbar.children,
function(btn) btn.hasAttribute("checked"))) {
let firstButtonId = this.getToolbarButtonId(this.sidebarTools[0].id);
this.chromeDoc.getElementById(firstButtonId).click();
}
},
/**
* Hide the Sidebar.
*/
hideSidebar: function IUI_hideSidebar()
{
this.sidebarBox.setAttribute("hidden", "true");
this.sidebarSplitter.setAttribute("hidden", "true");
this.stylingButton.checked = false;
},
/**
* Show or hide the sidebar. Called from the Styling button on the
* highlighter toolbar.
*/
toggleSidebar: function IUI_toggleSidebar()
{
if (!this.isSidebarOpen) {
this.showSidebar();
} else {
this.hideSidebar();
}
},
/**
* Getter to test if the Sidebar is open or not.
*/
get isSidebarOpen()
{
return this.stylingButton.checked &&
!this.sidebarBox.hidden &&
!this.sidebarSplitter.hidden;
},
/**
* Toggle the status of the inspector, starting or stopping it. Invoked
* from the toolbar's Inspect button.
@ -955,6 +1006,9 @@ InspectorUI.prototype = {
this.unregisterTool(aTool);
}.bind(this));
// close the sidebar
this.hideSidebar();
if (this.highlighter) {
this.highlighter.highlighterContainer.removeEventListener("keypress",
this,
@ -1366,13 +1420,25 @@ InspectorUI.prototype = {
return "inspector-" + anId + "-toolbutton";
},
/**
* Save a registered tool's callback for a specified event.
* @param aWidget xul:widget
* @param aEvent a DOM event name
* @param aCallback Function the click event handler for the button
*/
bindToolEvent: function IUI_bindToolEvent(aWidget, aEvent, aCallback)
{
this.toolEvents[aWidget.id + "_" + aEvent] = aCallback;
aWidget.addEventListener(aEvent, aCallback, false);
},
/**
* Register an external tool with the inspector.
*
* aRegObj = {
* id: "toolname",
* context: myTool,
* label: "Button label",
* label: "Button or tab label",
* icon: "chrome://somepath.png",
* tooltiptext: "Button tooltip",
* accesskey: "S",
@ -1382,7 +1448,8 @@ InspectorUI.prototype = {
* hide: object.method, called to hide the tool when button is pressed.
* dim: object.method, called to disable a tool during highlighting.
* unregister: object.method, called when tool should be destroyed.
* panel: myTool.panel
* panel: myTool.panel, set if tool is in a separate panel, null otherwise.
* sidebar: boolean, true if tool lives in sidebar tab.
* }
*
* @param aRegObj Object
@ -1398,28 +1465,24 @@ InspectorUI.prototype = {
this.tools[aRegObj.id] = aRegObj;
let buttonContainer = this.chromeDoc.getElementById("inspector-tools");
let btn = this.chromeDoc.createElement("toolbarbutton");
let btn;
// if this is a sidebar tool, create the sidebar features for it and bail.
if (aRegObj.sidebar) {
this.createSidebarTool(aRegObj);
return;
}
btn = this.chromeDoc.createElement("toolbarbutton");
let buttonId = this.getToolbarButtonId(aRegObj.id);
btn.setAttribute("id", buttonId);
btn.setAttribute("label", aRegObj.label);
btn.setAttribute("tooltiptext", aRegObj.tooltiptext);
btn.setAttribute("accesskey", aRegObj.accesskey);
btn.setAttribute("image", aRegObj.icon || "");
buttonContainer.appendChild(btn);
buttonContainer.insertBefore(btn, this.stylingButton);
/**
* Save a registered tool's callback for a specified event.
* @param aWidget xul:widget
* @param aEvent a DOM event name
* @param aCallback Function the click event handler for the button
*/
let toolEvents = this.toolEvents;
function bindToolEvent(aWidget, aEvent, aCallback) {
toolEvents[aWidget.id + "_" + aEvent] = aCallback;
aWidget.addEventListener(aEvent, aCallback, false);
}
bindToolEvent(btn, "click",
this.bindToolEvent(btn, "click",
function IUI_toolButtonClick(aEvent) {
if (btn.checked) {
this.toolHide(aRegObj);
@ -1428,14 +1491,85 @@ InspectorUI.prototype = {
}
}.bind(this));
// if the tool has a panel, register the popuphiding event
if (aRegObj.panel) {
bindToolEvent(aRegObj.panel, "popuphiding",
this.bindToolEvent(aRegObj.panel, "popuphiding",
function IUI_toolPanelHiding() {
btn.checked = false;
});
}
},
get sidebarBox()
{
return this.chromeDoc.getElementById("devtools-sidebar-box");
},
get sidebarToolbar()
{
return this.chromeDoc.getElementById("devtools-sidebar-toolbar");
},
get sidebarDeck()
{
return this.chromeDoc.getElementById("devtools-sidebar-deck");
},
get sidebarSplitter()
{
return this.chromeDoc.getElementById("devtools-side-splitter");
},
get stylingButton()
{
return this.chromeDoc.getElementById("inspector-style-button");
},
/**
* Creates a tab and tabpanel for our tool to reside in.
* @param {Object} aRegObj the Registration Object for our tool.
*/
createSidebarTool: function IUI_createSidebarTab(aRegObj)
{
// toolbutton elements
let btn = this.chromeDoc.createElement("toolbarbutton");
let buttonId = this.getToolbarButtonId(aRegObj.id);
btn.id = buttonId;
btn.setAttribute("label", aRegObj.label);
btn.setAttribute("tooltiptext", aRegObj.tooltiptext);
btn.setAttribute("accesskey", aRegObj.accesskey);
btn.setAttribute("image", aRegObj.icon || "");
btn.setAttribute("type", "radio");
btn.setAttribute("group", "sidebar-tools");
this.sidebarToolbar.appendChild(btn);
// create tool iframe
let iframe = this.chromeDoc.createElement("iframe");
iframe.id = "devtools-sidebar-iframe-" + aRegObj.id;
iframe.setAttribute("flex", "1");
this.sidebarDeck.appendChild(iframe);
// wire up button to show the iframe
this.bindToolEvent(btn, "click", function showIframe() {
let visible = this.sidebarDeck.selectedPanel == iframe;
if (!visible) {
sidebarDeck.selectedPanel = iframe;
}
this.toolShow(aRegObj);
}.bind(this));
},
/**
* Return the registered object's iframe.
* @param aRegObj see registerTool function.
* @return iframe or null
*/
getToolIframe: function IUI_getToolIFrame(aRegObj)
{
return this.chromeDoc.getElementById("devtools-sidebar-iframe-" + aRegObj.id);
},
/**
* Show the specified tool.
* @param aTool Object (see comment for IUI_registerTool)
@ -1443,7 +1577,9 @@ InspectorUI.prototype = {
toolShow: function IUI_toolShow(aTool)
{
aTool.show.call(aTool.context, this.selection);
this.chromeDoc.getElementById(this.getToolbarButtonId(aTool.id)).checked = true;
let btn = this.chromeDoc.getElementById(this.getToolbarButtonId(aTool.id));
btn.setAttribute("checked", "true");
},
/**
@ -1453,7 +1589,21 @@ InspectorUI.prototype = {
toolHide: function IUI_toolHide(aTool)
{
aTool.hide.call(aTool.context);
this.chromeDoc.getElementById(this.getToolbarButtonId(aTool.id)).checked = false;
let btn = this.chromeDoc.getElementById(this.getToolbarButtonId(aTool.id));
btn.removeAttribute("checked");
},
/**
* Unregister the events associated with the registered tool's widget.
* @param aWidget XUL:widget (toolbarbutton|panel).
* @param aEvent a DOM event.
*/
unbindToolEvent: function IUI_unbindToolEvent(aWidget, aEvent)
{
let toolEvent = aWidget.id + "_" + aEvent;
aWidget.removeEventListener(aEvent, this.toolEvents[toolEvent], false);
delete this.toolEvents[toolEvent]
},
/**
@ -1464,28 +1614,50 @@ InspectorUI.prototype = {
*/
unregisterTool: function IUI_unregisterTool(aRegObj)
{
// if this is a sidebar tool, use the sidebar unregistration method
if (aRegObj.sidebar) {
this.unregisterSidebarTool(aRegObj);
return;
}
let button = this.chromeDoc.getElementById(this.getToolbarButtonId(aRegObj.id));
/**
* Unregister the events associated with the registered tool's widget.
* @param aWidget XUL:widget (toolbarbutton|panel).
* @param aEvent a DOM event.
*/
let toolEvents = this.toolEvents;
function unbindToolEvent(aWidget, aEvent) {
let toolEvent = aWidget.id + "_" + aEvent;
aWidget.removeEventListener(aEvent, toolEvents[toolEvent], false);
delete toolEvents[toolEvent]
};
let buttonContainer = this.chromeDoc.getElementById("inspector-tools");
unbindToolEvent(button, "click");
// unbind click events on button
this.unbindToolEvent(button, "click");
// unbind panel popuphiding events if present.
if (aRegObj.panel)
unbindToolEvent(aRegObj.panel, "popuphiding");
this.unbindToolEvent(aRegObj.panel, "popuphiding");
// remove the button from its container
buttonContainer.removeChild(button);
// call unregister callback and remove from collection
if (aRegObj.unregister)
aRegObj.unregister.call(aRegObj.context);
delete this.tools[aRegObj.id];
},
/**
* Unregister the registered sidebar tool, unbinding click events for the
* button.
* @param aRegObj Object
* The registration object used to register the tool.
*/
unregisterSidebarTool: function IUI_unregisterSidebarTool(aRegObj)
{
// unbind tool button click event
let buttonId = this.getToolbarButtonId(aRegObj.id);
let btn = this.chromeDoc.getElementById(buttonId);
this.unbindToolEvent(btn, "click");
// remove sidebar buttons and tools
this.sidebarToolbar.removeChild(btn);
// call unregister callback and remove from collection, this also removes
// the iframe.
if (aRegObj.unregister)
aRegObj.unregister.call(aRegObj.context);
@ -1520,6 +1692,9 @@ InspectorUI.prototype = {
if (openTools) {
this.toolsDo(function IUI_toolsOnShow(aTool) {
if (aTool.id in openTools) {
if (aTool.sidebar && !this.isSidebarOpen) {
this.showSidebar();
}
this.toolShow(aTool);
}
}.bind(this));
@ -1566,6 +1741,18 @@ InspectorUI.prototype = {
}
},
/**
* Convenience getter to retrieve only the sidebar tools.
*/
get sidebarTools()
{
let sidebarTools = [];
for each (let tool in this.tools)
if (tool.sidebar)
sidebarTools.push(tool);
return sidebarTools;
},
/**
* Check if a tool is registered?
* @param aId The id of the tool to check

6
browser/devtools/highlighter/test/browser_inspector_initialization.js
View File

@ -76,6 +76,7 @@ function runInspectorTests()
ok(!InspectorUI.toolbar.hidden, "toolbar is visible");
ok(InspectorUI.inspecting, "Inspector is inspecting");
ok(!InspectorUI.treePanel.isOpen(), "Inspector Tree Panel is not open");
ok(!InspectorUI.isSidebarOpen, "Inspector Sidebar is not open");
ok(InspectorUI.highlighter, "Highlighter is up");
InspectorUI.inspectNode(doc.body);
InspectorUI.stopInspecting();
@ -93,7 +94,7 @@ function treePanelTests()
ok(InspectorUI.treePanel.isOpen(), "Inspector Tree Panel is open");
executeSoon(function() {
InspectorUI.stylePanel.open(doc.body);
InspectorUI.showSidebar();
});
}
@ -103,7 +104,7 @@ function stylePanelTests()
Services.obs.addObserver(runContextMenuTest,
InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
ok(InspectorUI.stylePanel.isOpen(), "Style Panel is Open");
ok(InspectorUI.isSidebarOpen, "Inspector Sidebar is open");
ok(InspectorUI.stylePanel.cssHtmlTree, "Style Panel has a cssHtmlTree");
executeSoon(function() {
@ -191,6 +192,7 @@ function finishInspectorTests()
ok(!InspectorUI.highlighter, "Highlighter is gone");
ok(!InspectorUI.treePanel, "Inspector Tree Panel is closed");
ok(!InspectorUI.inspecting, "Inspector is not inspecting");
ok(!InspectorUI.isSidebarOpen, "Inspector Sidebar is closed");
ok(!InspectorUI.toolbar, "toolbar is hidden");
gBrowser.removeCurrentTab();

153
browser/devtools/styleinspector/StyleInspector.jsm
View File

@ -76,30 +76,58 @@ StyleInspector.prototype = {
// Were we invoked from the Highlighter?
if (this.IUI) {
this.createPanel(true);
this.openDocked = true;
let isOpen = this.isOpen.bind(this);
this.registrationObject = {
id: "styleinspector",
label: this.l10n("style.highlighter.button.label"),
label: this.l10n("style.highlighter.button.label1"),
tooltiptext: this.l10n("style.highlighter.button.tooltip"),
accesskey: this.l10n("style.highlighter.accesskey"),
accesskey: this.l10n("style.highlighter.accesskey1"),
context: this,
get isOpen() isOpen(),
onSelect: this.selectNode,
show: this.open,
hide: this.close,
dim: this.dimTool,
panel: this.panel,
unregister: this.destroy
panel: null,
unregister: this.destroy,
sidebar: true,
};
// Register the registrationObject with the Highlighter
this.IUI.registerTool(this.registrationObject);
this.createSidebarContent(true);
}
},
/**
* Create the iframe in the IUI sidebar's tab panel.
* @param {Boolean} aPreserveOnHide Prevents destroy from being called.
*/
createSidebarContent: function SI_createSidebarContent(aPreserveOnHide)
{
this.preserveOnHide = !!aPreserveOnHide;
let boundIframeOnLoad = function loadedInitializeIframe() {
if (this.iframe &&
this.iframe.getAttribute("src") ==
"chrome://browser/content/csshtmltree.xhtml") {
let selectedNode = this.selectedNode || null;
this.cssHtmlTree = new CssHtmlTree(this);
this.cssLogic.highlight(selectedNode);
this.cssHtmlTree.highlight(selectedNode);
this.iframe.removeEventListener("load", boundIframeOnLoad, true);
this.iframeReady = true;
Services.obs.notifyObservers(null, "StyleInspector-opened", null);
}
}.bind(this);
this.iframe = this.IUI.getToolIframe(this.registrationObject);
this.iframe.addEventListener("load", boundIframeOnLoad, true);
},
/**
* Factory method to create the actual style panel
* @param {Boolean} aPreserveOnHide Prevents destroy from being called
@ -202,7 +230,9 @@ StyleInspector.prototype = {
*/
isOpen: function SI_isOpen()
{
return this.panel && this.panel.state && this.panel.state == "open";
return this.openDocked ? this.iframeReady && this.IUI.isSidebarOpen &&
(this.IUI.sidebarDeck.selectedPanel == this.iframe) :
this.panel && this.panel.state && this.panel.state == "open";
},
/**
@ -227,12 +257,66 @@ StyleInspector.prototype = {
selectNode: function SI_selectNode(aNode)
{
this.selectedNode = aNode;
if (this.isOpen() && !this.panel.hasAttribute("dimmed")) {
if (this.isOpen() && !this.dimmed) {
this.cssLogic.highlight(aNode);
this.cssHtmlTree.highlight(aNode);
}
},
/**
* Dim or undim a panel by setting or removing a dimmed attribute.
* @param aState
* true = dim, false = undim
*/
dimTool: function SI_dimTool(aState)
{
this.dimmed = aState;
},
/**
* Open the panel.
* @param {DOMNode} aSelection the (optional) DOM node to select.
*/
open: function SI_open(aSelection)
{
this.selectNode(aSelection);
if (this.openDocked) {
if (!this.iframeReady) {
this.iframe.setAttribute("src", "chrome://browser/content/csshtmltree.xhtml");
}
} else {
this.panel.openPopup(this.window.gBrowser.selectedBrowser, "end_before", 0, 0,
false, false);
}
},
/**
* Close the panel.
*/
close: function SI_close()
{
if (this.openDocked) {
Services.obs.notifyObservers(null, "StyleInspector-closed", null);
} else {
this.panel.hidePopup();
}
},
/**
* Memoized lookup of a l10n string from a string bundle.
* @param {string} aName The key to lookup.
* @returns A localized version of the given key.
*/
l10n: function SI_l10n(aName)
{
try {
return _strings.GetStringFromName(aName);
} catch (ex) {
Services.console.logStringMessage("Error reading '" + aName + "'");
throw new Error("l10n error with " + aName);
}
},
/**
* Destroy the style panel, remove listeners etc.
*/
@ -249,68 +333,19 @@ StyleInspector.prototype = {
delete this.cssLogic;
delete this.cssHtmlTree;
if (this.panel) {
this.panel.removeEventListener("popupshown", this._boundPopupShown, false);
this.panel.removeEventListener("popuphidden", this._boundPopupHidden, false);
delete this._boundPopupShown;
delete this._boundPopupHidden;
this.panel.parentNode.removeChild(this.panel);
delete this.panel;
}
delete this.doc;
delete this.win;
delete CssHtmlTree.win;
Services.obs.notifyObservers(null, "StyleInspector-closed", null);
},
/**
* Dim or undim a panel by setting or removing a dimmed attribute.
* @param aState
* true = dim, false = undim
*/
dimTool: function SI_dimTool(aState)
{
if (!this.isOpen())
return;
if (aState) {
this.panel.setAttribute("dimmed", "true");
} else if (this.panel.hasAttribute("dimmed")) {
this.panel.removeAttribute("dimmed");
}
},
/**
* Open the panel.
* @param {DOMNode} aSelection the (optional) DOM node to select.
*/
open: function SI_open(aSelection)
{
this.selectNode(aSelection);
this.panel.openPopup(this.window.gBrowser.selectedBrowser, "end_before", 0, 0,
false, false);
},
/**
* Close the panel.
*/
close: function SI_close()
{
this.panel.hidePopup();
},
/**
* Memonized lookup of a l10n string from a string bundle.
* @param {string} aName The key to lookup.
* @returns A localized version of the given key.
*/
l10n: function SI_l10n(aName)
{
try {
return _strings.GetStringFromName(aName);
} catch (ex) {
Services.console.logStringMessage("Error reading '" + aName + "'");
throw new Error("l10n error with " + aName);
}
},
};
XPCOMUtils.defineLazyGetter(this, "_strings", function() Services.strings

2
browser/locales/en-US/chrome/browser/browser.dtd
View File

@ -217,6 +217,8 @@ can reach it easily. -->
<!ENTITY inspectButton.label "Inspect">
<!ENTITY inspectButton.accesskey "I">
<!ENTITY inspectCloseButton.tooltiptext "Close Inspector">
<!ENTITY inspectStyleButton.label "Style">
<!ENTITY inspectStyleButton.accesskey "S">
<!ENTITY getMoreDevtoolsCmd.label "Get More Tools">
<!ENTITY getMoreDevtoolsCmd.accesskey "M">

6
browser/locales/en-US/chrome/browser/devtools/styleinspector.properties
View File

@ -30,7 +30,7 @@ group.Lists=Lists
group.Effects_and_Other=Effects and Other
# LOCALIZATION NOTE (style.highlighter.button): These strings are used inside
# html tree of the highlighter for the style inspector button
style.highlighter.button.label=Style
style.highlighter.accesskey=S
# sidebar of the Highlighter for the style inspector button
style.highlighter.button.label1=Properties
style.highlighter.accesskey1=P
style.highlighter.button.tooltip=Inspect element styles

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

@ -29,6 +29,7 @@
* Dão Gottwald (dao@mozilla.com)
* Drew Willcoxon (adw@mozilla.com)
* Paul Rouget (paul@mozilla.com)
* Rob Campbell (rcampbell@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
@ -1989,8 +1990,27 @@ 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;
-moz-border-start: 1px solid #242b33;
min-width: 0;
width: 3px;
background-color: transparent;
-moz-margin-end: -3px;
position: relative;
}
#inspector-inspect-toolbutton,
#inspector-tools > toolbarbutton {
#inspector-tools > toolbarbutton,
#devtools-sidebar-toolbar > toolbarbutton {
-moz-appearance: none;
min-width: 78px;
min-height: 22px;
@ -2003,14 +2023,16 @@ panel[dimmed="true"] {
}
#inspector-inspect-toolbutton:not([checked]):hover:active,
#inspector-tools > toolbarbutton: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] {
#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));
@ -2018,12 +2040,14 @@ panel[dimmed="true"] {
}
#inspector-inspect-toolbutton[checked]:hover,
#inspector-tools > toolbarbutton[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 {
#inspector-tools > toolbarbutton[checked]:hover:active,
#devtools-sidebar-toolbar > toolbarbutton[checked]:hover:active {
background-color: hsla(210,8%,5%,.2) !important;
}

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

@ -28,6 +28,7 @@
* Stephen Horlander (stephen@noved.org)
* Drew Willcoxon (adw@mozilla.com)
* Paul Rouget (paul@mozilla.com)
* Rob Campbell (rcampbell@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
@ -2567,8 +2568,27 @@ 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;
-moz-border-start: 1px solid #242b33;
min-width: 0;
width: 3px;
background-color: transparent;
-moz-margin-end: -3px;
position: relative;
}
#inspector-inspect-toolbutton,
#inspector-tools > toolbarbutton {
#inspector-tools > toolbarbutton,
#devtools-sidebar-toolbar > toolbarbutton {
-moz-appearance: none;
min-width: 78px;
min-height: 22px;
@ -2581,19 +2601,22 @@ panel[dimmed="true"] {
}
#inspector-inspect-toolbutton > .toolbarbutton-text ,
#inspector-tools > toolbarbutton > .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 {
#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] {
#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));
@ -2601,7 +2624,8 @@ panel[dimmed="true"] {
}
#inspector-inspect-toolbutton[checked]:hover:active,
#inspector-tools > toolbarbutton[checked]:hover:active {
#inspector-tools > toolbarbutton[checked]:hover:active,
#devtools-sidebar-toolbar > toolbarbutton[checked]:hover:active {
background-color: hsla(210,8%,5%,.2);
}

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

@ -29,6 +29,7 @@
* Jim Mathies (jmathies@mozilla.com)
* Drew Willcoxon (adw@mozilla.com)
* Paul Rouget (paul@mozilla.com)
* Rob Campbell (rcampbell@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
@ -2661,8 +2662,26 @@ 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;
min-width: 0;
width: 3px;
background-color: transparent;
-moz-margin-end: -3px;
position: relative;
}
#inspector-inspect-toolbutton,
#inspector-tools > toolbarbutton {
#inspector-tools > toolbarbutton,
#devtools-sidebar-toolbar > toolbarbutton {
-moz-appearance: none;
min-width: 78px;
min-height: 22px;
@ -2675,19 +2694,22 @@ panel[dimmed="true"] {
}
#inspector-inspect-toolbutton > .toolbarbutton-icon,
#inspector-tools > toolbarbutton > .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 {
#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] {
#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);
@ -2695,7 +2717,8 @@ panel[dimmed="true"] {
}
#inspector-inspect-toolbutton[checked]:hover:active,
#inspector-tools > toolbarbutton[checked]:hover:active {
#inspector-tools > toolbarbutton[checked]:hover:active,
#devtools-sidebar-toolbar > toolbarbutton[checked]:hover:active {
background-color: hsla(211,68%,6%,.2);
}