mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-01-25 22:26:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Fixed coloring issue for urlbar and use lazy getters for gradient generator, b=no-bug, c=common, workspaces

Browse Source
This commit is contained in:
mr. m
2025-12-10 00:47:01 +01:00
parent 0be950c42a
commit e4c36574b9
3 changed files with 35 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/browser/base/content/zen-panels/gradient-generator.inc
View File

@@ -82,21 +82,23 @@
# They must all go from the middle to the right side. They must always stay verically centered.
# And reach to 180 on the right side, meaning we must divide the width in 16 segments.
<box data-type="explicit-black-white" data-algo="float" data-num-dots="1"
data-position="180,180" style="background: rgb(0, 0, 0);"></box>
data-position="337.5,180" style="background: rgb(224, 224, 224);"></box>
<box data-type="explicit-black-white" data-algo="float" data-num-dots="1"
data-position="202.5,180" style="background: rgb(32, 32, 32);"></box>
<box data-type="explicit-black-white" data-algo="float" data-num-dots="1"
data-position="225,180" style="background: rgb(64, 64, 64);"></box>
<box data-type="explicit-black-white" data-algo="float" data-num-dots="1"
data-position="247.5,180" style="background: rgb(96, 96, 96);"></box>
<box data-type="explicit-black-white" data-algo="float" data-num-dots="1"
data-position="270,180" style="background: rgb(128, 128, 128);"></box>
<box data-type="explicit-black-white" data-algo="float" data-num-dots="1"
data-position="292.5,180" style="background: rgb(160, 160, 160);"></box>
data-position="337.5,180" style="background: rgb(224, 224, 224);"></box>
<box data-type="explicit-black-white" data-algo="float" data-num-dots="1"
data-position="315,180" style="background: rgb(192, 192, 192);"></box>
<box data-type="explicit-black-white" data-algo="float" data-num-dots="1"
data-position="337.5,180" style="background: rgb(224, 224, 224);"></box>
data-position="292.5,180" style="background: rgb(160, 160, 160);"></box>
<box data-type="explicit-black-white" data-algo="float" data-num-dots="1"
data-position="270,180" style="background: rgb(128, 128, 128);"></box>
<box data-type="explicit-black-white" data-algo="float" data-num-dots="1"
data-position="247.5,180" style="background: rgb(96, 96, 96);"></box>
<box data-type="explicit-black-white" data-algo="float" data-num-dots="1"
data-position="225,180" style="background: rgb(64, 64, 64);"></box>
<box data-type="explicit-black-white" data-algo="float" data-num-dots="1"
data-position="202.5,180" style="background: rgb(32, 32, 32);"></box>
<box data-type="explicit-black-white" data-algo="float" data-num-dots="1"
data-position="180,180" style="background: rgb(0, 0, 0);"></box>
</hbox>
</hbox>
<toolbarbutton id="PanelUI-zen-gradient-generator-color-page-right" class="toolbarbutton-1" />
@@ -122,11 +124,11 @@
</box>
<html:input type="range" value="0.4" step="0.001" id="PanelUI-zen-gradient-generator-opacity"
#ifdef XP_MACOSX
min="0.15"
max="0.8"
#else
max="0.75"
min="0.35"
#else
max="0.9"
min="0.35"
#endif
/>
</vbox>

6
src/zen/common/styles/zen-omnibox.css
View File

@@ -263,7 +263,7 @@
& .urlbar-background {
--zen-urlbar-background-base: light-dark(
#fbfbfb,
color-mix(in srgb, hsl(0, 0%, 1%), var(--zen-colors-primary) 30%)
color-mix(in srgb, hsl(0, 0%, 6.7%), var(--zen-colors-primary) 30%)
);
@media -moz-pref('zen.theme.acrylic-elements') {
--zen-urlbar-background-transparent: color-mix(
@@ -505,8 +505,8 @@
--urlbar-container-height: 62px !important;
--urlbar-margin-inline: 10px !important;
min-width: min(90%, 50rem) !important;
width: var(--zen-urlbar-width, min(90%, 50rem)) !important;
min-width: min(90%, 62rem) !important;
width: var(--zen-urlbar-width, min(90%, 62rem)) !important;
font-size: 1.15em !important;
@media (-moz-platform: macos) {
font-size: 1.5em !important;

26
src/zen/workspaces/ZenGradientGenerator.mjs
View File

@@ -41,8 +41,15 @@ function parseSinePath(pathStr) {
return points;
}
const MAX_OPACITY = AppConstants.platform === 'macosx' ? 0.8 : 0.9;
const MIN_OPACITY = AppConstants.platform === 'macosx' ? 0.15 : 0.35;
const lazy = {};
ChromeUtils.defineLazyGetter(lazy, 'MAX_OPACITY', () => {
return parseFloat(document.getElementById('PanelUI-zen-gradient-generator-opacity').max);
});
ChromeUtils.defineLazyGetter(lazy, 'MIN_OPACITY', () => {
return parseFloat(document.getElementById('PanelUI-zen-gradient-generator-opacity').min);
});
const EXPLICIT_LIGHTNESS_TYPE = 'explicit-lightness';
const EXPLICIT_BLACKWHITE_TYPE = 'explicit-black-white';
@@ -440,7 +447,7 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
const gradient = this.panel.querySelector('.zen-theme-picker-gradient');
const rect = gradient.getBoundingClientRect();
const padding = 30; // each side
const dotHalfSize = 38 / 2; // half the size of the dot
const dotHalfSize = 29; // half the size of the dot. -11 for correct centering
x += dotHalfSize;
y += dotHalfSize;
rect.width += padding * 2; // Adjust width and height for padding
@@ -1095,15 +1102,14 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
colorToBlendOpacity = 0.35;
} else if (AppConstants.platform === 'macosx') {
colorToBlend = [255, 255, 255];
colorToBlendOpacity = 0.3;
colorToBlendOpacity = 0.35;
}
if (colorToBlend) {
const blendedAlpha = Math.min(
1,
opacity + MIN_OPACITY + colorToBlendOpacity * (1 - (opacity + MIN_OPACITY))
opacity + lazy.MIN_OPACITY + colorToBlendOpacity * (1 - (opacity + lazy.MIN_OPACITY))
);
baseColor = this.blendColors(baseColor, colorToBlend, blendedAlpha * 100);
opacity += colorToBlendOpacity * (1 - opacity);
}
return `rgba(${baseColor[0]}, ${baseColor[1]}, ${baseColor[2]}, ${opacity})`;
}
@@ -1386,13 +1392,13 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
const [_, secondStop, thirdStop] = document.querySelectorAll(
'#PanelUI-zen-gradient-generator-slider-wave-gradient stop'
);
// Opacity can only be between MIN_OPACITY to MAX_OPACITY. Make opacity relative to that range
if (opacity < MIN_OPACITY) {
// Opacity can only be between lazy.MIN_OPACITY to lazy.MAX_OPACITY. Make opacity relative to that range
if (opacity < lazy.MIN_OPACITY) {
opacity = 0;
} else if (opacity > MAX_OPACITY) {
} else if (opacity > lazy.MAX_OPACITY) {
opacity = 1;
} else {
opacity = (opacity - MIN_OPACITY) / (MAX_OPACITY - MIN_OPACITY);
opacity = (opacity - lazy.MIN_OPACITY) / (lazy.MAX_OPACITY - lazy.MIN_OPACITY);
}
if (isDefaultTheme) {
opacity = 1; // If it's the default theme, we want the wave to be