Last Comment Bug 978752 - Tab strip gradient is broken in customization mode on Windows XP in classic mode
: Tab strip gradient is broken in customization mode on Windows XP in classic mode
Status: RESOLVED FIXED
[Australis:P3]
:
Product: Firefox
Classification: Client Software
Component: Toolbars and Customization (show other bugs)
: 30 Branch
: x86 Windows XP
-- normal (vote)
: Firefox 30
Assigned To: :Gijs (away until Feb 27)
:
: :Gijs (away until Feb 27)
Mentors:
: 879593 907336 (view as bug list)
Depends on: 990099 986515 986920
Blocks: australis-cust
  Show dependency treegraph
 
Reported: 2014-03-03 06:37 PST by (Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo
Modified: 2014-04-24 09:16 PDT (History)
6 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard: [qa-]
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---
fixed
fixed


Attachments
Glitch in tab strip (551.60 KB, image/png)
2014-03-03 06:37 PST, (Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo
no flags Details
Glitch in tab strip (106.15 KB, image/png)
2014-03-03 06:38 PST, (Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo
no flags Details
POC Screenshot (63.76 KB, image/png)
2014-03-03 15:28 PST, Stephen Horlander [:shorlander]
no flags Details
fix Windows Classic gradient for Australis, (5.43 KB, patch)
2014-03-14 05:19 PDT, :Gijs (away until Feb 27)
mconley: feedback+
Details | Diff | Splinter Review
fix Windows Classic gradient for Australis, (5.81 KB, patch)
2014-03-14 07:59 PDT, :Gijs (away until Feb 27)
mconley: review+
sledru: approval‑mozilla‑aurora+
Details | Diff | Splinter Review

Description User image (Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo 2014-03-03 06:37:17 PST
Created attachment 8384575 [details]
Glitch in tab strip

When using the classic theme on Windows XP, the gradient of the tab strip is broken in customization mode.

The gradient we are using to overlay the title bar should extend all the way to the edges of the window, so that the »native« XP gradient isn't visible.
Comment 1 User image Mike Conley (:mconley) 2014-03-03 06:38:00 PST
Gijs and I discussed that if we can't find a better solution, we can always negative margin the pseudoelement into submission.
Comment 2 User image (Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo 2014-03-03 06:38:35 PST
Created attachment 8384576 [details]
Glitch in tab strip
Comment 3 User image Stephen Horlander [:shorlander] 2014-03-03 15:28:50 PST
Created attachment 8384942 [details]
POC Screenshot

I think we should switch from the linear-gradient and instead re-purpose the glass fog.

This will give it a softer look and avoid dirty grey/black caused by transitioning to transparent. Also will fix this bug with the hard edge in Customize.

Here is what I had to get the look in the screenshot:

#TabsToolbar:not(:-moz-lwtheme)::after {
  /* Because we use placeholders for window controls etc. in the tabstrip,
   * and position those with ordinal attributes, and because our layout code
   * expects :before/:after nodes to come first/last in the frame list,
   * we have to reorder this element to come last, hence the
   * ordinal group value (see bug 853415). */
  -moz-box-ordinal-group: 1001;
  box-shadow: 0 0 50px 8px ActiveCaption;
  content: "";
  display: -moz-box;
  height: 0;
  margin: 0 50px; /* (30px + 30px) from box-shadow */
  position: absolute;
  pointer-events: none;
  top: 100%;
  width: -moz-available;
  z-index: 0;
}
Comment 4 User image Mike Conley (:mconley) 2014-03-03 15:33:22 PST
shorlander++ - this is way, way, wayyyyy better.
Comment 5 User image Justin Dolske [:Dolske] 2014-03-04 14:14:37 PST
*** Bug 879593 has been marked as a duplicate of this bug. ***
Comment 6 User image Justin Dolske [:Dolske] 2014-03-04 14:29:11 PST
*** Bug 907336 has been marked as a duplicate of this bug. ***
Comment 7 User image :Gijs (away until Feb 27) 2014-03-11 07:54:54 PDT
Stealing per discussion with Matt last week.
Comment 8 User image :Gijs (away until Feb 27) 2014-03-11 10:28:54 PDT
So the annoying thing here is that we have to z-index all the things in the tabstoolbar apart from the ::after element in order to have them appear on top of the box shadow. That then causes other bugs (such as the tab overflow separator overlapping with the navbar). :-(
Comment 9 User image :Gijs (away until Feb 27) 2014-03-14 05:19:40 PDT
Created attachment 8391151 [details] [diff] [review]
fix Windows Classic gradient for Australis,

I basically took Stephen's patch and used his rules only for win classic. I then removed the style for fullscreen mode (where we have a grey background in the tabstoolbar so it doesn't work to add a blue fade), added styling for .toolbarbutton-1 so we don't break add-ons, and updated some comments. I left out the margin-top adjustment, which seems to be unrelated. The original patch was here: http://cl.ly/code/2o1u1U042a14 .
Comment 10 User image Mike Conley (:mconley) 2014-03-14 07:29:32 PDT
Comment on attachment 8391151 [details] [diff] [review]
fix Windows Classic gradient for Australis,

This looks really good! We need to disable the fog for classic when tabs are not in the titlebar though.
Comment 11 User image Mike Conley (:mconley) 2014-03-14 07:31:40 PDT
Comment on attachment 8391151 [details] [diff] [review]
fix Windows Classic gradient for Australis,

Review of attachment 8391151 [details] [diff] [review]:
-----------------------------------------------------------------

::: browser/themes/windows/browser.css
@@ +143,5 @@
> +    box-shadow: 0 0 50px 8px ActiveCaption;
> +    content: "";
> +    display: -moz-box;
> +    height: 0;
> +    margin: 0 50px; /* (30px + 30px) from box-shadow */

Also, 30px + 30px != 50px...
Comment 12 User image :Gijs (away until Feb 27) 2014-03-14 07:59:24 PDT
Created attachment 8391235 [details] [diff] [review]
fix Windows Classic gradient for Australis,

Now with [tabsintitlebar], but with a :not([selected=true] for the tabbrowser tab so that it continues getting a still higher z-index (otherwise the top of the navbar/bottom of the tabbar overlaps it)
Comment 13 User image Mike Conley (:mconley) 2014-03-14 08:26:57 PDT
Comment on attachment 8391235 [details] [diff] [review]
fix Windows Classic gradient for Australis,

Review of attachment 8391235 [details] [diff] [review]:
-----------------------------------------------------------------

Let's roll with this. \o/ Thanks Gijs!
Comment 14 User image :Gijs (away until Feb 27) 2014-03-14 15:09:08 PDT
remote:   https://hg.mozilla.org/integration/fx-team/rev/a7e1aeb46c79
Comment 15 User image Phil Ringnalda (:philor) 2014-03-15 11:54:50 PDT
https://hg.mozilla.org/mozilla-central/rev/a7e1aeb46c79
Comment 16 User image :Gijs (away until Feb 27) 2014-03-15 12:29:00 PDT
Comment on attachment 8391235 [details] [diff] [review]
fix Windows Classic gradient for Australis,

[Approval Request Comment]
Bug caused by (feature/regressing bug #): Australis
User impact if declined: Tabs in titlebar looks bad on Windows classic themes
Testing completed (on m-c, etc.): on m-c
Risk to taking this patch (and alternatives if risky): low, might affect add-ons (but we did our best not to...)
String or IDL/UUID changes made by this patch: none
Comment 17 User image Matthew N. [:MattN] (PM if requests are blocking you) 2014-03-16 11:08:05 PDT
https://hg.mozilla.org/releases/mozilla-aurora/rev/0405ceeff5ab

Note You need to log in before you can comment on or make changes to this bug.