third part of syncing LCARStrek with Firefox 35 windows theme changes

diff --git a/LCARStrek/browser/ToolbarFx.png b/LCARStrek/browser/ToolbarFx.png
index 5e0b2882d4f8eac8d83f3e0b28d35bffdf90d882..35722b91e2b0560a7f7a17a0a0a8e8104ae3aca8 100644 (file)
Binary files a/LCARStrek/browser/ToolbarFx.png and b/LCARStrek/browser/ToolbarFx.png differ

diff --git a/LCARStrek/browser/aboutNetError.css b/LCARStrek/browser/aboutNetError.css
index 71da6fbf79566b1d0654ef4ab38106bfbebb3d58..c1c37d6af87e4c1acdbb9840d0be96fba4adbe5d 100644 (file)
--- a/LCARStrek/browser/aboutNetError.css
+++ b/LCARStrek/browser/aboutNetError.css
@@ -39,6 +39,10 @@ ul {
   -moz-padding-start: 2em;
 }
 
+#errorTitleText[sslv3] {
+  background-image: url("aboutNetError_alert.svg");
+}
+
 #errorTitleText:-moz-dir(rtl) {
   background-position: right 0;
 }

diff --git a/LCARStrek/browser/aboutNetError_alert.svg b/LCARStrek/browser/aboutNetError_alert.svg
new file mode 100644 (file)
index 0000000..9a7edc0
--- /dev/null
+++ b/LCARStrek/browser/aboutNetError_alert.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
+<g>
+       <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="20" y1="4" x2="20" y2="36">
+               <stop offset="0" style="stop-color:#FF0000"/>
+               <stop offset="1" style="stop-color:#FFCF00"/>
+       </linearGradient>
+       <path fill="url(#SVGID_1_)" d="M13.373,4L4,13.372v13.256L13.373,36h13.255L36,26.628V13.372L26.627,4H13.373z M22.176,8.704   l-0.48,14.304h-3.424L17.76,8.704H22.176z M20,31.296c-1.44,0-2.592-1.184-2.592-2.592c0-1.44,1.152-2.592,2.592-2.592   c1.472,0,2.592,1.152,2.592,2.592C22.592,30.112,21.472,31.296,20,31.296z"/>
+       <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="20" y1="-3.728928e-10" x2="20" y2="40">
+               <stop offset="0" style="stop-color:#FF0000"/>
+               <stop offset="1" style="stop-color:#FFCF00"/>
+       </linearGradient>
+       <path fill="url(#SVGID_2_)" d="M28.284,0H11.716L0,11.716v16.569L11.716,40h16.569L40,28.284V11.716L28.284,0z M38,27.456   L27.456,38H12.544L2,27.456V12.544L12.544,2h14.911L38,12.544V27.456z"/>
+</g>
+</svg>

diff --git a/LCARStrek/browser/aboutProviderDirectory.css b/LCARStrek/browser/aboutProviderDirectory.css
new file mode 100644 (file)
index 0000000..f03e82f
--- /dev/null
+++ b/LCARStrek/browser/aboutProviderDirectory.css
@@ -0,0 +1,30 @@
+%include aboutSocialError.css
+
+body {
+  width: 310px;
+  margin: 1em auto;
+}
+
+#message-box {
+  margin-top: 2em;
+  background: url('chrome://global/skin/icons/information-24.png') no-repeat left 4px;
+  -moz-padding-start: 30px;
+}
+
+#activation-frame {
+  border: none;
+  margin: 0;
+  width: 310px;
+  height: 200px;
+}
+#activation > p {
+  width: 100%;
+  text-align: center;
+  margin: 0;
+  line-height: 2em;
+}
+.link {
+  text-decoration: none;
+  color: #3333FF;
+  cursor: pointer;
+}

diff --git a/LCARStrek/browser/aboutSocialError.css b/LCARStrek/browser/aboutSocialError.css
index 5863c0167b5c79d5a2795fb637dd7175e44523db..20f86d3222dffa5647fd3ff6ac3def7c3cd854ec 100644 (file)
--- a/LCARStrek/browser/aboutSocialError.css
+++ b/LCARStrek/browser/aboutSocialError.css
@@ -4,6 +4,7 @@ body {
   margin-top: 2em;
   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
   font-size: 100%;
+  min-height: 200px;
 }
 
 p {
@@ -20,7 +21,7 @@ p {
 }
 
 #main-error-msg {
-  color: #FF9F00;
+  color: #4b4b4b;
   font-weight: bold;
 }
 
@@ -55,7 +56,6 @@ p {
 button {
   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
   font-size: 0.6875em;
-  -moz-appearance: none;
   -moz-user-select: none;
   width: 100%;
   margin: 2px 0;
@@ -66,10 +66,23 @@ button {
   background-clip: padding-box;
   border: none;
   border-radius: 3px;
+
+  transition-property: background-color, color;
+  transition-duration: 150ms;
+  transition-timing-function: ease;
+
 }
 
-button:hover,
-button:hover:active {
+button:hover {
   background-color: #FFCF00;
   color: #000000;
+  transition-duration: 150ms;
+  transition-timing-function: ease;
+}
+
+button:hover:active {
+  background-color: #FF9F00;
+  color: #000000;
+  transition-duration: 10ms;
+  transition-timing-function: linear;
 }

diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css
index f35902abc4d3dc34e66d7d9f44b54c7ece4eafc5..a3c7c99f9461e737ec220ffaf9a34df30dfecf54 100644 (file)
--- a/LCARStrek/browser/browser.css
+++ b/LCARStrek/browser/browser.css
@@ -36,6 +36,10 @@ menubar {
   -moz-binding: url("chrome://global/skin/globalBindings.xml#menubar");
 }
 
+:root {
+  --verified-identity-box-backgroundcolor: #000000;
+}
+
 #menubar-items {
   -moz-box-orient: vertical; /* for flex hack */
 }
@@ -490,7 +494,7 @@ menuitem.bookmark-item {
           #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button,
           #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
           #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
-          #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button),
+          #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button),
 
 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
@@ -929,12 +933,26 @@ menuitem.bookmark-item {
   -moz-image-region: rect(0, 108px, 18px, 90px);
 }
 
+#webide-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 738px, 18px, 720px);
+}
+
+#webide-button[cui-areatype="toolbar"]:hover {
+  -moz-image-region: rect(18px, 738px, 36px, 720px);
+}
+
 /* === END toolbarbuttons.inc.css === */
 
 /* === BEGIN menupanel.inc.css === */
 
 /* Menu panel and palette styles */
 
+:root {
+   /* avoid aero overrides with changed filenames */
+  --menupanel-list-style-image: url(chrome://browser/skin/menuPanelFx.png);
+  --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanelFx-small.png);
+}
+
 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
           #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
@@ -942,15 +960,15 @@ toolbaritem[sdkstylewidget="true"] > toolbarbutton,
           #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button,
           #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
           #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
-          #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button)[cui-areatype="menu-panel"],
+          #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button)[cui-areatype="menu-panel"],
 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
           #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
           #social-share-button, #open-file-button, #find-button, #developer-button,
           #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button,
           #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
           #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
-          #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button) {
-  list-style-image: url("chrome://browser/skin/menuPanelFx.png"); /* avoid aero overrides with changed filename */
+          #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button) {
+  list-style-image: var(--menupanel-list-style-image);
 }
 
 #home-button[cui-areatype="menu-panel"],
@@ -1246,6 +1264,16 @@ toolbarpaletteitem[place="palette"] > #web-apps-button:hover {
   -moz-image-region: rect(32px, 928px, 64px, 896px);
 }
 
+#webide-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #webide-button {
+  -moz-image-region: rect(0px, 960px, 32px, 928px);
+}
+
+#webide-button[cui-areatype="menu-panel"]:hover,
+toolbarpaletteitem[place="palette"] > #webide-button:hover {
+  -moz-image-region: rect(32px, 960px, 64px, 928px);
+}
+
 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
   -moz-image-region: rect(0, 832px, 32px, 800px);
 }
@@ -1302,7 +1330,7 @@ toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-contai
 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
-  list-style-image: url("chrome://browser/skin/menuPanelFx-small.png"); /* avoid aero overrides with changed filename */
+  list-style-image: var(--menupanel-small-list-style-image);
 }
 
 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
@@ -1380,6 +1408,11 @@ toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled=
   -moz-image-region: rect(32px, 96px, 48px, 80px);
 }
 
+#add-share-provider {
+  list-style-image: var(--menupanel-small-list-style-image);
+  -moz-image-region: rect(0px, 96px, 16px, 80px);
+}
+
 /* === END menupanel.inc.css === */
 
 .toolbarbutton-1:not([type="menu-button"]) {
@@ -1987,7 +2020,7 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but
 }
 
 #identity-box.verifiedIdentity:not(:-moz-lwtheme) {
-  background-color: #000000;
+  var(--verified-identity-box-backgroundcolor);
 }
 
 #identity-box:-moz-focusring {
@@ -2028,15 +2061,20 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but
 
 /* === BEGIN identity-block.inc.css === */
 
-#urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
+:root {
+  --identity-box-verified-color: #008484;
   /* Default theme does different color per channel, we can't as they do it build-time. */
-  color: #9C9CFF;
-  -moz-border-end: 1px solid #9C9CFF;
+  --identity-box-chrome-color: #9C9CFF;
+}
+
+#urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
+  color: var(--identity-box-chrome-color);
+  -moz-border-end: 1px solid var(--identity-box-chrome-color);
 }
 
 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
-  color: #008484;
-  -moz-border-end: 1px solid #008484;
+  color: var(--identity-box-verified-color);
+  -moz-border-end: 1px solid var(--identity-box-verified-color);
 }
 
 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
@@ -2875,7 +2913,11 @@ toolbarbutton.chevron {
 toolbarbutton.chevron:hover {
   list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
 }
-
+/*
+toolbar[brighttext] toolbarbutton.chevron {
+  list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
+}
+*/
 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
   transform: scaleX(-1);
@@ -4867,6 +4909,21 @@ notification.pluginVulnerable .messageImage {
 .customizationmode-button:hover {
 }
 
+#customization-titlebar-visibility-button[checked],
+#customization-devedition-theme-button[checked] {
+  background-color: #008484;
+}
+
+#customization-titlebar-visibility-button[checked]:hover,
+#customization-devedition-theme-button[checked]:hover {
+  background-color: #FFCF00;
+}
+
+#customization-titlebar-visibility-button[checked]:hover:active,
+#customization-devedition-theme-button[checked]:hover:active {
+  background-color: #FF9F00;
+}
+
 .customizationmode-button[disabled="true"] {
 }
 

diff --git a/LCARStrek/browser/customizableui/panelUIOverlay.css b/LCARStrek/browser/customizableui/panelUIOverlay.css
index 1d39611842d59a6d849c2bab3b3f0161c247418a..98f5bba2dada490f811455be1e771e3cb4fb949a 100644 (file)
--- a/LCARStrek/browser/customizableui/panelUIOverlay.css
+++ b/LCARStrek/browser/customizableui/panelUIOverlay.css
@@ -124,6 +124,7 @@ panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .pan
   margin: 0 0 4px;
   background-color: #A09090;
   color: #000000;
+  font-variant: small-caps;
   border-radius: 4px;
 }
 
@@ -239,7 +240,7 @@ panelview:not([mainview]) .toolbarbutton-text,
 
 #PanelUI-contents {
   display: block;
-  flex: 1 0 main-size;
+  flex: 1 0 auto;
   margin-left: auto;
   margin-right: auto;
   max-width: 22.35em;
@@ -359,6 +360,7 @@ toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-status,
+#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-update-status,
 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
@@ -473,6 +475,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 /*  margin: 0;*/
 }
 
+#PanelUI-update-status,
 #PanelUI-help,
 #PanelUI-fxa-status,
 #PanelUI-customize,
@@ -488,12 +491,14 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   -moz-box-orient: horizontal;
 }
 
+#PanelUI-update-status,
 #PanelUI-fxa-status {
   border-top: 1px solid #9C9CFF;
   border-bottom: 1px solid transparent;
   margin-bottom: -1px;
 }
 
+#PanelUI-update-status > .toolbarbutton-text,
 #PanelUI-fxa-status > .toolbarbutton-text {
   width: 0; /* Fancy cropping solution for flexbox. */
 }
@@ -507,6 +512,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   min-width: 44px;
 }
 
+#PanelUI-update-status > .toolbarbutton-text,
 #PanelUI-fxa-status > .toolbarbutton-text,
 #PanelUI-customize > .toolbarbutton-text {
   margin: 0;
@@ -519,6 +525,9 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   display: none;
 }
 
+#PanelUI-update-status > .toolbarbutton-icon,
+#PanelUI-fxa-status > .toolbarbutton-icon,
+#PanelUI-customize > .toolbarbutton-icon,
 #PanelUI-help > .toolbarbutton-icon,
 #PanelUI-quit > .toolbarbutton-icon {
   -moz-margin-end: 0;
@@ -530,6 +539,16 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   -moz-border-start-style: none;
 }
 
+#PanelUI-update-status {
+  width: calc(22.35em + 30px);
+  -moz-padding-start: 15px;
+  -moz-border-start-style: none;
+}
+
+#PanelUI-update-status {
+  list-style-image: url(chrome://branding/content/icon16.png);
+}
+
 #PanelUI-fxa-status {
   list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
 }
@@ -592,6 +611,32 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 #PanelUI-fxa-status:not([disabled]):hover:active {
 }
 
+#PanelUI-update-status[update-status="succeeded"] {
+  background-color: #008484;
+  color: #000000;
+}
+
+#PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover {
+  background-color: #FFCF00;
+}
+
+#PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active {
+  background-color: #FF9F00;
+}
+
+#PanelUI-update-status[update-status="failed"] {
+  background-color: #FF0000;
+  color: #000000;
+}
+
+#PanelUI-update-status[update-status="failed"]:not([disabled]):hover {
+  background-color: #FFCF00;
+}
+
+#PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active {
+  background-color: #FF9F00;
+}
+
 #PanelUI-quit:not([disabled]):hover {
   background-color: #FF0000;
 }
@@ -1069,17 +1114,6 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left {
   color: #FF9F00;
 }
 
-#customizationui-widget-multiview[mainViewId="PanelUI-panicView"] > .panel-viewcontainer,
-#customizationui-widget-multiview[mainViewId="PanelUI-panicView"] > .panel-viewcontainer > .panel-viewstack,
-#customizationui-widget-multiview[mainViewId="PanelUI-panicView"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview,
-/* NB: currentsubview attribute is temporary as a safe workaround for a layout problem with this
- * panel. Do not rely on it, it *will* go away again. */
-#PanelUI-multiView[currentsubview="PanelUI-panicView"] > .panel-viewcontainer > .panel-viewstack > .panel-subviews,
-#PanelUI-panicView > .panel-subview-body,
-#PanelUI-panicView {
-  overflow: visible;
-}
-
 #PanelUI-panicView.cui-widget-panelview {
   min-width: 280px;
 }
@@ -1251,8 +1285,8 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left {
 
 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
   /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
-/*  background: #FFF;
-  border: 1px solid rgba(0,0,0,0.25);
+/*  background: var(--panel-arrowcontent-background);
+  border: var(--panel-arrowcontent-border);
   border-radius: 3.5px;
   margin-top: -4px;*/
 }

diff --git a/LCARStrek/browser/menuPanelFx.png b/LCARStrek/browser/menuPanelFx.png
index 2936fabfd8375d7f407e25d33b741b8806480226..db0524c8052921d7bed475d4d64c0ee7a41d4535 100644 (file)
Binary files a/LCARStrek/browser/menuPanelFx.png and b/LCARStrek/browser/menuPanelFx.png differ

diff --git a/LCARStrek/browser/preferences/in-content/preferences.css b/LCARStrek/browser/preferences/in-content/preferences.css
index f0e611907f0fa8ccbe5ba375ff5458eba4bbf2cf..104c7c76a99333084af41a887ce2bc7ec8512a37 100644 (file)
--- a/LCARStrek/browser/preferences/in-content/preferences.css
+++ b/LCARStrek/browser/preferences/in-content/preferences.css
@@ -185,6 +185,15 @@ treecol {
 
 /* General Pane */
 
+#useFirefoxSync  {
+  font-size: 90%;
+  -moz-margin-end: 8px !important;
+}
+
+#getStarted {
+  font-size: 90%;
+}
+
 #isNotDefaultLabel {
   font-weight: bold;
 }

diff --git a/LCARStrek/browser/preferences/preferences.css b/LCARStrek/browser/preferences/preferences.css
index 8e333868fdf10c7a866d6b94bb3fc95628fa12e2..bfaae17980cb818d25c4b9f5da87f338afc62136 100644 (file)
--- a/LCARStrek/browser/preferences/preferences.css
+++ b/LCARStrek/browser/preferences/preferences.css
@@ -89,6 +89,11 @@ label.small {
 
 /* General Pane */
 
+#useFirefoxSync,
+#getStarted {
+  font-size: 90%;
+}
+
 #isNotDefaultLabel {
   font-weight: bold;
 }

diff --git a/LCARStrek/browser/searchbar.css b/LCARStrek/browser/searchbar.css
index 253fdbb9b3f5ad54a7febea316a57d5c635791dc..84940d5cce9f2608c45082ff4c7380226c7be0ac 100644 (file)
--- a/LCARStrek/browser/searchbar.css
+++ b/LCARStrek/browser/searchbar.css
@@ -2,6 +2,11 @@
  * 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/. */
 
+.searchbar-dropmarker-image {
+  --searchbar-dropmarker-url: url("chrome://global/skin/arrow/arrow-down.gif");
+  --searchbar-dropmarker-hover-url: url("chrome://global/skin/arrow/arrow-down-hover.gif");
+}
+
 .autocomplete-textbox-container {
   -moz-box-align: stretch;
 }
@@ -48,12 +53,12 @@
 }
 
 .searchbar-dropmarker-image {
-  list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
+  list-style-image: var(--searchbar-dropmarker-url);
 }
 
 .searchbar-engine-button:hover > .searchbar-dropmarker-image,
 .searchbar-engine-button[open="true"] > .searchbar-dropmarker-image {
-  list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
+  list-style-image: var(--searchbar-dropmarker-hover-url);
 }