1130981 - Quora.com doesn't displayed the done button

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Ioana Chiorean]

Attachment: Missing Done button - comparison Firefox with Chrome

Joining Quora.com will make you select 5 topics at the beginning and after you can go to the questions feed.
The upper right button "Done" is not displayed but if you tap the correspondent area you will be taken to the question feed. So the button is implemented but not displayed.

Comment 1

[Karl Dubost💡 :karlcow]

Changing the UA string to Chrome doesn't solve the issue.

This markup is created:

``` html
<div class="header_main">
    <div class="page_title" id="page_title">Welcome to Quora</div>
    <a class="navigation_button is_done" id="navigation_button"></a>
</div>
```

The `a` element has 0x0 size in the box model inspector. It starts with:

```html
<a class="navigation_button is_done is_disabled" id="navigation_button"></a>
```

then once 5 items have been clicked the `is_disabled` is removed.

```html
<a class="navigation_button is_done" id="navigation_button"></a>
```

On the `a` element, an event is attached.

``` js
function(a) {
  d.handleMessage("navigationButtonPressed"), a.preventDefault()
}
```

When we put the mouse over the area, the zone is indeed clickable but there is nothing visible there. The code controlling the button.

``` js
q.setNavigationButton = function (a) {
  var b = q.setNavigationButton,
  c = document.getElementById('header_action_buttons'),
  f = document.getElementById('logo');
  if (!a.useAsCloseButton) {
    f && e.addClass(f, 'hidden');
    var g = document.getElementById('navigation_button');
    e.removeClass(g, 'hidden'),
    a.style == 'done' && e.addClass(g, 'is_done'),
    a.disabled === !0 ? e.addClass(g, 'is_disabled')  : e.removeClass(g, 'is_disabled'),
    g.innerText = a.text;
    if (a.badgeValue !== undefined) {
      e.addClass(g, 'has_badge');
      if (a.badgeValue !== '') {
        var h = document.createElement('span');
        h.className = 'badge_count',
        h.innerText = a.badgeValue,
        g.appendChild(h)
      }
    }
    b.clickHandlerSet || (b.clickHandlerSet = !0, e.safeClickHandler(g, function (a) {
      d.handleMessage('navigationButtonPressed'),
      a.preventDefault()
    }))
  }
```

FOUND!

    g.innerText = a.text;

`innerText` is not implemented in Firefox. See Bug 264412


PS1: Security:
Another issue with Quora.
When you enter http://www.quora.com/ it stays on it. It means that if you head up to http://www.quora.com/signup/email It proposes you to register login and password with HTTP, not HTTPS.


PS2: Accessibility: 
It's not good to do this:
```css
.android_app *, .mweb * {
    outline: 0px none;
}
```
See http://www.outlinenone.com/

PS3: CSS - Webkit flexbox
``` css
.truncate_3{
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3}
```

Could be fixed with:

``` css
.truncate_3{
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3}
	display:flex;
        flex-direction: column;	
```

also in `.table_row .title{` and `.TabletAccessorySection .ts_cells .Cell .tc_inner .tc_text` and `.TruncatedContentHeader`, etc.

Comment 2

[Mike Taylor [:miketaylr]]

This is working now in Nightly (although now you have to select 10 topics).