Bug 1412504 - update styling for about:devtools;r=nchevobbe
MozReview-Commit-ID: 42Pe9BD7dVa
--- a/devtools/shim/aboutdevtools/aboutdevtools.css
+++ b/devtools/shim/aboutdevtools/aboutdevtools.css
@@ -2,16 +2,20 @@
/* Photon color variables used on the aboutdevtools page */
--blue-60: #0060df;
--blue-70: #003eaa;
--blue-80: #002275;
--grey-30: #d7d7db;
--white: #ffffff;
}
+p {
+ line-height: 1.5em;
+}
+
.box {
width: 100vw;
max-width: 850px;
display: flex;
align-items: center;
height: 400px;
}
@@ -28,69 +32,78 @@
background-image: url(images/otter.svg);
background-size: 80%;
background-position: 50%;
background-repeat: no-repeat;
height: 100%;
flex-shrink: 0;
}
-.message {
- line-height: 1.6em;
-}
-
.right-pane {
height: 250px;
}
.features {
max-width: 980px;
border-top: 1px solid var(--grey-30);
}
.features-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 40px 20px;
- margin: 40px;
+ margin: 60px 20px;
padding: 0;
}
+.feature-icon {
+ width: 55%;
+}
+
.feature {
list-style: none;
text-align: center;
+ margin: 10px 0;
+}
+
+.feature-name {
+ font-size: 28px;
+ font-weight: 300;
+ margin: 10px 0;
}
.feature-desc {
- margin: 1em 20px
+ margin: 1em 20px;
}
.installpage-link {
color: var(--blue-60);
+ -moz-context-properties: fill;
+ fill: var(--blue-60);
}
.installpage-link::after {
content: "";
display: inline-block;
height: 16px;
width: 16px;
- margin: 0 5px;
+ margin: -.3rem .15rem 0 0.25rem;
vertical-align: middle;
background-image: url(images/external-link.svg);
background-repeat: no-repeat;
background-size: 16px 16px;
}
-.installpage-title {
- font-size: 33px;
+.title {
+ font-weight: 300;
+ font-size: 32px;
margin-top: 16px;
- font-weight: 300;
line-height: 44px;
}
.installpage-button {
display: block;
margin: 2em 0 0 0;
padding: 10px 20px;
--- a/devtools/shim/aboutdevtools/aboutdevtools.xhtml
+++ b/devtools/shim/aboutdevtools/aboutdevtools.xhtml
@@ -16,40 +16,40 @@
<link rel="stylesheet" href="chrome://devtools-shim/content/aboutdevtools/aboutdevtools.css" type="text/css"/>
<script type="application/javascript" src="chrome://devtools-shim/content/aboutdevtools/aboutdevtools.js"></script>
</head>
<body>
<div id="install-page" class="wrapper" hidden="true">
<div class="box">
<div class="left-pane" />
<div class="right-pane">
- <h1 class="installpage-title" id="common-title" hidden="true">&aboutDevtools.enable.title;</h1>
- <h1 class="installpage-title" id="inspect-title" hidden="true">&aboutDevtools.enable.inspectElementTitle;</h1>
+ <h1 class="title" id="common-title" hidden="true">&aboutDevtools.enable.title;</h1>
+ <h1 class="title" id="inspect-title" hidden="true">&aboutDevtools.enable.inspectElementTitle;</h1>
<!-- Include all the possible message, hidden by default
as we can't lazily load localized strings from dtd -->
- <p class="message" id="about-debugging-message" hidden="true">&aboutDevtools.enable.aboutDebuggingMessage;</p>
- <p class="message" id="menu-message" hidden="true">&aboutDevtools.enable.menuMessage;</p>
- <p class="message" id="key-shortcut-message" hidden="true">&aboutDevtools.enable.keyShortcutMessage;</p>
- <p class="message" id="inspect-element-message" hidden="true">&aboutDevtools.enable.inspectElementMessage;</p>
+ <p id="about-debugging-message" hidden="true">&aboutDevtools.enable.aboutDebuggingMessage;</p>
+ <p id="menu-message" hidden="true">&aboutDevtools.enable.menuMessage;</p>
+ <p id="key-shortcut-message" hidden="true">&aboutDevtools.enable.keyShortcutMessage;</p>
+ <p id="inspect-element-message" hidden="true">&aboutDevtools.enable.inspectElementMessage;</p>
- <p class="message">&aboutDevtools.enable.commonMessage;</p>
+ <p>&aboutDevtools.enable.commonMessage;</p>
<a class="installpage-link" href="https://developer.mozilla.org/docs/Tools" target="_blank">&aboutDevtools.enable.learnMoreLink;</a>
<button class="installpage-button" id="install">&aboutDevtools.enable.installButton;</button>
</div>
</div>
</div>
<!-- This page, hidden by default is displayed once the add-on is installed -->
<div id="welcome-page" class="wrapper" hidden="true">
<div class="box">
<div class="left-pane" />
<div class="right-pane">
- <h1>&aboutDevtools.welcome.title;</h1>
- <p class="message" id="welcome-message">&aboutDevtools.welcome.message;</p>
+ <h1 class="title" >&aboutDevtools.welcome.title;</h1>
+ <p id="welcome-message">&aboutDevtools.welcome.message;</p>
</div>
</div>
<div class="features">
<ul class="features-list">
<li class="feature">
<img class="feature-icon" src="chrome://devtools-shim/content/aboutdevtools/images/feature-inspector.svg" alt=""/>
<h3 class="feature-name">Inspector</h3>