From ca448f8e58e1ee7206cddeded5057141965c5a74 Mon Sep 17 00:00:00 2001 From: LiZhenhai-MBP14 <5935568+jackhai9@users.noreply.github.com> Date: Sat, 5 Sep 2026 11:41:09 +0800 Subject: [PATCH] Render depth profile with opaque colors --- scripts/binance-orderbook-trade.user.js | 8 ++++---- src/binance-orderbook-trade/dom/depth-profile.js | 6 +++--- src/binance-orderbook-trade/index.user.js | 2 +- test/dom/binance-orderbook-trade/depth-profile.test.js | 10 +++++++--- 4 files changed, 15 insertions(+), 11 deletions(-) diff --git a/scripts/binance-orderbook-trade.user.js b/scripts/binance-orderbook-trade.user.js index 93c11a6..78eccb3 100644 --- a/scripts/binance-orderbook-trade.user.js +++ b/scripts/binance-orderbook-trade.user.js @@ -3,7 +3,7 @@ // @namespace binance.orderbook.trade // @icon data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22%23f0b90b%22%2F%3E%3Ctext%20x%3D%2232%22%20y%3D%2249%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2242%22%20font-weight%3D%22800%22%20fill%3D%22%23111827%22%3EJ%3C%2Ftext%3E%3C%2Fsvg%3E // @icon64 data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22%23f0b90b%22%2F%3E%3Ctext%20x%3D%2232%22%20y%3D%2249%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2242%22%20font-weight%3D%22800%22%20fill%3D%22%23111827%22%3EJ%3C%2Ftext%3E%3C%2Fsvg%3E -// @version 2.7.200 +// @version 2.7.201 // @author jackhai9 // @description 单击订单簿价格，按当前开仓/平仓 tab 自动填数量并执行下单，内置数量倍率面板 // @match https://www.binance.com/*/futures/* @@ -4045,7 +4045,7 @@ display: block; width: 100%; height: 100%; - background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-BasicBg, #fff) 24%, transparent)); + background: transparent; pointer-events: none; } #${DEPTH_PROFILE_ID}[data-expanded="false"] .jh-depth-profile-canvas { @@ -4204,8 +4204,8 @@ const bids = bucketVisibleLevels(profile.bids, geometry); const maxVisibleCumulative = getMaxVisibleCumulative(asks, bids); if (maxVisibleCumulative > 0) { - drawSide(context, asks, maxVisibleCumulative, rect.width, "rgba(246, 70, 93, .62)"); - drawSide(context, bids, maxVisibleCumulative, rect.width, "rgba(14, 203, 129, .62)"); + drawSide(context, asks, maxVisibleCumulative, rect.width, "#f6465d"); + drawSide(context, bids, maxVisibleCumulative, rect.width, "#0ecb81"); } const currentPriceY = geometry.priceToCoordinate(currentPrice); if (!Number.isFinite(currentPriceY)) return true; diff --git a/src/binance-orderbook-trade/dom/depth-profile.js b/src/binance-orderbook-trade/dom/depth-profile.js index 03f127b..fb4fa17 100644 --- a/src/binance-orderbook-trade/dom/depth-profile.js +++ b/src/binance-orderbook-trade/dom/depth-profile.js @@ -153,7 +153,7 @@ function installStyle(document) { display: block; width: 100%; height: 100%; - background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-BasicBg, #fff) 24%, transparent)); + background: transparent; pointer-events: none; } #${DEPTH_PROFILE_ID}[data-expanded="false"] .jh-depth-profile-canvas { @@ -327,8 +327,8 @@ export function renderDepthProfile(root, profile, geometry, currentPrice) { const bids = bucketVisibleLevels(profile.bids, geometry); const maxVisibleCumulative = getMaxVisibleCumulative(asks, bids); if (maxVisibleCumulative > 0) { - drawSide(context, asks, maxVisibleCumulative, rect.width, 'rgba(246, 70, 93, .62)'); - drawSide(context, bids, maxVisibleCumulative, rect.width, 'rgba(14, 203, 129, .62)'); + drawSide(context, asks, maxVisibleCumulative, rect.width, '#f6465d'); + drawSide(context, bids, maxVisibleCumulative, rect.width, '#0ecb81'); } const currentPriceY = geometry.priceToCoordinate(currentPrice); diff --git a/src/binance-orderbook-trade/index.user.js b/src/binance-orderbook-trade/index.user.js index 52bbe80..8100c6b 100644 --- a/src/binance-orderbook-trade/index.user.js +++ b/src/binance-orderbook-trade/index.user.js @@ -3,7 +3,7 @@ // @namespace binance.orderbook.trade // @icon data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22%23f0b90b%22%2F%3E%3Ctext%20x%3D%2232%22%20y%3D%2249%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2242%22%20font-weight%3D%22800%22%20fill%3D%22%23111827%22%3EJ%3C%2Ftext%3E%3C%2Fsvg%3E // @icon64 data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22%23f0b90b%22%2F%3E%3Ctext%20x%3D%2232%22%20y%3D%2249%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2242%22%20font-weight%3D%22800%22%20fill%3D%22%23111827%22%3EJ%3C%2Ftext%3E%3C%2Fsvg%3E -// @version 2.7.200 +// @version 2.7.201 // @author jackhai9 // @description 单击订单簿价格，按当前开仓/平仓 tab 自动填数量并执行下单，内置数量倍率面板 // @match https://www.binance.com/*/futures/* diff --git a/test/dom/binance-orderbook-trade/depth-profile.test.js b/test/dom/binance-orderbook-trade/depth-profile.test.js index 0ca9a5a..cfb3469 100644 --- a/test/dom/binance-orderbook-trade/depth-profile.test.js +++ b/test/dom/binance-orderbook-trade/depth-profile.test.js @@ -282,7 +282,11 @@ test('creates a non-interactive canvas with an independently clickable toggle', assert.match(styleText, /pointer-events: auto/); assert.match( styleText, - /background: linear-gradient\(90deg, transparent, color-mix\(in srgb, var\(--color-BasicBg, #fff\) 24%, transparent\)\)/, + /\.jh-depth-profile-canvas\s*\{[^}]*background: transparent;/, + ); + assert.doesNotMatch( + styleText, + /\.jh-depth-profile-canvas\s*\{[^}]*color-mix\(/, ); assert.doesNotMatch( styleText, @@ -373,8 +377,8 @@ test('draws bid and ask bars plus the latest-trade divider', () => { assert.equal(root.style.height, '240px'); assert.equal(calls.filter((call) => Array.isArray(call) && call[0] === 'fillRect').length, 2); assert.deepEqual(fillStyles, [ - 'rgba(246, 70, 93, .62)', - 'rgba(14, 203, 129, .62)', + '#f6465d', + '#0ecb81', ]); assert.deepEqual( calls.filter((call) => Array.isArray(call) && call[0] === 'fillRect').map((call) => call[2]),