Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-28 15:23:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1541563 - Sync 131 - Use SVG files for breakpoints directly r=loganfsmyth

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D25990

--HG--
extra : moz-landing-system : lando
This commit is contained in:
David Walsh 2019-04-05 17:33:04 +00:00
parent c2880f865d
commit 00394217bb
3 changed files with 10 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
devtools/client/debugger/new/images/BreakpointSvg.js
View File

@ -1,21 +0,0 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
import React from "react";
const BREAKPOINT_SVG =
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 15" width="60" height="15"><path d="M53.07.5H1.5c-.54 0-1 .46-1 1v12c0 .54.46 1 1 1h51.57c.58 0 1.15-.26 1.53-.7l4.7-6.3-4.7-6.3c-.38-.44-.95-.7-1.53-.7z"/></svg>';
const COLUMN_MARKER_SVG =
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 13" width="11" height="13"><path d="M5.07.5H1.5c-.54 0-1 .46-1 1v10c0 .54.46 1 1 1h3.57c.58 0 1.15-.26 1.53-.7l3.7-5.3-3.7-5.3C6.22.76 5.65.5 5.07.5z"/></svg>';
type Props = {
column: boolean
};
export default function BreakpointSvg({ column }: Props) {
const svg = column ? COLUMN_MARKER_SVG : BREAKPOINT_SVG;
/* eslint-disable react/no-danger */
return <span dangerouslySetInnerHTML={{ __html: svg }} />;
}

7
devtools/client/debugger/new/src/components/Editor/Breakpoint.js
View File

@ -4,10 +4,8 @@
// @flow
import React, { PureComponent } from "react";
import ReactDOM from "react-dom";
import { PureComponent } from "react";
import classnames from "classnames";
import BreakpointSvg from "../shared/BreakpointSvg";
import { getDocument, toEditorLine } from "../../utils/editor";
import { getSelectedLocation } from "../../utils/source-maps";
@ -20,7 +18,8 @@ import type { EditorItemActions } from "./menus/editor";
import type { Source, Breakpoint as BreakpointType } from "../../types";
const breakpointSvg = document.createElement("div");
ReactDOM.render(<BreakpointSvg column={false} />, breakpointSvg);
breakpointSvg.innerHTML =
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 15" width="60" height="15"><path d="M53.07.5H1.5c-.54 0-1 .46-1 1v12c0 .54.46 1 1 1h51.57c.58 0 1.15-.26 1.53-.7l4.7-6.3-4.7-6.3c-.38-.44-.95-.7-1.53-.7z"/></svg>';
type Props = {
breakpoint: BreakpointType,

14
devtools/client/debugger/new/src/components/Editor/ColumnBreakpoint.js
View File

@ -3,12 +3,11 @@
* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
// @flow
import React, { PureComponent } from "react";
import ReactDOM from "react-dom";
import { PureComponent } from "react";
import classnames from "classnames";
import { getDocument } from "../../utils/editor";
import BreakpointSvg from "../shared/BreakpointSvg";
import { showMenu } from "devtools-contextmenu";
import { getDocument } from "../../utils/editor";
import { breakpointItems, createBreakpointItems } from "./menus/breakpoints";
// eslint-disable-next-line max-len
@ -27,11 +26,12 @@ type Props = {
breakpointActions: BreakpointItemActions
};
const breakpointImg = document.createElement("button");
ReactDOM.render(<BreakpointSvg column={true} />, breakpointImg);
const breakpointButton = document.createElement("button");
breakpointButton.innerHTML =
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 13" width="11" height="13"><path d="M5.07.5H1.5c-.54 0-1 .46-1 1v10c0 .54.46 1 1 1h3.57c.58 0 1.15-.26 1.53-.7l3.7-5.3-3.7-5.3C6.22.76 5.65.5 5.07.5z"/></svg>';
function makeBookmark({ breakpoint }, { onClick, onContextMenu }) {
const bp = breakpointImg.cloneNode(true);
const bp = breakpointButton.cloneNode(true);
const isActive = breakpoint && !breakpoint.disabled;
const isDisabled = breakpoint && breakpoint.disabled;