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

I would like it to be visible again too. And if at all possible, be bigger. A wider target area for the mouse to hit would be a big plus on a very high resolution display.

I would like it to be visible again too. And if at all possible, be bigger. A wider target area for the mouse to hit would be a big plus on a very high resolution display.
cor-el
  • Top 10 Contributor
  • Moderator
17421 solutions 157414 answers

You can do that with code in userChrome.css or Stylish if you prefer to use an extension. The dropmarker is hidden with an opacity:0 CSS rule and only shows on hover.

Add code to the userChrome.css file below the default @namespace line.


@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

#urlbar:not(:hover) > .urlbar-textbox-container > .urlbar-history-dropmarker {
  opacity: 1 !important;
}

See also line 1655 in this file (open via the location bar):

  • chrome://browser/skin/browser.css

The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.

You can use this button to go to the current Firefox profile folder:

  • Create the chrome folder (lowercase) in the <xxxxxxxx>.default profile folder if this folder doesn't exist
  • Use a plain text editor like Notepad to create a (new) userChrome.css file in the chrome folder (file name is case sensitive)
  • Paste the code in the userChrome.css file in the editor window
  • Make sure that the userChrome.css file starts with the default @namespace line
  • Make sure that you select "All files" and not "Text files" when you save the file via "Save file as" in the text editor as userChrome.css.
    Otherwise Windows may add a hidden .txt file extension and you end up with a not working userChrome.css.txt file
You can do that with code in userChrome.css or Stylish if you prefer to use an extension. The dropmarker is hidden with an opacity:0 CSS rule and only shows on hover. Add code to the <b>userChrome.css</b> file below the default @namespace line. *http://kb.mozillazine.org/userChrome.css ---- <pre><nowiki>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ #urlbar:not(:hover) > .urlbar-textbox-container > .urlbar-history-dropmarker { opacity: 1 !important; } </nowiki></pre> See also line 1655 in this file (open via the location bar): *chrome://browser/skin/browser.css ---- The customization files userChrome.css (user interface) and userContent.css (websites) are located in the <b>chrome</b> folder in the Firefox profile folder. *http://kb.mozillazine.org/Editing_configuration You can use this button to go to the current Firefox profile folder: *Help > Troubleshooting Information > Profile Directory: Show Folder (Linux: Open Directory; Mac: Show in Finder) *http://kb.mozillazine.org/Profile_folder_-_Firefox *Create the chrome folder (lowercase) in the <xxxxxxxx>.default profile folder if this folder doesn't exist *Use a plain text editor like Notepad to create a (new) userChrome.css file in the chrome folder (file name is case sensitive) *Paste the code in the userChrome.css file in the editor window *Make sure that the userChrome.css file starts with the default @namespace line *Make sure that you select "All files" and not "Text files" when you save the file via "Save file as" in the text editor as userChrome.css.<br>Otherwise Windows may add a hidden .txt file extension and you end up with a not working userChrome.css.txt file

Question owner

@cor-el What are you talking about?

@cor-el What are you talking about?
cor-el
  • Top 10 Contributor
  • Moderator
17421 solutions 157414 answers

I'm talking about a way to use a special file named userChrome.css to modify the appearance of the Firefox user interface. This file is located in the Firefox profile folder. With code in this file you can style elements in the user interface and override existing CSS rules.

In Firefox 43 there is a CSS rule to only show the arrow when you hover the location/address bar. With the steps I posted above in the lower part of my reply you can create this file and override that default rule to have the arrow visible all the time.

You first have to use the button on the "Help > Troubleshooting Information" page to go to the profile folder. You can tap the Alt key or press F10 to show the Menu Bar and click the "?" in the "3-bar" menu button drop-down list.

When you are in the profile folder you need to create a folder named chrome (all lowercase). In the chrome folder you need to create a file named userChrome.css and paste the above posted code in this file. You can use an editor like Notepad to accomplish this. Make sure that "All files" and not "Text files" is selected when you save the file via "Save file as" in the text editor as userChrome.css.

I'm talking about a way to use a special file named userChrome.css to modify the appearance of the Firefox user interface. This file is located in the Firefox profile folder. With code in this file you can style elements in the user interface and override existing CSS rules. In Firefox 43 there is a CSS rule to only show the arrow when you hover the location/address bar. With the steps I posted above in the lower part of my reply you can create this file and override that default rule to have the arrow visible all the time. You first have to use the button on the "Help > Troubleshooting Information" page to go to the profile folder. You can tap the Alt key or press F10 to show the Menu Bar and click the "?" in the "3-bar" menu button drop-down list. When you are in the profile folder you need to create a folder named chrome (all lowercase). In the chrome folder you need to create a file named userChrome.css and paste the above posted code in this file. You can use an editor like Notepad to accomplish this. Make sure that "All files" and not "Text files" is selected when you save the file via "Save file as" in the text editor as userChrome.css.
jscher2000
  • Top 10 Contributor
8638 solutions 70669 answers

Another way to apply custom style rules to Firefox is to use the Stylish extension. Its Preview button allows a handy way to rapidly experiment with rule changes.

The following example doubles the width and adds a background color to make the target easier to spot. This does block more of the URL, but with a wide window, it may not be too bad. (You can create a new blank rule in Stylish then paste this into the editing area and click Preview.)

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

The attached screen shot demonstrates the effect (unhovered, then hovered).

Another way to apply custom style rules to Firefox is to use the Stylish extension. Its Preview button allows a handy way to rapidly experiment with rule changes. The following example doubles the width and adds a background color to make the target easier to spot. This does block more of the URL, but with a wide window, it may not be too bad. (You can create a new blank rule in Stylish then paste this into the editing area and click Preview.) @namespace url(http://www.mozilla''.''org/keymaster/gatekeeper/there.is.only.xul); &nbsp;#urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker { &nbsp;&nbsp;opacity: 1 !important; &nbsp;&nbsp;width: 32px !important; /* double the default width */ &nbsp;&nbsp;background: #dff !important; &nbsp;&nbsp;border-radius: 4px !important; &nbsp;&nbsp;border: 1px solid #fff !important; &nbsp;} &nbsp;#urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker:hover { &nbsp;&nbsp;background: #cef !important; &nbsp;&nbsp;border: 1px solid #44f !important; &nbsp;} The attached screen shot demonstrates the effect (unhovered, then hovered).

Question owner

OMFG...I can't follow any of these instructions. I can't even find <xxxxxxxx>.default. Forget it...Firefox sucks.

OMFG...I can't follow any of these instructions. I can't even find <xxxxxxxx>.default. Forget it...Firefox sucks.
mozfellow 1 solutions 33 answers

georgect said

OMFG...I can't follow any of these instructions.

You're rightly frustrated georgect.

If you have a Windows OS, you first would need to change Windows settings to show hidden system files and folders:

http://www.howtogeek.com/howto/windows-vista/show-hidden-files-and-folders-in-windows-vista/

And then to find the files / folders mentioned above, you have to paste this in the Windows' Start Menu search box:

%APPDATA%\Mozilla\Firefox\Profiles

Even with that said, it's still a lot to ask of you to follow the rest of those instructions. And this is of no help if you're running another operating system. Disappearing that arrow is another bad discussion on the part of Mozilla.

''georgect [[#answer-819619|said]]'' <blockquote> OMFG...I can't follow any of these instructions. </blockquote> You're rightly frustrated georgect. If you have a Windows OS, you first would need to change Windows settings to show hidden system files and folders: [http://www.howtogeek.com/howto/windows-vista/show-hidden-files-and-folders-in-windows-vista/ http://www.howtogeek.com/howto/windows-vista/show-hidden-files-and-folders-in-windows-vista/] And then to find the files / folders mentioned above, you have to paste this in the Windows' Start Menu search box: '''%APPDATA%\Mozilla\Firefox\Profiles''' Even with that said, it's still a lot to ask of you to follow the rest of those instructions. And this is of no help if you're running another operating system. Disappearing that arrow is another bad discussion on the part of Mozilla.
the-edmeister
  • Top 25 Contributor
  • Moderator
5395 solutions 40085 answers

mozfellow,

That is a very lengthy procedure just to open the Profile folder, which can be opened from inside the Firefox browser.

cor-el explained to the original poster how to open the Profile folder.

You can use this button to go to the current Firefox profile folder:

Help > Troubleshooting Information > Profile Directory: Show Folder

mozfellow, That is a very lengthy procedure just to open the Profile folder, which can be opened from inside the Firefox browser. cor-el explained to the original poster how to open the Profile folder. '''You can use this button to go to the current Firefox profile folder:''' '''Help > Troubleshooting Information > Profile Directory: Show Folder '''

Question owner

There is no "chrome" folder in the Firefox profile folder.

There is no "chrome" folder in the Firefox profile folder.

Question owner

Show hidden files & folders is already selected.

Show hidden files & folders is already selected.

Helpful Reply

To all the "developers" who think change is wonderful...remember, for every one change you make, MILLIONS may not want that change and it should be EASY to undo ANY change one single person pushes on EVERYONE.

To all the "developers" who think change is wonderful...remember, for every one change you make, MILLIONS may not want that change and it should be EASY to undo ANY change one single person pushes on EVERYONE.
cor-el
  • Top 10 Contributor
  • Moderator
17421 solutions 157414 answers

You need to create the chrome folder as this folder isn't there by default. Neither do the userChrome.css and userContent.css files exist by default and need to be created.

Check the steps in my above reply.

You need to create the chrome folder as this folder isn't there by default. Neither do the userChrome.css and userContent.css files exist by default and need to be created. Check the steps in my above reply. *[[/questions/1099494#answer-818813]]
Vlammetje 0 solutions 39 answers

I've added the necessary code to my userchrome.css and the arrow is now visible. Very nice!

I've also added jscher2000's code to widen the target area and add the light blue color. Just to test it out. The result is however that whenever I now hover anywhere over the location bar, the arrow area snaps back to it's default width (and thus to the right as a whole), and it loses the blue color. When I hover directly over the arrow it also snaps to the default width, but now it does have the blue background color and darker blue outline as would be expected from the code.


Sorry by the way for sort of tagging along in this thread, but I felt it silly to make it a seperate question. If this is frowned upon please let me know and I won't do it again!

I've added the necessary code to my userchrome.css and the arrow is now visible. Very nice! I've also added jscher2000's code to widen the target area and add the light blue color. Just to test it out. The result is however that whenever I now hover anywhere over the location bar, the arrow area snaps back to it's default width (and thus to the right as a whole), and it loses the blue color. When I hover directly over the arrow it also snaps to the default width, but now it does have the blue background color and darker blue outline as would be expected from the code. Sorry by the way for sort of tagging along in this thread, but I felt it silly to make it a seperate question. If this is frowned upon please let me know and I won't do it again!

Modified by Vlammetje

Vlammetje 0 solutions 39 answers

I made a few screen shots to illustrate.

Top: normal view without mouseover Middle: on mouseover on the location bar Bottom: on mouseover directly over the arrow

For me the colors aren't needed, so I'll remove those lines of code. However the mouseover behaviour is still weird in my case.

Any help would be appreciated.

I made a few screen shots to illustrate. Top: normal view without mouseover Middle: on mouseover on the location bar Bottom: on mouseover directly over the arrow For me the colors aren't needed, so I'll remove those lines of code. However the mouseover behaviour is still weird in my case. Any help would be appreciated.

Modified by Vlammetje

Vlammetje 0 solutions 39 answers

OK, by adding the width: 32px !important; to the .urlbar-history-dropmarker:hover bit, the target area is now wider both with and without the mouse over the area. However it is still smaller when hovering over the location bar.

OK, by adding the ''width: 32px !important;'' to the ''.urlbar-history-dropmarker:hover'' bit, the target area is now wider both with and without the mouse over the area. However it is still smaller when hovering over the location bar.

Modified by Vlammetje

jscher2000
  • Top 10 Contributor
8638 solutions 70669 answers

Hi georgect, sorry for your frustration. Hopefully we can give you a "drop in" solution by the end of this thread.

Hi Vlammetje, thank you for your perseverance.

However it is still smaller when hovering over the location bar.

I must not have tested all the scenarios. Even with !important, it's possible that something in the Firefox theme has a higher precedence and is overriding the user style. I'll poke around and see whether I can find it.

Hi georgect, sorry for your frustration. Hopefully we can give you a "drop in" solution by the end of this thread. Hi Vlammetje, thank you for your perseverance. <blockquote>However it is still smaller when hovering over the location bar.</blockquote> I must not have tested all the scenarios. Even with !important, it's possible that something in the Firefox theme has a higher precedence and is overriding the user style. I'll poke around and see whether I can find it.

Question owner

Alright I got the arrow to stay visible. This process was totally unnecessary. Why can't this be a setting in "about:config"?

I literally had to read these instructions over and over and over (still not getting it right), then by trying to think what you were trying to say I finally got it to work. Sorry but these instructions are not literal enough and you guys assume I have a clue of what I'm doing. I have never gone into a program, create a folder, create a file in that folder etc.

Thanks but how long with this last...until the next update/change?

Alright I got the arrow to stay visible. This process was totally unnecessary. Why can't this be a setting in "about:config"? I literally had to read these instructions over and over and over (still not getting it right), then by trying to think what you were trying to say I finally got it to work. Sorry but these instructions are not literal enough and you guys assume I have a clue of what I'm doing. I have never gone into a program, create a folder, create a file in that folder etc. Thanks but how long with this last...until the next update/change?
the-edmeister
  • Top 25 Contributor
  • Moderator
5395 solutions 40085 answers

jscher2000 said

Hi georgect, sorry for your frustration. Hopefully we can give you a "drop in" solution by the end of this thread.

Are you going to post it to UserStyles.org ?

The process to do modifications like this is too long & complicated and many users don't carefully read the instructions that are posted. Like ignoring the fact that the /chrome/ no longer exists in Firefox and needs to be created.

''jscher2000 [[#answer-819838|said]]'' <blockquote> Hi georgect, sorry for your frustration. Hopefully we can give you a "drop in" solution by the end of this thread. </blockquote> Are you going to post it to UserStyles.org ? The process to do modifications like this is too long & complicated and many users don't carefully read the instructions that are posted. Like ignoring the fact that the '''/chrome/''' no longer exists in Firefox and needs to be created.
jscher2000
  • Top 10 Contributor
8638 solutions 70669 answers

Helpful Reply

the-edmeister said

Are you going to post it to UserStyles.org ?

You read my mind.

For users who prefer userChrome.css, you can copy the CSS from the below page by clicking the "Show CSS" link to the right of the Created Date.

For users who prefer automatic installation, the first step is to get the Stylish extension (and follow the link to restart Firefox to activate the extension) and then go to the style rule page.

''the-edmeister [[#answer-820022|said]]'' <blockquote> Are you going to post it to UserStyles.org ? </blockquote> You read my mind. For users who prefer userChrome.css, you can copy the CSS from the below page by clicking the "Show CSS" link to the right of the Created Date. For users who prefer automatic installation, the first step is to get the Stylish extension (and follow the link to restart Firefox to activate the extension) and then go to the style rule page. * Stylish extension: https://addons.mozilla.org/firefox/addon/stylish/ * The user style: https://userstyles.org/styles/122133/url-bar-dropmarker-double-wide
the-edmeister
  • Top 25 Contributor
  • Moderator
5395 solutions 40085 answers

Thank you. Looks schweet.

Thank you. Looks schweet.