How can I order Gnome3 shell extensions at the top?

The ordering of shell extension widgets appears to be random, how can I change it? I want to have the date/time information at the left for example.

My shell panel:

Common way:

To begin with you have to find the according file of the extension you want to change.
You can usually find it here: ~/.local/share/gnome-shell/extensions.
If the extension has been installed via package manager you can find it here: /usr/share/gnome-shell/extensions/(Thanks to A.B.)

Then go into the extension's directory and open "extension.js" with any text editor.

Go to the line with: function enable() (use the search function in your editor - if you can't find it go to the Update section further down).
Inside this function usually is a line Main.panel.addToStatusArea('NAME', _OTHERNAME, NUMBER, LEFT/CENTER/RIGHT); (Again: If you can't find it go to Update). It could happen that the last two parameters (NUMBER and POSITION) are missing; looks like this: Main.panel.addToStatusArea('NAME', _OTHERNAME);
_{(Don't worry! Your computer interprets the shorter version with: ('NAME', _OTHERNAME, 0, right); Feel free to add the missing parameters. But always in the shown order!!!})

The POSITION defines where on the panel the icon should be. There are three areas: left, center and right. You probably don't want to change this value but feel free to do so. Here are the three possible states for POSITION on the panel:

------------------------------------------------------------------
Activities                 Date                        Other icons
------------------------------------------------------------------
   left                   center                          right 

The more important value you probably want to change is NUMBER. It defines the order of the icons inside the sub-panels. Possible values are:

• 0: I don't care where the icon is.

• negative values: position; starting from the right side (could be important as all extension icons are loaded after the system icons)

• positive values: position; starting from the left side. Higher values will be located further to the right side.

You have to play around with those values in all of your extensions because same values conflict with each other (two different extensions on position 2 doesn't make any sense). And sometimes even following values conflict.

Every time you change the value make sure to save the file. Then hit Alt+F2, type r and Enter. The panel will refresh with the newly ordered icons. This is a fast option to play around with those values.

Lastly a cite from Mathematical Coffee:

Use Main.panel.addToStatusArea(unique_name_of_indicator, inidicator, position, box) to add a SystemStatusButton or PanelButton to the panel. This handles adding its menu to the menu manager for you (box is Main.panel._{left, right, center}Box, omitting the box argument gives right box by default, and ommitting position gives position 0). If your button is a ButtonBox only (i.e. no menu) then stick with. _{left, right, center}Box.insert_child_at_index.

Please let me know if you had any problems with this approach.

Update:

I have looked around and I recognised that this way doesn't work for all extensions (mostly just for simple/new extensions). A frequently used extension in this case is "system monitor". The way of modifying the icons position should be (generally) the same (I haven't tested it. So make sure to create a backup file). But there are some differences for "system monitor":

1. The function you have to search is called var enable = function (). So it might be better to search for the word enable in the file.

2. The place where the position of the icons is defined is called Main.panel._addToPanelBox('system-monitor', tray, 1, panel);. Changing the number should have the same effect as desribed above. In order to change the whole area you have two options:

   • By changing the very same line to Main.panel._addToPanelBox('system-monitor', tray, 1, Main.panel._rightBox);(Note: The position in the settings menu of the extension won't work any more).

   • Or by changing the line let panel = Main.panel._rightBox; (again use the search function) to your desired position (_leftBox, _centerBox, _rightBox).

_{(These steps can be applied to any other extension. But there will be slightly different names. But still: The common way was described in my firt attempt for this answer)}

The whole procedure in a nutshell:

Search for the according file. Then search for enable inside this file. Then search for anything like Main.panel... and change the values (quite self-explaining).

And finally I noticed that you mentioned the time panel. I found no good way to modify its position but here is something else:

You have "system monitor" installed. That's good :)
Open the according extension.js and change the word "right" to "left" in those two lines:
Main.panel._addToPanelBox('dateMenu', dateMenu, -1, Main.panel._rightBox); and Main.panel._rightBox.insert_child_at_index(dateMenu.actor, -1);.
Finally you have to check "move clock" in the settings of this extension. There you go! I haven't tested it but it should work. If not, write a comment :)

Ahh! Forgot to mention: Every time you change on of the values save the file and refresh the panel with Alt+F2 - type r - hit Enter. And make sure to create backup files!!! :D

The Extend Panel Menu extension will let you sort indicators with the "Tray offset" feature and the Indicators tab. After installing the extension, go into the settings to tweak your indicators. Happy OCDing!