X
Tap here to go to the mobile version of the site.

Support Forum

how to make dropdown arrow always visible

Posted

In FF version 43 you took the drop down arrow (right next to the refresh arrow) and made it invisible. The only way to make it appear is to hover your mouse in the URL box and the only way to make it work it to hover over it directly.

Can we just have the arrow visible all the time. I don't like having to hunt for it.

Also if someone is using FF for the first time, they'll never even know the arrow is there.

Why is it hidden now (kind of stupid)?

In FF version 43 you took the drop down arrow (right next to the refresh arrow) and made it invisible. The only way to make it appear is to hover your mouse in the URL box and the only way to make it work it to hover over it directly. Can we just have the arrow visible all the time. I don't like having to hunt for it. Also if someone is using FF for the first time, they'll never even know the arrow is there. Why is it hidden now (kind of stupid)?
Attached screenshots

Additional System Details

Installed Plug-ins

  • Adobe PDF Plug-In For Firefox and Netscape 15.9.20069
  • Citrix Online App Detector Plugin
  • Intel web components for Intel® Identity Protection Technology
  • Intel web components updater - Installs and updates the Intel web components
  • NPRuntime Script Plug-in Library for Java(TM) Deploy
  • Next Generation Java Plug-in 11.51.2 for Mozilla browsers
  • MetaStream 3 Plugin r4
  • The QuickTime Plugin allows you to view a wide variety of multimedia content in Web pages. For more information, visit the QuickTime Web site.
  • Shockwave Flash 20.0 r0
  • Adobe Shockwave for Director Netscape plug-in, version 12.1.8.158
  • 5.1.41105.0
  • iTunes Detector Plug-in

Application

  • Firefox 43.0
  • User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:43.0) Gecko/20100101 Firefox/43.0
  • Support URL: https://support.mozilla.org/1/firefox/43.0/WINNT/en-US/

Extensions

  • Kaspersky Protection 4.6.2.23.1 (light_plugin_D772DC8D6FAF43A29B25C4EBAA5AD1DE@kaspersky.com)

Javascript

  • incrementalGCEnabled: True

Graphics

  • adapterDescription: AMD Radeon R9 270
  • adapterDescription2:
  • adapterDeviceID: 0x6811
  • adapterDeviceID2:
  • adapterDrivers: aticfx64 aticfx64 aticfx64 aticfx32 aticfx32 aticfx32 atiumd64 atidxx64 atidxx64 atiumdag atidxx32 atidxx32 atiumdva atiumd6a atitmm64
  • adapterDrivers2:
  • adapterRAM: 2048
  • adapterRAM2:
  • adapterSubsysID: 0b041002
  • adapterSubsysID2:
  • adapterVendorID: 0x1002
  • adapterVendorID2:
  • clearTypeParameters: Gamma: 2200 Pixel Structure: R ClearType Level: 100 Enhanced Contrast: 200
  • direct2DEnabled: True
  • directWriteEnabled: True
  • directWriteVersion: 6.3.9600.18123
  • driverDate: 7-21-2015
  • driverDate2:
  • driverVersion: 15.201.1001.0
  • driverVersion2:
  • failures: [u'[GFX1-]: [D2D1.1] 4CreateBitmap failure Size(210,20320) Code: 0x80070057 format 0', u'[GFX1-]: [D2D1.1] 4CreateBitmap failure Size(210,20320) Code: 0x80070057 format 0']
  • indices: [0, 1]
  • info: {u'AzureCanvasBackend': u'direct2d 1.1', u'AzureFallbackCanvasBackend': u'cairo', u'AzureContentBackend': u'direct2d 1.1', u'AzureSkiaAccelerated': 0}
  • isGPU2Active: False
  • numAcceleratedWindows: 4
  • numTotalWindows: 4
  • supportsHardwareH264: Yes
  • webglRenderer: Google Inc. -- ANGLE (AMD Radeon R9 270 Direct3D11 vs_5_0 ps_5_0)
  • windowLayerManagerRemote: True
  • windowLayerManagerType: Direct3D 11

Modified Preferences

Misc

  • User JS: No
  • Accessibility: No
Vlammetje 0 solutions 39 answers

Thanks for the code. I tried playing with the code from yesterday, but I couldn't get it to work. I'm not a coder. I must have left out a comma or something. It looked almost like it though :)

This is what I have now:

#urlbar:not(:hover) > .urlbar-textbox-container > .urlbar-history-dropmarker {
  opacity: 1 !important;
  width: 64px !important;
}
#urlbar:hover > .urlbar-textbox-container > .urlbar-history-dropmarker,
#urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker:hover {
  opacity: 1 !important;
  width: 64px !important;
  border-radius: 4px !important;
  border: 1px solid #bcc !important;
}

Just a slight tweak to make it a little more subtle, and even wider :)

I daren't ask, but is there a way to have the arrow align right in the dropmarker area? Purely for aesthetic reasons. This way it would look like the regular made visible arrow, but have a bigger area to the left to aim for that acts as if you're hovering directly over the arrow icon itself. I find myself mostly bringing in the cursor from bottom left, and if I then see the border appear around the area, I know I'm on target, even if I'm only just roughly near the actual arrow. Less precise = more speed, haha.

Thanks for the code. I tried playing with the code from yesterday, but I couldn't get it to work. I'm not a coder. I must have left out a comma or something. It looked almost like it though :) This is what I have now: #urlbar:not(:hover) > .urlbar-textbox-container > .urlbar-history-dropmarker { opacity: 1 !important; width: 64px !important; } #urlbar:hover > .urlbar-textbox-container > .urlbar-history-dropmarker, #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker:hover { opacity: 1 !important; width: 64px !important; border-radius: 4px !important; border: 1px solid #bcc !important; } Just a slight tweak to make it a little more subtle, and even wider :) I daren't ask, but is there a way to have the arrow align right in the dropmarker area? Purely for aesthetic reasons. This way it would look like the regular made visible arrow, but have a bigger area to the left to aim for that acts as if you're hovering directly over the arrow icon itself. I find myself mostly bringing in the cursor from bottom left, and if I then see the border appear around the area, I know I'm on target, even if I'm only just roughly near the actual arrow. Less precise = more speed, haha.

Modified by Vlammetje

jscher2000
  • Top 10 Contributor
8687 solutions 71011 answers

You can keep the arrow on the right by adding left padding instead of changing the width. Also, you can widen the triangle itself. I think this is less distracting, not to have the color normally, but to have a larger target when you get anywhere over the bar.

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#urlbar:not(:hover) > .urlbar-textbox-container > .urlbar-history-dropmarker {
  opacity: 1 !important;
}
#urlbar:hover > .urlbar-textbox-container > .urlbar-history-dropmarker,
#urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker:hover {
  opacity: 1 !important;
  padding-left: 40px !important; /* double the default width */
  background: #cef !important;
  border-radius: 4px !important;
  border: 1px solid #44f !important;
}
#urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker > .dropmarker-icon {
  width: 22px !important;  
  height: 16px !important;
}

You probably can find widths and padding that work for you.

You can keep the arrow on the right by adding left padding instead of changing the width. Also, you can widen the triangle itself. I think this is less distracting, not to have the color normally, but to have a larger target when you get anywhere over the bar. @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); #urlbar:not(:hover) > .urlbar-textbox-container > .urlbar-history-dropmarker { opacity: 1 !important; } #urlbar:hover > .urlbar-textbox-container > .urlbar-history-dropmarker, #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker:hover { opacity: 1 !important; padding-left: 40px !important; /* double the default width */ background: #cef !important; border-radius: 4px !important; border: 1px solid #44f !important; } #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker > .dropmarker-icon { width: 22px !important; height: 16px !important; } You probably can find widths and padding that work for you.
Vlammetje 0 solutions 39 answers

I've kept the original arrow size, but I added a 60px padding left. Both in hover and not hover. And I added the white border back in on the not hover because the arrow jumped by 1 pixel when hovering otherwise. Which drove me nuts, until I figured out it was of my own doing by removing the border earlier, duh.

The border is now set to the exact same color as the center of the arrow when there is no mouse hovering over it (#dfe5eb). It's barely visible, but enough of an subtle outline to know I'm over the target area. Nice!

Thank you very much!

I've kept the original arrow size, but I added a 60px padding left. Both in hover and not hover. And I added the white border back in on the not hover because the arrow jumped by 1 pixel when hovering otherwise. Which drove me nuts, until I figured out it was of my own doing by removing the border earlier, duh. The border is now set to the exact same color as the center of the arrow when there is no mouse hovering over it (#dfe5eb). It's barely visible, but enough of an subtle outline to know I'm over the target area. Nice! Thank you very much!

Modified by Vlammetje