Bug 1408330 - UI polish on DevTools onboarding page;r=nchevobbe
authorJulian Descottes <jdescottes@mozilla.com>
Mon, 16 Oct 2017 16:53:55 +0200
changeset 387370 5d4bbcac2b7b5e1629b8bb805816e6a21b315077
parent 387369 cd7129d6dcd86f36b8a06178a94c692156536008
child 387371 661dc33e6491ff37ee55f60a32fdeef12a9241ee
push id53729
push userjdescottes@mozilla.com
push dateFri, 20 Oct 2017 09:59:04 +0000
treeherderautoland@661dc33e6491 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1408330
milestone58.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1408330 - UI polish on DevTools onboarding page;r=nchevobbe MozReview-Commit-ID: 5JE7ZErxCxG
devtools/shim/aboutdevtools/aboutdevtools.css
devtools/shim/aboutdevtools/aboutdevtools.xhtml
devtools/shim/aboutdevtools/images/external-link.svg
devtools/shim/aboutdevtools/tmp-locale/aboutdevtools.dtd
devtools/shim/jar.mn
--- 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)