| ... |
... |
@@ -920,20 +920,49 @@ class _RFPHelper { |
|
920
|
920
|
* @param {CSSStyleDeclaration} style - The computed style for the element we
|
|
921
|
921
|
* want to grab the color from.
|
|
922
|
922
|
* @param {string} property - The name of the property we want.
|
|
|
923
|
+ * @param {object} [options] - Optional details.
|
|
|
924
|
+ * @param {string} [options.fallbackProperty] - A fallback to use instead if
|
|
|
925
|
+ * the property doesn't have a computed value.
|
|
|
926
|
+ * @param {string} [options.currentColorProperty] - The name of a property to
|
|
|
927
|
+ * use as the currentColor.
|
|
923
|
928
|
*
|
|
924
|
929
|
* @returns {InspectorRGBATuple} - The RGBA color. The "r", "g", "b" fields
|
|
925
|
930
|
* are relative to the 0-255 color range. The "a" field is in the 0-1 range.
|
|
926
|
931
|
*/
|
|
927
|
|
- _convertToRGBA(win, style, property) {
|
|
|
932
|
+ _convertToRGBA(win, style, property, options) {
|
|
928
|
933
|
let cssColor = style.getPropertyValue(property);
|
|
929
|
934
|
if (!cssColor) {
|
|
|
935
|
+ if (options?.fallbackProperty) {
|
|
|
936
|
+ lazy.logConsole.debug(
|
|
|
937
|
+ "Using fallback property for RGBA.",
|
|
|
938
|
+ property,
|
|
|
939
|
+ options.fallbackProperty
|
|
|
940
|
+ );
|
|
|
941
|
+ return this._convertToRGBA(win, style, options.fallbackProperty);
|
|
|
942
|
+ }
|
|
930
|
943
|
lazy.logConsole.error(`Missing color "${property}"`);
|
|
931
|
944
|
return { r: 0, g: 0, b: 0, a: 0 };
|
|
932
|
945
|
}
|
|
933
|
946
|
const currentColorRegex =
|
|
934
|
947
|
/(^|[^a-zA-Z0-9_-])currentColor($|[^a-zA-Z0-9_-])/g;
|
|
935
|
948
|
if (currentColorRegex.test(cssColor)) {
|
|
936
|
|
- const currentColor = style.color;
|
|
|
949
|
+ let currentColor;
|
|
|
950
|
+ if (options?.currentColorProperty) {
|
|
|
951
|
+ const currRGBA = this._convertToRGBA(
|
|
|
952
|
+ win,
|
|
|
953
|
+ style,
|
|
|
954
|
+ options.currentColorProperty
|
|
|
955
|
+ );
|
|
|
956
|
+ currentColor = `rgba(${currRGBA.r}, ${currRGBA.g}, ${currRGBA.b}, ${currRGBA.a})`;
|
|
|
957
|
+ } else {
|
|
|
958
|
+ lazy.logConsole.warning(
|
|
|
959
|
+ "Missing a specification for the currentColor, using computed color."
|
|
|
960
|
+ );
|
|
|
961
|
+ // Use the current "color" value. NOTE: this may not be exactly what we
|
|
|
962
|
+ // want since it's current value may be effected by :hover, :active,
|
|
|
963
|
+ // :focus, etc. But we want this to be a stable colour for the theme.
|
|
|
964
|
+ currentColor = style.color;
|
|
|
965
|
+ }
|
|
937
|
966
|
cssColor = cssColor.replace(currentColorRegex, (_, pre, post) => {
|
|
938
|
967
|
return pre + currentColor + post;
|
|
939
|
968
|
});
|
| ... |
... |
@@ -944,7 +973,7 @@ class _RFPHelper { |
|
944
|
973
|
cssColor
|
|
945
|
974
|
);
|
|
946
|
975
|
}
|
|
947
|
|
- /* Can drop the document argument after bugzilla bug 1973684 (142). */
|
|
|
976
|
+ // Can drop the document argument after bugzilla bug 1973684 (142).
|
|
948
|
977
|
const colorRGBA = win.InspectorUtils.colorToRGBA(cssColor, win.document);
|
|
949
|
978
|
if (!colorRGBA) {
|
|
950
|
979
|
lazy.logConsole.error(
|
| ... |
... |
@@ -985,12 +1014,13 @@ class _RFPHelper { |
|
985
|
1014
|
* @param {Window} win - The window to calculate the color for.
|
|
986
|
1015
|
* @param {CSSStyleDeclaration} style - The computed style for the #nav-bar
|
|
987
|
1016
|
* element.
|
|
|
1017
|
+ * @param {boolean} verticalTabs - Whether vertical tabs are enabled.
|
|
988
|
1018
|
*
|
|
989
|
1019
|
* @returns {InspectorRGBATuple} - The calculated color, which will be opaque.
|
|
990
|
1020
|
*/
|
|
991
|
|
- _calculateUrlbarContainerColor(win, style) {
|
|
|
1021
|
+ _calculateUrlbarContainerColor(win, style, verticalTabs) {
|
|
992
|
1022
|
let colorRGBA;
|
|
993
|
|
- if (!Services.prefs.getBoolPref(kPrefVerticalTabs)) {
|
|
|
1023
|
+ if (!verticalTabs) {
|
|
994
|
1024
|
lazy.logConsole.debug("Toolbar background used.");
|
|
995
|
1025
|
colorRGBA = this._convertToRGBA(win, style, "--toolbar-bgcolor");
|
|
996
|
1026
|
if (colorRGBA.a === 1) {
|
| ... |
... |
@@ -1069,12 +1099,19 @@ class _RFPHelper { |
|
1069
|
1099
|
if (letterboxingEnabled) {
|
|
1070
|
1100
|
// Want the effective colour of various elements without any alpha values
|
|
1071
|
1101
|
// so they can be used consistently.
|
|
|
1102
|
+
|
|
|
1103
|
+ const verticalTabs = Services.prefs.getBoolPref(kPrefVerticalTabs);
|
|
|
1104
|
+ const chromeTextColorProperty = verticalTabs
|
|
|
1105
|
+ ? "--toolbox-textcolor"
|
|
|
1106
|
+ : "--toolbar-color";
|
|
|
1107
|
+
|
|
1072
|
1108
|
const navbarStyle = win.getComputedStyle(
|
|
1073
|
1109
|
win.document.getElementById("nav-bar")
|
|
1074
|
1110
|
);
|
|
1075
|
1111
|
const containerRGBA = this._calculateUrlbarContainerColor(
|
|
1076
|
1112
|
win,
|
|
1077
|
|
- navbarStyle
|
|
|
1113
|
+ navbarStyle,
|
|
|
1114
|
+ verticalTabs
|
|
1078
|
1115
|
);
|
|
1079
|
1116
|
urlbarBackgroundRGBA = this._composeRGBA(
|
|
1080
|
1117
|
this._convertToRGBA(
|
| ... |
... |
@@ -1084,17 +1121,28 @@ class _RFPHelper { |
|
1084
|
1121
|
),
|
|
1085
|
1122
|
containerRGBA
|
|
1086
|
1123
|
);
|
|
|
1124
|
+ // NOTE: In the default theme (no "lwtheme" attribute) with
|
|
|
1125
|
+ // browser.theme.native-theme set to false, --toolbar-field-color can be
|
|
|
1126
|
+ // set to "inherit", which means it will have a blank computed value. We
|
|
|
1127
|
+ // fallback to --toolbar-color or --toolbox-textcolor in this case.
|
|
|
1128
|
+ // Similarly, for windows OS, it can be set to "currentColor".
|
|
1087
|
1129
|
urlbarTextRGBA = this._composeRGBA(
|
|
1088
|
|
- this._convertToRGBA(win, navbarStyle, "--toolbar-field-color"),
|
|
|
1130
|
+ this._convertToRGBA(win, navbarStyle, "--toolbar-field-color", {
|
|
|
1131
|
+ fallbackProperty: chromeTextColorProperty,
|
|
|
1132
|
+ currentColorProperty: chromeTextColorProperty,
|
|
|
1133
|
+ }),
|
|
1089
|
1134
|
urlbarBackgroundRGBA
|
|
1090
|
1135
|
);
|
|
1091
|
|
- /* Separator between the urlbar container #nav-bar and the tabbox. */
|
|
|
1136
|
+ // Separator between the urlbar container #nav-bar and the tabbox.
|
|
|
1137
|
+ // For the default theme, this can be set to --border-color-card, which
|
|
|
1138
|
+ // can use "currentColor".
|
|
1092
|
1139
|
const tabboxStyle = win.getComputedStyle(win.gBrowser.tabbox);
|
|
1093
|
1140
|
contentSeparatorRGBA = this._composeRGBA(
|
|
1094
|
1141
|
this._convertToRGBA(
|
|
1095
|
1142
|
win,
|
|
1096
|
1143
|
tabboxStyle,
|
|
1097
|
|
- "--chrome-content-separator-color"
|
|
|
1144
|
+ "--chrome-content-separator-color",
|
|
|
1145
|
+ { currentColorProperty: chromeTextColorProperty }
|
|
1098
|
1146
|
),
|
|
1099
|
1147
|
containerRGBA
|
|
1100
|
1148
|
);
|
| ... |
... |
@@ -1114,8 +1162,8 @@ class _RFPHelper { |
|
1114
|
1162
|
contrastRatio
|
|
1115
|
1163
|
);
|
|
1116
|
1164
|
urlbarBackgroundDark = bgColor.relativeLuminance < 0.5;
|
|
1117
|
|
- /* Very low contrast ratio. For reference the default light theme has
|
|
1118
|
|
- * a contrast ratio of ~1.1. */
|
|
|
1165
|
+ // Very low contrast ratio. For reference the default light theme has
|
|
|
1166
|
+ // a contrast ratio of ~1.1.
|
|
1119
|
1167
|
lowBackgroundOutlineContrast = contrastRatio < 1.05;
|
|
1120
|
1168
|
}
|
|
1121
|
1169
|
for (const { name, colorRGBA } of [
|