1// Copyright (C) 2019 The Android Open Source Project 2// 3// Licensed under the Apache License, Version 2.0 (the "License"); 4// you may not use this file except in compliance with the License. 5// You may obtain a copy of the License at 6// 7// http://www.apache.org/licenses/LICENSE-2.0 8// 9// Unless required by applicable law or agreed to in writing, software 10// distributed under the License is distributed on an "AS IS" BASIS, 11// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12// See the License for the specific language governing permissions and 13// limitations under the License. 14 15// This code can be used in unittests where we can't read CSS variables. 16// Also we cannot have global constructors beacause when the javascript is 17// loaded, the CSS might not be ready yet. 18export let TRACK_SHELL_WIDTH = 100; 19export let SIDEBAR_WIDTH = 100; 20export let TRACK_BORDER_COLOR = '#ffc0cb'; 21export let TOPBAR_HEIGHT = 48; 22export let SELECTION_STROKE_COLOR = '#00344596'; 23export let SELECTION_FILL_COLOR = '#8398e64d'; 24export let OVERVIEW_TIMELINE_NON_VISIBLE_COLOR = '#c8c8c8cc'; 25export let DEFAULT_DETAILS_CONTENT_HEIGHT = 280; 26export let BACKGROUND_COLOR = '#ffffff'; 27export let FOREGROUND_COLOR = '#222'; 28export let COLLAPSED_BACKGROUND = '#ffffff'; 29export let EXPANDED_BACKGROUND = '#ffffff'; 30 31export function initCssConstants() { 32 TRACK_SHELL_WIDTH = getCssNum('--track-shell-width') ?? TRACK_SHELL_WIDTH; 33 SIDEBAR_WIDTH = getCssNum('--sidebar-width') ?? SIDEBAR_WIDTH; 34 TRACK_BORDER_COLOR = getCssStr('--track-border-color') ?? TRACK_BORDER_COLOR; 35 TOPBAR_HEIGHT = getCssNum('--topbar-height') ?? TOPBAR_HEIGHT; 36 SELECTION_STROKE_COLOR = 37 getCssStr('--selection-stroke-color') ?? SELECTION_STROKE_COLOR; 38 SELECTION_FILL_COLOR = 39 getCssStr('--selection-fill-color') ?? SELECTION_FILL_COLOR; 40 OVERVIEW_TIMELINE_NON_VISIBLE_COLOR = 41 getCssStr('--overview-timeline-non-visible-color') ?? 42 OVERVIEW_TIMELINE_NON_VISIBLE_COLOR; 43 DEFAULT_DETAILS_CONTENT_HEIGHT = 44 getCssNum('--details-content-height') ?? DEFAULT_DETAILS_CONTENT_HEIGHT; 45 BACKGROUND_COLOR = getCssStr('--main-background-color') ?? BACKGROUND_COLOR; 46 FOREGROUND_COLOR = getCssStr('--main-foreground-color') ?? FOREGROUND_COLOR; 47 COLLAPSED_BACKGROUND = 48 getCssStr('--collapsed-background') ?? COLLAPSED_BACKGROUND; 49 EXPANDED_BACKGROUND = 50 getCssStr('--expanded-background') ?? EXPANDED_BACKGROUND; 51} 52 53function getCssStr(prop: string): string | undefined { 54 if (typeof window === 'undefined') return undefined; 55 const body = window.document.body; 56 const value = window.getComputedStyle(body).getPropertyValue(prop); 57 // Note: getPropertyValue() returns an empty string if not set 58 // https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue#return_value 59 return value === '' ? undefined : value; 60} 61 62function getCssNum(prop: string): number | undefined { 63 const str = getCssStr(prop); 64 if (str === undefined) return undefined; 65 const match = str.match(/^\W*(\d+)px(|\!important')$/); 66 if (!match) throw Error(`Could not parse CSS property "${str}" as a number`); 67 return Number(match[1]); 68} 69