Participant Names in Participant Panel should look like links

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Open WIAB client and create a new wave
3. Notice that the participant panel has names as text with no indication that 
its a link
4. However, if you click on the text, it will bring up a profile card
5. The participant name should be in blue and underlined to indicate that its a 
link

What is the expected output? 
- The participant name should be in blue and underlined to indicate that its a 
link.

What do you see instead?
- The participant name is in black and not underlined. There is nothing to 
indicate that it's a link.

Please use labels and text to provide additional information.

This is a good first starter project for some that's new to Wave in a Box.

Since this is a starter project, the following is a description on how to 
diagnose the bug. The actual bug is trivial to fix. The main learning of this 
starter project is to set up the dev environment, how to navigate the code base 
and diagnose bugs. In this spirit, the instructions below does not go directly 
to the bug, rather it includes lots of investigative steps.

1. Follow the instructions at 
http://www.waveprotocol.org/code/client-development-environment-set-up to set 
up the dev environment. 

2. The instructions also detail how to setup the Wave Panel Harness. We will be 
using the Wave Panel Harness to debug and test the fix. Follow the instructions 
and start the Wave Panel Harness in hosted mode. Attach a debugger to the 
hosted mode server.

3. Try to reproduce the problem at the start of this bug. Notice that the 
participant name is in black and is not underlined. However, when you click the 
name, it brings up the profile.

4. To change the formatting on the participant name, we need to to modify the 
associated css. So we need to figure out where the css for the participant name 
is coming from.

5. So lets try to figure out where the css is coming from
- 5.1 In the wave harness, you can see that there is a reply box that says 
"Click here to reply".  Lets try to find that text. Go to Search -> File and 
search for "Click Here" 
- 5.2 The search results show you that the outputHtml method of 
ReplyBoxViewBuilder is generating the html for the reply box.
- 5.3 Put a breakpoint in this method and hit refresh in the browser so that 
the wavepanel is created again.
- 5.4 During the creation process, the breakpoint is hit.
- 5.5 Looking at the callstack, you see that ReplyBoxViewBuilder.outputHtml was 
called in a chain of outputHtmls which tells you that we are in the rendering 
phase of the wavepanel.
- 5.6 You see that the ancestors of the ReplyBox are RootThread and 
ScrollableConversationViewBuilder
- 5.7 If you look on screen, you see that the RootThread is rendered below the 
Participants Panel. So go to ScrollableConversationViewBuilder.outputHtml and 
take a look at everything it is rendering
- 5.8 In ScrollableConversationViewBuilder.outputHtml, a few lines above 
rootThread.outputHtml(out);, you can see participants.outputHtml(out);
- 5.9 Hover over participants and Eclipse will tell you that it is of type 
ParticipantsViewBuilder.
- 5.10 Hit Ctrl Shift t to open up Class Search and type in 
ParticipantsViewBuilder.
- 5.11 Open up ParticipantsViewBuilder.java and right at the top you will see 
@Source("Participants.css") which tells you thats the css file you are looking 
for.
- 5.12 Do a file search for participants.css. It's located at 
src\org\waveprotocol\wave\client\wavepanel\view\dom\full

6. So now that we know the css file, we need to figure out which css selector 
is being used to render the participant names
- 6.1 Take a look at ParticipantsViewBuilder.outputHtml
- 6.2 Close to the start of the method, you will see 
participantUis.outputHtml(output); and then other code to render the overflow 
area and the add participant button.
- 6.3 Set a breakpoint on ParticipantsViewBuilder.outputHtml and hit refresh
- 6.4 When the breakpoint is hit, step into the outputHtml method until you 
finally get to ParticipantNewViewBuilder.outputHtml
- 6.5 The first line refers to css.participant()
- 6.6 Take a look at the css file again and search for "participants". 
- 6.7 You will find a search match for div.participant with a comment above 
"Name-based rendering"
- 6.8 That looks like the right selector, so let make some changes and find out

7. in the div.participant selector, add the following text-decoration: 
underline;  color: blue; and hit save

8. Go back to the browser and hit refresh and you should see the participant 
name in blue with a link

9. Now run the full server and check your changes there too

Original issue reported on code.google.com by mattthaz...@gmail.com on 30 Nov 2010 at 8:17

[GoogleCodeExporter]

Note: For Step 9, Before you run the full server, you need to recompile the 
server and client by running "ant"

Original comment by mattthaz...@gmail.com on 1 Dec 2010 at 3:33

[GoogleCodeExporter]

is this one taken?

Original comment by jaosorior on 11 Dec 2010 at 12:46

[GoogleCodeExporter]

no, its a starter project so let me know if you need more info

Original comment by mattthaz...@gmail.com on 11 Dec 2010 at 3:47

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Are you doing a search in Files or in Classes?

On Sat, Dec 11, 2010 at 12:18 AM, <wave-protocol@googlecode.com> wrote:

Comment #4 on issue 171 by jaosorior: Participant Names in Participant Panel 
should look like links
http://code.google.com/p/wave-protocol/issues/detail?id=171

Well, the doubt that I have involves the first step, i found that the "click 
here..." is located in the ReplyBoxViewBuilder.java by using grep, but that's 
not the point. In eclipse, when I search for it, i only find that pattern in 
the WaveView.ui.xml, so i would have to manually search for the 
ReplyBoxViewBuilder in order to insert the breakpoints... I still can't figure 
out why this happens.

Original comment by mattthaz...@gmail.com on 11 Dec 2010 at 6:02

[GoogleCodeExporter]

Thank you, it helped a lot. The problem I have is that Eclipse most of the time 
freezes a lot, but I could finally manage to get it done.

Original comment by jaosorior on 11 Dec 2010 at 11:40

[GoogleCodeExporter]

no problem. Glad to help.

Original comment by mattthaz...@gmail.com on 11 Dec 2010 at 11:41

[GoogleCodeExporter]

So...what now? should I request a code review? or is this open for someone else 
to get involved with the proyect?

Original comment by jaosorior on 12 Dec 2010 at 12:42

[GoogleCodeExporter]

if you have the fix working, then yes, please request a code review from 
zdwang@google.com

Original comment by mattthaz...@gmail.com on 12 Dec 2010 at 12:44

[GoogleCodeExporter]

Well, as you said, I only had to change some css.

Original comment by jaosorior on 12 Dec 2010 at 7:10

[GoogleCodeExporter]

It's a great tutorial for any new developer, so maybe it is worth to recycle 
it...

For example, a beginning developer can be asked to remove the link as a staring 
assignment - just for the sake of learning without actual submitting. 
So the "starter" issues will serve the educational purpose long after the issue 
was fixed.

Original comment by vega113 on 12 Dec 2010 at 8:04

[GoogleCodeExporter]

Patch submitted at: http://codereview.waveprotocol.org/411001

Original comment by jaosorior on 14 Dec 2010 at 1:31

[GoogleCodeExporter]

Uhm...I guess the patch wasn't accepted?

Original comment by jaosorior on 16 Dec 2010 at 12:02

[GoogleCodeExporter]

how come?

Original comment by mattthaz...@gmail.com on 16 Dec 2010 at 12:16

[GoogleCodeExporter]

The patch delayed being accepted because the user I sent it to (zdwang) wasn't 
available, I sent it to another one. Now it was accepted :). This issue can be 
labeled as fixed.

Original comment by jaosorior on 19 Dec 2010 at 9:17

[GoogleCodeExporter]

Original comment by ano...@google.com on 19 Dec 2010 at 10:52

• Changed state: Fixed