Bug 1517468 - Reuse common.css classes and variables in about:devtools. r=jdescottes, a=RyanVM
authorTim Nguyen <ntim.bugs@gmail.com>
Wed, 09 Jan 2019 17:30:10 +0000
changeset 509388 6f5097891fe3767390f102f671f349a97568b438
parent 509387 3e454cd1481291559bc3f69846fd71d2f6373831
child 509389 947bc1c824fee0e098660f656f77df59c3225abe
push id1905
push userffxbld-merge
push dateMon, 21 Jan 2019 12:33:13 +0000
treeherdermozilla-release@c2fca1944d8c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes, RyanVM
bugs1517468
milestone65.0
Bug 1517468 - Reuse common.css classes and variables in about:devtools. r=jdescottes, a=RyanVM Differential Revision: https://phabricator.services.mozilla.com/D16038
devtools/startup/aboutdevtools/aboutdevtools.css
devtools/startup/aboutdevtools/aboutdevtools.xhtml
devtools/startup/aboutdevtools/subscribe.css
--- a/devtools/startup/aboutdevtools/aboutdevtools.css
+++ b/devtools/startup/aboutdevtools/aboutdevtools.css
@@ -1,27 +1,13 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 :root {
-  /* Photon color variables used on the aboutdevtools page */
-  --blue-50: #0a84ff;
-  --blue-50-alpha20: rgba(10, 132, 255, 0.2);
-  --blue-60: #0060df;
-  --blue-70: #003eaa;
-  --blue-80: #002275;
-  --grey-30: #d7d7db;
-  --grey-90: #0c0c0d;
-  --grey-90-alpha-10: rgba(12, 12, 13, 0.1);
-  --grey-90-alpha-20: rgba(12, 12, 13, 0.2);
-  --grey-90-alpha-30: rgba(12, 12, 13, 0.3);
-  --grey-90-alpha-40: rgba(12, 12, 13, 0.4);
-  --grey-90-alpha-50: rgba(12, 12, 13, 0.5);
-  --red-50: #ff0039;
   --white: #ffffff;
 
   /* Shared variables */
   --line-height: 1.5em;
 }
 
 html, body {
   min-width: 600px;
@@ -116,17 +102,17 @@ p {
   margin: -.3rem .15rem 0 0.25rem;
   vertical-align: middle;
 
   background-image: url(images/external-link.svg);
   background-repeat: no-repeat;
   background-size: 16px 16px;
 
   -moz-context-properties: fill;
-  fill: var(--blue-60);
+  fill: currentColor;
 }
 
 .title {
   font-weight: 300;
   font-size: 32px;
   margin-top: 16px;
   line-height: 44px;
 }
@@ -139,61 +125,27 @@ p {
 .buttons-container button:not(:last-child) {
   margin-right: 10px;
 }
 
 button {
   margin: 20px 0 0 0;
   padding: 10px 20px;
 
-  border: none;
-  border-radius: 2px;
-
   font-size: 15px;
   font-weight: 400;
   line-height: 21px;
   cursor: pointer;
-
-  box-shadow: 0 1px 0 rgba(0,0,0,0.23);
 }
 
 /* Remove light gray outline when clicking on the button */
 button::-moz-focus-inner {
   border: 0;
 }
 
-.primary-button {
-  background-color: var(--blue-60);
-  color: var(--white);
-}
-
-.primary-button:enabled:hover {
-  background-color: var(--blue-70)
-}
-
-.primary-button:active,
-.primary-button:hover:active,
-.primary-button:enabled:hover:active {
-  background-color: var(--blue-80);
-}
-
-.default-button {
-  background-color: var(--grey-90-alpha-10);
-}
-
-.default-button:enabled:hover {
-  background-color: var(--grey-90-alpha-20)
-}
-
-.default-button:active,
-.default-button:hover:active,
-.default-button:enabled:hover:active {
-  background-color: var(--grey-90-alpha-30);
-}
-
 [hidden="true"] {
   display: none;
 }
 
 footer {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -219,18 +171,14 @@ footer {
   color: var(--white);
 }
 
 .footer-link {
   display: block;
   margin-top: 10px;
 }
 
-.footer-link::after {
-  fill: var(--white);
-}
-
 .footer-link,
 .footer-link:hover,
 .footer-link:visited,
 .footer-link:hover:active {
   color: var(--white);
 }
--- a/devtools/startup/aboutdevtools/aboutdevtools.xhtml
+++ b/devtools/startup/aboutdevtools/aboutdevtools.xhtml
@@ -31,18 +31,18 @@
         <p id="about-debugging-message" hidden="true" data-l10n-id="enable-about-debugging-message"></p>
         <p id="menu-message" hidden="true" data-l10n-id="enable-menu-message"></p>
         <p id="key-shortcut-message" hidden="true" data-l10n-id="enable-key-shortcut-message"></p>
         <p id="inspect-element-message" hidden="true" data-l10n-id="enable-inspect-element-message"></p>
 
         <p data-l10n-id="enable-common-message"></p>
         <a class="external installpage-link" href="https://developer.mozilla.org/docs/Tools" target="_blank" data-l10n-id="enable-learn-more-link"></a>
         <div class="buttons-container">
-          <button class="primary-button" id="install" data-l10n-id="enable-enable-button"></button>
-          <button class="default-button" id="close" data-l10n-id="enable-close-button"></button>
+          <button class="primary" id="install" data-l10n-id="enable-enable-button"></button>
+          <button id="close" data-l10n-id="enable-close-button"></button>
         </div>
       </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">
@@ -69,17 +69,17 @@
             </section>
 
             <section id="newsletter-privacy" class="newsletter-form-section">
               <input type="checkbox" id="privacy" name="privacy" required="true" />
               <label for="privacy" data-l10n-id="newsletter-privacy-label">
                 <a class="external" href="https://www.mozilla.org/privacy/" data-l10n-name="privacy-policy"></a>
               </label>
             </section>
-            <button type="submit" id="newsletter-submit" class="primary-button" data-l10n-id="newsletter-subscribe-button"></button>
+            <button type="submit" id="newsletter-submit" class="primary" data-l10n-id="newsletter-subscribe-button"></button>
           </form>
           <div id="newsletter-thanks">
             <h2 class="newsletter-title" data-l10n-id="newsletter-thanks-title"></h2>
             <p data-l10n-id="newsletter-thanks-message"></p>
           </div>
         </div>
       </div>
     </div>
--- a/devtools/startup/aboutdevtools/subscribe.css
+++ b/devtools/startup/aboutdevtools/subscribe.css
@@ -82,29 +82,12 @@
 }
 
 #email {
   width: 100%;
   box-sizing: border-box;
   padding: 8px;
 }
 
-#newsletter-form input {
-  border-color: var(--grey-90-alpha-30);
-}
-
-#newsletter-form input:hover {
-  border-color: var(--grey-90-alpha-50);
-}
-
-#newsletter-form input:focus {
-  border-color: var(--blue-50);
-  box-shadow: 0 0 0px 3px var(--blue-50-alpha20);
-}
-
-#newsletter-form::placeholder {
-  color: var(--grey-90-alpha-40);
-}
-
 #newsletter-submit {
   display: block;
   padding: 8px 20px;
 }