corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1209581 - Use the cool new about:debugging icons. r=jryans

Browse Source
This commit is contained in:
Jan Keromnes
2015-11-15 05:59:00 +01:00
parent a22aff1b61
commit 55a57dbc1e
5 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
devtools/client/aboutdebugging/aboutdebugging.css
View File

@@ -64,15 +64,19 @@ label {
align-items: center;
}
.target-logo {
.target-icon {
height: 24px;
margin-right: 5px;
}
.target-logo:not([src]) {
.target-icon:not([src]) {
display: none;
}
.inverted-icons .target-icon {
filter: invert(30%);
}
.target-details {
flex: 1;
}

4
devtools/client/aboutdebugging/aboutdebugging.xhtml
View File

@@ -21,11 +21,11 @@
<body id="body">
<div id="categories">
<div class="category" value="addons" selected="true">
<img class="category-icon" src="chrome://mozapps/skin/extensions/category-extensions.png"/>
<img class="category-icon" src="chrome://devtools/skin/images/debugging-addons.svg"/>
<div class="category-name">&aboutDebugging.addons;</div>
</div>
<div class="category" value="workers">
<img class="category-icon" src="chrome://browser/skin/preferences/in-content/icons.svg#applications"/>
<img class="category-icon" src="chrome://devtools/skin/images/debugging-workers.svg"/>
<div class="category-name">&aboutDebugging.workers;</div>
</div>
</div>

2
devtools/client/aboutdebugging/components/target.js
View File

@@ -53,7 +53,7 @@ exports.TargetComponent = React.createClass({
let target = this.props.target;
return React.createElement("div", { className: "target" },
React.createElement("img", {
className: "target-logo",
className: "target-icon",
src: target.icon }),
React.createElement("div", { className: "target-details" },
React.createElement("div", { className: "target-name" }, target.name),

4
devtools/client/aboutdebugging/components/workers.js
View File

@@ -16,6 +16,7 @@ loader.lazyRequireGetter(this, "Services");
const Strings = Services.strings.createBundle(
"chrome://devtools/locale/aboutdebugging.properties");
const WorkerIcon = "chrome://devtools/skin/images/debugging-workers.svg";
exports.WorkersComponent = React.createClass({
displayName: "WorkersComponent",
@@ -42,7 +43,7 @@ exports.WorkersComponent = React.createClass({
render() {
let client = this.props.client;
let workers = this.state.workers;
return React.createElement("div", null,
return React.createElement("div", { className: "inverted-icons" },
React.createElement(TargetListComponent, {
name: Strings.GetStringFromName("serviceWorkers"),
targets: workers.service, client }),
@@ -63,6 +64,7 @@ exports.WorkersComponent = React.createClass({
forms.forEach(form => {
let worker = {
name: form.url,
icon: WorkerIcon,
actorID: form.actor
};
switch (form.type) {

3
devtools/client/jar.mn
View File

@@ -289,6 +289,9 @@ devtools.jar:
skin/images/tool-canvas.svg (themes/images/tool-canvas.svg)
skin/images/tool-debugger.svg (themes/images/tool-debugger.svg)
skin/images/tool-debugger-paused.svg (themes/images/tool-debugger-paused.svg)
skin/images/debugging-addons.svg (themes/images/debugging-addons.svg)
skin/images/debugging-devices.svg (themes/images/debugging-devices.svg)
skin/images/debugging-workers.svg (themes/images/debugging-workers.svg)
skin/images/tool-inspector.svg (themes/images/tool-inspector.svg)
skin/images/tool-shadereditor.svg (themes/images/tool-shadereditor.svg)
skin/images/tool-styleeditor.svg (themes/images/tool-styleeditor.svg)