New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

In buildbot web UI, inconsistent use of "pointer" mouse cursor #3795

Closed
uglycoyote opened this Issue Dec 1, 2017 · 1 comment

Comments

Projects
None yet
3 participants
@uglycoyote
Contributor

uglycoyote commented Dec 1, 2017

We have had feedback from some of our users that it's difficult to know which things in the Buildbot UI are supposed to be clickable and which ones are not.

One good example appears in the upper right of the Build Summary page:
image

When you mouse-over this "..." yellow rectangle, the cursor changes to "pointer", leading the user to believe that they could interact with the element by clicking on it. It actually does nothing when you click on it. (User feedback indicates that the user is unsure that nothing happened, maybe something happened that they just did not notice.)

By contrast the green rectangle next to it is actually a clickable link to the builder which triggered. Both rectangles use the pointer cursor but only one is clickable.

On the other hand, on the "Builders" page there is an example of something which is clickable but does not use the "pointer" style

image

Looking in why the yellow rectangle changes to "pointer" I see that there is a css rule which says

.label {
  cursor: pointer
}

and the jade code which causes the yellow rectangle to appear is

                .label(ng-class="results2class(buildsummary.build)")
                  | {{results2text(buildsummary.build)}}

(from buildsummary.tpl.jade)

This css rule which says "all labels should use cursor:pointer" seems wrong, since clearly all labels are not clickable.

I'm tempted to submit a pull request to just remove this css rule, but I'm not sure what negative impact it would have.

For the green clickable rectangle, the code is:

the green (clickable) rectangle uses this code, so would probably have the

                span(ng-if="buildsummary.parentbuild")
                    | #{' '}
                    a.label(ng-class="results2class(buildsummary.parentbuild)",
                    ui-sref="build({builder:buildsummary.parentbuilder.builderid, build:buildsummary.parentbuild.number})")
                          | {{buildsummary.parentrelationship}}:
                          | {{buildsummary.parentbuilder.name}}/{{buildsummary.parentbuild.number}}

and so it would probably still invoke the pointer icon since it has the explicit a (hyperlink).

But there are probably other places where the "label" style is used for something that's clickable using ng-click and removing cursor:pointer from label would cause the pointer to stop appearing in places where it should. I was hoping someone with some more knowledge of the UI could comment on this.

My suggestion would be to have a more explicitly named style:

.clickable {
  cursor: pointer
}

and only apply it to things which are clickable but are not already using <a> to invoke the pointer-style cursor

@tardyp

This comment has been minimized.

Show comment
Hide comment
@tardyp

tardyp Dec 4, 2017

Member

Hi @uglycoyote I think you did a good investigation already and you are very near a working PR.

You can watch the web dev tutorial here for a quick setup:
https://medium.com/buildbot/buildbot-ui-plugin-for-python-developer-ef9dcfdedac0

Then, you can edit https://github.com/buildbot/buildbot/blob/master/www/base/src/styles/styles.less#L28 to add the .clickable snippet.
Then grep in the .jade files looking for .label, and add the clickable if needed.

Member

tardyp commented Dec 4, 2017

Hi @uglycoyote I think you did a good investigation already and you are very near a working PR.

You can watch the web dev tutorial here for a quick setup:
https://medium.com/buildbot/buildbot-ui-plugin-for-python-developer-ef9dcfdedac0

Then, you can edit https://github.com/buildbot/buildbot/blob/master/www/base/src/styles/styles.less#L28 to add the .clickable snippet.
Then grep in the .jade files looking for .label, and add the clickable if needed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment