1069749 - [woodduck] [UX] The text "Call log" should be center-aligned

Status: RESOLVED WONTFIX

(Firefox OS Graveyard :: Gaia::Dialer, defect)

Description

[Cynthia Tang [:cynthiatang]]

Attachment: screenshot

Environment:
Gaia      4d5a460d4ff71aecc035bd7c4a58619506ad822c
Gecko     465ab02fc61c94d85e9a2b223bfa236afcbdc1aa
BuildID   20140919101050
Version   32.0
Device Name 	 soul35
FW-Release 	 4.4.2
FW-Incremental 	 1411092010
FW-Date 	 Fri Sep 19 10:00:37 CST 2014

Repro Steps:
 1. Launch Phone app
 2. Tap on "Contacts"
 3. Tap on "Call log"

Actual:
The text "Call log" is not center-aligned. (see the screenshot)

Expected:
The text "Call log" should be center-aligned, like "Contacts"

Note: 
It also happens on Flame v2.0

Comment 1

[Evelyn Hung]

It's by design.

Comment 2

[Cynthia Tang [:cynthiatang]]

Attachment: Header Changes for 2.0 (UX Scope spec)

Please see "Header Changes for 2.0 (UX Scope spec)"

Comment 3

[Cynthia Tang [:cynthiatang]]

Please see "Header Changes for 2.0 (UX Scope spec)"

Comment 4

[Josh Cheng [:josh]]

Hi Cynthia,

Is this woodduck 2.0 only or also happen in 2.1?

Thanks!

Comment 5

[Cynthia Tang [:cynthiatang]]

It can be reproduced on Flame v2.0 and woodduck(v2.0)?

Comment 6

[Josh Cheng [:josh]]

Hi Cynthia,

Could you please confirm it will not happen in 2.1?

Thank you!

Comment 7

[Cynthia Tang [:cynthiatang]]

It does not happen in Flame 2.1. Thanks

[Attachment]
 - Flame21_Contacts
 - Flame21_Call_log

Comment 8

[Cynthia Tang [:cynthiatang]]

Attachment: Flame21_Contacts

Comment 9

[Cynthia Tang [:cynthiatang]]

Attachment: Flame21_Call_log

Comment 10

[Josh Cheng [:josh]]

Hi Evelyn,
Is this a polish issue? Thanks!

Comment 11

[Evelyn Hung]

It indeed is a polish, but should be a good first bug for our newbie.

Sean, would you mind to take this?

Comment 12

[Sean Lee [:seanlee][:weilonge]]

Hi Evelyn,
I can take this.

Comment 13

[Sean Lee [:seanlee][:weilonge]]

Attachment: call_log.diff

"shared/js/font_size_utils.js" is in charge of the <h1> alignment.

The clientWidth of "Call log" <h1> is 320px without including the toolbar width (50px) at its right.
The function getStyleProperties@font_size_utils.js gets an incorrect value 320px for <h1>.
Then the following code calculates the wrong margin right/left (both 0px) which is based on the incorrect width, 320px.
The correct width of <h1> should be 270px (320px - 50px).

1. Why the width of toolbar is not included?
Before calculating the margin, the width of <h1> and toolbar are 320px and 280px.
Waiting for 1000ms before reformatting headers (_reformatHeaderText), then the issue is resolved.
    // like this:
    _reformatHeaderText: function(header) {
      var that = this;
      setTimeout(function () { ... }, 1000);
    }

This might be caused by reflow sequence or some other factors.

2. What's the solution?
_reformatHeaderText will be executed when the <h1>'s childlist is changed.
If <h1>'s content is changed after rendering the correct toolbar, the <h1> margin will be calculated again.

  init: function cl_init() {
    // XXX : Force call-log-header to reformat its margin for text-align center.
    // Please refer shared/js/font_size_utils.js for the detail implementation.
    var headerDom = document.querySelector('#call-log-header'),
        headerText = headerDom.textContent;
    headerDom.textContent = headerText;
    ...
  }

If there is anyone thinks this patch is acceptable, I will create a PR for this then.
Thank you.

Comment 14

[Sean Lee [:seanlee][:weilonge]]

Attachment: Override the previous patch

Comment 15

[Josh Cheng [:josh]]

Hi Norry,

qawanted for Flame 2.2/3,0. Thanks!

Comment 16

[Shally Li（leave from Mozilla）]

This bug does not exists on latest Flame v2.2&3.0.

Results: The Call log is center-aligned.
Please see attahcments: verify_v2.2&3.0.png.


Device: Flame 2.2 build(Pass)
Build ID               20150427002504
Gaia Revision          265ca0bc9408c21fc4b25a259fcee7fb642cd06b
Gaia Date              2015-04-24 19:13:28
Gecko Revision         https://hg.mozilla.org/releases/mozilla-b2g37_v2_2/rev/1908685d798d
Gecko Version          37.0
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150427.040113
Firmware Date          Mon Apr 27 04:01:24 EDT 2015
Bootloader             L1TC000118D0

Device: Flame 3.0 build(Pass)
Build ID               20150427160201
Gaia Revision          0636405f0844bf32451a375b2d61a2b16fe33348
Gaia Date              2015-04-27 16:42:28
Gecko Revision         https://hg.mozilla.org/mozilla-central/rev/caf25344f73e
Gecko Version          40.0a1
Device Name            flame
Firmware(Release)      4.4.2
Firmware(Incremental)  eng.cltbld.20150427.192938
Firmware Date          Mon Apr 27 19:29:49 EDT 2015
Bootloader             L1TC000118D0

Comment 17

[Shally Li（leave from Mozilla）]

Attachment: verify_v2.2&3.0.png