Bug 1408330 - UI polish on DevTools onboarding page;r=nchevobbe
MozReview-Commit-ID: 5JE7ZErxCxG
--- a/devtools/shim/aboutdevtools/aboutdevtools.css
+++ b/devtools/shim/aboutdevtools/aboutdevtools.css
@@ -1,44 +1,54 @@
+:root {
+ /* Photon color variables used on the aboutdevtools page */
+ --blue-60: #0060df;
+ --blue-70: #003eaa;
+ --blue-80: #002275;
+ --grey-30: #d7d7db;
+ --white: #ffffff;
+}
+
.box {
- width: 980px;
+ width: 100vw;
+ max-width: 850px;
display: flex;
align-items: center;
height: 400px;
}
.wrapper {
display: flex;
flex-direction: column;
position: absolute;
align-items: center;
width: 100%;
}
.left-pane {
width: 360px;
background-image: url(images/otter.png);
- background-size: 100%;
+ background-size: 85%;
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 #d7d7db;
+ border-top: 1px solid var(--grey-30);
}
.features-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 40px 20px;
margin: 40px;
padding: 0;
@@ -48,48 +58,69 @@
list-style: none;
text-align: center;
}
.feature-desc {
margin: 1em 20px
}
-a {
- color: #0A84FF;
+.installpage-link {
+ color: var(--blue-60);
}
-h1 {
- font-size: 36px;
+.installpage-link::after {
+ content: "";
+
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+
+ margin: 0 5px;
+ vertical-align: middle;
+
+ background-image: url(images/external-link.svg);
+ background-repeat: no-repeat;
+ background-size: 16px 16px;
+}
+
+.installpage-title {
+ font-size: 33px;
margin-top: 16px;
font-weight: 300;
line-height: 44px;
}
.installpage-button {
display: block;
- margin-top: 2em;
+ margin: 2em 0 0 0;
padding: 10px 20px;
border: none;
- border-radius: 3px;
+ border-radius: 2px;
font-size: 15px;
- font-weight: 600;
+ font-weight: 400;
line-height: 21px;
- background-color: #0060df;
- color: #fff;
+ background-color: var(--blue-60);
+ color: var(--white);
box-shadow: 0 1px 0 rgba(0,0,0,0.23);
cursor: pointer;
}
.installpage-button:enabled:hover {
- background-color: #003eaa
+ background-color: var(--blue-70)
+}
+
+.installpage-button:active,
+.installpage-button:hover:active,
+.installpage-button:enabled:hover:active {
+ background-color: var(--blue-80);
}
/* Remove light gray outline when clicking on the button */
.installpage-button::-moz-focus-inner {
border: 0;
}
[hidden="true"] {
--- a/devtools/shim/aboutdevtools/aboutdevtools.xhtml
+++ b/devtools/shim/aboutdevtools/aboutdevtools.xhtml
@@ -16,28 +16,28 @@
<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 id="common-title" hidden="true">&aboutDevtools.enable.title;</h1>
- <h1 id="inspect-title" hidden="true">&aboutDevtools.enable.inspectElementTitle;</h1>
+ <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>
<!-- 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 class="message">&aboutDevtools.enable.commonMessage;</p>
- <a href="https://developer.mozilla.org/docs/Tools" target="_blank">&aboutDevtools.enable.learnMoreLink;</a>
+ <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">
new file mode 100644
--- /dev/null
+++ b/devtools/shim/aboutdevtools/images/external-link.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+ <path fill="#003eaa" d="M14.923 1.618A1 1 0 0 0 14 1H9a1 1 0 0 0 0 2h2.586L8.293 6.293a1 1 0 1 0 1.414 1.414L13 4.414V7a1 1 0 0 0 2 0V2a1 1 0 0 0-.077-.382z"/>
+ <path fill="#0060df" d="M14 10a1 1 0 0 0-1 1v2H3V3h2a1 1 0 0 0 0-2H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1z"/>
+</svg>
--- a/devtools/shim/aboutdevtools/tmp-locale/aboutdevtools.dtd
+++ b/devtools/shim/aboutdevtools/tmp-locale/aboutdevtools.dtd
@@ -2,23 +2,23 @@
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<!ENTITY aboutDevtools.headTitle "About Developer Tools">
<!ENTITY aboutDevtools.enable.title "Enable Firefox Developer Tools">
<!ENTITY aboutDevtools.enable.inspectElementTitle "Enable Firefox Developer Tools to use Inspect Element">
<!ENTITY aboutDevtools.enable.aboutDebuggingMessage
- "Develop and debug WebExtensions, web workers, service workers and more with the Firefox DevTools.">
+ "Develop and debug WebExtensions, web workers, service workers and more with Firefox DevTools.">
<!ENTITY aboutDevtools.enable.inspectElementMessage
"Examine and edit HTML and CSS with the DevTools Inspector.">
<!ENTITY aboutDevtools.enable.keyShortcutMessage
- "You activated a Developer Tool shortcut. If that was a mistake, you can close this tab.">
+ "You activated a Developer Tools shortcut. If that was a mistake, you can close this tab.">
<!ENTITY aboutDevtools.enable.menuMessage
"Examine, edit and debug HTML, CSS, and JavaScript with tools like Inspector and Debugger.">
<!ENTITY aboutDevtools.enable.commonMessage
"As of Firefox 58, Developer Tools are disabled by default to give you more control over your browser.">
<!ENTITY aboutDevtools.enable.learnMoreLink "Learn more about DevTools">
<!ENTITY aboutDevtools.enable.installButton "Enable Developer Tools">
<!ENTITY aboutDevtools.welcome.title "Welcome to Firefox Developer Tools!">
-<!ENTITY aboutDevtools.welcome.message "You’ve successfully enabled DevTools! To get started explore the Web Developer menu or open the tools with ##INSPECTOR_SHORTCUT##.">
\ No newline at end of file
+<!ENTITY aboutDevtools.welcome.message "You’ve successfully enabled DevTools! To get started, explore the Web Developer menu or open the tools with ##INSPECTOR_SHORTCUT##.">
\ No newline at end of file
--- a/devtools/shim/jar.mn
+++ b/devtools/shim/jar.mn
@@ -9,16 +9,17 @@ devtools-shim.jar:
content/aboutdevtools/aboutdevtools.js (aboutdevtools/aboutdevtools.js)
content/aboutdevtools/images/otter.png (aboutdevtools/images/otter.png)
# Temporary localisation file, move back to devtools/shim/locales/en-US when ready for localization
# See https://bugzilla.mozilla.org/show_bug.cgi?id=1408369
content/aboutdevtools/tmp-locale/aboutdevtools.dtd (aboutdevtools/tmp-locale/aboutdevtools.dtd)
+ content/aboutdevtools/images/external-link.svg (aboutdevtools/images/external-link.svg)
content/aboutdevtools/images/feature-inspector.svg (aboutdevtools/images/feature-inspector.svg)
content/aboutdevtools/images/feature-console.svg (aboutdevtools/images/feature-console.svg)
content/aboutdevtools/images/feature-debugger.svg (aboutdevtools/images/feature-debugger.svg)
content/aboutdevtools/images/feature-network.svg (aboutdevtools/images/feature-network.svg)
content/aboutdevtools/images/feature-memory.svg (aboutdevtools/images/feature-memory.svg)
content/aboutdevtools/images/feature-visual-editing.svg (aboutdevtools/images/feature-visual-editing.svg)
content/aboutdevtools/images/feature-responsive-mode.svg (aboutdevtools/images/feature-responsive-mode.svg)
content/aboutdevtools/images/feature-storage.svg (aboutdevtools/images/feature-storage.svg)
