chrome://inspect sticky nav bar & padding under anchor

chrome://inspect sticky nav bar & padding under anchor

BUG=337765
R=pfeldman@chromium.org
NOTRY=true
TEST=Visit chrome://inspect, apply the CSS changes then compare the
     result with the previous version.
     Open many tabs (to overflow #pages), then click on the Pages tab.
     Old version: No spacing at top (= crbug.com/337765).
     New version: Space still appears at the top.

Committed: https://crrev.com/bc9022cfedb422ee2e18421cd5b8d79281dd7d84
Cr-Commit-Position: refs/heads/master@{#323879}

[pfeldman, 2015-02-24 15:41:26]

https://codereview.chromium.org/946713002/diff/1/chrome/browser/resources/ins...
File chrome/browser/resources/inspect/inspect.css (right):

https://codereview.chromium.org/946713002/diff/1/chrome/browser/resources/ins...
chrome/browser/resources/inspect/inspect.css:31: position: fixed;
You should instead have a header and a body with overflow.

[robwu, 2015-02-24 21:57:47]

https://codereview.chromium.org/946713002/diff/1/chrome/browser/resources/ins...
File chrome/browser/resources/inspect/inspect.css (right):

https://codereview.chromium.org/946713002/diff/1/chrome/browser/resources/ins...
chrome/browser/resources/inspect/inspect.css:31: position: fixed;
On 2015/02/24 15:41:26, pfeldman wrote:
> You should instead have a header and a body with overflow.

Done.

[pfeldman, 2015-02-26 09:33:02]

Can we take it one step further and make the header fixed w/ nice opacity?
Similarly to what chrome://settings offers?

[robwu, 2015-02-26 10:08:28]

On 2015/02/26 09:33:02, pfeldman wrote:
> Can we take it one step further and make the header fixed w/ nice opacity?
> Similarly to what chrome://settings offers?

chrome://settings's header is not transparent to me? (Linux, Chromium 40).
I've updated the CL and fixed the header position, the result looks visually
identical as before (with a white background for the fixed header).

[pfeldman, 2015-03-02 17:15:31]

(sorry i did not publish those from the previous review)

https://codereview.chromium.org/946713002/diff/20001/chrome/browser/resources...
File chrome/browser/resources/inspect/inspect.css (right):

https://codereview.chromium.org/946713002/diff/20001/chrome/browser/resources...
chrome/browser/resources/inspect/inspect.css:31: box-sizing: border-box;
Lets do 

* {
    box-sizing: border-box;
}

https://codereview.chromium.org/946713002/diff/20001/chrome/browser/resources...
chrome/browser/resources/inspect/inspect.css:32: max-height: 100vh;
We don't use vh much in the source base.

[pfeldman, 2015-03-02 17:18:02]

> chrome://settings's header is not transparent to me? (Linux, Chromium 40).
> I've updated the CL and fixed the header position, the result looks visually
> identical as before (with a white background for the fixed header).

The header in chrome://settings has a nice subtle effect:

background-image: -webkit-linear-gradient(white, white 40%, rgba(255, 255, 255,
0.92));

[robwu, 2015-04-04 09:18:48]

On 2015/03/02 17:18:02, pfeldman wrote:
> > chrome://settings's header is not transparent to me? (Linux, Chromium 40).
> > I've updated the CL and fixed the header position, the result looks visually
> > identical as before (with a white background for the fixed header).
> 
> The header in chrome://settings has a nice subtle effect:
> 
> background-image: -webkit-linear-gradient(white, white 40%, rgba(255, 255,
255,
> 0.92));

I see. I've added this background to the header in the latest patch set.

https://codereview.chromium.org/946713002/diff/20001/chrome/browser/resources...
File chrome/browser/resources/inspect/inspect.css (right):

https://codereview.chromium.org/946713002/diff/20001/chrome/browser/resources...
chrome/browser/resources/inspect/inspect.css:31: box-sizing: border-box;
On 2015/03/02 17:15:31, pfeldman wrote:
> Lets do 
> 
> * {
>     box-sizing: border-box;
> }

Done. I've updated some values because of the effect on calculations, to get
closer to the original appearance.
Though I didn't modify the width of the port input in the port forwarding
dialog, because 5 digits can easily be fit in 4em.

https://codereview.chromium.org/946713002/diff/20001/chrome/browser/resources...
chrome/browser/resources/inspect/inspect.css:32: max-height: 100vh;
On 2015/03/02 17:15:31, pfeldman wrote:
> We don't use vh much in the source base.

What's the issue with vh?
100vh is exactly what we want here, and the (relatively new) vh unit exists for
a reason.

[pfeldman, 2015-04-04 09:32:30]

https://codereview.chromium.org/946713002/diff/20001/chrome/browser/resources...
File chrome/browser/resources/inspect/inspect.css (right):

https://codereview.chromium.org/946713002/diff/20001/chrome/browser/resources...
chrome/browser/resources/inspect/inspect.css:32: max-height: 100vh;
what is the effect you are trying to achieve? isn't this the same as 100% in
this case?

[robwu, 2015-04-04 09:39:37]

https://codereview.chromium.org/946713002/diff/20001/chrome/browser/resources...
File chrome/browser/resources/inspect/inspect.css (right):

https://codereview.chromium.org/946713002/diff/20001/chrome/browser/resources...
chrome/browser/resources/inspect/inspect.css:32: max-height: 100vh;
On 2015/04/04 09:32:30, pfeldman wrote:
> what is the effect you are trying to achieve? isn't this the same as 100% in
> this case?

When the window is large enough, then there is no perceivable difference.
However, when the window's height is small, then the navigation content
overflows, but scrollbars are not displayed, which prevents the user from using
the bottom parts of the navigation menu.

Currently chrome://inspect doesn't account for small windows, but I fixed the
issue since I was editing the file anyway.

[pfeldman, 2015-04-04 10:31:17]

> When the window is large enough, then there is no perceivable difference.
> However, when the window's height is small, then the navigation content
> overflows, but scrollbars are not displayed, which prevents the user from
using
> the bottom parts of the navigation menu.

Got it, thanks for the explanation!

lgtm

[pfeldman, 2015-04-04 10:40:26]

The CQ bit was checked by pfeldman@chromium.org

[commit-bot: I haz the power, 2015-04-04 10:40:33]

CQ is trying da patch. Follow status at
 https://chromium-cq-status.appspot.com/patch-status/946713002/60001

[commit-bot: I haz the power, 2015-04-04 10:40:59]

Committed patchset #4 (id:60001)

[commit-bot: I haz the power, 2015-04-04 10:41:44]

Patchset 4 (id:??) landed as
https://crrev.com/bc9022cfedb422ee2e18421cd5b8d79281dd7d84
Cr-Commit-Position: refs/heads/master@{#323879}