1200576 - Highlight the matched number in the suggestion bar using a document fragment

Status: RESOLVED FIXED

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

Description

[Gabriele Svelto [:gsvelto]]

We currently use |innerHTML| in the suggestion bar to highlight the part of the number that has been matched by wrapping it with a span with a light background color. It would be better to replace this pattern by creating an appropriate document fragment and using that instead of setting |innerHTML| directly. This would allow us to get rid of the HTML Sanitizer too as it's not used anywhere else in the app.

The affected code is here: https://github.com/mozilla-b2g/gaia/blob/d9b9b68ac28e06bd949f2e6a444df8a68396ea11/apps/communications/dialer/js/suggestion_bar.js#L262

Comment 1

[abraarsyed]

Hey Gabriele,
I am new to debugging. I would like to take up this as my first bug and fix it. A little guidance would be greatly appreciated.
Thanks,
Abraar

Comment 2

[Gabriele Svelto [:gsvelto]]

(In reply to abraarsyed from comment #1)
> I am new to debugging. I would like to take up this as my first bug and fix
> it. A little guidance would be greatly appreciated.

As the mentor of this bug I'm here to help :) Before assigning this bug to you I have to ask you if you already worked on Firefox OS and if you have a working build environment with the gaia sources and all. If not it's better if we start with getting you up to speed and focus on this bug only when everything else is ready.

Comment 3

[abraarsyed]

Yes I have worked with Firefox OS before . I made simple apps for Firefox OS marketplace . Also I have already cloned the Gaia project and build it and got it running in my web ide .

Comment 4

[Gabriele Svelto [:gsvelto]]

Excellent, the bug is yours then. First of all you'll need to start Gaia in the way you prefer (nightly, simulator, emulator, etc...). Add a dummy contact with a number to your list of contacts and then go into the dialer. Once there start typing the number of the contact, after having typed three digits you'll notice that the contact will appear in a suggestion bar below the number. The number in this bar will have the three digits you typed highlighted. This is done by creating a snippet of HTML code that looks like this (number 123456789 with 456 highlighted):

123<mark class="ci__mark">456</mark>789

This happens here in the _markMatched() function:

https://github.com/mozilla-b2g/gaia/blob/d9b9b68ac28e06bd949f2e6a444df8a68396ea11/apps/communications/dialer/js/suggestion_bar.js#L326

As you see we create an HTML string and then store it in the innerHTML field. This needs to be replaced by a document fragment. You'll have to create the fragment, add the text and mark bits to it and then pass it around so that it can be used in _setItem() to set the contents of the suggestion bar.

I suggest first becoming familiar with this code by trying to make the suggestion bar appear and inspecting it with the DOM inspector to understand what it contains and how this works.

Comment 5

[abraarsyed]

Hey, I am having a problem, I had cloned the master repo of gaia and build it and ran in web IDE (simulator- firefox OS 2.2). As per instructions, I created a new contact but when I go to dialer and type any digit, nothing appears at all. The display of dialer screen is blank and shows only a cursor on clicking the display screen. Am I doing something wrong or was there a mistake in my installation and built? I rebuilt gaia again and also tried with different simulators-2.1,3.0 too but nothing works as expected.

Comment 6

[Gabriele Svelto [:gsvelto]]

(In reply to abraarsyed from comment #5)
> Hey, I am having a problem, I had cloned the master repo of gaia and build
> it and ran in web IDE (simulator- firefox OS 2.2). As per instructions, I
> created a new contact but when I go to dialer and type any digit, nothing
> appears at all. The display of dialer screen is blank and shows only a
> cursor on clicking the display screen. Am I doing something wrong or was
> there a mistake in my installation and built? I rebuilt gaia again and also
> tried with different simulators-2.1,3.0 too but nothing works as expected.

That is strange, I must admit I never used the simulator myself but this should be working. Can you tell me exactly which version of gaia and which version of the simulator are you using? Also do you get any console output (errors, warnings) when typing keys in the dialer?

Comment 7

[abraarsyed]

Hey Gabriele,
I tried to set up the development environment but I think I am going wrong somewhere so it would be great if you can walk me through setting up the environment :)

Comment 8

[abraarsyed]

Hey Gabriele,
I haven't got any response. I am guessing that you are busy but I needed little help. I am new to bug fixing. Sorry for bugging you. Waiting for your reply. Thank you :)

Comment 9

[Gabriele Svelto [:gsvelto]]

Sorry, I've been terribly busy and didn't have time to respond. I'll send you a step-by-step guide via e-mail as soon as possible.

Comment 10

[abraarsyed]

Sorry for the trouble but thanks a lot :) will wait for the guide :)

Comment 11

[abraarsyed]

Hey Gabriele, I received your mail with detailed instructions. I followed it and executed the instructions exactly as specified but I still get that dialer problem. My contacts are being saved but when I dial something on dialer,nothing comes up. I tried the entire process thrice but the same issue. Is it because the simulator version 3.0 is unstable ? Also sometimes firefox nightly disables the simulator add on saying its not stable, those times I reinstall the simulator and direct it to the profile folder of gaia directory again but no success. What could be done ? :(

Comment 12

[Gabriele Svelto [:gsvelto]]

(In reply to abraarsyed from comment #11)
> Is it because the simulator version 3.0 is unstable?

Not really, it works well for me.

> Also sometimes
> firefox nightly disables the simulator add on saying its not stable, those
> times I reinstall the simulator and direct it to the profile folder of gaia
> directory again but no success. What could be done ? :(

Can you please tell me exactly which versions of gaia (git revision) and firefox nightly are you using? I have no problem with that setup on my machine so I wonder why it's not working on yours. Also if you need quick help look for me on the #fxos IRC channel, I'll be glad to help.

Comment 13

[abraarsyed]

Hey I am using firefox nightly (version: 43.0a1 (2015-09-08) ) and I went to my cloned gaia folder and executed the "git describe --tags" and I got this : "B2G_2_1_20140902_MERGEDAY-11764-ge6a02ff" (Not sure if this is the git revision that you were asking. Please help in regard to this if I am wrong). Also I have asked for help in the IRC channel that you suggested to me . Would like to know your nickname on IRC channel so that I can ping you personally . Thanks A lot :)

Comment 15

[Johan Lorenzo [:jlorenzo]]

Carrying over flags from bug 1196694.

Comment 16

[Gabriele Svelto [:gsvelto]]

Sorry Abraar but this suddenly became urgent, I'm stealing this bug for you but I'll help you find another which I'll mentor. Let's follow up on your setup via e-mail. BTW my nick on IRC is :gsvelto and you can find me on the #fxos channel.

Comment 17

[GitHub Autolander Bot]

Attachment: [gaia] gabrielesvelto:bug-1200576-highlight-match-dom-fragment > mozilla-b2g:master

Comment 18

[Gabriele Svelto [:gsvelto]]

Comment on attachment 8669940 [details] [review]
[gaia] gabrielesvelto:bug-1200576-highlight-match-dom-fragment > mozilla-b2g:master

Here's a quick patch that uses a document fragment to build the highlighted, matched number. Alexandre can you give this a spin and see if it fixes the problem for you?

Comment 19

[:gerard-majax]

Comment on attachment 8669940 [details] [review]
[gaia] gabrielesvelto:bug-1200576-highlight-match-dom-fragment > mozilla-b2g:master

Fixes the issue for me!

Comment 20

[Gabriele Svelto [:gsvelto]]

Thanks for testing this Alexandre! Note that this should claw back a few ms in the startup path as we won't have to use the HTML sanitizer anymore and we've got one less file that will have to go through the lazy-loader.

Comment 21

[abraarsyed]

(In reply to Gabriele Svelto [:gsvelto] from comment #16)
> Sorry Abraar but this suddenly became urgent, I'm stealing this bug for you
> but I'll help you find another which I'll mentor. Let's follow up on your
> setup via e-mail. BTW my nick on IRC is :gsvelto and you can find me on the
> #fxos channel.

Hey Gabriele, that's perfectly fine. Yes, I will move to other bug and ping you regarding the setup. Thanks for the support :)

Comment 22

[Gabriele Svelto [:gsvelto]]

Thanks for the review, merged to gaia/master c7df972bf6ac24769cc2f74a80c48dfaedcdb040

https://github.com/mozilla-b2g/gaia/commit/c7df972bf6ac24769cc2f74a80c48dfaedcdb040