Revamp the Incognito NTP on Desktop
Changes in this CL:
1. Added an about:flag for the "MD Incognito NTP". (Note that the primary
purpose of this change is to improve the text on the Incognito NTP, not
just to materialize it; but the latter results in a shorter flag name and
thematically fits with the other recent MD improvements).
2. Since almost none of the old CSS is valid for the new MD, and since
there are also related HTML changes, we use separate HTML and CSS files.
NTPResourceCache decides which one to serve according to the flag. Once
this fully launches, we will simply remove the previous implementation.
3. The new design follows the CSS rules described in
https://gallery.googleplex.com/projects/MCHbtQVoQ2HCZeKud1YOmPiI.
The requirement that the two sets of bulletpoints determine the width of
the content box has been achieved by JS (the CSS is complicated enough as
it is :-( ).
Tested with the bookmark bar on/off, with a custom theme on/off, and in
front of a UX designer :)
BUG=693525
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
Review-Url: https://codereview.chromium.org/2804823002
Cr-Commit-Position: refs/heads/master@{#466817}
Committed: https://chromium.googlesource.com/chromium/src/+/a8443118aa963ba364ee9687b82d1d9c7eb26af5

Description was changed from
==========
Revamp the Incognito NTP on Desktop
Changes in this CL:
1. Added an about:flag for the "MD Incognito NTP". (Note that the primary
purpose of this change is to improve the text on the Incognito NTP, not
just to materialize it; but the latter results in a shorter flag name and
thematically fits with the other recent MD improvements).
2. Since almost none of the old CSS is valid for the new MD, and since
there are also related HTML changes, we use separate HTML and CSS files.
NTPResourceCache decides which one to serve according to the flag. Once
this fully launches, we will simply remove the previous implementation.
3. The new design follows the CSS rules described in
https://gallery.googleplex.com/projects/MCHbtQVoQ2HCZeKud1YOmPiI.
The requirement that the two sets of bulletpoints determine the width of
the content box has been achieved by JS (the CSS is complicated enough as
it is :-( ).
Tested with the bookmark bar on/off, with a custom theme on/off, and in
front of a UX designer :)
BUG=693525
==========
to
==========
Revamp the Incognito NTP on Desktop
Changes in this CL:
1. Added an about:flag for the "MD Incognito NTP". (Note that the primary
purpose of this change is to improve the text on the Incognito NTP, not
just to materialize it; but the latter results in a shorter flag name and
thematically fits with the other recent MD improvements).
2. Since almost none of the old CSS is valid for the new MD, and since
there are also related HTML changes, we use separate HTML and CSS files.
NTPResourceCache decides which one to serve according to the flag. Once
this fully launches, we will simply remove the previous implementation.
3. The new design follows the CSS rules described in
https://gallery.googleplex.com/projects/MCHbtQVoQ2HCZeKud1YOmPiI.
The requirement that the two sets of bulletpoints determine the width of
the content box has been achieved by JS (the CSS is complicated enough as
it is :-( ).
Tested with the bookmark bar on/off, with a custom theme on/off, and in
front of a UX designer :)
BUG=693525
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

Hi Evan!
Please have a look! This is a super complicated stylesheet, but when you look at
the specs linked in the CL description, I think you'll agree that there is a lot
of entropy. The way I wrote it is that:
- I divided it into semantical sections.
- In each section, I started with the largest screen size and then wrote diffs
for what happens at various breakpoints.
It might be possible to make the CSS shorter, but I find the current approach
well maintainable.
Cheers,
Martin

Description was changed from
==========
Revamp the Incognito NTP on Desktop
Changes in this CL:
1. Added an about:flag for the "MD Incognito NTP". (Note that the primary
purpose of this change is to improve the text on the Incognito NTP, not
just to materialize it; but the latter results in a shorter flag name and
thematically fits with the other recent MD improvements).
2. Since almost none of the old CSS is valid for the new MD, and since
there are also related HTML changes, we use separate HTML and CSS files.
NTPResourceCache decides which one to serve according to the flag. Once
this fully launches, we will simply remove the previous implementation.
3. The new design follows the CSS rules described in
https://gallery.googleplex.com/projects/MCHbtQVoQ2HCZeKud1YOmPiI.
The requirement that the two sets of bulletpoints determine the width of
the content box has been achieved by JS (the CSS is complicated enough as
it is :-( ).
Tested with the bookmark bar on/off, with a custom theme on/off, and in
front of a UX designer :)
BUG=693525
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========
to
==========
Revamp the Incognito NTP on Desktop
Changes in this CL:
1. Added an about:flag for the "MD Incognito NTP". (Note that the primary
purpose of this change is to improve the text on the Incognito NTP, not
just to materialize it; but the latter results in a shorter flag name and
thematically fits with the other recent MD improvements).
2. Since almost none of the old CSS is valid for the new MD, and since
there are also related HTML changes, we use separate HTML and CSS files.
NTPResourceCache decides which one to serve according to the flag. Once
this fully launches, we will simply remove the previous implementation.
3. The new design follows the CSS rules described in
https://gallery.googleplex.com/projects/MCHbtQVoQ2HCZeKud1YOmPiI.
The requirement that the two sets of bulletpoints determine the width of
the content box has been achieved by JS (the CSS is complicated enough as
it is :-( ).
Tested with the bookmark bar on/off, with a custom theme on/off, and in
front of a UX designer :)
BUG=693525
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

https://codereview.chromium.org/2804823002/diff/1/chrome/browser/about_flags.cc File chrome/browser/about_flags.cc (right): https://codereview.chromium.org/2804823002/diff/1/chrome/browser/about_flags.cc#newcode2503 chrome/browser/about_flags.cc:2503: SINGLE_VALUE_TYPE(switches::kEnableMaterialDesignIncognitoNTP)}, can we use a feature instead of a ...

https://codereview.chromium.org/2804823002/diff/1/chrome/browser/resources/nt...
File chrome/browser/resources/ntp4/md_incognito_tab.css (right):
https://codereview.chromium.org/2804823002/diff/1/chrome/browser/resources/nt...
chrome/browser/resources/ntp4/md_incognito_tab.css:22: font-size: 14px;
On 2017/04/11 19:04:26, msramek wrote:
> On 2017/04/11 00:31:12, Dan Beam wrote:
> > can you make font-sizes in terms of scalable units (em, %, or rem)?
> >
> > this is so the user's default font size is respected from settings
>
> Well, this might be a problem.
>
> The default font size is 13px. 14px/13px has infinite decimal expansion, as do
> 24/14, 24/13, 20/14, and 20/13. Let me circle back with our UX designer if we
> really want to use 1px larger font than the default.
Update in Patchset #4: I talked to our UX designer today, we decided to define
our font sizes as an offset, i.e. calc(100% + ?), rather than a ratio of the
standard font sizes. Large default font sizes cause the floating bulletpoints
not to fit next to each other, so I added a few more lines of JS to work around
that.

Hi again Dan!
We did another round with maxwalker@, tested screen sizes again, default font
sizes, RTL, etc. The visuals should be correct now.
I see that you updated the code for the old Incognito page, so during the rebase
I also made equivalent changes to the new MD Incognito page code.
I guess at this point it makes sense to ignore the previous patchsets and review
the whole diff again. PTAL!
Thanks,
Martin

Description was changed from
==========
Revamp the Incognito NTP on Desktop
Changes in this CL:
1. Added an about:flag for the "MD Incognito NTP". (Note that the primary
purpose of this change is to improve the text on the Incognito NTP, not
just to materialize it; but the latter results in a shorter flag name and
thematically fits with the other recent MD improvements).
2. Since almost none of the old CSS is valid for the new MD, and since
there are also related HTML changes, we use separate HTML and CSS files.
NTPResourceCache decides which one to serve according to the flag. Once
this fully launches, we will simply remove the previous implementation.
3. The new design follows the CSS rules described in
https://gallery.googleplex.com/projects/MCHbtQVoQ2HCZeKud1YOmPiI.
The requirement that the two sets of bulletpoints determine the width of
the content box has been achieved by JS (the CSS is complicated enough as
it is :-( ).
Tested with the bookmark bar on/off, with a custom theme on/off, and in
front of a UX designer :)
BUG=693525
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========
to
==========
Revamp the Incognito NTP on Desktop
Changes in this CL:
1. Added an about:flag for the "MD Incognito NTP". (Note that the primary
purpose of this change is to improve the text on the Incognito NTP, not
just to materialize it; but the latter results in a shorter flag name and
thematically fits with the other recent MD improvements).
2. Since almost none of the old CSS is valid for the new MD, and since
there are also related HTML changes, we use separate HTML and CSS files.
NTPResourceCache decides which one to serve according to the flag. Once
this fully launches, we will simply remove the previous implementation.
3. The new design follows the CSS rules described in
https://gallery.googleplex.com/projects/MCHbtQVoQ2HCZeKud1YOmPiI.
The requirement that the two sets of bulletpoints determine the width of
the content box has been achieved by JS (the CSS is complicated enough as
it is :-( ).
Tested with the bookmark bar on/off, with a custom theme on/off, and in
front of a UX designer :)
BUG=693525
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
Review-Url: https://codereview.chromium.org/2804823002
Cr-Commit-Position: refs/heads/master@{#466817}
Committed:
https://chromium.googlesource.com/chromium/src/+/a8443118aa963ba364ee9687b82d...
==========