Bug 1412504 - update styling for about:devtools;r=nchevobbe
authorJulian Descottes <jdescottes@mozilla.com>
Sat, 28 Oct 2017 12:47:23 +0200
changeset 389348 710ce0548f3ac0b5b00df2c430855c115ebed2dd
parent 389347 1fc72161667dfaac8f54ef3ed8162af378db9ca4
child 389349 dbd7c51e79f2c5e6d7765150e55d4b4ce292b67b
push id54448
push userjdescottes@mozilla.com
push dateTue, 31 Oct 2017 17:02:44 +0000
treeherderautoland@710ce0548f3a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1412504
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 1412504 - update styling for about:devtools;r=nchevobbe MozReview-Commit-ID: 42Pe9BD7dVa
devtools/shim/aboutdevtools/aboutdevtools.css
devtools/shim/aboutdevtools/aboutdevtools.xhtml
--- 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>