Note; The formatting in comment #1 is prior to the fix for issue 760751. Attached is a screenshot after that fix.

Deleted: Screenshot 2017-09-18 at 3.07.09 PM.png 51.6 KB

	Screenshot 2017-09-18 at 3.07.09 PM.png 51.6 KB View Download

 I also noticed while playing with this that turning off night light does not seem to persist after reboot.

No changes have been pushed to Night Light in a while. That's an indication that these are regressions in some other places

I suspect the slider was relying on some styling that has since changed or been removed. A bisect may help identify what changed, but it needs to be fixed regardless :)

This CL: https://chromium-review.googlesource.com/c/chromium/src/+/656527 is the culprit. In particular the use of:

-webkit-margin-start: var(--cr-section-indent-padding);

which made indented sections get a huge indentation, and as a result the night light slider went off the page.


What would be the right fix for this assuming we want to keep that large indentation?

IMO, it would look better if the labels were not indented and only the timeline is indented.

AFAIK, We have flexibility on what is indented, but not on the amount (pixels) of the index. By that I mean that the indent is intended to be consistent throughout the UI (so we can change it for everywhere, but let's not have different amounts on different pages).

CSS suggestion, I've seen issues with mixing width: 100%; and flex: 1; where things would go off the right side. I've been fixing those by removing width: 100%; entries and using only flex to expand the element. (I believe we could go the other way too, but I think going with flex is a good choice).

+1 to avoiding 'width: 100%' in favor of flex (and not mixing the two).

Thanks. I don't think flex + width: 100% is the problem here. Rather, it's that the slider's width is hardcoded at 570px [1] per UX specs.

I remember while I was writing it, without having an explicit pixel width, it didn't work. We can lower that width such that it doesn't go off the page. However, having a more flexible solution is better. I tried display: flex and flex-root; without width, but they didn't work. What are your suggestions?


[1]: https://cs.chromium.org/chromium/src/chrome/browser/resources/settings/device_page/night_light_slider.html?q=f:night_light_slider&sq=package:chromium&l=19

I took a closer look at night-light-slider. Layout can be tricky, and the slider itself is using a mix of absolute and relative positioning. The solution is to make the top #sliderContainer div 'width: 100%', then make the slider itself flex.

I've put up a CL with that. You can test that and either review it as-is or use it as a starting point. (I didn't test it very thoroughly).

https://chromium-review.googlesource.com/c/chromium/src/+/702920

Thanks I'll look at it shortly.

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/7ca228ae969f593a6ff9c47fa7307f7fec7f9ebe

commit 7ca228ae969f593a6ff9c47fa7307f7fec7f9ebe
Author: Ahmed Fakhry <afakhry@google.com>
Date: Mon Oct 09 20:06:31 2017

Night Light: Fix the schedule slider going off the page.

This CL makes the slider's width dynamic rather than fixed, and
updates the knobs positions when the slider is resized.

BUG= 766334 

Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I7a95128c3fa958d7b67451d1d30997e21899bb9d
Reviewed-on: https://chromium-review.googlesource.com/704396
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Commit-Queue: Ahmed Fakhry <afakhry@chromium.org>
Cr-Commit-Position: refs/heads/master@{#507464}
[modify] https://crrev.com/7ca228ae969f593a6ff9c47fa7307f7fec7f9ebe/chrome/browser/resources/settings/device_page/compiled_resources2.gyp
[modify] https://crrev.com/7ca228ae969f593a6ff9c47fa7307f7fec7f9ebe/chrome/browser/resources/settings/device_page/display.html
[modify] https://crrev.com/7ca228ae969f593a6ff9c47fa7307f7fec7f9ebe/chrome/browser/resources/settings/device_page/night_light_slider.html
[modify] https://crrev.com/7ca228ae969f593a6ff9c47fa7307f7fec7f9ebe/chrome/browser/resources/settings/device_page/night_light_slider.js