Closed Bug 740897 Opened 12 years ago Closed 9 years ago

Add tabzilla to wikimo

Categories

(Websites :: wiki.mozilla.org, enhancement)

Product:
Websites
Component:
wiki.mozilla.org
Type:
enhancement
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED WONTFIX

People

(Reporter: lmandel, Unassigned)

References

(
URL
)

Details

(Whiteboard: [featurerequest])

Attachments

(2 files)

Screenshot of wikimo with a closed tabzilla
141.77 KB, image/png
Details
Screenshot of wikimo with an open tabzilla
141.01 KB, image/png
Details 
Tabzilla adds the one Mozilla tab to the top of a page. I would like to see this added to the top of wikimo pages.

Details on how to add this tab can be found at https://github.com/mozilla/tabzilla/blob/master/media/bookmarklet/tabzilla.url

From testing with the bookmarklet the only issue that I see is that there is a background image attached to the <body> element. However, doesn't really look bad to me.

I'm happy to look into this change if someone can point me to where I can get the wikimo theme to setup in my dev environment.
Why is tabzilla pulling from a http:// site? Until it loads over SSL, this is a no-go.
I took a look through the source and don't see that tabzilla requires the use of http. Note that the bookmarklet is only for testing. The instructions on installation are located at https://github.com/mozilla/tabzilla (I provided the link to the bookmarklet by mistake in comment 0). If there is a problem with the use of tabzilla how about serving a copy from wiki.mozilla.org. (We took this approach with mediawiki-bugzilla and jquery.)
Ah, those directions are better, but at the same time, tabzilla is pulling from ajax.googleapis.com, which makes me very sad.
(In reply to Reed Loden [:reed] (very busy) from comment #5)
> Ah, those directions are better, but at the same time, tabzilla is pulling
> from ajax.googleapis.com, which makes me very sad.

Only to pull in jquery 1.7.1. I'm sure we can change that line to point to a local copy of jquery.
OS: Mac OS X → All
Hardware: x86 → All
Whiteboard: [featurerequest]
Severity: normal → enhancement
I've experimented with adding this on dev. For the time being you can see it here:
https://wiki-dev.allizom.org/Main_Page

It displays, but is inaccessible behind the absolutely positioned menu bar. And, when the tab is opened, not all elements move down.

This is to be expected, because as the documentation says: "Absolutely positioned elements must not be positioned relative to the <body> element."

(Actually that bit of documentation doesn't make sense because absolutely positioned elements are only relative to the browser's view port. Nevertheless, we understand Tabzilla is not intended right now to work with absolutely positioned elements.)

A work-around could be to adjust the values of the absolutely positioned elements whenever Tabzilla is opened or closed. In order to accomplish this, I think we'd need callbacks added to Tabzilla.open() and Tabzilla.close() methods. It's possible someone with greater JS-fu than me knows how to capture those events and act on them without callbacks.
Oh, because dev database can be updated from production without warning, here's how I added Tabzilla.

Altered MediaWiki:Common.js as such:

$(document).ready(function(){    
    // add tabzilla
    $('body').prepend('<a href="https://www.mozilla.org/" id="tabzilla">mozilla</a>')
    $.getScript('//mozorg.cdn.mozilla.net/tabzilla/tabzilla.js');
});

Altered MediaWiki:Common.css as such:

@import url("//mozorg.cdn.mozilla.net/media/css/tabzilla-min.css");
Okay, well, it's kinda clunky, but adding the following code shifts the absolutely positioned elements when tabzilla is clicked:

    var $tabzilla = $('#tabzilla');
    $tabzilla.on('click', function () {
      var $tab = $('#tabzilla-panel');
      if ($tab.hasClass('open')) {
        $('#mw-panel').css("top", "200px");
        $('div#mw-head').css("top", "3em");
      } else {
        $('#mw-panel').css("top", "400px");
        $('div#mw-head').css("top", "16.1em");
      }
    });
If you add a an extra <div> around everything except the tabzilla components you can position the buttons relative to that container instead of the body and they will shift down the page with the rest of the content when tabzilla opens.

If you want to stick with your javascript solution I would suggest creating animating (with either CSS or javascript) the properties you're adjusting so that they are moved at the same speed as tabzilla opens :)
(In reply to Stephanie Hobson [:shobson] from comment #10)
> If you add a an extra <div> around everything except the tabzilla components
> you can position the buttons relative to that container instead of the body
> and they will shift down the page with the rest of the content when tabzilla
> opens.

Unfortunately that involves modifying the source files for the Vector skin, which we've decided not to do because it creates significant maintenance overhead. 

I experimented with a solution that inserted a wrapper div using javascript, but doing so resulted in all the javascript getting executed twice, thus breaking things. If anyone can make this work, that'd be great!

> If you want to stick with your javascript solution I would suggest creating
> animating (with either CSS or javascript) the properties you're adjusting so
> that they are moved at the same speed as tabzilla opens :)

Do you have an example of this? I'm not sure how to identify how tabzilla is animated nor apply that to the two mediawiki elements that need to be moved when tabzilla opens and closes.
Would it be possible to move the Login / Request Account options to the left of the tab therefore decreasing the amount of blank space at the top?

Also the Tab does not display from the login form page.

dkl
I think we decided we weren't going to do this.
Status: NEW → RESOLVED
Closed: 9 years ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: