1106901 - Unable to search on Google.com by tapping on a suggested term

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Pi Wei Cheng [:piwei] (inactive)]

Attachment: logcat on Flame 2.2

Description:
When Browser is navigated to Google.com, search doesn't work if it's done by tapping on a suggested term on the website.

STR:
1) Open Browser and navigate to Google.com
2) Type something on the website's search bar, and as suggested search terms populate under the search bar, select one.

Expected: Search can be executed using the suggested term as keyword.

Actual: The action does nothing.

Notes:
1) STR step 1 can be replaced by executing any search on Rocketbar if user has Google as their default search engine.

2) Video of issue:

http://youtu.be/C3dt0g0mkZY

3) Repro rate: 10/10

4) Attaching a logcat

5) Tested on:
Device: Flame (shallow/full flash)
BuildID: 20141202025557
Gaia: 725685831f5336cf007e36d9a812aad689604695
Gecko: 22ad8a162cf3
Gonk: 48835395daa6a49b281db62c50805bd6ca24077e
Version: 37.0a1 (2.2 Master)
Firmware: V188-1
User Agent: Mozilla/5.0 (Mobile; rv:37.0) Gecko/37.0 Firefox/37.0

Comment 1

[Pi Wei Cheng [:piwei] (inactive)]

This issue occurs on Flame 2.1, Flame 2.0, and v188-1 base image only.

Device: Flame 2.1
BuildID: 20141202061559
Gaia: a684b82a19dd1939ca6e75e60a6203327b333c2a
Gecko: a7f6a3cc59bc
Version: 34.0 (2.1)
Firmware: V188-1
User Agent: Mozilla/5.0 (Mobile; rv:34.0) Gecko/34.0 Firefox/34.0

Device: Flame 2.0
BuildID: 20141202035701
Gaia: 8d1e868864c8a8f1e037685f0656d1da70d08c06
Gecko: 29222e215db8
Version: 32.0 (2.0)
Firmware: V188-1
User Agent: Mozilla/5.0 (Mobile; rv:32.0) Gecko/32.0 Firefox/32.0

Comment 2

[Joshua Mitchell (Inactive)]

NI to Browser owner for blocking call 


As additional information - on my personal Android device clicking on a search suggestion: fills in the search bar with that suggestion AND propagates search results - which seems like what the typical user expectation will be.

Comment 3

[Marcia Knous [:marcia]]

Testing on the latest nightly, I see the issue - but if I select a search term and press the search spyglass in the Google search field it returns results.

If I follow the same steps on my Android device using the Firefox browser, the same thing happens - I have to press the spyglass to initiate the search. 

Would not consider this a blocking issue.

Comment 4

[Kevin Grandon :kgrandon]

This seems to be a problem with the website, and not necessarily FirefoxOS, though I haven't looked into the details closely yet. Moving into tech evangelism.

Comment 5

[Karl Dubost💡 :karlcow]

So trying to reproduce the issue, and indeed it's happening.

First of all the issue can be reproduced on Firefox Desktop with a fake Firefox OS UA. 
It also reproduced successfully with a Chrome Mobile UA on Firefox Desktop.

The pop-up list is a series of nested tables (not very nice markup) which is dynamically generated depending on the letters being sent (here typing a):


<table dir="ltr" class="gstl_0 gssb_c" style="width: 319px; position: relative; text-align: left; display: none;" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td class="gssb_f"></td>
            <td style="width: 100%;" class="gssb_e">
                <table class="mssb_c" style="width: 100%;" cellpadding="0" cellspacing="0">
                    <tbody>
                        <tr class="">
                            <td dir="ltr" style="padding: 0px; text-align: left;" class="mssb_a gsfs">
                                <div class="msq_c">
                                    <button style="color: rgb(82, 24, 140); padding: 10px 3px 11px 8px;" class="msq_a">a<b>mazon</b>
                                    </button>
                                    <div style="display: table-cell; padding: 10px 0px 11px;" class="msq_b"></div>
                                </div>
                            </td>
                        </tr>
                        <tr class="mssb_f">
                            <td>
                                <hr class="mssb_f">
                            </td>
                        </tr>
                        <tr class="">
                            <td dir="ltr" style="padding: 0px; text-align: left;" class="mssb_a gsfs">
                                <div class="msq_c">
                                    <button style="padding: 10px 3px 11px 8px;" class="msq_a">a<b>meli</b>
                                    </button>
                                    <div style="display: table-cell; padding: 10px 0px 11px;" class="msq_b"></div>
                                </div>
                            </td>
                        </tr>
                        <tr class="mssb_f">
                            <td>
                                <hr class="mssb_f">
                            </td>
                        </tr>
                        <tr class="">
                            <td dir="ltr" style="padding: 0px; text-align: left;" class="mssb_a gsfs">
                                <div class="msq_c">
                                    <button style="padding: 10px 3px 11px 8px;" class="msq_a">a<b>llociné</b>
                                    </button>
                                    <div style="display: table-cell; padding: 10px 0px 11px;" class="msq_b"></div>
                                </div>
                            </td>
                        </tr>
                        <tr class="mssb_f">
                            <td>
                                <hr class="mssb_f">
                            </td>
                        </tr>
                        <tr class="">
                            <td dir="ltr" style="padding: 0px; text-align: left;" class="mssb_a gsfs">
                                <div class="msq_c">
                                    <button style="padding: 10px 3px 11px 8px;" class="msq_a">a<b>nnuaire</b>
                                    </button>
                                    <div style="display: table-cell; padding: 10px 0px 11px;" class="msq_b"></div>
                                </div>
                            </td>
                        </tr>
                        <tr class="mssb_f">
                            <td>
                                <hr class="mssb_f">
                            </td>
                        </tr>
                        <tr>
                            <td dir="ltr" style="padding: 0px; text-align: left;" class="mssb_a gsfs">
                                <div class="msq_c">
                                    <button style="padding: 10px 3px 11px 8px;" class="msq_a">a<b>uchan</b>
                                    </button>
                                    <div style="display: table-cell; padding: 10px 0px 11px;" class="msq_b"></div>
                                </div>
                            </td>
                        </tr>
                        <tr class="mssb_f">
                            <td>
                                <hr class="mssb_f">
                            </td>
                        </tr>
                        <tr class="">
                            <td dir="ltr" style="padding: 10px 3px 11px 8px; text-align: left;" class="mssb_a gsfs">
                                <div class="gsch_a"><a href="javascript:void(0)">Effacer l'historique</a>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>


We can see that for example the markup for Amazon in the list is:

<div class="msq_c">
    <button style="color: rgb(82, 24, 140); padding: 10px 3px 11px 8px;" class="msq_a">a<b>mazon</b>
    </button>
    <div style="display: table-cell; padding: 10px 0px 11px;" class="msq_b"></div>
</div>

There are 3 events of msq_c: mouseover, mouseout and click event. The last one being

e.onclick = function(b) {
  A.C.blur();
  if (a.Sd()) {
    var d = a.U();
    sq(A, d)
  }
  B.Lf();
  B.jf(a.$a());
  b = b || dq(e).event;
  c.cb(b, a, v)
}

The HTTP request which had been sent by the page is 
→ http -b GET 'http://clients1.google.fr/complete/search?client=mobile-heirloom-serp&hl=fr&sugexp=msedr&gs_rn=34&gs_ri=mobile-heirloom-serp&cp=1&gs_id=3mf&q=a'

and the HTTP response is:

HTTP/1.1 200 OK
Alternate-Protocol: 80:quic,p=0.02
Cache-Control: private, max-age=3600
Content-Disposition: attachment; filename="f.txt"
Content-Type: text/javascript; charset=ISO-8859-1
Date: Mon, 15 Dec 2014 06:23:32 GMT
Expires: Mon, 15 Dec 2014 06:23:32 GMT
Server: gws
Transfer-Encoding: chunked
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block

window.google.ac.h(["a",[["a\u003cb\u003emazon\u003c\/b\u003e",0],["a\u003cb\u003emeli\u003c\/b\u003e",0],["a\u003cb\u003ellociné\u003c\/b\u003e",0],["a\u003cb\u003ennuaire\u003c\/b\u003e",0],["a\u003cb\u003euchan\u003c\/b\u003e",0]],{"q":"Ep32HGwSS4iPUb7RVi5Wb22GIZU","j":"3mf"}])


# Chrome Mobile Fake UA on Firefox Desktop.

On the other hand this is the markup sends when faking Chrome Mobile UA when typing A.

→ http GET 'https://www.google.fr/complete/search?client=mobile-gws-hp&hl=fr&sugexp=msedr&gs_rn=60&gs_ri=mobile-gws-hp&sla=1&gm=328&cp=1&gs_id=4&xhr=t&q=a&tch=1&ech=2&psi=jX6OVPGhE-yt7gbWq4G4Aw.1418624653979.1'


HTTP/1.1 200 OK
Alternate-Protocol: 443:quic,p=0.02
Cache-Control: private, max-age=0
Content-Disposition: attachment; filename="f.txt"
Content-Type: application/json; charset=ISO-8859-1
Date: Mon, 15 Dec 2014 06:26:16 GMT
Expires: -1
Server: gws
Transfer-Encoding: chunked
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block

{"e":"CH-OVLbtDOGy7Qaa_IHgCA","c":0,"u":"https:\/\/www.google.fr\/complete\/search?client=mobile-gws-hp\u0026hl=fr\u0026sugexp=msedr\u0026gs_rn=60\u0026gs_ri=mobile-gws-hp\u0026sla=1\u0026gm=328\u0026cp=1\u0026gs_id=4\u0026xhr=t\u0026q=a\u0026tch=1\u0026ech=2\u0026psi=jX6OVPGhE-yt7gbWq4G4Aw.1418624653979.1","p":true,"d":"[\"a\",[[\"a\\u003cb\\u003emazon\\u003c\\\/b\\u003e\",0],[\"a\\u003cb\\u003emeli\\u003c\\\/b\\u003e\",0],[\"a\\u003cb\\u003ellociné\\u003c\\\/b\\u003e\",0],[\"a\\u003cb\\u003ennuaire\\u003c\\\/b\\u003e\",0],[\"a\\u003cb\\u003euchan\\u003c\\\/b\\u003e\",0]],{\"q\":\"Ep32HGwSS4iPUb7RVi5Wb22GIZU\",\"j\":\"4\"}]"}/*""*/


The markup is slightly different two:

<div id="sbse0" role="option" class="sbmsq_b">
    <div style="color: rgb(82, 24, 140);" class="sbmsq_c sbsb_k">a<b>mazon</b></div><div style="" class="sbmsq_a"></div></div>

The mouseover, mouseout event are defined on div#sbse0
and the click event is defined div.sbmsq_c

with 

l.onclick = function(c) {
  a.Ha.ve();
  b.ha && a.Ha.Jd(b.$);
  a.ka.Vg();
  a.ka.Em(k);
  c = c || _.GA(l).event;
  d.Ac(c, b, a.na)
}

The markup is also cleaner. No nested tables.

This code path which is sent for the click event is working on Gecko.

Comment 6

[Karl Dubost💡 :karlcow]

this seems to be fixed.