chrome-devtools-frontend 1.0.1625079 → 1.0.1626437

package/front_end/ui/legacy/components/inline_editor/FontEditorUnitConverter.ts

@@ -1,250 +0,0 @@
-// Copyright 2020 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import * as SDK from '../../../../core/sdk/sdk.js';
-import * as CssOverviewModule from '../../../../panels/css_overview/css_overview.js';
-import * as UI from '../../legacy.js';
-
-const computedArrayFontSizeIndex = 6;
-
-function getPxMultiplier(): number {
-  return 1;
-}
-async function getEmMultiplier(isFontSizeProperty?: boolean): Promise<number> {
-  const selectedNode = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
-  let currentFontSize;
-  if (selectedNode?.parentNode && selectedNode.nodeName() !== 'HTML') {
-    const [model] =
-        SDK.TargetManager.TargetManager.instance().models(CssOverviewModule.CSSOverviewModel.CSSOverviewModel);
-    const fontSizeNodeId = isFontSizeProperty ? selectedNode.parentNode.id : selectedNode.id;
-    const computedFontSize = await model.getComputedStyleForNode(fontSizeNodeId).then(findFontSizeValue);
-    const computedFontSizeValue = computedFontSize.replace(/[a-z]/g, '');
-    currentFontSize = parseFloat(computedFontSizeValue);
-  } else {
-    currentFontSize = 16;
-  }
-  return currentFontSize;
-}
-
-async function getRemMultiplier(): Promise<number> {
-  const selectedNode = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
-  const htmlNode = findHtmlNode(selectedNode);
-  if (!htmlNode?.id) {
-    return 16;
-  }
-  const [model] =
-      SDK.TargetManager.TargetManager.instance().models(CssOverviewModule.CSSOverviewModel.CSSOverviewModel);
-  const computedRootFontSize = await model.getComputedStyleForNode(htmlNode.id).then(findFontSizeValue);
-  const rootFontSizeValue = computedRootFontSize.replace(/[a-z]/g, '');
-  const rootFontSize = parseFloat(rootFontSizeValue);
-  return rootFontSize;
-}
-
-async function getPercentMultiplier(isFontSizeProperty?: boolean): Promise<number> {
-  const emMultiplier = await getEmMultiplier(isFontSizeProperty);
-  const percMultiplier = emMultiplier / 100;
-  return percMultiplier;
-}
-
-async function getVhMultiplier(): Promise<number> {
-  const viewportObject = await getViewportObject();
-  if (!viewportObject) {
-    return 1;
-  }
-  const viewportHeight = viewportObject.height;
-  const vhMultiplier = viewportHeight / 100;
-  return vhMultiplier;
-}
-
-async function getVwMultiplier(): Promise<number> {
-  const viewportObject = await getViewportObject();
-  if (!viewportObject) {
-    return 1;
-  }
-  const viewportWidth = viewportObject.width;
-  const vwMultiplier = viewportWidth / 100;
-  return vwMultiplier;
-}
-
-async function getVminMultiplier(): Promise<number> {
-  const viewportObject = await getViewportObject();
-  if (!viewportObject) {
-    return 1;
-  }
-  const viewportWidth = viewportObject.width;
-  const viewportHeight = viewportObject.height;
-  const minViewportSize = Math.min(viewportWidth, viewportHeight);
-  const vminMultiplier = minViewportSize / 100;
-  return vminMultiplier;
-}
-
-async function getVmaxMultiplier(): Promise<number> {
-  const viewportObject = await getViewportObject();
-  if (!viewportObject) {
-    return 1;
-  }
-  const viewportWidth = viewportObject.width;
-  const viewportHeight = viewportObject.height;
-  const maxViewportSize = Math.max(viewportWidth, viewportHeight);
-  const vmaxMultiplier = maxViewportSize / 100;
-  return vmaxMultiplier;
-}
-
-function getCmMultiplier(): number {
-  return 37.795;
-}
-
-function getMmMultiplier(): number {
-  return 3.7795;
-}
-
-function getInMultiplier(): number {
-  return 96;
-}
-
-function getPtMultiplier(): number {
-  return 4 / 3;
-}
-
-function getPcMultiplier(): number {
-  return 16;
-}
-
-function findFontSizeValue(computedObject: {
-  computedStyle: Array<{
-    name: string,
-    value: string,
-  }>,
-  getError: () => void,
-}): string {
-  const computedArray: Array<{
-    name: string,
-    value: string,
-  }> = computedObject.computedStyle;
-  let index = computedArrayFontSizeIndex;
-  if (computedArray[index].name && computedArray[index].name !== 'font-size') {
-    for (let i = 0; i < computedArray.length; i++) {
-      if (computedArray[i].name === 'font-size') {
-        index = i;
-        break;
-      }
-    }
-  }
-  return computedArray[index].value;
-}
-
-function findHtmlNode(selectedNode: SDK.DOMModel.DOMNode|null): SDK.DOMModel.DOMNode|null {
-  let node: SDK.DOMModel.DOMNode|(SDK.DOMModel.DOMNode | null) = selectedNode;
-  while (node && node.nodeName() !== 'HTML') {
-    if (node.parentNode) {
-      node = node.parentNode;
-    } else {
-      break;
-    }
-  }
-  return node;
-}
-
-const widthEvaluateParams = {
-  expression: 'window.innerWidth',
-  includeCommandLineAPI: false,
-  silent: true,
-  returnByValue: false,
-  generatePreview: false,
-  userGesture: false,
-  awaitPromise: true,
-  throwOnSideEffect: false,
-  disableBreaks: true,
-  replMode: false,
-  allowUnsafeEvalBlockedByCSP: false,
-};
-
-const heightEvaluateParams = {
-  expression: 'window.innerHeight',
-  includeCommandLineAPI: false,
-  silent: true,
-  returnByValue: false,
-  generatePreview: false,
-  userGesture: false,
-  awaitPromise: true,
-  throwOnSideEffect: false,
-  disableBreaks: true,
-  replMode: false,
-  allowUnsafeEvalBlockedByCSP: false,
-};
-
-async function getViewportObject(): Promise<{
-  width: number,
-  height: number,
-}|null> {
-  const currentExecutionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
-  let width, height;
-  if (currentExecutionContext) {
-    const widthObject = await currentExecutionContext.evaluate(widthEvaluateParams, false, false);
-    const heightObject = await currentExecutionContext.evaluate(heightEvaluateParams, false, false);
-    if ('error' in widthObject || 'error' in heightObject) {
-      return null;
-    }
-    if (widthObject.object) {
-      width = widthObject.object.value;
-    }
-    if (heightObject.object) {
-      height = heightObject.object.value;
-    }
-  }
-  if (width === undefined || height === undefined) {
-    const selectedNode = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
-    if (!selectedNode) {
-      return null;
-    }
-    const pageLayout = await selectedNode.domModel().target().pageAgent().invoke_getLayoutMetrics();
-    const zoom = pageLayout.visualViewport.zoom ? pageLayout.visualViewport.zoom : 1;
-    height = pageLayout.visualViewport.clientHeight / zoom;
-    width = pageLayout.visualViewport.clientWidth / zoom;
-  }
-  return {width, height};
-}
-
-const unitConversionMap = new Map<string, (isFontSize?: boolean) => number | Promise<number>>();
-unitConversionMap.set('px', getPxMultiplier);
-unitConversionMap.set('em', getEmMultiplier);
-unitConversionMap.set('rem', getRemMultiplier);
-unitConversionMap.set('%', getPercentMultiplier);
-unitConversionMap.set('vh', getVhMultiplier);
-unitConversionMap.set('vw', getVwMultiplier);
-unitConversionMap.set('vmin', getVminMultiplier);
-unitConversionMap.set('vmax', getVmaxMultiplier);
-unitConversionMap.set('cm', getCmMultiplier);
-unitConversionMap.set('mm', getMmMultiplier);
-unitConversionMap.set('in', getInMultiplier);
-unitConversionMap.set('pt', getPtMultiplier);
-unitConversionMap.set('pc', getPcMultiplier);
-
-export async function getUnitConversionMultiplier(
-    prevUnit: string, newUnit: string, isFontSize?: boolean): Promise<number> {
-  if (prevUnit === '') {
-    prevUnit = 'em';
-  }
-  if (newUnit === '') {
-    newUnit = 'em';
-  }
-  let prevUnitMultiplier, newUnitMultiplier;
-  const prevUnitFunction = unitConversionMap.get(prevUnit);
-  const newUnitFunction = unitConversionMap.get(newUnit);
-  if (prevUnitFunction && newUnitFunction) {
-    if (prevUnit === 'em' || prevUnit === '%') {
-      prevUnitMultiplier = await prevUnitFunction(isFontSize);
-    } else {
-      prevUnitMultiplier = await prevUnitFunction();
-    }
-    if (newUnit === 'em' || newUnit === '%') {
-      newUnitMultiplier = await newUnitFunction(isFontSize);
-    } else {
-      newUnitMultiplier = await newUnitFunction();
-    }
-  } else {
-    return 1;
-  }
-  return prevUnitMultiplier / newUnitMultiplier;
-}

package/front_end/ui/legacy/components/inline_editor/FontEditorUtils.ts

@@ -1,204 +0,0 @@
-// Copyright 2020 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import * as SDK from '../../../../core/sdk/sdk.js';
-import * as CssOverviewModule from '../../../../panels/css_overview/css_overview.js';
-
-// The following regexes are used within the Font Editor and will only parse valid property values.
-// Example Input/Outputs:
-// font-size: "20px" -> (20)(px)
-// line-height: "0.5em" -> (0.5)(em)
-// font-weight: "300" -> (300);
-// letter-spacing: -.625rem -> (-.625)(rem)
-const fontSizeRegex = /(^[\+\d\.]+)([a-zA-Z%]+)/;
-const lineHeightRegex = /(^[\+\d\.]+)([a-zA-Z%]*)/;
-const fontWeightRegex = /(^[\+\d\.]+)/;
-const letterSpacingRegex = /([\+-0-9\.]+)([a-zA-Z%]+)/;
-
-const fontSizeUnits = new Set(['px', 'em', 'rem', '%', 'vh', 'vw']);
-const lineHeightUnits = new Set(['', 'px', 'em', '%']);
-const letterSpacingUnits = new Set(['em', 'rem', 'px']);
-
-const fontSizeKeyValuesArray = [
-  '',
-  'xx-small',
-  'x-small',
-  'smaller',
-  'small',
-  'medium',
-  'large',
-  'larger',
-  'x-large',
-  'xx-large',
-];
-const lineHeightKeyValuesArray = ['', 'normal'];
-const fontWeightKeyValuesArray = ['', 'lighter', 'normal', 'bold', 'bolder'];
-const letterSpacingKeyValuesArray = ['', 'normal'];
-
-export const GlobalValues = ['inherit', 'initial', 'unset'];
-
-fontSizeKeyValuesArray.push(...GlobalValues);
-lineHeightKeyValuesArray.push(...GlobalValues);
-fontWeightKeyValuesArray.push(...GlobalValues);
-letterSpacingKeyValuesArray.push(...GlobalValues);
-
-const fontSizeKeyValues = new Set(fontSizeKeyValuesArray);
-const lineHeightKeyValues = new Set(lineHeightKeyValuesArray);
-const fontWeightKeyValues = new Set(fontWeightKeyValuesArray);
-const letterSpacingKeyValues = new Set(letterSpacingKeyValuesArray);
-
-const fontSizeRangeMap = new Map([
-  // Common Units
-  ['px', {min: 0, max: 72, step: 1}],
-  ['em', {min: 0, max: 4.5, step: .1}],
-  ['rem', {min: 0, max: 4.5, step: .1}],
-  ['%', {min: 0, max: 450, step: 1}],
-  ['vh', {min: 0, max: 10, step: .1}],
-  ['vw', {min: 0, max: 10, step: .1}],
-
-  // Extra Units
-  ['vmin', {min: 0, max: 10, step: .1}],
-  ['vmax', {min: 0, max: 10, step: .1}],
-  ['cm', {min: 0, max: 2, step: .1}],
-  ['mm', {min: 0, max: 20, step: .1}],
-  ['in', {min: 0, max: 1, step: .01}],
-  ['pt', {min: 0, max: 54, step: 1}],
-  ['pc', {min: 0, max: 4.5, step: .1}],
-]);
-
-const lineHeightRangeMap = new Map([
-  // Common Units
-  ['', {min: 0, max: 2, step: .1}],
-  ['em', {min: 0, max: 2, step: .1}],
-  ['%', {min: 0, max: 200, step: 1}],
-  ['px', {min: 0, max: 32, step: 1}],
-
-  // Extra Units
-  ['rem', {min: 0, max: 2, step: .1}],
-  ['vh', {min: 0, max: 4.5, step: .1}],
-  ['vw', {min: 0, max: 4.5, step: .1}],
-  ['vmin', {min: 0, max: 4.5, step: .1}],
-  ['vmax', {min: 0, max: 4.5, step: .1}],
-  ['cm', {min: 0, max: 1, step: .1}],
-  ['mm', {min: 0, max: 8.5, step: .1}],
-  ['in', {min: 0, max: .5, step: .1}],
-  ['pt', {min: 0, max: 24, step: 1}],
-  ['pc', {min: 0, max: 2, step: .1}],
-]);
-
-const fontWeightRangeMap = new Map([
-  ['', {min: 100, max: 700, step: 100}],
-]);
-
-const letterSpacingRangeMap = new Map([
-  // Common Units
-  ['px', {min: -10, max: 10, step: .01}],
-  ['em', {min: -0.625, max: 0.625, step: .001}],
-  ['rem', {min: -0.625, max: 0.625, step: .001}],
-
-  // Extra Units
-  ['%', {min: -62.5, max: 62.5, step: .1}],
-  ['vh', {min: -1.5, max: 1.5, step: .01}],
-  ['vw', {min: -1.5, max: 1.5, step: .01}],
-  ['vmin', {min: -1.5, max: 1.5, step: .01}],
-  ['vmax', {min: -1.5, max: 1.5, step: .01}],
-  ['cm', {min: -0.25, max: .025, step: .001}],
-  ['mm', {min: -2.5, max: 2.5, step: .01}],
-  ['in', {min: -0.1, max: 0.1, step: .001}],
-  ['pt', {min: -7.5, max: 7.5, step: .01}],
-  ['pc', {min: -0.625, max: 0.625, step: .001}],
-]);
-
-export const FontSizeStaticParams = {
-  regex: fontSizeRegex,
-  units: fontSizeUnits,
-  keyValues: fontSizeKeyValues,
-  rangeMap: fontSizeRangeMap,
-  defaultUnit: 'px',
-};
-
-export const LineHeightStaticParams = {
-  regex: lineHeightRegex,
-  units: lineHeightUnits,
-  keyValues: lineHeightKeyValues,
-  rangeMap: lineHeightRangeMap,
-  defaultUnit: '',
-};
-
-export const FontWeightStaticParams = {
-  regex: fontWeightRegex,
-  units: null,
-  keyValues: fontWeightKeyValues,
-  rangeMap: fontWeightRangeMap,
-  defaultUnit: null,
-};
-
-export const LetterSpacingStaticParams = {
-  regex: letterSpacingRegex,
-  units: letterSpacingUnits,
-  keyValues: letterSpacingKeyValues,
-  rangeMap: letterSpacingRangeMap,
-  defaultUnit: 'em',
-};
-
-export const SystemFonts = [
-  'Arial',
-  'Bookman',
-  'Candara',
-  'Comic Sans MS',
-  'Courier New',
-  'Garamond',
-  'Georgia',
-  'Helvetica',
-  'Impact',
-  'Palatino',
-  'Roboto',
-  'Times New Roman',
-  'Verdana',
-];
-
-export const GenericFonts = [
-  'serif',
-  'sans-serif',
-  'monspace',
-  'cursive',
-  'fantasy',
-  'system-ui',
-  'ui-serif',
-  'ui-sans-serif',
-  'ui-monospace',
-  'ui-rounded',
-  'emoji',
-  'math',
-  'fangsong',
-];
-
-export async function generateComputedFontArray(): Promise<string[]> {
-  const modelArray =
-      SDK.TargetManager.TargetManager.instance().models(CssOverviewModule.CSSOverviewModel.CSSOverviewModel);
-  if (modelArray) {
-    const cssOverviewModel = modelArray[0];
-    if (cssOverviewModel) {
-      const {fontInfo} = await cssOverviewModel.getNodeStyleStats();
-      const computedFontArray = Array.from(fontInfo.keys());
-      return computedFontArray;
-    }
-  }
-  return [];
-}
-
-export function getRoundingPrecision(step: number): 0|1|2|3 {
-  switch (step) {
-    case 1:
-      return 0;
-    case .1:
-      return 1;
-    case .01:
-      return 2;
-    case .001:
-      return 3;
-    default:
-      return 0;
-  }
-}

package/front_end/ui/legacy/components/inline_editor/fontEditor.css

@@ -1,185 +0,0 @@
-/*
- * Copyright 2020 The Chromium Authors
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-:host {
-  user-select: none;
-  padding: 4px 12px 12px;
-}
-
-.error-input {
-  box-shadow: 0 0 0 1px var(--sys-color-error);
-}
-
-.error-text {
-  color: var(--sys-color-error);
-  padding: 6px 0;
-}
-
-.warning-input {
-  --override-warning-input-color: #ffdd9e;
-
-  box-shadow: 0 0 0 1px var(--override-warning-input-color);
-}
-
-.theme-with-dark-background .warning-input,
-:host-context(.theme-with-dark-background) .warning-input {
-  --override-warning-input-color: rgb(97 63 0);
-}
-
-.hide-warning {
-  display: none;
-}
-
-.font-section-header {
-  font-weight: normal;
-  font-size: 17px;
-  text-align: left;
-}
-
-.font-section-subheader {
-  font-size: 12px;
-  text-align: left;
-  font-weight: bold;
-}
-
-.font-selector-section {
-  overflow-y: auto;
-  padding-bottom: 10px;
-}
-
-.font-selector-input {
-  width: 204px;
-  text-align-last: center;
-}
-
-.font-reset-button {
-  width: 100%;
-  margin-top: 10px;
-}
-
-.font-section {
-  border-top: 1px solid var(--sys-color-divider);
-}
-
-select.font-editor-select {
-  min-width: 50px;
-  min-height: 27px;
-}
-
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  display: none;
-  margin: 0;
-}
-
-.preview-text {
-  max-width: 300px;
-  word-break: normal;
-  overflow-wrap: anywhere;
-  display: block;
-}
-
-.rendered-font-list-label {
-  font-weight: bold;
-  font-size: 12px;
-}
-
-.rendered-font-list {
-  padding: 5px 0;
-}
-
-.shadow-editor-field {
-  height: 24px;
-  margin-top: 8px;
-  font-size: 12px;
-  flex-shrink: 0;
-}
-
-.shadow-editor-field:last-of-type {
-  margin-bottom: 8px;
-}
-
-.shadow-editor-flex-field {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-}
-
-.shadow-editor-field.shadow-editor-blur-field {
-  margin-top: 40px;
-}
-
-.shadow-editor-2D-slider {
-  position: absolute;
-  height: 88px;
-  width: 88px;
-  border: 1px solid var(--divider-line);
-  border-radius: 2px;
-}
-
-.shadow-editor-label {
-  display: inline-block;
-  width: 70px;
-  height: 24px;
-  line-height: 24px;
-  margin-right: 8px;
-  text-align: left;
-}
-
-.shadow-editor-button-left,
-.shadow-editor-button-right {
-  width: 74px;
-  height: 24px;
-  padding: 3px 7px;
-  line-height: 16px;
-  border: 1px solid var(--divider-line);
-  color: var(--sys-color-on-surface);
-  background-color: var(--sys-color-cdt-base-container);
-  text-align: center;
-  font-weight: 500;
-}
-
-.shadow-editor-button-left {
-  border-radius: 2px 0 0 2px;
-}
-
-.shadow-editor-button-right {
-  border-radius: 0 2px 2px 0;
-  border-left-width: 0;
-}
-
-.shadow-editor-button-left:hover,
-.shadow-editor-button-right:hover {
-  box-shadow: 0 1px 1px var(--divider-line);
-}
-
-.shadow-editor-button-left:focus,
-.shadow-editor-button-right:focus {
-  background-color: var(--sys-color-state-focus-highlight);
-}
-
-.shadow-editor-text-input {
-  width: 50px;
-  margin: 8px;
-  text-align: center;
-  box-shadow: var(--legacy-focus-ring-inactive-shadow);
-}
-
-.spectrum-switcher {
-  border-radius: 2px;
-  height: 20px;
-  width: 20px;
-  padding: 2px;
-  margin-left: 5px;
-}
-
-.spectrum-switcher:hover {
-  background-color: var(--sys-color-state-hover-on-subtle);
-}
-
-.spectrum-switcher:focus-visible {
-  background-color: var(--sys-color-state-focus-highlight);
-}