Dynamically change the safe area inset based on the shown ration for the browser controls. This is used when to keep the web contents from the display cutout area when Chrome is drawing edge to edge. Why this is important: 1. When Chrome draws edge to edge, bottom controls in the web contents can be covered by bottom system bars. This feature will place web elements using safe-area-insets* to place their controls gradually (e.g. m.youtube.com) 2. Similar feature behavior is already available for Chrome on iOS[1] and other browsers (e.g. Safari on iOS). We are aligning Chrome on Android to parity with the iOS behavior as part of this change. 3. safe-area-inset* is an established feature since Chrome M69. This feature is available to all platform; at the moment only Android would put cutout into viewport, but developers can use the env() variables on all platforms the same way and we would set it if another platform did intrude into the viewport. Detailed design & implementation, please see crbug.com/324436581 [1] Chrome on iOS behavior: https://drive.google.com/file/d/19kaNBAr8RFQ0X9odMjx4g-t28lnCHSS_/view?usp=drive_link
Samples: https://drive.google.com/file/d/1IhIiYMaG5bK2n-ufahEqkQwcPTok7sFe/view?usp=drive_link