Export to GitHub

wave-protocol - issue #171

Participant Names in Participant Panel should look like links


Posted on Nov 30, 2010 by Grumpy Lion

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

Comment #1

Posted on Dec 1, 2010 by Grumpy Lion

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

Comment #2

Posted on Dec 11, 2010 by Helpful Monkey

is this one taken?

Comment #3

Posted on Dec 11, 2010 by Grumpy Lion

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

Comment #4

Posted on Dec 11, 2010 by Helpful Monkey

Comment deleted

Comment #5

Posted on Dec 11, 2010 by Grumpy Lion

Are you doing a search in Files or in Classes?

On Sat, Dec 11, 2010 at 12:18 AM, 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.

Comment #6

Posted on Dec 11, 2010 by Helpful Monkey

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.

Comment #7

Posted on Dec 11, 2010 by Grumpy Lion

no problem. Glad to help.

Comment #8

Posted on Dec 12, 2010 by Helpful Monkey

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

Comment #9

Posted on Dec 12, 2010 by Grumpy Lion

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

Comment #10

Posted on Dec 12, 2010 by Helpful Monkey

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

Comment #11

Posted on Dec 12, 2010 by Happy Cat

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.

Comment #12

Posted on Dec 14, 2010 by Helpful Monkey

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

Comment #13

Posted on Dec 16, 2010 by Helpful Monkey

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

Comment #14

Posted on Dec 16, 2010 by Grumpy Lion

how come?

Comment #15

Posted on Dec 19, 2010 by Helpful Monkey

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.

Comment #16

Posted on Dec 19, 2010 by Massive Bear

(No comment was entered for this change.)

Status: Fixed

Labels:
Type-Defect Priority-Medium