Bug 1449324 - Make popup_border affect the autocomplete popups border color. r=dao draft
authorTim Nguyen <ntim.bugs@gmail.com>
Wed, 28 Mar 2018 00:11:20 +0200
changeset 773414 6ef2d0a84825ce5281b37c18516bd5778fe7050f
parent 773304 d91b03764f7808379a9692ec6af3ed951bb46c68
push id104228
push userbmo:ntim.bugs@gmail.com
push dateTue, 27 Mar 2018 22:11:59 +0000
reviewersdao
bugs1449324
milestone61.0a1
Bug 1449324 - Make popup_border affect the autocomplete popups border color. r=dao MozReview-Commit-ID: 2omRfDTdRWr
browser/modules/ThemeVariableMap.jsm
browser/themes/shared/urlbar-autocomplete.inc.css
toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js
--- a/browser/modules/ThemeVariableMap.jsm
+++ b/browser/modules/ThemeVariableMap.jsm
@@ -101,15 +101,18 @@ const ThemeVariableMap = [
       } else {
         element.setAttribute("lwt-popup-brighttext", "true");
       }
 
       element.style.setProperty(secondaryVariable, `rgba(${r}, ${g}, ${b}, 0.5)`);
       return `rgba(${r}, ${g}, ${b}, ${a})`;
     }
   }],
+  ["--autocomplete-popup-border-color", {
+    lwtProperty: "popup_border"
+  }],
   ["--autocomplete-popup-highlight-background", {
     lwtProperty: "popup_highlight"
   }],
   ["--autocomplete-popup-highlight-color", {
     lwtProperty: "popup_highlight_text"
   }],
 ];
--- a/browser/themes/shared/urlbar-autocomplete.inc.css
+++ b/browser/themes/shared/urlbar-autocomplete.inc.css
@@ -2,16 +2,17 @@
 /* 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/. */
 %endif
 
 :root {
   --autocomplete-popup-background: -moz-field;
   --autocomplete-popup-color: -moz-fieldtext;
+  --autocomplete-popup-border-color: ThreeDShadow;
   --autocomplete-popup-highlight-background: Highlight;
   --autocomplete-popup-highlight-color: HighlightText;
   --autocomplete-popup-secondary-color: GrayText;
 }
 
 :root:-moz-lwtheme {
   --autocomplete-popup-background: #fff;
   --autocomplete-popup-color: #0c0c0d;
@@ -24,16 +25,17 @@
   --urlbar-popup-url-color: #0a84ff;
   --urlbar-popup-action-color: #30e60b;
 }
 
 #PopupAutoCompleteRichResult,
 #PopupSearchAutoComplete {
   background: var(--autocomplete-popup-background);
   color: var(--autocomplete-popup-color);
+  border-color: var(--autocomplete-popup-border-color);
 }
 
 #PopupAutoCompleteRichResult .autocomplete-richlistbox {
   padding: 4px 3px;
   background: transparent;
   color: inherit;
 }
 
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js
@@ -1,13 +1,14 @@
 "use strict";
 
 // This test checks whether applied WebExtension themes that attempt to change
 // popup properties are applied correctly to the autocomplete bar.
 const POPUP_COLOR = "#85A400";
+const POPUP_BORDER_COLOR = "#220300";
 const POPUP_TEXT_COLOR_DARK = "#000000";
 const POPUP_TEXT_COLOR_BRIGHT = "#ffffff";
 const POPUP_SELECTED_COLOR = "#9400ff";
 const POPUP_SELECTED_TEXT_COLOR = "#09b9a6";
 
 const POPUP_URL_COLOR_DARK = "#1c78d4";
 const POPUP_ACTION_COLOR_DARK = "#008f8a";
 const POPUP_URL_COLOR_BRIGHT = "#0a84ff";
@@ -80,16 +81,17 @@ add_task(async function test_popup_url()
       "theme": {
         "images": {
           "headerURL": "image1.png",
         },
         "colors": {
           "accentcolor": ACCENT_COLOR,
           "textcolor": TEXT_COLOR,
           "popup": POPUP_COLOR,
+          "popup_border": POPUP_BORDER_COLOR,
           "popup_text": POPUP_TEXT_COLOR_DARK,
           "popup_highlight": POPUP_SELECTED_COLOR,
           "popup_highlight_text": POPUP_SELECTED_TEXT_COLOR,
         },
       },
     },
     files: {
       "image1.png": BACKGROUND,
@@ -123,16 +125,18 @@ add_task(async function test_popup_url()
      "Should get maxResults=" + maxResults + " results");
 
   let popupCS = window.getComputedStyle(popup);
 
   Assert.equal(popupCS.backgroundColor,
                `rgb(${hexToRGB(POPUP_COLOR).join(", ")})`,
                `Popup background color should be set to ${POPUP_COLOR}`);
 
+  testBorderColor(popup, POPUP_BORDER_COLOR);
+
   Assert.equal(popupCS.color,
                `rgb(${hexToRGB(POPUP_TEXT_COLOR_DARK).join(", ")})`,
                `Popup color should be set to ${POPUP_TEXT_COLOR_DARK}`);
 
   // Set the selected attribute to true to test the highlight popup properties
   results[1].setAttribute("selected", "true");
   let resultCS = window.getComputedStyle(results[1]);