XP1's Blog

--- Google+'s Missing Code for Opera (July 2011) EDIT: On August 16, 2011, Google is like: "Opps, nevermind." :| EDIT: Today, this morning, on August 12, 2011, Google finally removed the Google+ server-side browser sniffing for Opera! Because the Google+ server-side browser sniffing is now gone, you can now uninstall the extension and reset your user agent back to Opera. Right click > Edit Site Preferences... > Network > Browser identification: Identify as Opera > OK. Introduction Where are the missing Google+ web toolbar features, like the notification button, share button, and the avatar? Why don't they show up in Opera? Why do they show up in other browsers? The difference is in the code. Compare the code Disable JavaScript, set "Mask as Firefox", and then refresh the page. Keep JavaScript disabled, set "Identify as Opera", and then refresh the page. Visually compare the differences: "Mask as Firefox" shows the notification button, share button, and your avatar, while "Identify as Opera" does not. For each time, go to the source and then save the original copies. Once you have the source code for Opera and Firefox user agents, format or beautify the code for easier comparison. If you compare the code, it is different. Turns out that Google is using server-side browser sniffing, a great evil, to serve different webpage source code, depending on the user agent. Let's look at the different parts of the code. CSS is in the beginning of the webpage source code, followed by the web toolbar HTML, and then finally ending with the JavaScript at the bottom of the source code. Part 1: Different and missing CSS Changes A few times, Google serves a different background sprite in the CSS. Served to Opera user agent:

background:url(//ssl.gstatic.com/gb/images/b_8d5afc09.png);
_background:url(//ssl.gstatic.com/gb/images/b8_3615d64d.png);

Served to Firefox user agent:

background:url(//ssl.gstatic.com/gb/images/h_bedf916a.png);
_background:url(//ssl.gstatic.com/gb/images/h8_3dd87cd8.png);

The first sprite image, served to Opera user agent, does not contain the notification images, but the second, served to Firefox user agent, does. For "#gbmpi,#gbmpid", the weight and height are different: Served to Opera user agent:

height:48px;
width:48px;

Served to Firefox user agent:

height:96px;
width:96px;

Change

#gbmpp {
display:none;
}

to

#gbmpp,.gbgsta,.gbto .gbgst,#gbns {
display:none;
}

Insertions Add this CSS:

#gbd1 .gbmc,#gbd3 .gbmc {
padding:0;
}

#gbgs1 {
text-align:center;
}

#gbi1 {
color:#fff;
display:block;
font-size:11px;
font-weight:700;
position:relative;
width:21px;
}

#gbi1a {
background:url(//ssl.gstatic.com/gb/images/h_bedf916a.png);
_background:url(//ssl.gstatic.com/gb/images/h8_3dd87cd8.png);
background-position:0 -274px;
position:absolute;
right:5px;
top:3px;
height:20px;
width:21px;
}

.gbto #gbi1a {
_background-position:-52px -274px;
top:5px;
}

#gbi1a.gbid {
background-position:-26px -274px;
}

.gbto #gbi1a.gbid {
_background-position:-78px -274px;
}

#gbi1.gbids {
color:#999;
}

#gbg3 .gbts {
line-height:20px;
}

.gbgsc {
padding-bottom:7px;
position:relative;
top:3px;
}

.gbgsca,.gbgscb {
background:url(//ssl.gstatic.com/gb/images/h_bedf916a.png) no-repeat;
_background:url(//ssl.gstatic.com/gb/images/h8_3dd87cd8.png) no-repeat;
height:20px;
position:absolute;
top:0;
width:3px;
}

.gbgsca {
left:0;
background-position:0 -300px;
}

.gbgscb {
right:0;
background-position:-153px -300px;
}

.gbgsb {
background:url(//ssl.gstatic.com/gb/images/h_bedf916a.png);
_background:url(//ssl.gstatic.com/gb/images/h8_3dd87cd8.png);
background-position:-3px -300px;
height:20px;
right:3px;
left:3px;
position:absolute;
top:0;
}

.gbgss {
visibility:hidden;
padding:0 6px;
}

.gbgst,.gbgsta {
color:#666;
padding-right:5px;
padding-left:3px;
}

.gbto .gbgsb,.gbto .gbgsca,.gbto .gbgscb {
background:none;
}

.gbgsc,.gbgst,.gbto .gbgsta {
display:inline;
}

.gbmwc,#gbwc {
right:0;
margin-top:-2px;
position:absolute;
top:-999px;
width:440px;
z-index:999;
}

.gbmsg {
display:none;
position:absolute;
top:0;
}

.gbmsgo .gbmsg {
display:block;
background:#fff;
width:100%;
text-align:center;
z-index:3;
top:30%;
}

#gbd1,#gbd1 .gbmc {
width:440px;
height:190px;
}

#gbd3,#gbd3 .gbmc {
width:440px;
height:8em;
}

If you don't apply the CSS, the displayed webpage, from the HTML below, will become garbled, and the text will appear collided. Part 2: Different and missing HTML There is one major line of HTML code that needs to be changed. However, the majority of HTML code is entirely missing and needs to be inserted into the DOM. Changes Change

<li class='gbt'><a class='gbgt' id='gbg4' href="//google.com/profiles" onclick="gbar.tg(event,this)" aria-haspopup='true' aria-owns='gbd4'><span class='gbtb2'></span><span id='gbgs4' class="gbts gbtsa"><span id='gbi4'><span id='gbi4m1'>Your name</span><span class='gbma'></span></span></span></a>

to

<li class='gbt'><a class='gbgt' id='gbg6' href="//google.com/profiles" onclick="gbar.tg(event,document.getElementById('gbg4'))" tabindex='-1' aria-haspopup='true' aria-owns='gbd4'><span class='gbtb2'></span><span class='gbts'><span id='gbi4t'>Your name</span></span></a></li>

Insertions Within "<ol class='gbtc'>", below "<li class='gbt'>", insert (as second node):

<li class="gbt gbtb"><span class='gbts'></span></li>
<li class='gbt'><a class="gbgt gbgtd" id='gbg1' href="/u/0/notifications/all" title="Notifications" onclick="gbar.tg(event,this)" aria-haspopup='true' aria-owns='gbd1'><span class='gbtb2'></span><span id='gbgs1' class='gbts'><span id='gbi1a' class='gbid'></span><span id='gbi1' class='gbids'>&nbsp;</span></span></a>
<div id='gbd1' class="gbm gbmsgo" aria-owner='gbg1'>
    <div class='gbmc'>
    </div>
    <div class='gbmsg'>
    </div>
</div>
</li>
<li class="gbt gbtb"><span class='gbts'></span></li>
<li class='gbt'><a class='gbgt' id='gbg3' href="/u/0/stream/all" onclick="gbar.tg(event,this)" aria-haspopup='true' aria-owns='gbd3'><span class='gbtb2'></span><span id='gbgs3' class='gbts'>
<div class='gbgsc'>
    <span class='gbgsb'><span id='gbi3' class='gbgst'>Share&hellip;</span><span class='gbgsta'>Share</span></span><span class='gbgss'>Share&hellip;</span><span class='gbgsca'></span><span class='gbgscb'></span>
</div>
</span></a>
<div class="gbm gbmsgo" id='gbd3' aria-owner='gbg3'>
    <div class='gbmc'>
    </div>
    <div class='gbmsg'>
    </div>
</div>
</li>
<li class="gbt gbtb"><span class='gbts'></span></li>
<li class='gbt'><a class="gbgt gbg4a" id='gbg4' href="//google.com/profiles" onclick="gbar.tg(event,this)" aria-haspopup='true' aria-owns='gbd4'><span class='gbtb2'></span><span id='gbgs4' class='gbts'><span id='gbi4'><span class='gbi4p'></span><span id='gbi4id' style="display:none"></span><img id='gbi4i' width='24' height='24' onerror="window.gbar&&gbar.pge?gbar.pge():this.loadError=1;" src="//lh5.googleusercontent.com/-0000000000/AAAAAAAAAAI/AAAAAAAAAAA/0000000/000-0/photo.jpg" alt=""></span></span></a>

Within "<div id='gbmpdv'>", above "<div class='gbpc'>", insert (as first node):

<span id='gbmpid' style="display:none"></span><img id='gbmpi' width='96' height='96' onerror="window.gbar&&gbar.ppe?gbar.ppe():this.loadError=1;" src="//lh5.googleusercontent.com/-0000000000/AAAAAAAAAAI/AAAAAAAAAAA/0000000/000-0/photo.jpg" alt="">

Of course, "Your name" is supposed to be your name, and "//lh5.googleusercontent.com/-0000000000/AAAAAAAAAAI/AAAAAAAAAAA/0000000/000-0/photo.jpg" is supposed to be your profile avatar. Once you insert this missing HTML into the DOM, you should see the notification button, share button, and your avatar in the web toolbar. However, they won't work without the JavaScript. Part 3: Different and missing JavaScript Most of the differences in the JavaScript at the bottom of the source code is just swapped, minified variable names. However, one big difference is this reference to an external JavaScript file. Served to Opera user agent:

w.push(["m", {
            url: "//ssl.gstatic.com/gb/js/sem_d8da90aa15552b1b6c43db160e9dbc9c.js"
        }]);

Served to Firefox user agent:

w.push(["m", {
            url: "//ssl.gstatic.com/gb/js/smm_07310c38d3c237229f8fe2558d96c338.js"
        }]);

The first JavaScript file, served to Opera user agent, contains 16413 characters, and the second, served to Firefox user agent, contains 50712 characters. Next, we have the missing feedback code:

var Ra = function(a)
    {
        y("uf", a)
    };
w.push(["uf", {
    url: "//ssl.gstatic.com/gb/js/fm_e6150f2ae3471582f5e836c0e2ecbb3e.js"
}]);
var Z = {};
Z.a = function(a)
{
    l.feedback.ds = a
};
Z.i = function()
{
    Ra(function()
    {
        l.feedback.startFeedback()
    });
    C("uf")
};
n("feedback", Z);
n("startFeedback", Z.i, Z);
n("dsc", Z.a, Z);
var Sa = {
    productId: "sandbar:119",
    locale: "en"
};
u.feedback = Sa;
if (_tvv(""))
{
    var $ = {},
        Ta = function(a, b)
        {
            $[a] || ($[a] = []);
            $[a].push(b)
        },
        Ua = function(a)
        {
            if (a.type) for (var b = $[a.type], c = 0; b && c < b.length; ++c) try
            {
                b[c](a)
            }
            catch (e)
            {
                o(e)
            }
        };
    n("bc", {
        subscribe: Ta,
        dispatch: Ua
    })
}

Finally, we have the missing notification and share code:

if (_tvv("1") || _tvv("1"))
{
    var Ya = {
        uo: "",
        s: "/",
        h: "/",
        po: "",
        pa: "/u/0/_/notifications/frame",
        q: "",
        f: "pid=119",
        ipd: _tvn("5", 5),
        psec: _tvn("", -1),
        it: _tvn("60", -1),
        l: "en",
        sto: _tvn("10", 10),
        mnr: _tvn("30", 0)
    };
    u.sw = Ya
}
if (_tvv("1"))
{
    var Za = [],
        $a = function(a)
        {
            Za.push(a)
        };
    n("nuc", Za);
    n("anuc", $a);
    var ab = {
        ht: _tvn("100", 0),
        n: "Notifications"
    };
    u.no = ab
}
if (_tvv("1"))
{
    var bb = [],
        cb = function(a)
        {
            bb.push(a)
        };
    n("smc", bb);
    n("asmc", cb);
    var db = {
        ht: _tvn("100", 0),
        n: "Share"
    };
    u.sb = db
}

Conclusion Like I said earlier, a lot of the minified JavaScript variable names are swapped. For example, the variable "a" could be "v" or some other character, meaning something completely different in the served Firefox code. This means that it would be a lot harder to just retrofit the JavaScript changes into the served Opera code because the variable names are not the same, and you would have to account for (hundreds of?) variable name differences. In addition to the large chunks of code above, there are a few small chunks of JavaScript code, which I have no idea what they do, scattered around. It would be a lot easier if you copy the differences, verbatim, and then replace the served Opera code by chunks entirely (no deep retrofit or changing of the JavaScript, just complete replacement).