CSS background-color jp-layout-color1 not showing up properly

[andrewfulton9]

Description

Recently, when I build off of master, selected menu items in the debugger have stopped having the background color show that they are selected. I suspect this issue isn't debugger specific though. In the gif below I try to demonstrate the css not working by changing between the table and tree views of the variable panel in the debugger. Notice how it isn't clear from the buttons which one is clicked.

Below is what the styles section of the inspector console is showing:

Reproduce

From a master branch build:

1. open a notebook
2. turn on debugger
3. toggle back and forth between tree and table view of the variables panel in the debugger.

Expected behavior

a button that is toggled on has a grey background to indicate it is toggled.

Context

• Operating System and version:
  linux ubuntu 18.04.6
• Browser and version:
  Chrome 96.0.4664.45
• JupyterLab version:
  -Master Branch

Troubleshoot Output

Paste the output from running `jupyter troubleshoot` from the command line here.
You may want to sanitize the paths in the output.

Command Line Output

Paste the output from your command line running `jupyter lab` here, use `--debug` if possible.

Browser Output

Paste the output from your browser Javascript console here, if applicable.

[echarles]

Thx @andrewfulton9 for opening this.

@fcollonval To give you a bit more background, this issue has been seen while reviewing #10298 but it looks like a general issue in master. I remember you have participated to large changes around CSS (blueprint removal...). Could this issue be related to those changes?

[krassowski]

On 3.x the panel is headers are grey, so the white background for the buttons makes sense:

The change to white bakcground was introduced in #11369 (CC @hbcarlos) (unrelated to blueprint removal). Previously we had:

.jp-DebuggerSidebar-body .jp-stack-panel-header {
  background-color: var(--jp-layout-color2);
}

While currently we have:

jupyterlab/packages/ui-components/style/sidepanel.css

Lines 36 to 46 in 2263baa

	.lm-AccordionPanel .jp-AccordionPanel-title {
	box-sizing: border-box;
	line-height: 25px;
	margin: 0px;
	display: flex;
	align-items: center;
	background: var(--jp-toolbar-background);
	border-bottom: var(--jp-border-width) solid var(--jp-toolbar-border-color);
	box-shadow: var(--jp-toolbar-box-shadow);
	font-size: var(--jp-ui-font-size0);
	}

where --jp-toolbar-background is white in the default theme.

I think I preferred the old style where toolbars had the grey background - it was strengthening the visual hierarchy.

Please note that in addition to changing the background of toolbars to background: var(--jp-layout-color2); we would also need to change:

• background of some buttons (.jp-ToolbarButtonComponent in Breakpoints, Source, etc) in hover state - we cold match to the behaviour of .jp-ToolbarButton in Variables)
• and we could consider adding back the 1 pixel border of darker grey on the toolbars

What do you all think?

[hbcarlos]

Indeed this comes from the accordion panel PR. We need to change the toolbar's background color in the accordion panel. The actual colors are a bit confusing.

I believe this could be a "good first issue". What do you think?

[echarles]

I believe this could be a "good first issue". What do you think?

This blocks for now #10298 so we could pick that asap.

I have not tested, but the point is that the button do not change, I wonder if changing the toolbar color will fix the issue.

[fcollonval]

The idea of switching to white background is to move towards homogeneity in side panels. The debugger panel was the only one using section title with non-white color (compare to the extension manager, tabs/running panels, property inspector). I don't have strong opinion regarding the styling itself; only that we should push towards homogeneity between widgets used to improve usability, accessibility and maintenance.

[echarles]

At the end, we need to ensure the button has a visual state (on/off) as shown in https://user-images.githubusercontent.com/3627835/121290061-9930b100-c8ab-11eb-9700-055cab2f19a1.gif

Before, the button (transparent?) was grey, and then when clicked it was becoming white.

We have lost that now. If the default is white, the pressed should be grey, right?

[fcollonval]

If the default is white, the pressed should be grey, right?

Yes it should

[andrewfulton9]

I created PR #11688 to change the icon background colors in the debugger. I haven't seen any other places this is an issue, so I think this may be all that's needed.

[echarles]

Closed via #11688