1292593 - Search bar and address bar autocomplete popups have no border

Status: VERIFIED FIXED

(Toolkit :: Themes, defect, P1)

Description

[Guo Yunhe]

Attachment: Screenshot of search bar dropdown

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:48.0) Gecko/20100101 Firefox/48.0
Build ID: 20160730000000

Steps to reproduce:

Only on GNU/Linux with KDE 5 desktop.

Type something on search bar or address bar.


Actual results:

The search bar or address bar opens a dropdown which is white background but do not have clear border or shadow. When the webpage is white background, it is very hard to identify where is the dropdown area. See attached screenshot.


Expected results:

Here should be some border (gray or some color) or drop shadow around the dropdown.

Comment 1

[Guo Yunhe]

Attachment: Screenshot of address bar dropdown

Comment 3

[Abe - QA (:Abe_LV)]

Hi Guoyunhebrave, 

I have tested this issue in Ubuntu 14.04 with KDE Plasma 5.6. The drop-down menu has visible boarder/shadow in nightly and release builds. Can you provide the "about:support" information ?  Thanks

--
Version 	51.0a1
Build ID 	20160810030202
Update Channel 	nightly
User Agent 	Mozilla/5.0 (X11; Linux x86_64; rv:51.0) Gecko/20100101 Firefox/51.0

Comment 4

[Guo Yunhe]

{
  "application": {
    "name": "Firefox",
    "osVersion": "Linux 4.1.27-27-default",
    "arch": "x86-64",
    "version": "48.0",
    "buildID": "20160730000000",
    "userAgent": "Mozilla/5.0 (X11; Linux x86_64; rv:48.0) Gecko/20100101 Firefox/48.0",
    "safeMode": false,
    "supportURL": "https://support.mozilla.org/1/firefox/48.0/Linux/zh-CN/",
    "numTotalWindows": 4,
    "numRemoteWindows": 0,
    "remoteAutoStart": false,
    "autoStartStatus": 2
  },
  "modifiedPreferences": {
    "accessibility.typeaheadfind.flashBar": 0,
    "browser.cache.disk.hashstats_reported": 1,
    "browser.cache.frecency_experiment": 3,
    "browser.cache.disk.smart_size.first_run": false,
    "browser.cache.disk.smart_size.use_old_max": false,
    "browser.cache.disk.capacity": 358400,
    "browser.cache.disk.filesystem_reported": 1,
    "browser.download.importedFromSqlite": true,
    "browser.places.smartBookmarksVersion": 8,
    "browser.search.useDBForOrder": true,
    "browser.sessionstore.upgradeBackup.latestBuildID": "20160730000000",
    "browser.startup.homepage": "resource://activity-streams/data/content/activity-streams.html#/",
    "browser.startup.homepage_override.buildID": "20160730000000",
    "browser.startup.homepage_override.mstone": "48.0",
    "browser.tabs.warnOnClose": false,
    "browser.urlbar.suggest.searches": true,
    "browser.urlbar.userMadeSearchSuggestionsChoice": true,
    "dom.push.userAgentID": "54fe310522f34e66a6d944238e80190d",
    "dom.apps.reset-permissions": true,
    "dom.mozApps.used": true,
    "extensions.lastAppVersion": "48.0",
    "media.gmp.storage.version.observed": 1,
    "media.webrtc.debug.aec_log_dir": "/tmp",
    "media.webrtc.debug.log_file": "/tmp/WebRTC.log",
    "media.gmp-gmpopenh264.version": "1.5.3",
    "media.gmp-manager.buildID": "20160730000000",
    "media.gmp-gmpopenh264.lastUpdate": 1465888991,
    "media.gmp-gmpopenh264.abi": "x86_64-gcc3",
    "media.gmp-manager.lastCheck": 1470821965,
    "network.cookie.prefsMigrated": true,
    "network.predictor.cleaned-up": true,
    "places.database.lastMaintenance": 1470830270,
    "places.history.expiration.transient_current_max_pages": 104858,
    "places.favicons.optimizeToDimension": 64,
    "plugin.importedState": true,
    "plugin.disable_full_page_plugin_for_types": "application/pdf",
    "print.print_margin_top": "0.5",
    "print.print_paper_width": "  8.27",
    "print.print_to_file": false,
    "print.print_evenpages": true,
    "print.print_orientation": 0,
    "print.print_unwriteable_margin_right": 25,
    "print.print_paper_height": " 11.69",
    "print.print_paper_size_unit": 0,
    "print.print_unwriteable_margin_left": 25,
    "print.print_margin_left": "0.5",
    "print.print_unwriteable_margin_bottom": 56,
    "print.print_duplex": 0,
    "print.print_scaling": "  1.00",
    "print.print_margin_right": "0.5",
    "print.print_oddpages": true,
    "print.print_bgcolor": false,
    "print.print_bgimages": false,
    "print.print_shrink_to_fit": true,
    "print.print_unwriteable_margin_top": 25,
    "print.print_paper_name": "iso_a4",
    "print.print_margin_bottom": "0.5",
    "print.print_in_color": true,
    "print.print_page_delay": 50,
    "print.print_paper_data": 0,
    "privacy.sanitize.timeSpan": 0,
    "privacy.cpd.downloads": false,
    "privacy.cpd.cookies": false,
    "privacy.donottrackheader.enabled": true,
    "privacy.cpd.formdata": false,
    "privacy.cpd.history": false,
    "privacy.sanitize.migrateClearSavedPwdsOnExit": true,
    "privacy.cpd.sessions": false,
    "services.sync.declinedEngines": "",
    "services.sync.lastPing": 1470768553,
    "services.sync.lastSync": "Wed Aug 10 2016 19:50:55 GMT+0300 (EEST)",
    "services.sync.numClients": 2,
    "services.sync.engine.prefs.modified": false,
    "services.sync.engine.adblockplus": true,
    "storage.vacuum.last.places.sqlite": 1468494022,
    "storage.vacuum.last.index": 1
  },
  "lockedPreferences": {},
  "javaScript": {
    "incrementalGCEnabled": true
  },
  "accessibility": {
    "isActive": false,
    "forceDisabled": 0
  },
  "libraryVersions": {
    "NSPR": {
      "minVersion": "4.12",
      "version": "4.12"
    },
    "NSS": {
      "minVersion": "3.24 Basic ECC",
      "version": "3.24 Basic ECC"
    },
    "NSSUTIL": {
      "minVersion": "3.24",
      "version": "3.24"
    },
    "NSSSSL": {
      "minVersion": "3.24 Basic ECC",
      "version": "3.24 Basic ECC"
    },
    "NSSSMIME": {
      "minVersion": "3.24 Basic ECC",
      "version": "3.24 Basic ECC"
    }
  },
  "userJS": {
    "exists": false
  },
  "crashes": {
    "submitted": [],
    "pending": 0
  },
  "sandbox": {
    "hasSeccompBPF": true,
    "hasSeccompTSync": true,
    "hasPrivilegedUserNamespaces": true,
    "hasUserNamespaces": true,
    "canSandboxMedia": true
  },
  "extensions": [
    {
      "name": "Activity Stream",
      "version": "1.1.1",
      "isActive": true,
      "id": "@activity-streams"
    },
    {
      "name": "Adblock Plus",
      "version": "2.7.3",
      "isActive": true,
      "id": "{d10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d}"
    },
    {
      "name": "Firefox Hello",
      "version": "1.4.3",
      "isActive": true,
      "id": "[e-mail]"
    },
    {
      "name": "Multi-process staged rollout",
      "version": "1.0",
      "isActive": true,
      "id": "[e-mail]"
    },
    {
      "name": "No More 404s",
      "version": "1.5.5",
      "isActive": true,
      "id": "[e-mail]"
    },
    {
      "name": "Pocket",
      "version": "1.0.4",
      "isActive": true,
      "id": "[e-mail]"
    },
    {
      "name": "Test Pilot",
      "version": "0.8.3-tag-2016-07-29",
      "isActive": true,
      "id": "@testpilot-addon"
    },
    {
      "name": "Unblock Youku",
      "version": "1.0.4",
      "isActive": true,
      "id": "jid1-zV8eHYwTDNUtwQ@jetpack"
    },
    {
      "name": "1-Click YouTube Video Downloader",
      "version": "2.4.0.4",
      "isActive": false,
      "id": "[e-mail]"
    },
    {
      "name": "DownThemAll!",
      "version": "2.0.19",
      "isActive": false,
      "id": "{DDC359D1-844A-42a7-9AA1-88A850A938A8}"
    },
    {
      "name": "NetVideoHunter",
      "version": "1.20",
      "isActive": false,
      "id": "[e-mail]"
    },
    {
      "name": "Toggle Proxy",
      "version": "1.9.1-signed.1-signed",
      "isActive": false,
      "id": "[e-mail]"
    },
    {
      "name": "WOT",
      "version": "20151208",
      "isActive": false,
      "id": "{a0d7ccb3-214d-498b-b4aa-0e8fda9a7bf7}"
    }
  ],
  "experiments": [],
  "graphics": {
    "numTotalWindows": 1,
    "numAcceleratedWindows": 0,
    "windowLayerManagerType": "Basic",
    "windowLayerManagerRemote": true,
    "supportsHardwareH264": "No",
    "numAcceleratedWindowsMessage": [
      ""
    ],
    "adapterDescription": "Intel Open Source Technology Center -- Mesa DRI Intel(R) Haswell Mobile ",
    "adapterVendorID": "Intel Open Source Technology Center",
    "adapterDeviceID": "Mesa DRI Intel(R) Haswell Mobile ",
    "adapterRAM": "",
    "adapterDrivers": "",
    "driverVersion": "3.0 Mesa 11.0.8",
    "driverDate": "",
    "webglRenderer": "Intel Open Source Technology Center -- Mesa DRI Intel(R) Haswell Mobile ",
    "info": {
      "AzureCanvasBackend": "skia",
      "AzureCanvasAccelerated": 0,
      "AzureFallbackCanvasBackend": "none",
      "AzureContentBackend": "cairo",
      "CairoUseXRender": 0
    }
  }
}

Comment 5

[Abe - QA (:Abe_LV)]

Guoyunhebrave,

Installed all addons on en-US and zh-CN Firefox locales in Ubuntu 14.04 amd64. The shadow of the drop-down menu is clearly visible.

Is this a regression? 
If this is regression bug, can you provide the regression window? 
Details about installation and usage of mozregression tool is available here: http://mozilla.github.io/mozregression/install.html

thanks

Comment 6

[Guo Yunhe]

I don't know what is a "regression" at all.

I am using openSUSE 42.1 with KDE 5.5.5 which is very different from Ubuntu 14.04 whose desktop is Unity.

You must test it on a Linux system with KDE 5.x. For example, KUbuntu 16.04 , Fedora 24 (install KDE), openSUSE 42.1 (install KDE).

This is a problem in KDE 5. You can check attachments I uploaded.

Comment 7

[Guo Yunhe]

Attachment: KDE 5 plasma workspace

Comment 8

[Abe - QA (:Abe_LV)]

This is reproducible in KDE 5 plasma desktop.

--
Version 	51.0a1
Build ID 	20160815030201
Update Channel 	nightly
User Agent 	Mozilla/5.0 (X11; Linux x86_64; rv:51.0) Gecko/20100101 Firefox/51.0

Comment 9

[Xidorn Quan [:xidorn] UTC+11]

If it happens only on specific desktop environment, I suppose this is an issue in our gtk widget code rather than layout code.

Comment 10

[Karl Tomlinson (:karlt)]

Does the context menu (right click) look similar?

To determine whether this is Firefox or the GTK3 theme triggering this, we need a comparison with another GTK3 application.

Can you install and run gtk3-demo to compare, please?
Menus are available there from right clicking on the text area, or double clicking on "Menus".

Comment 11

[Guo Yunhe]

The context menu has a clear gray border and light gray background.

Screenshot https://www.dropbox.com/s/5y5zaxk9hs01cye/firefox-context-menu.png?dl=0

Other GTK3 applications only have normal combobox and it has a gray border and light gray background.

Screenshot https://www.dropbox.com/s/5m6jcvasi1hx6hl/gtk3-combobox.png?dl=0

Comment 12

[Karl Tomlinson (:karlt)]

Thanks.

Regression between 48.0b4 and 48.0b5.
https://hg.mozilla.org/releases/mozilla-beta/log?rev=ancestors(FIREFOX_48_0b5_RELEASE)-ancestors(FIREFOX_48_0b4_RELEASE)&revcount=50

Suspect bug 1275700.

Comment 13

[Dão Gottwald [:dao]]

Bug 1275700 may have exposed this, but this still seems like a widget issue. We're using ThreeDDarkShadow as the border.

Comment 14

[Karl Tomlinson (:karlt)]

(In reply to Dão Gottwald [:dao] from comment #13)
> We're using ThreeDDarkShadow as the border.

Thanks.  It is helpful to know what the border color is, but this doesn't seem
to be used.

Setting ui.threeddarkshadow;#ff00ff and restarting has no effect.

Setting background-color: ThreeDDarkShadow at
http://searchfox.org/mozilla-central/rev/b38dbd1378cea4ae83bbc8a834cdccd02bbc5347/toolkit/themes/linux/global/autocomplete.css#58
behaves as expected for the background, and shows that there is no border.

Changing -moz-border-*-colors at
http://searchfox.org/mozilla-central/rev/b38dbd1378cea4ae83bbc8a834cdccd02bbc5347/toolkit/themes/linux/global/autocomplete.css#52-55
has no effect.

I wonder whether -moz-appearance: menulist; color: -moz-ComboboxText; is what is wanted here.

Comment 15

[Dão Gottwald [:dao]]

Ugh, it looks like we never set the border-style here, and it's of course 'none' by default.

Comment 16

[Dão Gottwald [:dao]]

Attachment: patch

Comment 17

[Dão Gottwald [:dao]]

[Tracking Requested - why for this release]: recent and significant visual regression from bug 1275700

Comment 18

[Dão Gottwald [:dao]]

Attachment: patch v2

Comment 19

[Dão Gottwald [:dao]]

Attachment: patch v3

I hope this takes care of all hacks trying to compensate the missing border

Comment 20

[:Gijs (he/him)]

Comment on attachment 8784343 [details] [diff] [review]
patch v3

I ended up reviewing this because the previous iteration was r?me (and I used qimportbz to import the last patch, and verified that that was this patch instead...). Might still be a good idea to check with Florian that this takes care of everything.

Comment 21

[Gerry Chang [:gchang]]

Track 49+ as this is a visual regression of search/address bar.

Comment 22

[Dão Gottwald [:dao]]

Comment on attachment 8784343 [details] [diff] [review]
patch v3

Turns out Florian is on PTO

Comment 23

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/3742f881a123
Add missing border to autocomplete popups. r=gijs

Comment 24

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/3742f881a123

Comment 25

[Dão Gottwald [:dao]]

Comment on attachment 8784343 [details] [diff] [review]
patch v3

Approval Request Comment
[Feature/regressing bug #]: bug 1275700
[User impact if declined]: see comment 0
[Describe test coverage new/current, TreeHerder]: n/a
[Risks and why]: There was code in searchbar.css compensating the missing border. I removed that as part of this patch, but it's possible that I missed something, which could cause minor issues.
[String/UUID change made/needed]: none

Comment 26

[Ritu Kothari (:ritu) (Inactive, please n-i to RyanVM, jcristau, or pascal)]

Hello Guo, could you please verify this issue is fixed as expected on a latest Nightly build? Thanks!

Comment 27

[Ritu Kothari (:ritu) (Inactive, please n-i to RyanVM, jcristau, or pascal)]

Comment on attachment 8784343 [details] [diff] [review]
patch v3

Fixes a regression (linux only), Aurora50+

Comment 28

[Guo Yunhe]

I can confirm it is fixed in Firefox 51 Nightly. Now the dropdown has a visable gray border.

System environment: openSUSE Leap 42.1 and KDE 5.

Comment 29

[Dão Gottwald [:dao]]

(In reply to Guo Yunhe from comment #28)
> I can confirm it is fixed in Firefox 51 Nightly. Now the dropdown has a
> visable gray border.
> 
> System environment: openSUSE Leap 42.1 and KDE 5.

Thanks

Comment 30

[Dão Gottwald [:dao]]

https://hg.mozilla.org/releases/mozilla-aurora/rev/c819e284a139

Comment 31

[Liz Henry (:lizzard) (relman/hg->git project)]

Comment on attachment 8784343 [details] [diff] [review]
patch v3

CSS fix for regression from 48, the risk seems low so let's take this for beta 9.

Comment 32

[Dão Gottwald [:dao]]

If anyone wants to land this on beta before I can get to it, please use https://hg.mozilla.org/releases/mozilla-aurora/raw-rev/c819e284a139 rather than the attached patch, since the latter probably won't apply without conflicts.

Comment 33

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/releases/mozilla-beta/rev/fbb6e7fa7e55

Comment 34

[Andrei Vaida [:avaida]]

We don't have a matching test environment to test this. Guo Yunhe, could you please confirm whether this is fixed on the latest beta [1]?

[1] http://archive.mozilla.org/pub/firefox/candidates/49.0b9-candidates/build1/linux-x86_64/

Comment 35

[Guo Yunhe]

I can confirm it is fixed in Firefox 49.0 Beta.

Comment 36

[Andrei Vaida [:avaida]]

(In reply to Guo Yunhe from comment #35)
> I can confirm it is fixed in Firefox 49.0 Beta.

Thank you for following up on this so promptly! Updating flags accordingly.