Bug 1344016 - Update styling of about:debugging for add-ons r=jdescottes

MozReview-Commit-ID: CGCoX6mtuv4

--HG--
extra : rebase_source : 17754a44fc7fcf15aa914f5c2cea18354038dede
This commit is contained in:
Mark Striemer 2017-04-05 16:35:44 -05:00
parent bd06793922
commit 611e641acc
2 changed files with 96 additions and 19 deletions

View File

@ -214,3 +214,78 @@ button {
.error-page .error-page-details {
color: gray;
}
.addon-target-container {
background: #fff;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.12);
list-style-type: none;
margin: 0 0 8px;
padding: 4px 16px;
transition: box-shadow 150ms;
}
.addon-target-container:hover {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
}
.addon-target-container .target {
align-items: center;
display: flex;
margin: 0;
padding: 16px 0;
}
.addon-target-actions {
border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.addon-target-container .target-icon {
margin-inline-end: 16px;
}
.addon-target-container .name {
align-self: center;
font-size: 16px;
font-weight: 600;
}
.addon-target-button {
background: none;
border: none;
color: #0087ff;
font-size: 14px;
margin: 12px;
min-width: auto;
padding: 4px;
transition: color 150ms;
}
.addon-target-button:active,
.addon-target-button:hover,
.addon-target-button:enabled:hover:active {
background: none;
}
.addon-target-button:disabled {
color: #999;
opacity: 1;
}
.addon-target-button:enabled:focus,
.addon-target-button:enabled:hover {
background: none;
color: #0052cc;
cursor: pointer;
text-decoration: underline;
}
.addon-target-button:enabled:hover:active {
color: #003399;
text-decoration: none;
}
.addon-target-button:first-of-type {
/* Subtract the start padding so the button is still a bigger click target but
* lines up with the icon. */
margin-inline-start: -4px;
}

View File

@ -59,27 +59,29 @@ module.exports = createClass({
const canBeReloaded = target.temporarilyInstalled;
return dom.li(
{ className: "target-container", "data-addon-id": target.addonID },
dom.img({
className: "target-icon",
role: "presentation",
src: target.icon
}),
{ className: "addon-target-container", "data-addon-id": target.addonID },
dom.div({ className: "target" },
dom.div({ className: "target-name", title: target.name }, target.name)
dom.img({
className: "target-icon",
role: "presentation",
src: target.icon
}),
dom.span({ className: "target-name", title: target.name }, target.name)
),
dom.div({className: "addon-target-actions"},
dom.button({
className: "debug-button addon-target-button",
onClick: this.debug,
disabled: debugDisabled,
}, Strings.GetStringFromName("debug")),
dom.button({
className: "reload-button addon-target-button",
onClick: this.reload,
disabled: !canBeReloaded,
title: !canBeReloaded ?
Strings.GetStringFromName("reloadDisabledTooltip") : ""
}, Strings.GetStringFromName("reload"))
),
dom.button({
className: "debug-button",
onClick: this.debug,
disabled: debugDisabled,
}, Strings.GetStringFromName("debug")),
dom.button({
className: "reload-button",
onClick: this.reload,
disabled: !canBeReloaded,
title: !canBeReloaded ?
Strings.GetStringFromName("reloadDisabledTooltip") : ""
}, Strings.GetStringFromName("reload"))
);
}
});