User:PerfektesChaos/js/paneMarker

JavaScript gadget to emphasize browser windows or tabs currently used for input activities. Your valuable wiki contribution will be lost if you forget to save that, or may have been blocked unnoticed due to edit conflict or filter while you jumped to another task.

Multitasking genius? Ever lost in lots of panes and/or windows? The paneMarker (not painMaker) will help power users to keep survey over dozens of pages. First of all the tab favicon of important page activities should be shown with red background.

If not yet provided by project the page name may be presented in leading position of window title, if desired. Then it could be identified better in taskbar and tab list. Special activities can be marked by symbols. Note that the headline on the page itself is never affected.

Usage

If your project has registered this as a gadget, just activate on your Preferences page.
Otherwise include the following lines into your common.js or skin dependant like vector.js:

mw.loader.load("https://www.mediawiki.org/w/index.php?title=User:PerfektesChaos/js/paneMarker/r.js&action=raw&bcache=1&maxage=604800&ctype=text/javascript",
               "text/javascript");

If you are blocking scripts from sites other than your local Wiki you might need to put www.mediawiki.org on the whitelist.
The gadget works also with non-WMF sites using MediaWiki 1.18 or higher. You may want to provide your own icon definitions.
The script may be loaded by anonymous users, e.g. via greasemonkey.

Effects

Red icon

example

If your current activity has been rated as vulnerable (like editing or creating a page or section, or uploading) an attempt is made to display an appropriate icon with red background. However, it depends on browser implementation whether this change becomes visible.

Browser versions
Browser
Firefox	… 18 …
Internet Explorer	not recommended (until 9?)
Opera	11, 12
Google Chrome	19
Safari	5?
Konqueror

Some browsers might refuse icon exchange since current domain could be wikipedia.org, but alternative icon comes from upload.wikimedia.org which may be regarded as security leak.
If the browser is given a choice between several icon formats the browser will decide on the appropriate image.

See Image gallery.

Internet Explorer

IE 7, 8 and probably 9 shows some strange behaviour:

Obviously there is just one favicon administrated per domain. If the favicon of one document and the connected tab changes (to red), all tabs of the same domain may switch the same way. This is not what we need.
IE is rather reluctant to update the favicon according to modified definition.
Even worse: If something unexpected happens to the favicon, IE starts seaching the second level domain and accesses the /favicon.ico which is assigned now. If the expected favicon has been of the third level domain like a black globe of test.wikipedia.org IE shifts to wikipedia.org and shows the "W".

If an IE until version 9 is detected the automatic favicon exchange is dropped and an "*" is shown for projects with leading page name.

General appearance

Short title

If not yet common in project the page name may be used as abbreviated window title, if .opt.leave configured by user. You are not annoyed by leading “Pages that link to” consuming the entire visible width. The document area is not changed.

Changing project icon

All Wikipedia projects use the same W as icon. Developers would be overburdened to design distinctive favicons for nearly 300 sites. If you are frequently logged into another Wikipedia, working simultaneously on pages with nearly the same name, you might equip your common.js there with W is that one is spanish, or W if english or french. See collection for examples ready to go, e.g. .

Distinguishing mark

On some project sites the name of the current page is leading the document title, therefore the beginning of the name is visible in tab bar and (for separated windows) also in the taskbar — at least for the current window on tabbed pane.

However you don’t know which action is taken right now with this page, since that is described at the end of the title text. To give you an idea whether it is more than only a view, the following characters might be displayed between tab icon and generic document title:

*	Vulnerable action, like editing By default not active; hope for red icon. Workaround if some of your browser versions won’t change the icon.
Δ	`Diff` Consider '±' if not displayed by your browser
↓	`History` Consider '^' if not displayed by your browser
→	`Links` Special page: "Whatlinkshere". Consider '>' if not displayed by your browser

The feature is activated automatically if your site is known to display page name first, then activity.
Appearance is subject to full customization.

Page shortcut

If a shortcut is found on page it will be used as window title. This behviour can be switched off.

Namespace shortcut

If you are neither in main (article) space nor on a special page and no page shortcut was detected, the configuration is searched for a namespace shortcut. If found, that one will be used in document title. Now you might get an idea which page is covered below a tab — when all you have read before was “Wikipedia talk:…” you might prefer “WT:”.

Customization

You may adapt appearance and behaviour to your specific needs.

Quick interactive configuration

Users (even anonymous) may configure all features using a form when opening Special:Blankpage.

When reloading a page the preferences declared here come into effect. This dynamic assignment overrides the static setting by application object.

These user preferences are not visible to other users.

Even anonymous users may store preferences in their local browser profile.

Application object and API

The standard behaviour can be defined via JavaScript definition. This is also available to anonymous users.

Insert the following statement into your standard user script like common.js (best before mw.loader.load, if any):

if ( typeof mw.libs.paneMarker !== "object" ) {
   mw.libs.paneMarker  =  {};
}
mw.libs.paneMarker.opt  =  { key1: value1,
                             key2: value2   // etc.
                           };

Key	Value	Meaning
Red background icon
`appleIcon`	URL String `false`	Alternative red apple-touch-icon, or disabled
`faviconICO`		Alternative red favicon in .ICO format, or disabled
`faviconPNG`		Alternative red favicon in .PNG format, or disabled
`lazy`	`true`	Always keep standard icon
General appearance
`favicon`	URL String	Alternative default favicon. MIME type is derived from file extension if .png or .ico or .gif.
`leave`	`true`	Create window titles as short as possible; leading page name may be in use already
Distinguishing mark
`chars`	`true` `false`	General activation (`true`) or deactivation for this project. However, explicit definition of single mark characters will be in effect anyway.
`charDiff`	`false` 'String' Unicode	Marker for diffpages
`charHistory`		Marker for history pages
`charLinks`		Marker for “Whatlinkshere”
`charVitally`		Marker for important pages
`lowChar`	`true`	Use ANSI characters
`rightleft`	`true`	Force rightmost position on page with right-to-left scripting. However, document title is supposed to be already defined as RTL and should not need that.
`shortcut`	`false`	Deactivate Shortcut as window title (`false`)
API
`.fresh()`		Restart the entire gadget Dependency: `mediawiki.util`
`.favicon()`		Trigger red icon on current window/tab. `true` – Red icon (standard) `false` – `.opt.favicon` (if defined)

Example:

if ( typeof mw.libs.paneMarker !== "object" ) {
   mw.libs.paneMarker  =  {};
}
mw.libs.paneMarker.opt  =  { charVitally: '!!!',
                             charDiff:    '±'
                           };

Note: Customization may be ignored if not put into a standard user script, since other scripts are loaded later and paneMarker has no knowledge about, won’t wait for them.

Codes

Source code	Java Script – for load() dialog – preferencesGadgetOptions human readable version dialog
ResourceLoader	`ext.gadget.paneMarker` for Extension:Gadgets Dependencies: `user`, `user.options`, `mediawiki.util`, `jquery.client`
Namespaces	(any)
`mw.libs`	`paneMarker`
Cookies	Anonymous users only: `preferencesGadgetOptions` (localStorage)
`mw.hook`	`refNames` When code has been loaded. Tells implementation metadata.
MediaWiki	1.26 (mw.storage) options for anonymous users 1.23 for registered users

Other languages

This gadget is prepared for multilingual support.

If you like a version in your own language, please forward translations to me:
- This documentation page.
- The code itself is working without human language items.
- However, you might want specific support for your project (label arrangement, other icons, default behaviour).

German