Jump to content
Sign in to follow this  

Firefox menu button - how did they do it?

Recommended Posts


did you notice the Firefox menu button? it may seem simple but it's interesting: as i understand, it is a graphic element located on the title bar, replacing standard icon and title, it changes color when hover on it, it has its own edges which integrates gracefully with the window edge, and although it has no visible upper edge, it is "draggable" like any other edge of the window.


i was wondering - how did they do it?

(yes i know it's open source, but i'm no programmer, and i favor AutoIt for its ability to speak English, while other programming languages speak "Computerish" which i can't understand).

i know how to show a context-menu upon click, and how to change graphic appearance on hover, and i have seen solutions on how you can attach your own "mini"-GUI to any window title bar. but this one seems way too "neat" to use that technique.

if i wanted to do a similar thing with my GUI, how would i go about it?

thanks for any thoughts

Share this post

Link to post
Share on other sites

Hi orbs,

  The part you said you don't know how to to do would be be the graphic?

Opera has the same basic button and if you have a look at appearances it shows the button without background


So all you would have to do is make 2 or 3 buttons for base, hover and click and integrate them into this position in your GUI.

Personally never done it but in theory doesn't seem too difficult.



Share this post

Link to post
Share on other sites

thanks l3ill, but actually i'm ok with that part. what i can't figure out is how to put my graphic on the title bar, instead of the icon and title text, and make it so elegantly mimic the native window style.

Share this post

Link to post
Share on other sites

at first glance it appears that the code is writing the GUI completely from scratch - GUICreate with style $WS_POPUP. that may be the way to go, but i was hoping to avoid that and let Windows draw the window using the native style. i'll take a closer look. thanks for the reference!

Share this post

Link to post
Share on other sites

ok, completely not what i had in mind, but still... i made a simple non-resizable smartphone-like GUI, with a button at the top, like this:


what i'm now struggling with is to draw a contour line around the GUI, same color as the sunken edge of the button. i've been trying to follow the line with PixelGetColor() but that failed miserably. there must be a simpler way to this?

#include <StaticConstants.au3>
#include <Array.au3>
#include <WindowsConstants.au3>
#include <GuiConstants.au3>


$my_gui = GuiCreate('', 290, 500, Default,Default,$WS_POPUP)

_GuiRoundCorners($my_gui, 0, 0, 40, 40)


; button
Global $cHeadButtonColor=0xCCDDEE
$gHeadButtonLabel=GUICtrlCreateLabel('My App Title',81,3,200-81,20,$SS_CENTER)
; button sunken edge
GUICtrlSetGraphic($gArea, $GUI_GR_COLOR, 0x77CCCC)



While True
    Switch $msg
        Case $GUI_EVENT_CLOSE
        Case $gHeadButtonLabel,$gHeadButtonPaddingTop
            MsgBox(0,'','Head Button pressed')


Func _GuiRoundCorners($h_win, $i_x1, $i_y1, $i_x3, $i_y3)
   Dim $pos, $ret, $ret2
   $pos = WinGetPos($h_win)
   $ret = DllCall("gdi32.dll", "long", "CreateRoundRectRgn", "long", $i_x1, "long", $i_y1, "long", $pos[2], "long", $pos[3], "long", $i_x3, "long", $i_y3)
   If $ret[0] Then
      $ret2 = DllCall("user32.dll", "long", "SetWindowRgn", "hwnd", $h_win, "long", $ret[0], "int", 1)
      If $ret2[0] Then
         Return 1
         Return 0
      Return 0
EndFunc  ;==>_GuiRoundCorners

Func WM_NCHITTEST($hWnd, $iMsg, $wParam, $lParam)
    #forceref $hWnd, $iMsg, $wParam, $lParam
    Return $HTCAPTION
EndFunc   ;==>WM_NCHITTEST
Edited by orbs
  • Like 1

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  


Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.