Bug 1517468 - Reuse common.css classes and variables in about:devtools. r=jdescottes
authorTim Nguyen <ntim.bugs@gmail.com>
Wed, 09 Jan 2019 17:30:10 +0000
changeset 453086 3ba4f46bbfdb8908c1951ae29e0347308f1ae23b
parent 453085 a140784a7b05ada61f886b79fdbff8addd788431
child 453087 25b67aa0ef55c463fb947630f0313b334aff51f8
push id75712
push userntim.bugs@gmail.com
push dateWed, 09 Jan 2019 17:37:28 +0000
treeherderautoland@3ba4f46bbfdb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes
bugs1517468
milestone66.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 1517468 - Reuse common.css classes and variables in about:devtools. r=jdescottes 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;
 }