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

It's by design.

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

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

Hi Cynthia, Is this woodduck 2.0 only or also happen in 2.1? Thanks!

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

Hi Cynthia, Could you please confirm it will not happen in 2.1? Thank you!

It does not happen in Flame 2.1. Thanks [Attachment] - Flame21_Contacts - Flame21_Call_log

Hi Evelyn, Is this a polish issue? Thanks!

It indeed is a polish, but should be a good first bug for our newbie. Sean, would you mind to take this?

Hi Evelyn, I can take this.

"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.

Hi Norry, qawanted for Flame 2.2/3,0. Thanks!

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