Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#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/
https://codereview.adblockplus.org/29327142/

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)

firstrunpage_12-styleguide-button.png (93.5 KB) - added by sven 4 years ago.
firstrunpage_17_styleguide.png (240.0 KB) - added by sven 4 years ago.
abb icon 1.png (18.9 KB) - added by sven 4 years ago.

Download all attachments as: .zip

Change History (23)

Changed 4 years ago by sven

Changed 4 years ago by sven

comment:1 Changed 4 years ago by sven

  • Cc sebastian greiner added
  • Component changed from Unknown to User-Interface
  • Description modified (diff)

comment:2 in reply to: ↑ description Changed 4 years ago by sebastian

  • Cc philll added

Replying to sven:

  • 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 - Text 3: Get Adblock Browser here
    • Button 1 - Text 4: Available for Android and iOS

@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?

Version 0, edited 4 years ago by sebastian (next)

comment:3 Changed 4 years ago 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 4 years ago by sven

comment:4 Changed 4 years ago by sven

  • Description modified (diff)

comment:5 Changed 4 years ago 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 4 years ago by sven

centered

comment:7 Changed 4 years ago by greiner

  • Description modified (diff)
  • Priority changed from Unknown to P2
  • Ready set

comment:8 Changed 4 years ago by philll

Translations are ordered from our agency and should arrive by the end of the day or tomorrow.

comment:9 Changed 4 years ago by saroyanm

  • Owner set to saroyanm

comment:10 Changed 4 years ago by saroyanm

  • Review URL(s) modified (diff)
  • Status changed from new to reviewing

comment:11 Changed 4 years ago by saroyanm

  • Review URL(s) modified (diff)

comment:12 Changed 4 years ago 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:14 Changed 4 years ago by saroyanm

  • Resolution set to fixed
  • Status changed from reviewing to closed

comment:15 Changed 4 years ago 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 4 years ago by sebastian

This isn't and issue with the first run page itself, but with the integration in the extension. I reopened #3086 and #3087 instead.

comment:17 Changed 4 years ago by sebastian

  • Description modified (diff)

comment:18 Changed 4 years ago by sebastian

  • Description modified (diff)

comment:19 Changed 4 years ago by sebastian

  • Description modified (diff)

comment:20 Changed 4 years ago 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

Note: See TracTickets for help on using tickets.