Opened on 09/09/2015 at 08:57:03 AM
Closed on 09/16/2015 at 02:48:59 PM
Last modified on 09/17/2015 at 01:54:52 PM
#3031 closed change (fixed)
Add Adblock Browser section to First Run Page
| Reported by: | sven | Assignee: | saroyanm |
|---|---|---|---|
| Priority: | P2 | Milestone: | |
| Module: | User-Interface | Keywords: | |
| Cc: | sebastian, greiner, philll | Blocked By: | |
| Blocking: | Platform: | Unknown / Cross platform | |
| Ready: | yes | Confidential: | no |
| Tester: | Ross | Verified working: | yes |
| Review URL(s): |
https://codereview.adblockplus.org/29326238/ |
||
Description (last modified by sebastian)
Background
We want to enhance the first run page with a section which is informing about Adblock Browser for Android and iOS
What to change
Include a new element on the FRP for Adblock Plus for Chrome, Firefox, Opera, Safari.
Behavior description:
Change the current box containing the text "We want to make the web better" ... .
1) Divide the box into 2 halfs with a vertical line
2) Insert the original text in the left side of the box
3) Insert a new text and a clickable element (button 1) in the right side of the box. Button 1 redirects
A part of the element (Button 1, see the elements description below) is clickable and links to https://adblockbrowser.org/?ref=frp. When a visitor hovers over the clickable element, the element's border is made visible (see the visual below).
Element Description:
This change shouldn’t be performed for the French version of the FRP.
Box 1
Description: A gray box separated into two sections (left and right) by a vertical gray dashed line
- Left Box:
- Text 1 : (keep the text from the original box)
- Right Box:
- Text 2: Got a smartphone or a tablet?
- Button 1: Description: A dark blue box including an icon and a text. The button should expand or retract accordingly depending on its content.
- Button 1 - Icon 1: Adblock Browser icon
- Button 1 - Text 3: Get Adblock Browser here
- Button 1 - Text 4: Available for Android and iOS
What should happen if the text exceeds the specified button width:
- The text should wrap in this case.
- The logo should remain vertically centered.
What should happen if the screen is not wide enough to show both boxes next to each other:
- They should be aligned vertically then.
- A horizontal separate line should be shown instead of the vertical one.
Behavior of the separator line:
- The separator line should take the full height and have a padding of 40 px to the bottom of this box.
Style guides
Hints for testers
- Test with multiple languages
- .. in particular French, where this change shouldn't be visible
- .. and right-to-left languages such as Arabic
- Test also with smaller window sizes
- Test on Firefox, Chrome, Opera and Safari
Attachments (3)
Change History (23)
Changed on 09/09/2015 at 08:57:23 AM by sven
Changed on 09/09/2015 at 08:57:35 AM by sven
comment:1 Changed on 09/09/2015 at 09:00:33 AM by sven
- Cc sebastian greiner added
- Component changed from Unknown to User-Interface
- Description modified (diff)
comment:2 in reply to: ↑ description Changed on 09/09/2015 at 09:52:27 AM by sebastian
- Cc philll added
comment:3 Changed on 09/09/2015 at 11:03:15 AM by greiner
- Description modified (diff)
There are still a few points missing:
- Please add a public link to the Adblock Browser logo image.
- Specify what should happen if the text exceeds the specified button width.
- Specify what should happen if the screen is not wide enough to show both boxes next to each other.
- Specify whether the vertical line is supposed to be as high as the box on the left or the box on the right.
Changed on 09/09/2015 at 11:25:36 AM by sven
comment:5 Changed on 09/09/2015 at 11:40:16 AM by greiner
Thanks for the additions. Just one more question in regard to
What should happen if the text exceeds the specified button width:
- The text should wrap in this case.
Is the icon supposed to stay vertically aligned on the top or centered in this case?
comment:6 Changed on 09/09/2015 at 11:46:06 AM by sven
centered
comment:7 Changed on 09/09/2015 at 11:56:03 AM by greiner
- Description modified (diff)
- Priority changed from Unknown to P2
- Ready set
comment:8 Changed on 09/09/2015 at 01:31:50 PM by philll
Translations are ordered from our agency and should arrive by the end of the day or tomorrow.
comment:9 Changed on 09/10/2015 at 09:05:26 AM by saroyanm
- Owner set to saroyanm
comment:10 Changed on 09/10/2015 at 09:05:37 AM by saroyanm
- Review URL(s) modified (diff)
- Status changed from new to reviewing
comment:11 Changed on 09/11/2015 at 09:01:25 AM by saroyanm
- Review URL(s) modified (diff)
comment:12 Changed on 09/15/2015 at 10:46:36 AM by greiner
- Description modified (diff)
@sven FYI: Not having a separator line on small screens is quite confusing because the button appears to be directly related to the Acceptable Ads text.
Therefore I modified the ticket description to reflect that.
comment:13 Changed on 09/16/2015 at 02:48:47 PM by saroyanm
comment:14 Changed on 09/16/2015 at 02:48:59 PM by saroyanm
- Resolution set to fixed
- Status changed from reviewing to closed
comment:15 Changed on 09/17/2015 at 03:21:47 AM by Ross
In Chrome and Firefox the logo does not load and displays the "broken image" box instead. In Opera the FRP fails to load at all.
ABP Chrome 1.9.2.1481
Chrome 45.0.2454.93 / Ubuntu 14.04 - 64bit
Chrome 45.0.2454.93 / Windows 7 - 32bit
ABP Opera 1.9.2.1481
Opera 32.0.1948.25 / Windows 7 - 32bit
ABP Firefox 2.6.10.3977-beta
Firefox 40.0.3 / Windows 7 - 32bit
comment:16 Changed on 09/17/2015 at 06:38:30 AM by sebastian
comment:17 Changed on 09/17/2015 at 07:39:22 AM by sebastian
- Description modified (diff)
comment:18 Changed on 09/17/2015 at 07:42:41 AM by sebastian
- Description modified (diff)
comment:19 Changed on 09/17/2015 at 07:59:06 AM by sebastian
- Description modified (diff)
comment:20 Changed on 09/17/2015 at 01:54:52 PM by Ross
- Tester changed from Unknown to Ross
- Verified working set
The integration issue is fixed. Tested at various resolutions and window sizes (looks OK). Tested in: English (OK). French (OK - Is hidden). Arabic (OK - Displays correctly). Dutch (OK). German (OK).
ABP 2.6.0.3979-beta
Firefox 40.0.3 / Windows 7 - 32bit
Firefox 40.0.3 / Ubuntu 14.04 - 64bit
ABP 1.9.2.1482
Chrome 45.0.2454.93 m / Windows 7 - 32bit
Opera 32.0.1948.25 / Windows 7 - 32bit
Safari 7.0.6 / OS X 10.9
Replying to sven:
@philll: Since we don't have CrowdIn integration for the UI yet, and this is a rather urgent change anyway, would you mind getting translations for these texts into the most important languages?