r107982 MediaWiki - Code Review archive

Repository:	MediaWiki
Revision:	< r107981‎ \| r107982 \| r107983 >
Date:	01:28, 4 January 2012
Author:	krinkle
Status:	resolved (Comments)
Tags:	core, johnduhart
Comment:	[jquery.footHovzer] new plugin for mw-log-console and mw-debug-toolbar * Previously mw.log and mw.Debug both were in a fixed container on the bottom, overlapping each other. mw.log did increase the body's padding-bottom to account for the height so that all content is still visible, but it was still a problem when mw.Debug came along. * This plugin adds a single fixed position element to bottom of the body, to which other stuff like mw.log and mw.Debug can append a non-fixed position container. That will take care of it. * Method update() will re-check the padding and scroll position and fix where needed * Reduces code a little bit
Modified paths:	/trunk/phase3/resources/Resources.php (modified) (history) /trunk/phase3/resources/jquery/jquery.footHovzer.css (added) (history) /trunk/phase3/resources/jquery/jquery.footHovzer.js (added) (history) /trunk/phase3/resources/mediawiki/mediawiki.debug.css (modified) (history) /trunk/phase3/resources/mediawiki/mediawiki.debug.js (modified) (history) /trunk/phase3/resources/mediawiki/mediawiki.log.js (modified) (history)

Diff [purge]

Index: trunk/phase3/resources/jquery/jquery.footHovzer.js
—	—	@@ -0,0 +1,50 @@
	2	+/**
	3	+ * Utility to stack stuff in an overlay fixed on the bottom of the page.
	4	+ *
	5	+ * Usage:
	6	+ * <code>
	7	+ * var hovzer = $.getFootHovzer();
	8	+ * hovzer.$.append( $myCollection );
	9	+ * hovzer.update();
	10	+ * </code>
	11	+ *
	12	+ * @author Timo Tijhof, 2012
	13	+ */
	14	+( function ( $ ) {
	15	+ var $hovzer, footHovzer, prevHeight, newHeight;
	16	+
	17	+ function getHovzer() {
	18	+ if ( $hovzer === undefined ) {
	19	+ $hovzer = $( '<div id="jquery-foot-hovzer"></div>' ).appendTo( 'body' );
	20	+ }
	21	+ return $hovzer;
	22	+ }
	23	+
	24	+ footHovzer = {
	25	+ update: function () {
	26	+ var $body, winTop;
	27	+
	28	+ $body = $( 'body' );
	29	+ if ( prevHeight === undefined ) {
	30	+ prevHeight = getHovzer().outerHeight( /includeMargin=/true );
	31	+ $body.css( 'paddingBottom', '+=' + prevHeight + 'px' );
	32	+ } else {
	33	+ newHeight = getHovzer().outerHeight( true );
	34	+ $body.css( 'paddingBottom', ( parseFloat( $body.css( 'paddingBottom' ) ) - prevHeight ) + newHeight );
	35	+ // Update scroll so that page stays focusses on same area
	36	+ winTop = $(window).scrollTop();
	37	+ if ( $(document).height() - $(window).height() > winTop ) {
	38	+ $(window).scrollTop( winTop + ( newHeight - prevHeight ) );
	39	+ }
	40	+
	41	+ prevHeight = newHeight;
	42	+ }
	43	+ }
	44	+ };
	45	+
	46	+ $.getFootHovzer = function () {
	47	+ footHovzer.$ = getHovzer();
	48	+ return footHovzer;
	49	+ };
	50	+
	51	+}( jQuery ) );
Property changes on: trunk/phase3/resources/jquery/jquery.footHovzer.js
___________________________________________________________________
Added: svn:eol-style
1	52	+ native
Index: trunk/phase3/resources/jquery/jquery.footHovzer.css
—	—	@@ -0,0 +1,6 @@
	2	+#jquery-foot-hovzer {
	3	+ position: fixed;
	4	+ bottom: 0;
	5	+ width: 100%;
	6	+ z-index: 1000;
	7	+}
Property changes on: trunk/phase3/resources/jquery/jquery.footHovzer.css
___________________________________________________________________
Added: svn:eol-style
1	8	+ native
Index: trunk/phase3/resources/Resources.php
—	—	@@ -127,6 +127,10 @@
128	128	'styles' => 'resources/jquery/jquery.farbtastic.css',
129	129	'dependencies' => 'jquery.colorUtil',
130	130	),
	131	+ 'jquery.footHovzer' => array(
	132	+ 'scripts' => 'resources/jquery/jquery.footHovzer.js',
	133	+ 'styles' => 'resources/jquery/jquery.footHovzer.css',
	134	+ ),
131	135	'jquery.form' => array(
132	136	'scripts' => 'resources/jquery/jquery.form.js',
133	137	),
—	—	@@ -533,6 +537,7 @@
534	538	'mediawiki.debug' => array(
535	539	'scripts' => 'resources/mediawiki/mediawiki.debug.js',
536	540	'styles' => 'resources/mediawiki/mediawiki.debug.css',
	541	+ 'dependencies' => 'jquery.footHovzer',
537	542	),
538	543	'mediawiki.feedback' => array(
539	544	'scripts' => 'resources/mediawiki/mediawiki.feedback.js',
Index: trunk/phase3/resources/mediawiki/mediawiki.debug.css
—	—	@@ -1,8 +1,6 @@
2	2	.mw-debug {
3	3	width: 100%;
4	4	text-align: left;
5		~~- position: fixed;~~
6		~~- bottom: 0;~~
7	5	background-color: #eee;
8	6	border-top: 1px solid #aaa;
9	7	}
Index: trunk/phase3/resources/mediawiki/mediawiki.log.js
—	—	@@ -6,7 +6,7 @@
7	7	* @author Trevor Parscal <tparscal@wikimedia.org>
8	8	*/
9	9
10		~~-(function( $ ) {~~
	10	+( function ( $ ) {
11	11
12	12	/**
13	13	* Logs a message to the console.
—	—	@@ -31,6 +31,7 @@
32	32	}
33	33
34	34	// If there is no console, use our own log box
	35	+ mw.loader.using( 'jquery.footHovzer', function () {
35	36
36	37	var d = new Date(),
37	38	// Create HH:MM:SS.MIL timestamp
—	—	@@ -42,21 +43,14 @@
43	44
44	45	if ( !$log.length ) {
45	46	$log = $( '<div id="mw-log-console"></div>' ).css( {
46		~~- position: 'fixed',~~
47	47	overflow: 'auto',
48		~~- zIndex: 500,~~
49		~~- bottom: '0px',~~
50		~~- left: '0px',~~
51		~~- right: '0px',~~
52	48	height: '150px',
53	49	backgroundColor: 'white',
54	50	borderTop: 'solid 2px #ADADAD'
55	51	} );
56		~~- $( 'body' )~~
57		~~- // Since the position is fixed, make sure we don't hide any actual content.~~
58		~~- // Increase padding to account for #mw-log-console.~~
59		~~- .css( 'paddingBottom', '+=150px' )~~
60		~~- .append( $log );~~
	52	+ var hovzer = $.getFootHovzer();
	53	+ hovzer.$.append( $log );
	54	+ hovzer.update();
61	55	}
62	56	$log.append(
63	57	$( '<div></div>' )
—	—	@@ -69,7 +63,8 @@
70	64	} )
71	65	.text( prefix + args.join( ', ' ) )
72	66	.prepend( '<span style="float: right;">[' + time + ']</span>' )
73		~~- );~~
	67	+ );
	68	+ } );
74	69	};
75	70
76	71	})( jQuery );
Index: trunk/phase3/resources/mediawiki/mediawiki.debug.js
—	—	@@ -8,6 +8,8 @@
9	9	( function ( $, mw, undefined ) {
10	10	"use strict";
11	11
	12	+ var hovzer = $.getFootHovzer();
	13	+
12	14	var debug = mw.Debug = {
13	15	/**
14	16	* Toolbar container element
—	—	@@ -29,11 +31,13 @@
30	32	* @param {Object} data
31	33	*/
32	34	init: function ( data ) {
	35	+
33	36	this.data = data;
34	37	this.buildHtml();
35	38
36	39	// Insert the container into the DOM
37		~~- $( 'body' ).append( this.$container );~~
	40	+ hovzer.$.append( this.$container );
	41	+ hovzer.update();
38	42
39	43	$( '.mw-debug-panelink' ).click( this.switchPane );
40	44	},
—	—	@@ -49,15 +53,22 @@
50	54	var currentPaneId = debug.$container.data( 'currentPane' ),
51	55	requestedPaneId = $(this).prop( 'id' ).substr( 9 ),
52	56	$currentPane = $( '#mw-debug-pane-' + currentPaneId ),
53		~~- $requestedPane = $( '#mw-debug-pane-' + requestedPaneId );~~
	57	+ $requestedPane = $( '#mw-debug-pane-' + requestedPaneId ),
	58	+ hovDone = false;
54	59
	60	+ function updateHov() {
	61	+ if ( !hovDone ) {
	62	+ hovzer.update();
	63	+ hovDone = true;
	64	+ }
	65	+ }
	66	+
55	67	$( this ).addClass( 'current ')
56	68	$( '.mw-debug-panelink' ).not( this ).removeClass( 'current ');
57	69
58		-
59	70	// Hide the current pane
60	71	if ( requestedPaneId === currentPaneId ) {
61		~~- $currentPane.slideUp();~~
	72	+ $currentPane.slideUp( updateHov );
62	73	debug.$container.data( 'currentPane', null );
63	74	return;
64	75	}
—	—	@@ -65,10 +76,11 @@
66	77	debug.$container.data( 'currentPane', requestedPaneId );
67	78
68	79	if ( currentPaneId === undefined \|\| currentPaneId === null ) {
69		~~- $requestedPane.slideDown();~~
	80	+ $requestedPane.slideDown( updateHov );
70	81	} else {
71	82	$currentPane.hide();
72	83	$requestedPane.show();
	84	+ updateHov();
73	85	}
74	86	},
75	87
—	—	@@ -78,7 +90,7 @@
79	91	buildHtml: function () {
80	92	var $container, $bits, panes, id;
81	93
82		~~- $container = $( '<div id="mw-debug-container" class="mw-debug"></div>' );~~
	94	+ $container = $( '<div id="mw-debug-toolbar" class="mw-debug"></div>' );
83	95
84	96	$bits = $( '<div class="mw-debug-bits"></div>' );
85	97

Sign-offs

User	Flag	Date
Nikerabbit	inspected	10:30, 4 January 2012

Follow-up revisions

Revision	Commit summary	Author	Date
r109166	[jquery.footHovzer] Remove buggy scrollstate preserver...	krinkle	17:39, 17 January 2012
r109354	dbg toolbar: prevents screen jumping...	hashar	10:36, 18 January 2012

Comments

#Comment by Nikerabbit (talk | contribs) 10:28, 4 January 2012

I'm interested how you came up with the module name.

#Comment by Nikerabbit (talk | contribs) 15:32, 11 January 2012

Typo: focused

+				// Update scroll so that page stays focusses on same area

#Comment by Hashar (talk | contribs) 15:33, 16 January 2012

This has a really strange behavior which make the text jump in an unattended way anytime I click on a bar. It looks like the main content bottom is aligned to the top of the toolbar. Whenever the toolbar change of size (when a tab is hidden, tab content differs in height), that make the text jump up or down.

That makes the whole window move which is really tiring to the eye. I would expect the main content to stick to the top of the window. Much like when Firebug toolbar is shown / hidden.

Here what I did using wgDebugToolbar on a long page:

first click on a tab : jump the text to the top (likely a bug)
I then scroll down the text back to the original position, click another tab with longer content : the text jump up :b

The following code in jquery/jquery.footHovzer.js causes the screen to jump in an unattended way. By commenting it out, the text stop moving up/down :-)

              // Update scroll so that page stays focusses on same area
               winTop = $(window).scrollTop();
               if ( $(document).height() - $(window).height() > winTop ) {
                   $(window).scrollTop( winTop + ( newHeight - prevHeight ) );
               }

#Comment by Krinkle (talk | contribs) 17:40, 17 January 2012

The use case for it was valid imho, but the side affects were worse than the gain in the utility. Removed in r109166.

#Comment by Hashar (talk | contribs) 14:36, 19 January 2012

> The use case for it was valid imho, but the side affects were worse than the gain in the utility. Removed in r109166.

Maybe it can be made a plugin option?

#Comment by Hashar (talk | contribs) 10:37, 18 January 2012

Last jumping solved by r109354.

#Comment by Hashar (talk | contribs) 10:37, 18 January 2012

Looks fine to me :-) Marking resolved.

Status & tagging log

01:42, 1 March 2012 Krinkle (talk | contribs) changed the tags for r107982 [removed: frontend]
10:37, 18 January 2012 Hashar (talk | contribs) changed the status of r107982 [removed: new added: resolved]
17:40, 17 January 2012 Krinkle (talk | contribs) changed the status of r107982 [removed: fixme added: new]
15:33, 16 January 2012 Hashar (talk | contribs) changed the status of r107982 [removed: new added: fixme]
19:37, 7 January 2012 Johnduhart (talk | contribs) changed the tags for r107982 [added: johnduhart]
16:17, 5 January 2012 Johnduhart (talk | contribs) changed the tags for r107982 [added: frontend]
05:47, 5 January 2012 RobLa-WMF (talk | contribs) changed the tags for r107982 [added: core]