1596381 - auto-hiding the sidebar in userChrome.css is not working anymore

Status: VERIFIED INVALID

(Firefox :: General, defect)

Description

[freakmiki]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:72.0) Gecko/20100101 Firefox/72.0

Steps to reproduce:

1. Enabled toolkit.legacyUserProfileCustomizations.stylesheets
2. Created userChrome.css in appropriate directory
3. Entered the following css to automatically hide the sidebar unless hovered over

:root {
  --sidebar-hover-width: 18px;
  --sidebar-visible-width: 320px;
}

#sidebar-box {
  position: relative !important;
  overflow-x: hidden !important;
  margin-right: calc(var(--sidebar-hover-width) * -1) !important;
  left: var(--sidebar-hover-width) !important;
  min-width: var(--sidebar-hover-width) !important;
  max-width: var(--sidebar-hover-width) !important;

  opacity: 0.2 !important;
  transition: all 250ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
}

#sidebar-box:hover {
  margin-right: calc(var(--sidebar-visible-width) * -1) !important;
  left: var(--sidebar-visible-width) !important;
  min-width: var(--sidebar-visible-width) !important;
  max-width: var(--sidebar-visible-width) !important;
  
  opacity: 1 !important;
  transition: all 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
}

#sidebar {
  opacity: 0.2 !important;

  transition: all 200ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
}

#sidebar:hover {
  opacity: 1 !important;

  transition: all 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
}

Actual results:

The sidebar disappears completely and I'm not able to see it when hovering over the 18px on the left side of the browser. Shortly before a website is shown, I'm able to see the sidebar-box if I change the opacity.

Expected results:

When hovering over the left side of the browser, the sidebar should animate in. This was working until yesterday 2019-11-13 .

Comment 1

[Marco Bonardo [:mak]]

not specific to bookmarks, it would be interesting if you could use mozregression to find which bug regressed your rules, then it may also be easier to update them.

Comment 2

[freakmiki]

app_name: firefox
build_date: 2019-11-12 21:15:44.899000
build_file: C:\Users\bzoop\.mozilla\mozregression\persist\e7c2e224629a--autoland--target.zip
build_type: inbound
build_url: https://firefox-ci-tc.services.mozilla.com/api/queue/v1/task/CzdU6B_6QIGgCt8uRnXbxg/runs/0/artifacts/public%2Fbuild%2Ftarget.zip
changeset: e7c2e224629a2245860707cc92080b204014f61b
pushlog_url: https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=48a708577712a2eb1b19aafcda25b2aa0e607629&tochange=e7c2e224629a2245860707cc92080b204014f61b
repo_name: autoland
repo_url: https://hg.mozilla.org/integration/autoland
task_id: CzdU6B_6QIGgCt8uRnXbxg

2019-11-22T18:38:49: INFO : Narrowed inbound regression window from [0b0779e6, 1a85c571] (3 builds) to [5e6b050c, 1a85c571] (2 builds) (~1 steps left)
2019-11-22T18:38:49: DEBUG : Starting merge handling...
2019-11-22T18:38:49: DEBUG : Using url: https://hg.mozilla.org/integration/autoland/json-pushes?changeset=1a85c571a4645798ba4d9295ba2504acac149ac8&full=1
2019-11-22T18:38:50: DEBUG : Found commit message:
Bug 1576946 - Remove nsStackFrame platform code. r=mats

Differential Revision: https://phabricator.services.mozilla.com/D49487

2019-11-22T18:38:50: DEBUG : Did not find a branch, checking all integration branches
2019-11-22T18:38:50: INFO : The bisection is done.
2019-11-22T18:38:50: INFO : Stopped

This is what I reached using mozregression.

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug is a regression, but please revert this change in case of error.

Comment 4

[Tim Nguyen :ntim]

Note that it's your responsibility to keep userChrome.css up to date with the latest browser changes, hence why userchrome.css is tagged as legacy.

You should have better luck finding help at https://www.reddit.com/r/FirefoxCSS/ , so please try that next time you have userChrome.css questions :)

Anyway, your code just required removing 4 lines:

:root {
  --sidebar-hover-width: 18px;
  --sidebar-visible-width: 320px;
}

#sidebar-box {
  position: relative !important;
  overflow-x: hidden !important;

  min-width: var(--sidebar-hover-width) !important;
  max-width: var(--sidebar-hover-width) !important;

  opacity: 0.2 !important;
  transition: all 250ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
}

#sidebar-box:hover {
  min-width: var(--sidebar-visible-width) !important;
  max-width: var(--sidebar-visible-width) !important;
  
  opacity: 1 !important;
  transition: all 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
}

#sidebar {
  opacity: 0.2 !important;

  transition: all 200ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
}

#sidebar:hover {
  opacity: 1 !important;

  transition: all 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
}

Comment 5

[freakmiki]

This does however not fix the problem.
A cursory glance at this would've shown you that the sidebar will now certainly shrink and resize, but it will also move and resize the whole webpage which this was specificly designed not to do before (see those calculations in the margin and left). It will also not hide completely.

As this is still bugged, is there any other way to achieve this kind of modification or will I and a few others just be SOL for this?

Comment 6

[freakmiki]

For future reference, here is what can be used as a starting point for getting just about the same behavior as before.

:root {
  --sidebar-hover-width: 18px;
  --sidebar-visible-width: 320px;
}
#sidebar-box {
  min-width: var(--sidebar-visible-width) !important;
  max-width: none !important;
}
#sidebar-box {
  position: relative !important;
  transition: all 200ms !important;
  min-width: var(--sidebar-hover-width) !important;
  max-width: var(--sidebar-hover-width) !important;
  opacity: 0 !important;
  transition: all 250ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
}
#sidebar-box:hover {
  transition: all 200ms !important;
  min-width: var(--sidebar-visible-width) !important;
  max-width: var(--sidebar-visible-width) !important;
  margin-right: calc((var(--sidebar-visible-width) - var(--sidebar-hover-width)) * -1) !important;
  z-index:1;
  opacity: 1 !important;
  transition: all 250ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
}