Closed Bug 1325567 Opened 6 years ago Closed 6 years ago

There is no tooltip for the change orientation button


(DevTools :: Responsive Design Mode, defect, P3)



(firefox50 unaffected, firefox51 unaffected, firefox52 affected, firefox53 verified)

Firefox 53
Tracking Status
firefox50 --- unaffected
firefox51 --- unaffected
firefox52 --- affected
firefox53 --- verified


(Reporter: mboldan, Assigned: djmdeveloper060796, Mentored)



(Keywords: good-first-bug)


(1 file, 1 obsolete file)

[Affected versions]:
- Firefox 52.0a2 (2016-12-22), Firefox 53.0a1 (2016-12-22)

[Affected platforms]:
- Ubuntu 16.04x64, Windows 8.1x86, Mac 10.12.1

[Steps to reproduce]:
Prerequisites: Make sure that devtools.responsive.html.enabled pref is set to true.

1. Launch Firefox.
2. Enable RDM.
3. Hoover the mouse cursor over the button the rotates the viewport. 

[Expected result]:
- A tooltip is displayed.

[Actual result]:
- Nothing happens.

[Regression range]:
- This is not a regression since the issue is also reproducible on Firefox 47.0a1 (2016-02-11), build where the rotate button was first implemented.
QA Whiteboard: [qe-rdm]
Seems fine to add a tooltip!

To do this, modify the viewport toolbar component in devtools/client/responsive.html/components/viewport-toolbar.js.  The global-toolbar component in the same directory has an example.

See to get started with the code base.
Mentor: jryans
Keywords: good-first-bug
Priority: -- → P3
Whiteboard: [rdm-v2] [triage]
Attached patch bug1325567.patch (obsolete) — Splinter Review
Added tooltip to the rotate viewport button
Attachment #8822933 - Flags: review?(jryans)
Assignee: nobody → djmdeveloper060796
Comment on attachment 8822933 [details] [diff] [review]

Review of attachment 8822933 [details] [diff] [review]:

Thanks for looking into this!

Please add "r=jryans" to the end of the commit message.

Looks like one small tweak to make.

::: devtools/client/locales/en-US/
@@ +18,5 @@
>  # LOCALIZATION NOTE (responsive.exit): tooltip text of the exit button.
>  responsive.exit=Close Responsive Design Mode
> +# LOCALIZATION NOTE (responsive.rotate): tooltip text of the rotate button.
> +responsive.rotate=Rotate Viewport

I believe "Rotate viewport" is slightly better, we typically use "sentence" casing for tooltips.  (The one above this is not a very good example, since "Responsive Design Mode" is a proper noun, and so it's capitalized.
Attachment #8822933 - Flags: review?(jryans)
Attached patch bug1325567.patchSplinter Review
Updated my previous patch.
Attachment #8822933 - Attachment is obsolete: true
Attachment #8823801 - Flags: review?(jryans)
Comment on attachment 8823801 [details] [diff] [review]

Review of attachment 8823801 [details] [diff] [review]:

Great, this looks good to me!  Thanks for working on it!

Here's a try run to make sure tests agree:

Once it looks good, we can add the "checkin-needed" keyword to this bug for landing.
Attachment #8823801 - Flags: review?(jryans) → review+
Please take a look at for more ideas of bugs to work on.  Thanks again!
Pushed by
Added tooltip to rotate viewport button. r=jryans
Keywords: checkin-needed
Closed: 6 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 53
Suggestion for the future: in lack of a localization note, using "tooltip" in the string ID helps understanding what's happening. Tooltips, unlike labels, don't have much of a length constraint, and might require a different style (description) than a button label (action).
The bug is no longer reproducible on Firefox 53.0a1 (2017-01-09).
The tests were performed under Mac OS X 10.11, Windows 10x64 and under Ubuntu 16.04x64.
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.