| Index: third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
|
| diff --git a/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js b/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
|
| index 845ae7c8973a6e4c59b151a6bb52058008cb870e..391a4d6702b2513ed5ac61102be402f360e45e3f 100644
|
| --- a/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
|
| +++ b/third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js
|
| @@ -28,9 +28,8 @@
|
| * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
|
| * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
| */
|
| -
|
| -WebInspector.highlightedSearchResultClassName = "highlighted-search-result";
|
| -WebInspector.highlightedCurrentSearchResultClassName = "current-search-result";
|
| +WebInspector.highlightedSearchResultClassName = 'highlighted-search-result';
|
| +WebInspector.highlightedCurrentSearchResultClassName = 'current-search-result';
|
|
|
| /**
|
| * @param {!Element} element
|
| @@ -41,34 +40,33 @@ WebInspector.highlightedCurrentSearchResultClassName = "current-search-result";
|
| * @param {?string=} hoverCursor
|
| * @param {number=} startDelay
|
| */
|
| -WebInspector.installDragHandle = function(element, elementDragStart, elementDrag, elementDragEnd, cursor, hoverCursor, startDelay)
|
| -{
|
| - /**
|
| - * @param {!Event} event
|
| - */
|
| - function onMouseDown(event)
|
| - {
|
| - var dragHandler = new WebInspector.DragHandler();
|
| - var dragStart = dragHandler.elementDragStart.bind(dragHandler, element, elementDragStart, elementDrag, elementDragEnd, cursor, event);
|
| - if (startDelay)
|
| - startTimer = setTimeout(dragStart, startDelay);
|
| - else
|
| - dragStart();
|
| - }
|
| -
|
| - function onMouseUp()
|
| - {
|
| - if (startTimer)
|
| - clearTimeout(startTimer);
|
| - startTimer = null;
|
| - }
|
| -
|
| - var startTimer;
|
| - element.addEventListener("mousedown", onMouseDown, false);
|
| +WebInspector.installDragHandle = function(
|
| + element, elementDragStart, elementDrag, elementDragEnd, cursor, hoverCursor, startDelay) {
|
| + /**
|
| + * @param {!Event} event
|
| + */
|
| + function onMouseDown(event) {
|
| + var dragHandler = new WebInspector.DragHandler();
|
| + var dragStart = dragHandler.elementDragStart.bind(
|
| + dragHandler, element, elementDragStart, elementDrag, elementDragEnd, cursor, event);
|
| if (startDelay)
|
| - element.addEventListener("mouseup", onMouseUp, false);
|
| - if (hoverCursor !== null)
|
| - element.style.cursor = hoverCursor || cursor;
|
| + startTimer = setTimeout(dragStart, startDelay);
|
| + else
|
| + dragStart();
|
| + }
|
| +
|
| + function onMouseUp() {
|
| + if (startTimer)
|
| + clearTimeout(startTimer);
|
| + startTimer = null;
|
| + }
|
| +
|
| + var startTimer;
|
| + element.addEventListener('mousedown', onMouseDown, false);
|
| + if (startDelay)
|
| + element.addEventListener('mouseup', onMouseUp, false);
|
| + if (hoverCursor !== null)
|
| + element.style.cursor = hoverCursor || cursor;
|
| };
|
|
|
| /**
|
| @@ -79,165 +77,154 @@ WebInspector.installDragHandle = function(element, elementDragStart, elementDrag
|
| * @param {string} cursor
|
| * @param {!Event} event
|
| */
|
| -WebInspector.elementDragStart = function(targetElement, elementDragStart, elementDrag, elementDragEnd, cursor, event)
|
| -{
|
| - var dragHandler = new WebInspector.DragHandler();
|
| - dragHandler.elementDragStart(targetElement, elementDragStart, elementDrag, elementDragEnd, cursor, event);
|
| +WebInspector.elementDragStart = function(targetElement, elementDragStart, elementDrag, elementDragEnd, cursor, event) {
|
| + var dragHandler = new WebInspector.DragHandler();
|
| + dragHandler.elementDragStart(targetElement, elementDragStart, elementDrag, elementDragEnd, cursor, event);
|
| };
|
|
|
| /**
|
| - * @constructor
|
| + * @unrestricted
|
| */
|
| -WebInspector.DragHandler = function()
|
| -{
|
| +WebInspector.DragHandler = class {
|
| + constructor() {
|
| this._elementDragMove = this._elementDragMove.bind(this);
|
| this._elementDragEnd = this._elementDragEnd.bind(this);
|
| this._mouseOutWhileDragging = this._mouseOutWhileDragging.bind(this);
|
| -};
|
| -
|
| -WebInspector.DragHandler._glassPaneUsageCount = 0;
|
| -
|
| -WebInspector.DragHandler.prototype = {
|
| - _createGlassPane: function()
|
| - {
|
| - this._glassPaneInUse = true;
|
| - if (!WebInspector.DragHandler._glassPaneUsageCount++)
|
| - WebInspector.DragHandler._glassPane = new WebInspector.GlassPane(WebInspector.DragHandler._documentForMouseOut);
|
| - },
|
| -
|
| - _disposeGlassPane: function()
|
| - {
|
| - if (!this._glassPaneInUse)
|
| - return;
|
| - this._glassPaneInUse = false;
|
| - if (--WebInspector.DragHandler._glassPaneUsageCount)
|
| - return;
|
| - WebInspector.DragHandler._glassPane.dispose();
|
| - delete WebInspector.DragHandler._glassPane;
|
| - delete WebInspector.DragHandler._documentForMouseOut;
|
| - }
|
| -};
|
| -
|
| -/**
|
| - * @param {!Element} targetElement
|
| - * @param {?function(!MouseEvent):boolean} elementDragStart
|
| - * @param {function(!MouseEvent)} elementDrag
|
| - * @param {?function(!MouseEvent)} elementDragEnd
|
| - * @param {string} cursor
|
| - * @param {!Event} event
|
| - */
|
| -WebInspector.DragHandler.prototype.elementDragStart = function(targetElement, elementDragStart, elementDrag, elementDragEnd, cursor, event)
|
| -{
|
| + }
|
| +
|
| + _createGlassPane() {
|
| + this._glassPaneInUse = true;
|
| + if (!WebInspector.DragHandler._glassPaneUsageCount++)
|
| + WebInspector.DragHandler._glassPane = new WebInspector.GlassPane(WebInspector.DragHandler._documentForMouseOut);
|
| + }
|
| +
|
| + _disposeGlassPane() {
|
| + if (!this._glassPaneInUse)
|
| + return;
|
| + this._glassPaneInUse = false;
|
| + if (--WebInspector.DragHandler._glassPaneUsageCount)
|
| + return;
|
| + WebInspector.DragHandler._glassPane.dispose();
|
| + delete WebInspector.DragHandler._glassPane;
|
| + delete WebInspector.DragHandler._documentForMouseOut;
|
| + }
|
| +
|
| + /**
|
| + * @param {!Element} targetElement
|
| + * @param {?function(!MouseEvent):boolean} elementDragStart
|
| + * @param {function(!MouseEvent)} elementDrag
|
| + * @param {?function(!MouseEvent)} elementDragEnd
|
| + * @param {string} cursor
|
| + * @param {!Event} event
|
| + */
|
| + elementDragStart(targetElement, elementDragStart, elementDrag, elementDragEnd, cursor, event) {
|
| // Only drag upon left button. Right will likely cause a context menu. So will ctrl-click on mac.
|
| if (event.button || (WebInspector.isMac() && event.ctrlKey))
|
| - return;
|
| + return;
|
|
|
| if (this._elementDraggingEventListener)
|
| - return;
|
| + return;
|
|
|
| if (elementDragStart && !elementDragStart(/** @type {!MouseEvent} */ (event)))
|
| - return;
|
| + return;
|
|
|
| var targetDocument = event.target.ownerDocument;
|
| this._elementDraggingEventListener = elementDrag;
|
| this._elementEndDraggingEventListener = elementDragEnd;
|
| - console.assert((WebInspector.DragHandler._documentForMouseOut || targetDocument) === targetDocument,
|
| - "Dragging on multiple documents.");
|
| + console.assert(
|
| + (WebInspector.DragHandler._documentForMouseOut || targetDocument) === targetDocument,
|
| + 'Dragging on multiple documents.');
|
| WebInspector.DragHandler._documentForMouseOut = targetDocument;
|
| this._dragEventsTargetDocument = targetDocument;
|
| this._dragEventsTargetDocumentTop = targetDocument.defaultView.top.document;
|
|
|
| - targetDocument.addEventListener("mousemove", this._elementDragMove, true);
|
| - targetDocument.addEventListener("mouseup", this._elementDragEnd, true);
|
| - targetDocument.addEventListener("mouseout", this._mouseOutWhileDragging, true);
|
| + targetDocument.addEventListener('mousemove', this._elementDragMove, true);
|
| + targetDocument.addEventListener('mouseup', this._elementDragEnd, true);
|
| + targetDocument.addEventListener('mouseout', this._mouseOutWhileDragging, true);
|
| if (targetDocument !== this._dragEventsTargetDocumentTop)
|
| - this._dragEventsTargetDocumentTop.addEventListener("mouseup", this._elementDragEnd, true);
|
| + this._dragEventsTargetDocumentTop.addEventListener('mouseup', this._elementDragEnd, true);
|
|
|
| - if (typeof cursor === "string") {
|
| - this._restoreCursorAfterDrag = restoreCursor.bind(this, targetElement.style.cursor);
|
| - targetElement.style.cursor = cursor;
|
| - targetDocument.body.style.cursor = cursor;
|
| + if (typeof cursor === 'string') {
|
| + this._restoreCursorAfterDrag = restoreCursor.bind(this, targetElement.style.cursor);
|
| + targetElement.style.cursor = cursor;
|
| + targetDocument.body.style.cursor = cursor;
|
| }
|
| /**
|
| * @param {string} oldCursor
|
| * @this {WebInspector.DragHandler}
|
| */
|
| - function restoreCursor(oldCursor)
|
| - {
|
| - targetDocument.body.style.removeProperty("cursor");
|
| - targetElement.style.cursor = oldCursor;
|
| - this._restoreCursorAfterDrag = null;
|
| + function restoreCursor(oldCursor) {
|
| + targetDocument.body.style.removeProperty('cursor');
|
| + targetElement.style.cursor = oldCursor;
|
| + this._restoreCursorAfterDrag = null;
|
| }
|
| event.preventDefault();
|
| -};
|
| + }
|
|
|
| -WebInspector.DragHandler.prototype._mouseOutWhileDragging = function()
|
| -{
|
| + _mouseOutWhileDragging() {
|
| this._unregisterMouseOutWhileDragging();
|
| this._createGlassPane();
|
| -};
|
| + }
|
|
|
| -WebInspector.DragHandler.prototype._unregisterMouseOutWhileDragging = function()
|
| -{
|
| + _unregisterMouseOutWhileDragging() {
|
| if (!WebInspector.DragHandler._documentForMouseOut)
|
| - return;
|
| - WebInspector.DragHandler._documentForMouseOut.removeEventListener("mouseout", this._mouseOutWhileDragging, true);
|
| -};
|
| + return;
|
| + WebInspector.DragHandler._documentForMouseOut.removeEventListener('mouseout', this._mouseOutWhileDragging, true);
|
| + }
|
|
|
| -WebInspector.DragHandler.prototype._unregisterDragEvents = function()
|
| -{
|
| + _unregisterDragEvents() {
|
| if (!this._dragEventsTargetDocument)
|
| - return;
|
| - this._dragEventsTargetDocument.removeEventListener("mousemove", this._elementDragMove, true);
|
| - this._dragEventsTargetDocument.removeEventListener("mouseup", this._elementDragEnd, true);
|
| + return;
|
| + this._dragEventsTargetDocument.removeEventListener('mousemove', this._elementDragMove, true);
|
| + this._dragEventsTargetDocument.removeEventListener('mouseup', this._elementDragEnd, true);
|
| if (this._dragEventsTargetDocument !== this._dragEventsTargetDocumentTop)
|
| - this._dragEventsTargetDocumentTop.removeEventListener("mouseup", this._elementDragEnd, true);
|
| + this._dragEventsTargetDocumentTop.removeEventListener('mouseup', this._elementDragEnd, true);
|
| delete this._dragEventsTargetDocument;
|
| delete this._dragEventsTargetDocumentTop;
|
| -};
|
| + }
|
|
|
| -/**
|
| - * @param {!Event} event
|
| - */
|
| -WebInspector.DragHandler.prototype._elementDragMove = function(event)
|
| -{
|
| + /**
|
| + * @param {!Event} event
|
| + */
|
| + _elementDragMove(event) {
|
| if (event.buttons !== 1) {
|
| - this._elementDragEnd(event);
|
| - return;
|
| + this._elementDragEnd(event);
|
| + return;
|
| }
|
| if (this._elementDraggingEventListener(/** @type {!MouseEvent} */ (event)))
|
| - this._cancelDragEvents(event);
|
| -};
|
| + this._cancelDragEvents(event);
|
| + }
|
|
|
| -/**
|
| - * @param {!Event} event
|
| - */
|
| -WebInspector.DragHandler.prototype._cancelDragEvents = function(event)
|
| -{
|
| + /**
|
| + * @param {!Event} event
|
| + */
|
| + _cancelDragEvents(event) {
|
| this._unregisterDragEvents();
|
| this._unregisterMouseOutWhileDragging();
|
|
|
| if (this._restoreCursorAfterDrag)
|
| - this._restoreCursorAfterDrag();
|
| + this._restoreCursorAfterDrag();
|
|
|
| this._disposeGlassPane();
|
|
|
| delete this._elementDraggingEventListener;
|
| delete this._elementEndDraggingEventListener;
|
| -};
|
| + }
|
|
|
| -/**
|
| - * @param {!Event} event
|
| - */
|
| -WebInspector.DragHandler.prototype._elementDragEnd = function(event)
|
| -{
|
| + /**
|
| + * @param {!Event} event
|
| + */
|
| + _elementDragEnd(event) {
|
| var elementDragEnd = this._elementEndDraggingEventListener;
|
| this._cancelDragEvents(/** @type {!MouseEvent} */ (event));
|
| event.preventDefault();
|
| if (elementDragEnd)
|
| - elementDragEnd(/** @type {!MouseEvent} */ (event));
|
| + elementDragEnd(/** @type {!MouseEvent} */ (event));
|
| + }
|
| };
|
|
|
| +WebInspector.DragHandler._glassPaneUsageCount = 0;
|
| +
|
| /**
|
| * @param {!Element} element
|
| * @param {function(number, number, !MouseEvent): boolean} elementDragStart
|
| @@ -248,93 +235,95 @@ WebInspector.DragHandler.prototype._elementDragEnd = function(event)
|
| * @param {number=} startDelay
|
| * @param {number=} friction
|
| */
|
| -WebInspector.installInertialDragHandle = function(element, elementDragStart, elementDrag, elementDragEnd, cursor, hoverCursor, startDelay, friction)
|
| -{
|
| - WebInspector.installDragHandle(element, drag.bind(null, elementDragStart), drag.bind(null, elementDrag), dragEnd, cursor, hoverCursor, startDelay);
|
| - if (typeof friction !== "number")
|
| - friction = 50;
|
| - var lastX;
|
| - var lastY;
|
| - var lastTime;
|
| - var velocityX;
|
| - var velocityY;
|
| - var holding = false;
|
| -
|
| - /**
|
| - * @param {function(number, number, !MouseEvent): boolean} callback
|
| - * @param {!MouseEvent} event
|
| - * @return {boolean}
|
| - */
|
| - function drag(callback, event)
|
| - {
|
| - lastTime = window.performance.now();
|
| - lastX = event.pageX;
|
| - lastY = event.pageY;
|
| - holding = true;
|
| - return callback(lastX, lastY, event);
|
| - }
|
| -
|
| - /**
|
| - * @param {!MouseEvent} event
|
| - */
|
| - function dragEnd(event)
|
| - {
|
| - var now = window.performance.now();
|
| - var duration = now - lastTime || 1;
|
| - const maxVelocity = 4; // 4px per millisecond.
|
| - velocityX = Number.constrain((event.pageX - lastX) / duration, -maxVelocity, maxVelocity);
|
| - velocityY = Number.constrain((event.pageY - lastY) / duration, -maxVelocity, maxVelocity);
|
| - lastX = event.pageX;
|
| - lastY = event.pageY;
|
| - lastTime = now;
|
| - holding = false;
|
| - animationStep();
|
| - }
|
| -
|
| - function animationStep()
|
| - {
|
| - var v2 = velocityX * velocityX + velocityY * velocityY;
|
| - if (v2 < 0.001 || holding) {
|
| - elementDragEnd(lastX, lastY);
|
| - return;
|
| - }
|
| - element.window().requestAnimationFrame(animationStep);
|
| - var now = window.performance.now();
|
| - var duration = now - lastTime;
|
| - if (!duration)
|
| - return;
|
| - lastTime = now;
|
| - lastX += velocityX * duration;
|
| - lastY += velocityY * duration;
|
| - var k = Math.pow(1 / (1 + friction), duration / 1000);
|
| - velocityX *= k;
|
| - velocityY *= k;
|
| - elementDrag(lastX, lastY);
|
| +WebInspector.installInertialDragHandle = function(
|
| + element, elementDragStart, elementDrag, elementDragEnd, cursor, hoverCursor, startDelay, friction) {
|
| + WebInspector.installDragHandle(
|
| + element, drag.bind(null, elementDragStart), drag.bind(null, elementDrag), dragEnd, cursor, hoverCursor,
|
| + startDelay);
|
| + if (typeof friction !== 'number')
|
| + friction = 50;
|
| + var lastX;
|
| + var lastY;
|
| + var lastTime;
|
| + var velocityX;
|
| + var velocityY;
|
| + var holding = false;
|
| +
|
| + /**
|
| + * @param {function(number, number, !MouseEvent): boolean} callback
|
| + * @param {!MouseEvent} event
|
| + * @return {boolean}
|
| + */
|
| + function drag(callback, event) {
|
| + lastTime = window.performance.now();
|
| + lastX = event.pageX;
|
| + lastY = event.pageY;
|
| + holding = true;
|
| + return callback(lastX, lastY, event);
|
| + }
|
| +
|
| + /**
|
| + * @param {!MouseEvent} event
|
| + */
|
| + function dragEnd(event) {
|
| + var now = window.performance.now();
|
| + var duration = now - lastTime || 1;
|
| + const maxVelocity = 4; // 4px per millisecond.
|
| + velocityX = Number.constrain((event.pageX - lastX) / duration, -maxVelocity, maxVelocity);
|
| + velocityY = Number.constrain((event.pageY - lastY) / duration, -maxVelocity, maxVelocity);
|
| + lastX = event.pageX;
|
| + lastY = event.pageY;
|
| + lastTime = now;
|
| + holding = false;
|
| + animationStep();
|
| + }
|
| +
|
| + function animationStep() {
|
| + var v2 = velocityX * velocityX + velocityY * velocityY;
|
| + if (v2 < 0.001 || holding) {
|
| + elementDragEnd(lastX, lastY);
|
| + return;
|
| }
|
| + element.window().requestAnimationFrame(animationStep);
|
| + var now = window.performance.now();
|
| + var duration = now - lastTime;
|
| + if (!duration)
|
| + return;
|
| + lastTime = now;
|
| + lastX += velocityX * duration;
|
| + lastY += velocityY * duration;
|
| + var k = Math.pow(1 / (1 + friction), duration / 1000);
|
| + velocityX *= k;
|
| + velocityY *= k;
|
| + elementDrag(lastX, lastY);
|
| + }
|
| };
|
|
|
| /**
|
| - * @constructor
|
| - * @param {!Document} document
|
| - * @param {boolean=} dimmed
|
| + * @unrestricted
|
| */
|
| -WebInspector.GlassPane = function(document, dimmed)
|
| -{
|
| - this.element = createElement("div");
|
| - var background = dimmed ? "rgba(255, 255, 255, 0.5)" : "transparent";
|
| - this._zIndex = WebInspector._glassPane ? WebInspector._glassPane._zIndex + 1000 : 3000; // Deliberately starts with 3000 to hide other z-indexed elements below.
|
| - this.element.style.cssText = "position:absolute;top:0;bottom:0;left:0;right:0;background-color:" + background + ";z-index:" + this._zIndex + ";overflow:hidden;";
|
| +WebInspector.GlassPane = class {
|
| + /**
|
| + * @param {!Document} document
|
| + * @param {boolean=} dimmed
|
| + */
|
| + constructor(document, dimmed) {
|
| + this.element = createElement('div');
|
| + var background = dimmed ? 'rgba(255, 255, 255, 0.5)' : 'transparent';
|
| + this._zIndex = WebInspector._glassPane ?
|
| + WebInspector._glassPane._zIndex + 1000 :
|
| + 3000; // Deliberately starts with 3000 to hide other z-indexed elements below.
|
| + this.element.style.cssText = 'position:absolute;top:0;bottom:0;left:0;right:0;background-color:' + background +
|
| + ';z-index:' + this._zIndex + ';overflow:hidden;';
|
| document.body.appendChild(this.element);
|
| WebInspector._glassPane = this;
|
| // TODO(dgozman): disallow focus outside of glass pane?
|
| -};
|
| + }
|
|
|
| -WebInspector.GlassPane.prototype = {
|
| - dispose: function()
|
| - {
|
| - delete WebInspector._glassPane;
|
| - this.element.remove();
|
| - }
|
| + dispose() {
|
| + delete WebInspector._glassPane;
|
| + this.element.remove();
|
| + }
|
| };
|
|
|
| /** @type {!WebInspector.GlassPane|undefined} */
|
| @@ -344,38 +333,36 @@ WebInspector._glassPane;
|
| * @param {?Node=} node
|
| * @return {boolean}
|
| */
|
| -WebInspector.isBeingEdited = function(node)
|
| -{
|
| - if (!node || node.nodeType !== Node.ELEMENT_NODE)
|
| - return false;
|
| - var element = /** {!Element} */ (node);
|
| - if (element.classList.contains("text-prompt") || element.nodeName === "INPUT" || element.nodeName === "TEXTAREA")
|
| - return true;
|
| -
|
| - if (!WebInspector.__editingCount)
|
| - return false;
|
| -
|
| - while (element) {
|
| - if (element.__editing)
|
| - return true;
|
| - element = element.parentElementOrShadowHost();
|
| - }
|
| +WebInspector.isBeingEdited = function(node) {
|
| + if (!node || node.nodeType !== Node.ELEMENT_NODE)
|
| + return false;
|
| + var element = /** {!Element} */ (node);
|
| + if (element.classList.contains('text-prompt') || element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA')
|
| + return true;
|
| +
|
| + if (!WebInspector.__editingCount)
|
| return false;
|
| +
|
| + while (element) {
|
| + if (element.__editing)
|
| + return true;
|
| + element = element.parentElementOrShadowHost();
|
| + }
|
| + return false;
|
| };
|
|
|
| /**
|
| * @return {boolean}
|
| * @suppressGlobalPropertiesCheck
|
| */
|
| -WebInspector.isEditing = function()
|
| -{
|
| - if (WebInspector.__editingCount)
|
| - return true;
|
| -
|
| - var focused = document.deepActiveElement();
|
| - if (!focused)
|
| - return false;
|
| - return focused.classList.contains("text-prompt") || focused.nodeName === "INPUT" || focused.nodeName === "TEXTAREA";
|
| +WebInspector.isEditing = function() {
|
| + if (WebInspector.__editingCount)
|
| + return true;
|
| +
|
| + var focused = document.deepActiveElement();
|
| + if (!focused)
|
| + return false;
|
| + return focused.classList.contains('text-prompt') || focused.nodeName === 'INPUT' || focused.nodeName === 'TEXTAREA';
|
| };
|
|
|
| /**
|
| @@ -383,49 +370,46 @@ WebInspector.isEditing = function()
|
| * @param {boolean} value
|
| * @return {boolean}
|
| */
|
| -WebInspector.markBeingEdited = function(element, value)
|
| -{
|
| - if (value) {
|
| - if (element.__editing)
|
| - return false;
|
| - element.classList.add("being-edited");
|
| - element.__editing = true;
|
| - WebInspector.__editingCount = (WebInspector.__editingCount || 0) + 1;
|
| - } else {
|
| - if (!element.__editing)
|
| - return false;
|
| - element.classList.remove("being-edited");
|
| - delete element.__editing;
|
| - --WebInspector.__editingCount;
|
| - }
|
| - return true;
|
| +WebInspector.markBeingEdited = function(element, value) {
|
| + if (value) {
|
| + if (element.__editing)
|
| + return false;
|
| + element.classList.add('being-edited');
|
| + element.__editing = true;
|
| + WebInspector.__editingCount = (WebInspector.__editingCount || 0) + 1;
|
| + } else {
|
| + if (!element.__editing)
|
| + return false;
|
| + element.classList.remove('being-edited');
|
| + delete element.__editing;
|
| + --WebInspector.__editingCount;
|
| + }
|
| + return true;
|
| };
|
|
|
| WebInspector.CSSNumberRegex = /^(-?(?:\d+(?:\.\d+)?|\.\d+))$/;
|
|
|
| -WebInspector.StyleValueDelimiters = " \xA0\t\n\"':;,/()";
|
| -
|
| +WebInspector.StyleValueDelimiters = ' \xA0\t\n"\':;,/()';
|
|
|
| /**
|
| * @param {!Event} event
|
| * @return {?string}
|
| */
|
| -WebInspector._valueModificationDirection = function(event)
|
| -{
|
| - var direction = null;
|
| - if (event.type === "mousewheel") {
|
| - // When shift is pressed while spinning mousewheel, delta comes as wheelDeltaX.
|
| - if (event.wheelDeltaY > 0 || event.wheelDeltaX > 0)
|
| - direction = "Up";
|
| - else if (event.wheelDeltaY < 0 || event.wheelDeltaX < 0)
|
| - direction = "Down";
|
| - } else {
|
| - if (event.key === "ArrowUp" || event.key === "PageUp")
|
| - direction = "Up";
|
| - else if (event.key === "ArrowDown" || event.key === "PageDown")
|
| - direction = "Down";
|
| - }
|
| - return direction;
|
| +WebInspector._valueModificationDirection = function(event) {
|
| + var direction = null;
|
| + if (event.type === 'mousewheel') {
|
| + // When shift is pressed while spinning mousewheel, delta comes as wheelDeltaX.
|
| + if (event.wheelDeltaY > 0 || event.wheelDeltaX > 0)
|
| + direction = 'Up';
|
| + else if (event.wheelDeltaY < 0 || event.wheelDeltaX < 0)
|
| + direction = 'Down';
|
| + } else {
|
| + if (event.key === 'ArrowUp' || event.key === 'PageUp')
|
| + direction = 'Up';
|
| + else if (event.key === 'ArrowDown' || event.key === 'PageDown')
|
| + direction = 'Down';
|
| + }
|
| + return direction;
|
| };
|
|
|
| /**
|
| @@ -433,51 +417,50 @@ WebInspector._valueModificationDirection = function(event)
|
| * @param {!Event} event
|
| * @return {?string}
|
| */
|
| -WebInspector._modifiedHexValue = function(hexString, event)
|
| -{
|
| - var direction = WebInspector._valueModificationDirection(event);
|
| - if (!direction)
|
| - return null;
|
| -
|
| - var mouseEvent = /** @type {!MouseEvent} */(event);
|
| - var number = parseInt(hexString, 16);
|
| - if (isNaN(number) || !isFinite(number))
|
| - return null;
|
| -
|
| - var hexStrLen = hexString.length;
|
| - var channelLen = hexStrLen / 3;
|
| -
|
| - // Colors are either rgb or rrggbb.
|
| - if (channelLen !== 1 && channelLen !== 2)
|
| - return null;
|
| -
|
| - // Precision modifier keys work with both mousewheel and up/down keys.
|
| - // When ctrl is pressed, increase R by 1.
|
| - // When shift is pressed, increase G by 1.
|
| - // When alt is pressed, increase B by 1.
|
| - // If no shortcut keys are pressed then increase hex value by 1.
|
| - // Keys can be pressed together to increase RGB channels. e.g trying different shades.
|
| - var delta = 0;
|
| - if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(mouseEvent))
|
| - delta += Math.pow(16, channelLen * 2);
|
| - if (mouseEvent.shiftKey)
|
| - delta += Math.pow(16, channelLen);
|
| - if (mouseEvent.altKey)
|
| - delta += 1;
|
| - if (delta === 0)
|
| - delta = 1;
|
| - if (direction === "Down")
|
| - delta *= -1;
|
| -
|
| - // Increase hex value by 1 and clamp from 0 ... maxValue.
|
| - var maxValue = Math.pow(16, hexStrLen) - 1;
|
| - var result = Number.constrain(number + delta, 0, maxValue);
|
| -
|
| - // Ensure the result length is the same as the original hex value.
|
| - var resultString = result.toString(16).toUpperCase();
|
| - for (var i = 0, lengthDelta = hexStrLen - resultString.length; i < lengthDelta; ++i)
|
| - resultString = "0" + resultString;
|
| - return resultString;
|
| +WebInspector._modifiedHexValue = function(hexString, event) {
|
| + var direction = WebInspector._valueModificationDirection(event);
|
| + if (!direction)
|
| + return null;
|
| +
|
| + var mouseEvent = /** @type {!MouseEvent} */ (event);
|
| + var number = parseInt(hexString, 16);
|
| + if (isNaN(number) || !isFinite(number))
|
| + return null;
|
| +
|
| + var hexStrLen = hexString.length;
|
| + var channelLen = hexStrLen / 3;
|
| +
|
| + // Colors are either rgb or rrggbb.
|
| + if (channelLen !== 1 && channelLen !== 2)
|
| + return null;
|
| +
|
| + // Precision modifier keys work with both mousewheel and up/down keys.
|
| + // When ctrl is pressed, increase R by 1.
|
| + // When shift is pressed, increase G by 1.
|
| + // When alt is pressed, increase B by 1.
|
| + // If no shortcut keys are pressed then increase hex value by 1.
|
| + // Keys can be pressed together to increase RGB channels. e.g trying different shades.
|
| + var delta = 0;
|
| + if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(mouseEvent))
|
| + delta += Math.pow(16, channelLen * 2);
|
| + if (mouseEvent.shiftKey)
|
| + delta += Math.pow(16, channelLen);
|
| + if (mouseEvent.altKey)
|
| + delta += 1;
|
| + if (delta === 0)
|
| + delta = 1;
|
| + if (direction === 'Down')
|
| + delta *= -1;
|
| +
|
| + // Increase hex value by 1 and clamp from 0 ... maxValue.
|
| + var maxValue = Math.pow(16, hexStrLen) - 1;
|
| + var result = Number.constrain(number + delta, 0, maxValue);
|
| +
|
| + // Ensure the result length is the same as the original hex value.
|
| + var resultString = result.toString(16).toUpperCase();
|
| + for (var i = 0, lengthDelta = hexStrLen - resultString.length; i < lengthDelta; ++i)
|
| + resultString = '0' + resultString;
|
| + return resultString;
|
| };
|
|
|
| /**
|
| @@ -485,37 +468,36 @@ WebInspector._modifiedHexValue = function(hexString, event)
|
| * @param {!Event} event
|
| * @return {?number}
|
| */
|
| -WebInspector._modifiedFloatNumber = function(number, event)
|
| -{
|
| - var direction = WebInspector._valueModificationDirection(event);
|
| - if (!direction)
|
| - return null;
|
| -
|
| - var mouseEvent = /** @type {!MouseEvent} */(event);
|
| -
|
| - // Precision modifier keys work with both mousewheel and up/down keys.
|
| - // When ctrl is pressed, increase by 100.
|
| - // When shift is pressed, increase by 10.
|
| - // When alt is pressed, increase by 0.1.
|
| - // Otherwise increase by 1.
|
| - var delta = 1;
|
| - if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(mouseEvent))
|
| - delta = 100;
|
| - else if (mouseEvent.shiftKey)
|
| - delta = 10;
|
| - else if (mouseEvent.altKey)
|
| - delta = 0.1;
|
| -
|
| - if (direction === "Down")
|
| - delta *= -1;
|
| -
|
| - // Make the new number and constrain it to a precision of 6, this matches numbers the engine returns.
|
| - // Use the Number constructor to forget the fixed precision, so 1.100000 will print as 1.1.
|
| - var result = Number((number + delta).toFixed(6));
|
| - if (!String(result).match(WebInspector.CSSNumberRegex))
|
| - return null;
|
| -
|
| - return result;
|
| +WebInspector._modifiedFloatNumber = function(number, event) {
|
| + var direction = WebInspector._valueModificationDirection(event);
|
| + if (!direction)
|
| + return null;
|
| +
|
| + var mouseEvent = /** @type {!MouseEvent} */ (event);
|
| +
|
| + // Precision modifier keys work with both mousewheel and up/down keys.
|
| + // When ctrl is pressed, increase by 100.
|
| + // When shift is pressed, increase by 10.
|
| + // When alt is pressed, increase by 0.1.
|
| + // Otherwise increase by 1.
|
| + var delta = 1;
|
| + if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(mouseEvent))
|
| + delta = 100;
|
| + else if (mouseEvent.shiftKey)
|
| + delta = 10;
|
| + else if (mouseEvent.altKey)
|
| + delta = 0.1;
|
| +
|
| + if (direction === 'Down')
|
| + delta *= -1;
|
| +
|
| + // Make the new number and constrain it to a precision of 6, this matches numbers the engine returns.
|
| + // Use the Number constructor to forget the fixed precision, so 1.100000 will print as 1.1.
|
| + var result = Number((number + delta).toFixed(6));
|
| + if (!String(result).match(WebInspector.CSSNumberRegex))
|
| + return null;
|
| +
|
| + return result;
|
| };
|
|
|
| /**
|
| @@ -524,30 +506,30 @@ WebInspector._modifiedFloatNumber = function(number, event)
|
| * @param {function(string, number, string):string=} customNumberHandler
|
| * @return {?string}
|
| */
|
| -WebInspector.createReplacementString = function(wordString, event, customNumberHandler)
|
| -{
|
| - var prefix;
|
| - var suffix;
|
| - var number;
|
| - var replacementString = null;
|
| - var matches = /(.*#)([\da-fA-F]+)(.*)/.exec(wordString);
|
| +WebInspector.createReplacementString = function(wordString, event, customNumberHandler) {
|
| + var prefix;
|
| + var suffix;
|
| + var number;
|
| + var replacementString = null;
|
| + var matches = /(.*#)([\da-fA-F]+)(.*)/.exec(wordString);
|
| + if (matches && matches.length) {
|
| + prefix = matches[1];
|
| + suffix = matches[3];
|
| + number = WebInspector._modifiedHexValue(matches[2], event);
|
| + if (number !== null)
|
| + replacementString = prefix + number + suffix;
|
| + } else {
|
| + matches = /(.*?)(-?(?:\d+(?:\.\d+)?|\.\d+))(.*)/.exec(wordString);
|
| if (matches && matches.length) {
|
| - prefix = matches[1];
|
| - suffix = matches[3];
|
| - number = WebInspector._modifiedHexValue(matches[2], event);
|
| - if (number !== null)
|
| - replacementString = prefix + number + suffix;
|
| - } else {
|
| - matches = /(.*?)(-?(?:\d+(?:\.\d+)?|\.\d+))(.*)/.exec(wordString);
|
| - if (matches && matches.length) {
|
| - prefix = matches[1];
|
| - suffix = matches[3];
|
| - number = WebInspector._modifiedFloatNumber(parseFloat(matches[2]), event);
|
| - if (number !== null)
|
| - replacementString = customNumberHandler ? customNumberHandler(prefix, number, suffix) : prefix + number + suffix;
|
| - }
|
| + prefix = matches[1];
|
| + suffix = matches[3];
|
| + number = WebInspector._modifiedFloatNumber(parseFloat(matches[2]), event);
|
| + if (number !== null)
|
| + replacementString =
|
| + customNumberHandler ? customNumberHandler(prefix, number, suffix) : prefix + number + suffix;
|
| }
|
| - return replacementString;
|
| + }
|
| + return replacementString;
|
| };
|
|
|
| /**
|
| @@ -558,61 +540,61 @@ WebInspector.createReplacementString = function(wordString, event, customNumberH
|
| * @param {function(string, number, string):string=} customNumberHandler
|
| * @return {boolean}
|
| */
|
| -WebInspector.handleElementValueModifications = function(event, element, finishHandler, suggestionHandler, customNumberHandler)
|
| -{
|
| - /**
|
| - * @return {?Range}
|
| - * @suppressGlobalPropertiesCheck
|
| - */
|
| - function createRange()
|
| - {
|
| - return document.createRange();
|
| - }
|
| -
|
| - var arrowKeyOrMouseWheelEvent = (event.key === "ArrowUp" || event.key === "ArrowDown" || event.type === "mousewheel");
|
| - var pageKeyPressed = (event.key === "PageUp" || event.key === "PageDown");
|
| - if (!arrowKeyOrMouseWheelEvent && !pageKeyPressed)
|
| - return false;
|
| +WebInspector.handleElementValueModifications = function(
|
| + event, element, finishHandler, suggestionHandler, customNumberHandler) {
|
| + /**
|
| + * @return {?Range}
|
| + * @suppressGlobalPropertiesCheck
|
| + */
|
| + function createRange() {
|
| + return document.createRange();
|
| + }
|
| +
|
| + var arrowKeyOrMouseWheelEvent = (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.type === 'mousewheel');
|
| + var pageKeyPressed = (event.key === 'PageUp' || event.key === 'PageDown');
|
| + if (!arrowKeyOrMouseWheelEvent && !pageKeyPressed)
|
| + return false;
|
|
|
| - var selection = element.getComponentSelection();
|
| - if (!selection.rangeCount)
|
| - return false;
|
| + var selection = element.getComponentSelection();
|
| + if (!selection.rangeCount)
|
| + return false;
|
|
|
| - var selectionRange = selection.getRangeAt(0);
|
| - if (!selectionRange.commonAncestorContainer.isSelfOrDescendant(element))
|
| - return false;
|
| + var selectionRange = selection.getRangeAt(0);
|
| + if (!selectionRange.commonAncestorContainer.isSelfOrDescendant(element))
|
| + return false;
|
|
|
| - var originalValue = element.textContent;
|
| - var wordRange = selectionRange.startContainer.rangeOfWord(selectionRange.startOffset, WebInspector.StyleValueDelimiters, element);
|
| - var wordString = wordRange.toString();
|
| + var originalValue = element.textContent;
|
| + var wordRange =
|
| + selectionRange.startContainer.rangeOfWord(selectionRange.startOffset, WebInspector.StyleValueDelimiters, element);
|
| + var wordString = wordRange.toString();
|
|
|
| - if (suggestionHandler && suggestionHandler(wordString))
|
| - return false;
|
| + if (suggestionHandler && suggestionHandler(wordString))
|
| + return false;
|
|
|
| - var replacementString = WebInspector.createReplacementString(wordString, event, customNumberHandler);
|
| + var replacementString = WebInspector.createReplacementString(wordString, event, customNumberHandler);
|
|
|
| - if (replacementString) {
|
| - var replacementTextNode = createTextNode(replacementString);
|
| + if (replacementString) {
|
| + var replacementTextNode = createTextNode(replacementString);
|
|
|
| - wordRange.deleteContents();
|
| - wordRange.insertNode(replacementTextNode);
|
| + wordRange.deleteContents();
|
| + wordRange.insertNode(replacementTextNode);
|
|
|
| - var finalSelectionRange = createRange();
|
| - finalSelectionRange.setStart(replacementTextNode, 0);
|
| - finalSelectionRange.setEnd(replacementTextNode, replacementString.length);
|
| + var finalSelectionRange = createRange();
|
| + finalSelectionRange.setStart(replacementTextNode, 0);
|
| + finalSelectionRange.setEnd(replacementTextNode, replacementString.length);
|
|
|
| - selection.removeAllRanges();
|
| - selection.addRange(finalSelectionRange);
|
| + selection.removeAllRanges();
|
| + selection.addRange(finalSelectionRange);
|
|
|
| - event.handled = true;
|
| - event.preventDefault();
|
| + event.handled = true;
|
| + event.preventDefault();
|
|
|
| - if (finishHandler)
|
| - finishHandler(originalValue, replacementString);
|
| + if (finishHandler)
|
| + finishHandler(originalValue, replacementString);
|
|
|
| - return true;
|
| - }
|
| - return false;
|
| + return true;
|
| + }
|
| + return false;
|
| };
|
|
|
| /**
|
| @@ -620,68 +602,66 @@ WebInspector.handleElementValueModifications = function(event, element, finishHa
|
| * @param {number=} precision
|
| * @return {string}
|
| */
|
| -Number.preciseMillisToString = function(ms, precision)
|
| -{
|
| - precision = precision || 0;
|
| - var format = "%." + precision + "f\u2009ms";
|
| - return WebInspector.UIString(format, ms);
|
| +Number.preciseMillisToString = function(ms, precision) {
|
| + precision = precision || 0;
|
| + var format = '%.' + precision + 'f\u2009ms';
|
| + return WebInspector.UIString(format, ms);
|
| };
|
|
|
| /** @type {!WebInspector.UIStringFormat} */
|
| -WebInspector._microsFormat = new WebInspector.UIStringFormat("%.0f\u2009\u03bcs");
|
| +WebInspector._microsFormat = new WebInspector.UIStringFormat('%.0f\u2009\u03bcs');
|
|
|
| /** @type {!WebInspector.UIStringFormat} */
|
| -WebInspector._subMillisFormat = new WebInspector.UIStringFormat("%.2f\u2009ms");
|
| +WebInspector._subMillisFormat = new WebInspector.UIStringFormat('%.2f\u2009ms');
|
|
|
| /** @type {!WebInspector.UIStringFormat} */
|
| -WebInspector._millisFormat = new WebInspector.UIStringFormat("%.0f\u2009ms");
|
| +WebInspector._millisFormat = new WebInspector.UIStringFormat('%.0f\u2009ms');
|
|
|
| /** @type {!WebInspector.UIStringFormat} */
|
| -WebInspector._secondsFormat = new WebInspector.UIStringFormat("%.2f\u2009s");
|
| +WebInspector._secondsFormat = new WebInspector.UIStringFormat('%.2f\u2009s');
|
|
|
| /** @type {!WebInspector.UIStringFormat} */
|
| -WebInspector._minutesFormat = new WebInspector.UIStringFormat("%.1f\u2009min");
|
| +WebInspector._minutesFormat = new WebInspector.UIStringFormat('%.1f\u2009min');
|
|
|
| /** @type {!WebInspector.UIStringFormat} */
|
| -WebInspector._hoursFormat = new WebInspector.UIStringFormat("%.1f\u2009hrs");
|
| +WebInspector._hoursFormat = new WebInspector.UIStringFormat('%.1f\u2009hrs');
|
|
|
| /** @type {!WebInspector.UIStringFormat} */
|
| -WebInspector._daysFormat = new WebInspector.UIStringFormat("%.1f\u2009days");
|
| +WebInspector._daysFormat = new WebInspector.UIStringFormat('%.1f\u2009days');
|
|
|
| /**
|
| * @param {number} ms
|
| * @param {boolean=} higherResolution
|
| * @return {string}
|
| */
|
| -Number.millisToString = function(ms, higherResolution)
|
| -{
|
| - if (!isFinite(ms))
|
| - return "-";
|
| -
|
| - if (ms === 0)
|
| - return "0";
|
| -
|
| - if (higherResolution && ms < 0.1)
|
| - return WebInspector._microsFormat.format(ms * 1000);
|
| - if (higherResolution && ms < 1000)
|
| - return WebInspector._subMillisFormat.format(ms);
|
| - if (ms < 1000)
|
| - return WebInspector._millisFormat.format(ms);
|
| -
|
| - var seconds = ms / 1000;
|
| - if (seconds < 60)
|
| - return WebInspector._secondsFormat.format(seconds);
|
| -
|
| - var minutes = seconds / 60;
|
| - if (minutes < 60)
|
| - return WebInspector._minutesFormat.format(minutes);
|
| -
|
| - var hours = minutes / 60;
|
| - if (hours < 24)
|
| - return WebInspector._hoursFormat.format(hours);
|
| -
|
| - var days = hours / 24;
|
| - return WebInspector._daysFormat.format(days);
|
| +Number.millisToString = function(ms, higherResolution) {
|
| + if (!isFinite(ms))
|
| + return '-';
|
| +
|
| + if (ms === 0)
|
| + return '0';
|
| +
|
| + if (higherResolution && ms < 0.1)
|
| + return WebInspector._microsFormat.format(ms * 1000);
|
| + if (higherResolution && ms < 1000)
|
| + return WebInspector._subMillisFormat.format(ms);
|
| + if (ms < 1000)
|
| + return WebInspector._millisFormat.format(ms);
|
| +
|
| + var seconds = ms / 1000;
|
| + if (seconds < 60)
|
| + return WebInspector._secondsFormat.format(seconds);
|
| +
|
| + var minutes = seconds / 60;
|
| + if (minutes < 60)
|
| + return WebInspector._minutesFormat.format(minutes);
|
| +
|
| + var hours = minutes / 60;
|
| + if (hours < 24)
|
| + return WebInspector._hoursFormat.format(hours);
|
| +
|
| + var days = hours / 24;
|
| + return WebInspector._daysFormat.format(days);
|
| };
|
|
|
| /**
|
| @@ -689,46 +669,43 @@ Number.millisToString = function(ms, higherResolution)
|
| * @param {boolean=} higherResolution
|
| * @return {string}
|
| */
|
| -Number.secondsToString = function(seconds, higherResolution)
|
| -{
|
| - if (!isFinite(seconds))
|
| - return "-";
|
| - return Number.millisToString(seconds * 1000, higherResolution);
|
| +Number.secondsToString = function(seconds, higherResolution) {
|
| + if (!isFinite(seconds))
|
| + return '-';
|
| + return Number.millisToString(seconds * 1000, higherResolution);
|
| };
|
|
|
| /**
|
| * @param {number} bytes
|
| * @return {string}
|
| */
|
| -Number.bytesToString = function(bytes)
|
| -{
|
| - if (bytes < 1024)
|
| - return WebInspector.UIString("%.0f\u2009B", bytes);
|
| -
|
| - var kilobytes = bytes / 1024;
|
| - if (kilobytes < 100)
|
| - return WebInspector.UIString("%.1f\u2009KB", kilobytes);
|
| - if (kilobytes < 1024)
|
| - return WebInspector.UIString("%.0f\u2009KB", kilobytes);
|
| -
|
| - var megabytes = kilobytes / 1024;
|
| - if (megabytes < 100)
|
| - return WebInspector.UIString("%.1f\u2009MB", megabytes);
|
| - else
|
| - return WebInspector.UIString("%.0f\u2009MB", megabytes);
|
| +Number.bytesToString = function(bytes) {
|
| + if (bytes < 1024)
|
| + return WebInspector.UIString('%.0f\u2009B', bytes);
|
| +
|
| + var kilobytes = bytes / 1024;
|
| + if (kilobytes < 100)
|
| + return WebInspector.UIString('%.1f\u2009KB', kilobytes);
|
| + if (kilobytes < 1024)
|
| + return WebInspector.UIString('%.0f\u2009KB', kilobytes);
|
| +
|
| + var megabytes = kilobytes / 1024;
|
| + if (megabytes < 100)
|
| + return WebInspector.UIString('%.1f\u2009MB', megabytes);
|
| + else
|
| + return WebInspector.UIString('%.0f\u2009MB', megabytes);
|
| };
|
|
|
| /**
|
| * @param {number} num
|
| * @return {string}
|
| */
|
| -Number.withThousandsSeparator = function(num)
|
| -{
|
| - var str = num + "";
|
| - var re = /(\d+)(\d{3})/;
|
| - while (str.match(re))
|
| - str = str.replace(re, "$1\u2009$2"); // \u2009 is a thin space.
|
| - return str;
|
| +Number.withThousandsSeparator = function(num) {
|
| + var str = num + '';
|
| + var re = /(\d+)(\d{3})/;
|
| + while (str.match(re))
|
| + str = str.replace(re, '$1\u2009$2'); // \u2009 is a thin space.
|
| + return str;
|
| };
|
|
|
| /**
|
| @@ -736,67 +713,59 @@ Number.withThousandsSeparator = function(num)
|
| * @param {?ArrayLike} substitutions
|
| * @return {!Element}
|
| */
|
| -WebInspector.formatLocalized = function(format, substitutions)
|
| -{
|
| - var formatters = {
|
| - s: substitution => substitution
|
| - };
|
| - /**
|
| - * @param {!Element} a
|
| - * @param {string|!Element} b
|
| - * @return {!Element}
|
| - */
|
| - function append(a, b)
|
| - {
|
| - a.appendChild(typeof b === "string" ? createTextNode(b) : b);
|
| - return a;
|
| - }
|
| - return String.format(WebInspector.UIString(format), substitutions, formatters, createElement("span"), append).formattedResult;
|
| +WebInspector.formatLocalized = function(format, substitutions) {
|
| + var formatters = {s: substitution => substitution};
|
| + /**
|
| + * @param {!Element} a
|
| + * @param {string|!Element} b
|
| + * @return {!Element}
|
| + */
|
| + function append(a, b) {
|
| + a.appendChild(typeof b === 'string' ? createTextNode(b) : b);
|
| + return a;
|
| + }
|
| + return String.format(WebInspector.UIString(format), substitutions, formatters, createElement('span'), append)
|
| + .formattedResult;
|
| };
|
|
|
| /**
|
| * @return {string}
|
| */
|
| -WebInspector.openLinkExternallyLabel = function()
|
| -{
|
| - return WebInspector.UIString.capitalize("Open ^link in ^new ^tab");
|
| +WebInspector.openLinkExternallyLabel = function() {
|
| + return WebInspector.UIString.capitalize('Open ^link in ^new ^tab');
|
| };
|
|
|
| /**
|
| * @return {string}
|
| */
|
| -WebInspector.copyLinkAddressLabel = function()
|
| -{
|
| - return WebInspector.UIString.capitalize("Copy ^link ^address");
|
| +WebInspector.copyLinkAddressLabel = function() {
|
| + return WebInspector.UIString.capitalize('Copy ^link ^address');
|
| };
|
|
|
| /**
|
| * @return {string}
|
| */
|
| -WebInspector.anotherProfilerActiveLabel = function()
|
| -{
|
| - return WebInspector.UIString("Another profiler is already active");
|
| +WebInspector.anotherProfilerActiveLabel = function() {
|
| + return WebInspector.UIString('Another profiler is already active');
|
| };
|
|
|
| /**
|
| * @param {string|undefined} description
|
| * @return {string}
|
| */
|
| -WebInspector.asyncStackTraceLabel = function(description)
|
| -{
|
| - if (description)
|
| - return description + " " + WebInspector.UIString("(async)");
|
| - return WebInspector.UIString("Async Call");
|
| +WebInspector.asyncStackTraceLabel = function(description) {
|
| + if (description)
|
| + return description + ' ' + WebInspector.UIString('(async)');
|
| + return WebInspector.UIString('Async Call');
|
| };
|
|
|
| /**
|
| * @param {!Element} element
|
| */
|
| -WebInspector.installComponentRootStyles = function(element)
|
| -{
|
| - WebInspector.appendStyle(element, "ui/inspectorCommon.css");
|
| - WebInspector.themeSupport.injectHighlightStyleSheets(element);
|
| - element.classList.add("platform-" + WebInspector.platform());
|
| +WebInspector.installComponentRootStyles = function(element) {
|
| + WebInspector.appendStyle(element, 'ui/inspectorCommon.css');
|
| + WebInspector.themeSupport.injectHighlightStyleSheets(element);
|
| + element.classList.add('platform-' + WebInspector.platform());
|
| };
|
|
|
| /**
|
| @@ -804,68 +773,64 @@ WebInspector.installComponentRootStyles = function(element)
|
| * @param {string=} cssFile
|
| * @return {!DocumentFragment}
|
| */
|
| -WebInspector.createShadowRootWithCoreStyles = function(element, cssFile)
|
| -{
|
| - var shadowRoot = element.createShadowRoot();
|
| - WebInspector.appendStyle(shadowRoot, "ui/inspectorCommon.css");
|
| - WebInspector.themeSupport.injectHighlightStyleSheets(shadowRoot);
|
| - if (cssFile)
|
| - WebInspector.appendStyle(shadowRoot, cssFile);
|
| - shadowRoot.addEventListener("focus", WebInspector._focusChanged.bind(WebInspector), true);
|
| - return shadowRoot;
|
| +WebInspector.createShadowRootWithCoreStyles = function(element, cssFile) {
|
| + var shadowRoot = element.createShadowRoot();
|
| + WebInspector.appendStyle(shadowRoot, 'ui/inspectorCommon.css');
|
| + WebInspector.themeSupport.injectHighlightStyleSheets(shadowRoot);
|
| + if (cssFile)
|
| + WebInspector.appendStyle(shadowRoot, cssFile);
|
| + shadowRoot.addEventListener('focus', WebInspector._focusChanged.bind(WebInspector), true);
|
| + return shadowRoot;
|
| };
|
|
|
| /**
|
| * @param {!Document} document
|
| * @param {!Event} event
|
| */
|
| -WebInspector._windowFocused = function(document, event)
|
| -{
|
| - if (event.target.document.nodeType === Node.DOCUMENT_NODE)
|
| - document.body.classList.remove("inactive");
|
| +WebInspector._windowFocused = function(document, event) {
|
| + if (event.target.document.nodeType === Node.DOCUMENT_NODE)
|
| + document.body.classList.remove('inactive');
|
| };
|
|
|
| /**
|
| * @param {!Document} document
|
| * @param {!Event} event
|
| */
|
| -WebInspector._windowBlurred = function(document, event)
|
| -{
|
| - if (event.target.document.nodeType === Node.DOCUMENT_NODE)
|
| - document.body.classList.add("inactive");
|
| +WebInspector._windowBlurred = function(document, event) {
|
| + if (event.target.document.nodeType === Node.DOCUMENT_NODE)
|
| + document.body.classList.add('inactive');
|
| };
|
|
|
| /**
|
| * @param {!Event} event
|
| */
|
| -WebInspector._focusChanged = function(event)
|
| -{
|
| - var document = event.target && event.target.ownerDocument;
|
| - var element = document ? document.deepActiveElement() : null;
|
| - WebInspector.Widget.focusWidgetForNode(element);
|
| +WebInspector._focusChanged = function(event) {
|
| + var document = event.target && event.target.ownerDocument;
|
| + var element = document ? document.deepActiveElement() : null;
|
| + WebInspector.Widget.focusWidgetForNode(element);
|
| };
|
|
|
| /**
|
| - * @param {!Element} element
|
| - * @constructor
|
| + * @unrestricted
|
| */
|
| -WebInspector.ElementFocusRestorer = function(element)
|
| -{
|
| +WebInspector.ElementFocusRestorer = class {
|
| + /**
|
| + * @param {!Element} element
|
| + */
|
| + constructor(element) {
|
| this._element = element;
|
| this._previous = element.ownerDocument.deepActiveElement();
|
| element.focus();
|
| -};
|
| -
|
| -WebInspector.ElementFocusRestorer.prototype = {
|
| - restore: function()
|
| - {
|
| - if (!this._element)
|
| - return;
|
| - if (this._element.hasFocus() && this._previous)
|
| - this._previous.focus();
|
| - this._previous = null;
|
| - this._element = null;
|
| - }
|
| + }
|
| +
|
| + restore() {
|
| + if (!this._element)
|
| + return;
|
| + if (this._element.hasFocus() && this._previous)
|
| + this._previous.focus();
|
| + this._previous = null;
|
| + this._element = null;
|
| + }
|
| };
|
|
|
| /**
|
| @@ -875,10 +840,9 @@ WebInspector.ElementFocusRestorer.prototype = {
|
| * @param {!Array.<!Object>=} domChanges
|
| * @return {?Element}
|
| */
|
| -WebInspector.highlightSearchResult = function(element, offset, length, domChanges)
|
| -{
|
| - var result = WebInspector.highlightSearchResults(element, [new WebInspector.SourceRange(offset, length)], domChanges);
|
| - return result.length ? result[0] : null;
|
| +WebInspector.highlightSearchResult = function(element, offset, length, domChanges) {
|
| + var result = WebInspector.highlightSearchResults(element, [new WebInspector.SourceRange(offset, length)], domChanges);
|
| + return result.length ? result[0] : null;
|
| };
|
|
|
| /**
|
| @@ -887,28 +851,26 @@ WebInspector.highlightSearchResult = function(element, offset, length, domChange
|
| * @param {!Array.<!Object>=} changes
|
| * @return {!Array.<!Element>}
|
| */
|
| -WebInspector.highlightSearchResults = function(element, resultRanges, changes)
|
| -{
|
| - return WebInspector.highlightRangesWithStyleClass(element, resultRanges, WebInspector.highlightedSearchResultClassName, changes);
|
| +WebInspector.highlightSearchResults = function(element, resultRanges, changes) {
|
| + return WebInspector.highlightRangesWithStyleClass(
|
| + element, resultRanges, WebInspector.highlightedSearchResultClassName, changes);
|
| };
|
|
|
| /**
|
| * @param {!Element} element
|
| * @param {string} className
|
| */
|
| -WebInspector.runCSSAnimationOnce = function(element, className)
|
| -{
|
| - function animationEndCallback()
|
| - {
|
| - element.classList.remove(className);
|
| - element.removeEventListener("webkitAnimationEnd", animationEndCallback, false);
|
| - }
|
| +WebInspector.runCSSAnimationOnce = function(element, className) {
|
| + function animationEndCallback() {
|
| + element.classList.remove(className);
|
| + element.removeEventListener('webkitAnimationEnd', animationEndCallback, false);
|
| + }
|
|
|
| - if (element.classList.contains(className))
|
| - element.classList.remove(className);
|
| + if (element.classList.contains(className))
|
| + element.classList.remove(className);
|
|
|
| - element.addEventListener("webkitAnimationEnd", animationEndCallback, false);
|
| - element.classList.add(className);
|
| + element.addEventListener('webkitAnimationEnd', animationEndCallback, false);
|
| + element.classList.add(className);
|
| };
|
|
|
| /**
|
| @@ -918,112 +880,114 @@ WebInspector.runCSSAnimationOnce = function(element, className)
|
| * @param {!Array.<!Object>=} changes
|
| * @return {!Array.<!Element>}
|
| */
|
| -WebInspector.highlightRangesWithStyleClass = function(element, resultRanges, styleClass, changes)
|
| -{
|
| - changes = changes || [];
|
| - var highlightNodes = [];
|
| - var textNodes = element.childTextNodes();
|
| - var lineText = textNodes.map(function(node) { return node.textContent; }).join("");
|
| - var ownerDocument = element.ownerDocument;
|
| -
|
| - if (textNodes.length === 0)
|
| - return highlightNodes;
|
| -
|
| - var nodeRanges = [];
|
| - var rangeEndOffset = 0;
|
| - for (var i = 0; i < textNodes.length; ++i) {
|
| - var range = {};
|
| - range.offset = rangeEndOffset;
|
| - range.length = textNodes[i].textContent.length;
|
| - rangeEndOffset = range.offset + range.length;
|
| - nodeRanges.push(range);
|
| - }
|
| -
|
| - var startIndex = 0;
|
| - for (var i = 0; i < resultRanges.length; ++i) {
|
| - var startOffset = resultRanges[i].offset;
|
| - var endOffset = startOffset + resultRanges[i].length;
|
| -
|
| - while (startIndex < textNodes.length && nodeRanges[startIndex].offset + nodeRanges[startIndex].length <= startOffset)
|
| - startIndex++;
|
| - var endIndex = startIndex;
|
| - while (endIndex < textNodes.length && nodeRanges[endIndex].offset + nodeRanges[endIndex].length < endOffset)
|
| - endIndex++;
|
| - if (endIndex === textNodes.length)
|
| - break;
|
| -
|
| - var highlightNode = ownerDocument.createElement("span");
|
| - highlightNode.className = styleClass;
|
| - highlightNode.textContent = lineText.substring(startOffset, endOffset);
|
| -
|
| - var lastTextNode = textNodes[endIndex];
|
| - var lastText = lastTextNode.textContent;
|
| - lastTextNode.textContent = lastText.substring(endOffset - nodeRanges[endIndex].offset);
|
| - changes.push({ node: lastTextNode, type: "changed", oldText: lastText, newText: lastTextNode.textContent });
|
| -
|
| - if (startIndex === endIndex) {
|
| - lastTextNode.parentElement.insertBefore(highlightNode, lastTextNode);
|
| - changes.push({ node: highlightNode, type: "added", nextSibling: lastTextNode, parent: lastTextNode.parentElement });
|
| - highlightNodes.push(highlightNode);
|
| -
|
| - var prefixNode = ownerDocument.createTextNode(lastText.substring(0, startOffset - nodeRanges[startIndex].offset));
|
| - lastTextNode.parentElement.insertBefore(prefixNode, highlightNode);
|
| - changes.push({ node: prefixNode, type: "added", nextSibling: highlightNode, parent: lastTextNode.parentElement });
|
| - } else {
|
| - var firstTextNode = textNodes[startIndex];
|
| - var firstText = firstTextNode.textContent;
|
| - var anchorElement = firstTextNode.nextSibling;
|
| -
|
| - firstTextNode.parentElement.insertBefore(highlightNode, anchorElement);
|
| - changes.push({ node: highlightNode, type: "added", nextSibling: anchorElement, parent: firstTextNode.parentElement });
|
| - highlightNodes.push(highlightNode);
|
| -
|
| - firstTextNode.textContent = firstText.substring(0, startOffset - nodeRanges[startIndex].offset);
|
| - changes.push({ node: firstTextNode, type: "changed", oldText: firstText, newText: firstTextNode.textContent });
|
| -
|
| - for (var j = startIndex + 1; j < endIndex; j++) {
|
| - var textNode = textNodes[j];
|
| - var text = textNode.textContent;
|
| - textNode.textContent = "";
|
| - changes.push({ node: textNode, type: "changed", oldText: text, newText: textNode.textContent });
|
| - }
|
| - }
|
| - startIndex = endIndex;
|
| - nodeRanges[startIndex].offset = endOffset;
|
| - nodeRanges[startIndex].length = lastTextNode.textContent.length;
|
| +WebInspector.highlightRangesWithStyleClass = function(element, resultRanges, styleClass, changes) {
|
| + changes = changes || [];
|
| + var highlightNodes = [];
|
| + var textNodes = element.childTextNodes();
|
| + var lineText = textNodes
|
| + .map(function(node) {
|
| + return node.textContent;
|
| + })
|
| + .join('');
|
| + var ownerDocument = element.ownerDocument;
|
| +
|
| + if (textNodes.length === 0)
|
| + return highlightNodes;
|
|
|
| + var nodeRanges = [];
|
| + var rangeEndOffset = 0;
|
| + for (var i = 0; i < textNodes.length; ++i) {
|
| + var range = {};
|
| + range.offset = rangeEndOffset;
|
| + range.length = textNodes[i].textContent.length;
|
| + rangeEndOffset = range.offset + range.length;
|
| + nodeRanges.push(range);
|
| + }
|
| +
|
| + var startIndex = 0;
|
| + for (var i = 0; i < resultRanges.length; ++i) {
|
| + var startOffset = resultRanges[i].offset;
|
| + var endOffset = startOffset + resultRanges[i].length;
|
| +
|
| + while (startIndex < textNodes.length &&
|
| + nodeRanges[startIndex].offset + nodeRanges[startIndex].length <= startOffset)
|
| + startIndex++;
|
| + var endIndex = startIndex;
|
| + while (endIndex < textNodes.length && nodeRanges[endIndex].offset + nodeRanges[endIndex].length < endOffset)
|
| + endIndex++;
|
| + if (endIndex === textNodes.length)
|
| + break;
|
| +
|
| + var highlightNode = ownerDocument.createElement('span');
|
| + highlightNode.className = styleClass;
|
| + highlightNode.textContent = lineText.substring(startOffset, endOffset);
|
| +
|
| + var lastTextNode = textNodes[endIndex];
|
| + var lastText = lastTextNode.textContent;
|
| + lastTextNode.textContent = lastText.substring(endOffset - nodeRanges[endIndex].offset);
|
| + changes.push({node: lastTextNode, type: 'changed', oldText: lastText, newText: lastTextNode.textContent});
|
| +
|
| + if (startIndex === endIndex) {
|
| + lastTextNode.parentElement.insertBefore(highlightNode, lastTextNode);
|
| + changes.push({node: highlightNode, type: 'added', nextSibling: lastTextNode, parent: lastTextNode.parentElement});
|
| + highlightNodes.push(highlightNode);
|
| +
|
| + var prefixNode = ownerDocument.createTextNode(lastText.substring(0, startOffset - nodeRanges[startIndex].offset));
|
| + lastTextNode.parentElement.insertBefore(prefixNode, highlightNode);
|
| + changes.push({node: prefixNode, type: 'added', nextSibling: highlightNode, parent: lastTextNode.parentElement});
|
| + } else {
|
| + var firstTextNode = textNodes[startIndex];
|
| + var firstText = firstTextNode.textContent;
|
| + var anchorElement = firstTextNode.nextSibling;
|
| +
|
| + firstTextNode.parentElement.insertBefore(highlightNode, anchorElement);
|
| + changes.push(
|
| + {node: highlightNode, type: 'added', nextSibling: anchorElement, parent: firstTextNode.parentElement});
|
| + highlightNodes.push(highlightNode);
|
| +
|
| + firstTextNode.textContent = firstText.substring(0, startOffset - nodeRanges[startIndex].offset);
|
| + changes.push({node: firstTextNode, type: 'changed', oldText: firstText, newText: firstTextNode.textContent});
|
| +
|
| + for (var j = startIndex + 1; j < endIndex; j++) {
|
| + var textNode = textNodes[j];
|
| + var text = textNode.textContent;
|
| + textNode.textContent = '';
|
| + changes.push({node: textNode, type: 'changed', oldText: text, newText: textNode.textContent});
|
| + }
|
| }
|
| - return highlightNodes;
|
| + startIndex = endIndex;
|
| + nodeRanges[startIndex].offset = endOffset;
|
| + nodeRanges[startIndex].length = lastTextNode.textContent.length;
|
| + }
|
| + return highlightNodes;
|
| };
|
|
|
| -WebInspector.applyDomChanges = function(domChanges)
|
| -{
|
| - for (var i = 0, size = domChanges.length; i < size; ++i) {
|
| - var entry = domChanges[i];
|
| - switch (entry.type) {
|
| - case "added":
|
| - entry.parent.insertBefore(entry.node, entry.nextSibling);
|
| - break;
|
| - case "changed":
|
| - entry.node.textContent = entry.newText;
|
| - break;
|
| - }
|
| +WebInspector.applyDomChanges = function(domChanges) {
|
| + for (var i = 0, size = domChanges.length; i < size; ++i) {
|
| + var entry = domChanges[i];
|
| + switch (entry.type) {
|
| + case 'added':
|
| + entry.parent.insertBefore(entry.node, entry.nextSibling);
|
| + break;
|
| + case 'changed':
|
| + entry.node.textContent = entry.newText;
|
| + break;
|
| }
|
| + }
|
| };
|
|
|
| -WebInspector.revertDomChanges = function(domChanges)
|
| -{
|
| - for (var i = domChanges.length - 1; i >= 0; --i) {
|
| - var entry = domChanges[i];
|
| - switch (entry.type) {
|
| - case "added":
|
| - entry.node.remove();
|
| - break;
|
| - case "changed":
|
| - entry.node.textContent = entry.oldText;
|
| - break;
|
| - }
|
| +WebInspector.revertDomChanges = function(domChanges) {
|
| + for (var i = domChanges.length - 1; i >= 0; --i) {
|
| + var entry = domChanges[i];
|
| + switch (entry.type) {
|
| + case 'added':
|
| + entry.node.remove();
|
| + break;
|
| + case 'changed':
|
| + entry.node.textContent = entry.oldText;
|
| + break;
|
| }
|
| + }
|
| };
|
|
|
| /**
|
| @@ -1031,102 +995,96 @@ WebInspector.revertDomChanges = function(domChanges)
|
| * @param {?Element=} containerElement
|
| * @return {!Size}
|
| */
|
| -WebInspector.measurePreferredSize = function(element, containerElement)
|
| -{
|
| - var oldParent = element.parentElement;
|
| - var oldNextSibling = element.nextSibling;
|
| - containerElement = containerElement || element.ownerDocument.body;
|
| - containerElement.appendChild(element);
|
| - element.positionAt(0, 0);
|
| - var result = new Size(element.offsetWidth, element.offsetHeight);
|
| -
|
| - element.positionAt(undefined, undefined);
|
| - if (oldParent)
|
| - oldParent.insertBefore(element, oldNextSibling);
|
| - else
|
| - element.remove();
|
| - return result;
|
| +WebInspector.measurePreferredSize = function(element, containerElement) {
|
| + var oldParent = element.parentElement;
|
| + var oldNextSibling = element.nextSibling;
|
| + containerElement = containerElement || element.ownerDocument.body;
|
| + containerElement.appendChild(element);
|
| + element.positionAt(0, 0);
|
| + var result = new Size(element.offsetWidth, element.offsetHeight);
|
| +
|
| + element.positionAt(undefined, undefined);
|
| + if (oldParent)
|
| + oldParent.insertBefore(element, oldNextSibling);
|
| + else
|
| + element.remove();
|
| + return result;
|
| };
|
|
|
| /**
|
| - * @constructor
|
| - * @param {boolean} autoInvoke
|
| + * @unrestricted
|
| */
|
| -WebInspector.InvokeOnceHandlers = function(autoInvoke)
|
| -{
|
| +WebInspector.InvokeOnceHandlers = class {
|
| + /**
|
| + * @param {boolean} autoInvoke
|
| + */
|
| + constructor(autoInvoke) {
|
| this._handlers = null;
|
| this._autoInvoke = autoInvoke;
|
| -};
|
| -
|
| -WebInspector.InvokeOnceHandlers.prototype = {
|
| - /**
|
| - * @param {!Object} object
|
| - * @param {function()} method
|
| - */
|
| - add: function(object, method)
|
| - {
|
| - if (!this._handlers) {
|
| - this._handlers = new Map();
|
| - if (this._autoInvoke)
|
| - this.scheduleInvoke();
|
| - }
|
| - var methods = this._handlers.get(object);
|
| - if (!methods) {
|
| - methods = new Set();
|
| - this._handlers.set(object, methods);
|
| - }
|
| - methods.add(method);
|
| - },
|
| -
|
| - /**
|
| - * @suppressGlobalPropertiesCheck
|
| - */
|
| - scheduleInvoke: function()
|
| - {
|
| - if (this._handlers)
|
| - requestAnimationFrame(this._invoke.bind(this));
|
| - },
|
| -
|
| - _invoke: function()
|
| - {
|
| - var handlers = this._handlers;
|
| - this._handlers = null;
|
| - var keys = handlers.keysArray();
|
| - for (var i = 0; i < keys.length; ++i) {
|
| - var object = keys[i];
|
| - var methods = handlers.get(object).valuesArray();
|
| - for (var j = 0; j < methods.length; ++j)
|
| - methods[j].call(object);
|
| - }
|
| + }
|
| +
|
| + /**
|
| + * @param {!Object} object
|
| + * @param {function()} method
|
| + */
|
| + add(object, method) {
|
| + if (!this._handlers) {
|
| + this._handlers = new Map();
|
| + if (this._autoInvoke)
|
| + this.scheduleInvoke();
|
| + }
|
| + var methods = this._handlers.get(object);
|
| + if (!methods) {
|
| + methods = new Set();
|
| + this._handlers.set(object, methods);
|
| + }
|
| + methods.add(method);
|
| + }
|
| +
|
| + /**
|
| + * @suppressGlobalPropertiesCheck
|
| + */
|
| + scheduleInvoke() {
|
| + if (this._handlers)
|
| + requestAnimationFrame(this._invoke.bind(this));
|
| + }
|
| +
|
| + _invoke() {
|
| + var handlers = this._handlers;
|
| + this._handlers = null;
|
| + var keys = handlers.keysArray();
|
| + for (var i = 0; i < keys.length; ++i) {
|
| + var object = keys[i];
|
| + var methods = handlers.get(object).valuesArray();
|
| + for (var j = 0; j < methods.length; ++j)
|
| + methods[j].call(object);
|
| }
|
| + }
|
| };
|
|
|
| WebInspector._coalescingLevel = 0;
|
| WebInspector._postUpdateHandlers = null;
|
|
|
| -WebInspector.startBatchUpdate = function()
|
| -{
|
| - if (!WebInspector._coalescingLevel++)
|
| - WebInspector._postUpdateHandlers = new WebInspector.InvokeOnceHandlers(false);
|
| +WebInspector.startBatchUpdate = function() {
|
| + if (!WebInspector._coalescingLevel++)
|
| + WebInspector._postUpdateHandlers = new WebInspector.InvokeOnceHandlers(false);
|
| };
|
|
|
| -WebInspector.endBatchUpdate = function()
|
| -{
|
| - if (--WebInspector._coalescingLevel)
|
| - return;
|
| - WebInspector._postUpdateHandlers.scheduleInvoke();
|
| - WebInspector._postUpdateHandlers = null;
|
| +WebInspector.endBatchUpdate = function() {
|
| + if (--WebInspector._coalescingLevel)
|
| + return;
|
| + WebInspector._postUpdateHandlers.scheduleInvoke();
|
| + WebInspector._postUpdateHandlers = null;
|
| };
|
|
|
| /**
|
| * @param {!Object} object
|
| * @param {function()} method
|
| */
|
| -WebInspector.invokeOnceAfterBatchUpdate = function(object, method)
|
| -{
|
| - if (!WebInspector._postUpdateHandlers)
|
| - WebInspector._postUpdateHandlers = new WebInspector.InvokeOnceHandlers(true);
|
| - WebInspector._postUpdateHandlers.add(object, method);
|
| +WebInspector.invokeOnceAfterBatchUpdate = function(object, method) {
|
| + if (!WebInspector._postUpdateHandlers)
|
| + WebInspector._postUpdateHandlers = new WebInspector.InvokeOnceHandlers(true);
|
| + WebInspector._postUpdateHandlers.add(object, method);
|
| };
|
|
|
| /**
|
| @@ -1137,145 +1095,134 @@ WebInspector.invokeOnceAfterBatchUpdate = function(object, method)
|
| * @param {function()=} animationComplete
|
| * @return {function()}
|
| */
|
| -WebInspector.animateFunction = function(window, func, params, frames, animationComplete)
|
| -{
|
| - var values = new Array(params.length);
|
| - var deltas = new Array(params.length);
|
| - for (var i = 0; i < params.length; ++i) {
|
| - values[i] = params[i].from;
|
| - deltas[i] = (params[i].to - params[i].from) / frames;
|
| +WebInspector.animateFunction = function(window, func, params, frames, animationComplete) {
|
| + var values = new Array(params.length);
|
| + var deltas = new Array(params.length);
|
| + for (var i = 0; i < params.length; ++i) {
|
| + values[i] = params[i].from;
|
| + deltas[i] = (params[i].to - params[i].from) / frames;
|
| + }
|
| +
|
| + var raf = window.requestAnimationFrame(animationStep);
|
| +
|
| + var framesLeft = frames;
|
| +
|
| + function animationStep() {
|
| + if (--framesLeft < 0) {
|
| + if (animationComplete)
|
| + animationComplete();
|
| + return;
|
| }
|
| -
|
| - var raf = window.requestAnimationFrame(animationStep);
|
| -
|
| - var framesLeft = frames;
|
| -
|
| - function animationStep()
|
| - {
|
| - if (--framesLeft < 0) {
|
| - if (animationComplete)
|
| - animationComplete();
|
| - return;
|
| - }
|
| - for (var i = 0; i < params.length; ++i) {
|
| - if (params[i].to > params[i].from)
|
| - values[i] = Number.constrain(values[i] + deltas[i], params[i].from, params[i].to);
|
| - else
|
| - values[i] = Number.constrain(values[i] + deltas[i], params[i].to, params[i].from);
|
| - }
|
| - func.apply(null, values);
|
| - raf = window.requestAnimationFrame(animationStep);
|
| + for (var i = 0; i < params.length; ++i) {
|
| + if (params[i].to > params[i].from)
|
| + values[i] = Number.constrain(values[i] + deltas[i], params[i].from, params[i].to);
|
| + else
|
| + values[i] = Number.constrain(values[i] + deltas[i], params[i].to, params[i].from);
|
| }
|
| + func.apply(null, values);
|
| + raf = window.requestAnimationFrame(animationStep);
|
| + }
|
|
|
| - function cancelAnimation()
|
| - {
|
| - window.cancelAnimationFrame(raf);
|
| - }
|
| + function cancelAnimation() {
|
| + window.cancelAnimationFrame(raf);
|
| + }
|
|
|
| - return cancelAnimation;
|
| + return cancelAnimation;
|
| };
|
|
|
| /**
|
| - * @constructor
|
| - * @extends {WebInspector.Object}
|
| - * @param {!Element} element
|
| - * @param {function(!Event)} callback
|
| + * @unrestricted
|
| */
|
| -WebInspector.LongClickController = function(element, callback)
|
| -{
|
| +WebInspector.LongClickController = class extends WebInspector.Object {
|
| + /**
|
| + * @param {!Element} element
|
| + * @param {function(!Event)} callback
|
| + */
|
| + constructor(element, callback) {
|
| + super();
|
| this._element = element;
|
| this._callback = callback;
|
| this._enable();
|
| -};
|
| + }
|
|
|
| -WebInspector.LongClickController.prototype = {
|
| - reset: function()
|
| - {
|
| - if (this._longClickInterval) {
|
| - clearInterval(this._longClickInterval);
|
| - delete this._longClickInterval;
|
| - }
|
| - },
|
| + reset() {
|
| + if (this._longClickInterval) {
|
| + clearInterval(this._longClickInterval);
|
| + delete this._longClickInterval;
|
| + }
|
| + }
|
|
|
| - _enable: function()
|
| - {
|
| - if (this._longClickData)
|
| - return;
|
| - var boundMouseDown = mouseDown.bind(this);
|
| - var boundMouseUp = mouseUp.bind(this);
|
| - var boundReset = this.reset.bind(this);
|
| -
|
| - this._element.addEventListener("mousedown", boundMouseDown, false);
|
| - this._element.addEventListener("mouseout", boundReset, false);
|
| - this._element.addEventListener("mouseup", boundMouseUp, false);
|
| - this._element.addEventListener("click", boundReset, true);
|
| -
|
| - this._longClickData = { mouseUp: boundMouseUp, mouseDown: boundMouseDown, reset: boundReset };
|
| -
|
| - /**
|
| - * @param {!Event} e
|
| - * @this {WebInspector.LongClickController}
|
| - */
|
| - function mouseDown(e)
|
| - {
|
| - if (e.which !== 1)
|
| - return;
|
| - var callback = this._callback;
|
| - this._longClickInterval = setTimeout(callback.bind(null, e), 200);
|
| - }
|
| + _enable() {
|
| + if (this._longClickData)
|
| + return;
|
| + var boundMouseDown = mouseDown.bind(this);
|
| + var boundMouseUp = mouseUp.bind(this);
|
| + var boundReset = this.reset.bind(this);
|
|
|
| - /**
|
| - * @param {!Event} e
|
| - * @this {WebInspector.LongClickController}
|
| - */
|
| - function mouseUp(e)
|
| - {
|
| - if (e.which !== 1)
|
| - return;
|
| - this.reset();
|
| - }
|
| - },
|
| + this._element.addEventListener('mousedown', boundMouseDown, false);
|
| + this._element.addEventListener('mouseout', boundReset, false);
|
| + this._element.addEventListener('mouseup', boundMouseUp, false);
|
| + this._element.addEventListener('click', boundReset, true);
|
|
|
| - dispose: function()
|
| - {
|
| - if (!this._longClickData)
|
| - return;
|
| - this._element.removeEventListener("mousedown", this._longClickData.mouseDown, false);
|
| - this._element.removeEventListener("mouseout", this._longClickData.reset, false);
|
| - this._element.removeEventListener("mouseup", this._longClickData.mouseUp, false);
|
| - this._element.addEventListener("click", this._longClickData.reset, true);
|
| - delete this._longClickData;
|
| - },
|
| + this._longClickData = {mouseUp: boundMouseUp, mouseDown: boundMouseDown, reset: boundReset};
|
| +
|
| + /**
|
| + * @param {!Event} e
|
| + * @this {WebInspector.LongClickController}
|
| + */
|
| + function mouseDown(e) {
|
| + if (e.which !== 1)
|
| + return;
|
| + var callback = this._callback;
|
| + this._longClickInterval = setTimeout(callback.bind(null, e), 200);
|
| + }
|
|
|
| - __proto__: WebInspector.Object.prototype
|
| + /**
|
| + * @param {!Event} e
|
| + * @this {WebInspector.LongClickController}
|
| + */
|
| + function mouseUp(e) {
|
| + if (e.which !== 1)
|
| + return;
|
| + this.reset();
|
| + }
|
| + }
|
| +
|
| + dispose() {
|
| + if (!this._longClickData)
|
| + return;
|
| + this._element.removeEventListener('mousedown', this._longClickData.mouseDown, false);
|
| + this._element.removeEventListener('mouseout', this._longClickData.reset, false);
|
| + this._element.removeEventListener('mouseup', this._longClickData.mouseUp, false);
|
| + this._element.addEventListener('click', this._longClickData.reset, true);
|
| + delete this._longClickData;
|
| + }
|
| };
|
|
|
| /**
|
| * @param {!Document} document
|
| * @param {!WebInspector.Setting} themeSetting
|
| */
|
| -WebInspector.initializeUIUtils = function(document, themeSetting)
|
| -{
|
| - document.defaultView.addEventListener("focus", WebInspector._windowFocused.bind(WebInspector, document), false);
|
| - document.defaultView.addEventListener("blur", WebInspector._windowBlurred.bind(WebInspector, document), false);
|
| - document.addEventListener("focus", WebInspector._focusChanged.bind(WebInspector), true);
|
| -
|
| - if (!WebInspector.themeSupport)
|
| - WebInspector.themeSupport = new WebInspector.ThemeSupport(themeSetting);
|
| - WebInspector.themeSupport.applyTheme(document);
|
| -
|
| - var body = /** @type {!Element} */ (document.body);
|
| - WebInspector.appendStyle(body, "ui/inspectorStyle.css");
|
| - WebInspector.appendStyle(body, "ui/popover.css");
|
| +WebInspector.initializeUIUtils = function(document, themeSetting) {
|
| + document.defaultView.addEventListener('focus', WebInspector._windowFocused.bind(WebInspector, document), false);
|
| + document.defaultView.addEventListener('blur', WebInspector._windowBlurred.bind(WebInspector, document), false);
|
| + document.addEventListener('focus', WebInspector._focusChanged.bind(WebInspector), true);
|
| +
|
| + if (!WebInspector.themeSupport)
|
| + WebInspector.themeSupport = new WebInspector.ThemeSupport(themeSetting);
|
| + WebInspector.themeSupport.applyTheme(document);
|
| +
|
| + var body = /** @type {!Element} */ (document.body);
|
| + WebInspector.appendStyle(body, 'ui/inspectorStyle.css');
|
| + WebInspector.appendStyle(body, 'ui/popover.css');
|
| };
|
|
|
| /**
|
| * @param {string} name
|
| * @return {string}
|
| */
|
| -WebInspector.beautifyFunctionName = function(name)
|
| -{
|
| - return name || WebInspector.UIString("(anonymous)");
|
| +WebInspector.beautifyFunctionName = function(name) {
|
| + return name || WebInspector.UIString('(anonymous)');
|
| };
|
|
|
| /**
|
| @@ -1286,12 +1233,8 @@ WebInspector.beautifyFunctionName = function(name)
|
| * @suppressGlobalPropertiesCheck
|
| * @template T
|
| */
|
| -function registerCustomElement(localName, typeExtension, prototype)
|
| -{
|
| - return document.registerElement(typeExtension, {
|
| - prototype: Object.create(prototype),
|
| - extends: localName
|
| - });
|
| +function registerCustomElement(localName, typeExtension, prototype) {
|
| + return document.registerElement(typeExtension, {prototype: Object.create(prototype), extends: localName});
|
| }
|
|
|
| /**
|
| @@ -1301,15 +1244,14 @@ function registerCustomElement(localName, typeExtension, prototype)
|
| * @param {string=} title
|
| * @return {!Element}
|
| */
|
| -function createTextButton(text, clickHandler, className, title)
|
| -{
|
| - var element = createElementWithClass("button", className || "", "text-button");
|
| - element.textContent = text;
|
| - if (clickHandler)
|
| - element.addEventListener("click", clickHandler, false);
|
| - if (title)
|
| - element.title = title;
|
| - return element;
|
| +function createTextButton(text, clickHandler, className, title) {
|
| + var element = createElementWithClass('button', className || '', 'text-button');
|
| + element.textContent = text;
|
| + if (clickHandler)
|
| + element.addEventListener('click', clickHandler, false);
|
| + if (title)
|
| + element.title = title;
|
| + return element;
|
| }
|
|
|
| /**
|
| @@ -1318,13 +1260,12 @@ function createTextButton(text, clickHandler, className, title)
|
| * @param {boolean=} checked
|
| * @return {!Element}
|
| */
|
| -function createRadioLabel(name, title, checked)
|
| -{
|
| - var element = createElement("label", "dt-radio");
|
| - element.radioElement.name = name;
|
| - element.radioElement.checked = !!checked;
|
| - element.createTextChild(title);
|
| - return element;
|
| +function createRadioLabel(name, title, checked) {
|
| + var element = createElement('label', 'dt-radio');
|
| + element.radioElement.name = name;
|
| + element.radioElement.checked = !!checked;
|
| + element.createTextChild(title);
|
| + return element;
|
| }
|
|
|
| /**
|
| @@ -1332,12 +1273,11 @@ function createRadioLabel(name, title, checked)
|
| * @param {string} iconClass
|
| * @return {!Element}
|
| */
|
| -function createLabel(title, iconClass)
|
| -{
|
| - var element = createElement("label", "dt-icon-label");
|
| - element.createChild("span").textContent = title;
|
| - element.type = iconClass;
|
| - return element;
|
| +function createLabel(title, iconClass) {
|
| + var element = createElement('label', 'dt-icon-label');
|
| + element.createChild('span').textContent = title;
|
| + element.type = iconClass;
|
| + return element;
|
| }
|
|
|
| /**
|
| @@ -1346,19 +1286,18 @@ function createLabel(title, iconClass)
|
| * @param {string=} subtitle
|
| * @return {!Element}
|
| */
|
| -function createCheckboxLabel(title, checked, subtitle)
|
| -{
|
| - var element = createElement("label", "dt-checkbox");
|
| - element.checkboxElement.checked = !!checked;
|
| - if (title !== undefined) {
|
| - element.textElement = element.createChild("div", "dt-checkbox-text");
|
| - element.textElement.textContent = title;
|
| - if (subtitle !== undefined) {
|
| - element.subtitleElement = element.textElement.createChild("div", "dt-checkbox-subtitle");
|
| - element.subtitleElement.textContent = subtitle;
|
| - }
|
| +function createCheckboxLabel(title, checked, subtitle) {
|
| + var element = createElement('label', 'dt-checkbox');
|
| + element.checkboxElement.checked = !!checked;
|
| + if (title !== undefined) {
|
| + element.textElement = element.createChild('div', 'dt-checkbox-text');
|
| + element.textElement.textContent = title;
|
| + if (subtitle !== undefined) {
|
| + element.subtitleElement = element.textElement.createChild('div', 'dt-checkbox-subtitle');
|
| + element.subtitleElement.textContent = subtitle;
|
| }
|
| - return element;
|
| + }
|
| + return element;
|
| }
|
|
|
| /**
|
| @@ -1367,14 +1306,13 @@ function createCheckboxLabel(title, checked, subtitle)
|
| * @param {number} max
|
| * @param {number} tabIndex
|
| */
|
| -function createSliderLabel(min, max, tabIndex)
|
| -{
|
| - var element = createElement("label", "dt-slider");
|
| - element.sliderElement.min = min;
|
| - element.sliderElement.max = max;
|
| - element.sliderElement.step = 1;
|
| - element.sliderElement.tabIndex = tabIndex;
|
| - return element;
|
| +function createSliderLabel(min, max, tabIndex) {
|
| + var element = createElement('label', 'dt-slider');
|
| + element.sliderElement.min = min;
|
| + element.sliderElement.max = max;
|
| + element.sliderElement.step = 1;
|
| + element.sliderElement.tabIndex = tabIndex;
|
| + return element;
|
| }
|
|
|
| /**
|
| @@ -1382,562 +1320,531 @@ function createSliderLabel(min, max, tabIndex)
|
| * @param {string} cssFile
|
| * @suppressGlobalPropertiesCheck
|
| */
|
| -WebInspector.appendStyle = function(node, cssFile)
|
| -{
|
| - var content = Runtime.cachedResources[cssFile] || "";
|
| - if (!content)
|
| - console.error(cssFile + " not preloaded. Check module.json");
|
| - var styleElement = createElement("style");
|
| - styleElement.type = "text/css";
|
| - styleElement.textContent = content;
|
| +WebInspector.appendStyle =
|
| + function(node, cssFile) {
|
| + var content = Runtime.cachedResources[cssFile] || '';
|
| + if (!content)
|
| + console.error(cssFile + ' not preloaded. Check module.json');
|
| + var styleElement = createElement('style');
|
| + styleElement.type = 'text/css';
|
| + styleElement.textContent = content;
|
| + node.appendChild(styleElement);
|
| +
|
| + var themeStyleSheet = WebInspector.themeSupport.themeStyleSheet(cssFile, content);
|
| + if (themeStyleSheet) {
|
| + styleElement = createElement('style');
|
| + styleElement.type = 'text/css';
|
| + styleElement.textContent = themeStyleSheet + '\n' + Runtime.resolveSourceURL(cssFile + '.theme');
|
| node.appendChild(styleElement);
|
| -
|
| - var themeStyleSheet = WebInspector.themeSupport.themeStyleSheet(cssFile, content);
|
| - if (themeStyleSheet) {
|
| - styleElement = createElement("style");
|
| - styleElement.type = "text/css";
|
| - styleElement.textContent = themeStyleSheet + "\n" + Runtime.resolveSourceURL(cssFile + ".theme");
|
| - node.appendChild(styleElement);
|
| - }
|
| + }
|
| }
|
|
|
| -;(function() {
|
| - registerCustomElement("button", "text-button", {
|
| - /**
|
| - * @this {Element}
|
| - */
|
| - createdCallback: function()
|
| - {
|
| - this.type = "button";
|
| - var root = WebInspector.createShadowRootWithCoreStyles(this, "ui/textButton.css");
|
| - root.createChild("content");
|
| - },
|
| -
|
| - __proto__: HTMLButtonElement.prototype
|
| - });
|
| -
|
| - registerCustomElement("label", "dt-radio", {
|
| - /**
|
| - * @this {Element}
|
| - */
|
| - createdCallback: function()
|
| - {
|
| - this.radioElement = this.createChild("input", "dt-radio-button");
|
| - this.radioElement.type = "radio";
|
| - var root = WebInspector.createShadowRootWithCoreStyles(this, "ui/radioButton.css");
|
| - root.createChild("content").select = ".dt-radio-button";
|
| - root.createChild("content");
|
| - this.addEventListener("click", radioClickHandler, false);
|
| - },
|
| -
|
| - __proto__: HTMLLabelElement.prototype
|
| - });
|
| -
|
| +;
|
| +(function() {
|
| + registerCustomElement('button', 'text-button', {
|
| /**
|
| - * @param {!Event} event
|
| - * @suppressReceiverCheck
|
| * @this {Element}
|
| */
|
| - function radioClickHandler(event)
|
| - {
|
| - if (this.radioElement.checked || this.radioElement.disabled)
|
| - return;
|
| - this.radioElement.checked = true;
|
| - this.radioElement.dispatchEvent(new Event("change"));
|
| - }
|
| -
|
| - registerCustomElement("label", "dt-checkbox", {
|
| - /**
|
| - * @this {Element}
|
| - */
|
| - createdCallback: function()
|
| - {
|
| - this._root = WebInspector.createShadowRootWithCoreStyles(this, "ui/checkboxTextLabel.css");
|
| - var checkboxElement = createElementWithClass("input", "dt-checkbox-button");
|
| - checkboxElement.type = "checkbox";
|
| - this._root.appendChild(checkboxElement);
|
| - this.checkboxElement = checkboxElement;
|
| -
|
| - this.addEventListener("click", toggleCheckbox.bind(this));
|
| -
|
| - /**
|
| - * @param {!Event} event
|
| - * @this {Node}
|
| - */
|
| - function toggleCheckbox(event)
|
| - {
|
| - if (event.target !== checkboxElement && event.target !== this) {
|
| - event.consume();
|
| - checkboxElement.click();
|
| - }
|
| - }
|
| -
|
| - this._root.createChild("content");
|
| - },
|
| -
|
| - /**
|
| - * @param {string} color
|
| - * @this {Element}
|
| - */
|
| - set backgroundColor(color)
|
| - {
|
| - this.checkboxElement.classList.add("dt-checkbox-themed");
|
| - this.checkboxElement.style.backgroundColor = color;
|
| - },
|
| -
|
| - /**
|
| - * @param {string} color
|
| - * @this {Element}
|
| - */
|
| - set checkColor(color)
|
| - {
|
| - this.checkboxElement.classList.add("dt-checkbox-themed");
|
| - var stylesheet = createElement("style");
|
| - stylesheet.textContent = "input.dt-checkbox-themed:checked:after { background-color: " + color + "}";
|
| - this._root.appendChild(stylesheet);
|
| - },
|
| -
|
| - /**
|
| - * @param {string} color
|
| - * @this {Element}
|
| - */
|
| - set borderColor(color)
|
| - {
|
| - this.checkboxElement.classList.add("dt-checkbox-themed");
|
| - this.checkboxElement.style.borderColor = color;
|
| - },
|
| -
|
| - /**
|
| - * @param {boolean} focus
|
| - * @this {Element}
|
| - */
|
| - set visualizeFocus(focus)
|
| - {
|
| - this.checkboxElement.classList.toggle("dt-checkbox-visualize-focus", focus);
|
| - },
|
| -
|
| - __proto__: HTMLLabelElement.prototype
|
| - });
|
| -
|
| - registerCustomElement("label", "dt-icon-label", {
|
| - /**
|
| - * @this {Element}
|
| - */
|
| - createdCallback: function()
|
| - {
|
| - var root = WebInspector.createShadowRootWithCoreStyles(this, "ui/smallIcon.css");
|
| - this._iconElement = root.createChild("div");
|
| - root.createChild("content");
|
| - },
|
| -
|
| - /**
|
| - * @param {string} type
|
| - * @this {Element}
|
| - */
|
| - set type(type)
|
| - {
|
| - this._iconElement.className = type;
|
| - },
|
| -
|
| - __proto__: HTMLLabelElement.prototype
|
| - });
|
| -
|
| - registerCustomElement("label", "dt-slider", {
|
| - /**
|
| - * @this {Element}
|
| - */
|
| - createdCallback: function()
|
| - {
|
| - var root = WebInspector.createShadowRootWithCoreStyles(this, "ui/slider.css");
|
| - this.sliderElement = createElementWithClass("input", "dt-range-input");
|
| - this.sliderElement.type = "range";
|
| - root.appendChild(this.sliderElement);
|
| - },
|
| -
|
| - /**
|
| - * @param {number} amount
|
| - * @this {Element}
|
| - */
|
| - set value(amount)
|
| - {
|
| - this.sliderElement.value = amount;
|
| - },
|
| -
|
| - /**
|
| - * @this {Element}
|
| - */
|
| - get value()
|
| - {
|
| - return this.sliderElement.value;
|
| - },
|
| -
|
| - __proto__: HTMLLabelElement.prototype
|
| - });
|
| -
|
| - registerCustomElement("label", "dt-small-bubble", {
|
| - /**
|
| - * @this {Element}
|
| - */
|
| - createdCallback: function()
|
| - {
|
| - var root = WebInspector.createShadowRootWithCoreStyles(this, "ui/smallBubble.css");
|
| - this._textElement = root.createChild("div");
|
| - this._textElement.className = "info";
|
| - this._textElement.createChild("content");
|
| - },
|
| -
|
| - /**
|
| - * @param {string} type
|
| - * @this {Element}
|
| - */
|
| - set type(type)
|
| - {
|
| - this._textElement.className = type;
|
| - },
|
| -
|
| - __proto__: HTMLLabelElement.prototype
|
| - });
|
| -
|
| - registerCustomElement("div", "dt-close-button", {
|
| - /**
|
| - * @this {Element}
|
| - */
|
| - createdCallback: function()
|
| - {
|
| - var root = WebInspector.createShadowRootWithCoreStyles(this, "ui/closeButton.css");
|
| - this._buttonElement = root.createChild("div", "close-button");
|
| - },
|
| -
|
| - /**
|
| - * @param {boolean} gray
|
| - * @this {Element}
|
| - */
|
| - set gray(gray)
|
| - {
|
| - this._buttonElement.className = gray ? "close-button-gray" : "close-button";
|
| - },
|
| -
|
| - __proto__: HTMLDivElement.prototype
|
| - });
|
| -})();
|
| + createdCallback: function() {
|
| + this.type = 'button';
|
| + var root = WebInspector.createShadowRootWithCoreStyles(this, 'ui/textButton.css');
|
| + root.createChild('content');
|
| + },
|
|
|
| -/**
|
| - * @param {!Element} input
|
| - * @param {function(string)} apply
|
| - * @param {function(string):boolean} validate
|
| - * @param {boolean} numeric
|
| - * @return {function(string)}
|
| - */
|
| -WebInspector.bindInput = function(input, apply, validate, numeric)
|
| -{
|
| - input.addEventListener("change", onChange, false);
|
| - input.addEventListener("input", onInput, false);
|
| - input.addEventListener("keydown", onKeyDown, false);
|
| - input.addEventListener("focus", input.select.bind(input), false);
|
| -
|
| - function onInput()
|
| - {
|
| - input.classList.toggle("error-input", !validate(input.value));
|
| - }
|
| + __proto__: HTMLButtonElement.prototype
|
| + });
|
|
|
| - function onChange()
|
| - {
|
| - var valid = validate(input.value);
|
| - input.classList.toggle("error-input", !valid);
|
| - if (valid)
|
| - apply(input.value);
|
| - }
|
| + registerCustomElement('label', 'dt-radio', {
|
| + /**
|
| + * @this {Element}
|
| + */
|
| + createdCallback: function() {
|
| + this.radioElement = this.createChild('input', 'dt-radio-button');
|
| + this.radioElement.type = 'radio';
|
| + var root = WebInspector.createShadowRootWithCoreStyles(this, 'ui/radioButton.css');
|
| + root.createChild('content').select = '.dt-radio-button';
|
| + root.createChild('content');
|
| + this.addEventListener('click', radioClickHandler, false);
|
| + },
|
|
|
| + __proto__: HTMLLabelElement.prototype
|
| + });
|
| +
|
| + /**
|
| + * @param {!Event} event
|
| + * @suppressReceiverCheck
|
| + * @this {Element}
|
| + */
|
| + function radioClickHandler(event) {
|
| + if (this.radioElement.checked || this.radioElement.disabled)
|
| + return;
|
| + this.radioElement.checked = true;
|
| + this.radioElement.dispatchEvent(new Event('change'));
|
| + }
|
| +
|
| + registerCustomElement('label', 'dt-checkbox', {
|
| /**
|
| - * @param {!Event} event
|
| + * @this {Element}
|
| */
|
| - function onKeyDown(event)
|
| - {
|
| - if (isEnterKey(event)) {
|
| - if (validate(input.value))
|
| - apply(input.value);
|
| - return;
|
| + createdCallback: function() {
|
| + this._root = WebInspector.createShadowRootWithCoreStyles(this, 'ui/checkboxTextLabel.css');
|
| + var checkboxElement = createElementWithClass('input', 'dt-checkbox-button');
|
| + checkboxElement.type = 'checkbox';
|
| + this._root.appendChild(checkboxElement);
|
| + this.checkboxElement = checkboxElement;
|
| +
|
| + this.addEventListener('click', toggleCheckbox.bind(this));
|
| +
|
| + /**
|
| + * @param {!Event} event
|
| + * @this {Node}
|
| + */
|
| + function toggleCheckbox(event) {
|
| + if (event.target !== checkboxElement && event.target !== this) {
|
| + event.consume();
|
| + checkboxElement.click();
|
| }
|
| + }
|
|
|
| - if (!numeric)
|
| - return;
|
| -
|
| - var increment = event.key === "ArrowUp" ? 1 : event.key === "ArrowDown" ? -1 : 0;
|
| - if (!increment)
|
| - return;
|
| - if (event.shiftKey)
|
| - increment *= 10;
|
| -
|
| - var value = input.value;
|
| - if (!validate(value) || !value)
|
| - return;
|
| -
|
| - value = (value ? Number(value) : 0) + increment;
|
| - var stringValue = value ? String(value) : "";
|
| - if (!validate(stringValue) || !value)
|
| - return;
|
| + this._root.createChild('content');
|
| + },
|
|
|
| - input.value = stringValue;
|
| - apply(input.value);
|
| - event.preventDefault();
|
| - }
|
| + /**
|
| + * @param {string} color
|
| + * @this {Element}
|
| + */
|
| + set backgroundColor(color) {
|
| + this.checkboxElement.classList.add('dt-checkbox-themed');
|
| + this.checkboxElement.style.backgroundColor = color;
|
| + },
|
|
|
| /**
|
| - * @param {string} value
|
| + * @param {string} color
|
| + * @this {Element}
|
| */
|
| - function setValue(value)
|
| - {
|
| - if (value === input.value)
|
| - return;
|
| - var valid = validate(value);
|
| - input.classList.toggle("error-input", !valid);
|
| - input.value = value;
|
| - }
|
| + set checkColor(color) {
|
| + this.checkboxElement.classList.add('dt-checkbox-themed');
|
| + var stylesheet = createElement('style');
|
| + stylesheet.textContent = 'input.dt-checkbox-themed:checked:after { background-color: ' + color + '}';
|
| + this._root.appendChild(stylesheet);
|
| + },
|
|
|
| - return setValue;
|
| -};
|
| + /**
|
| + * @param {string} color
|
| + * @this {Element}
|
| + */
|
| + set borderColor(color) {
|
| + this.checkboxElement.classList.add('dt-checkbox-themed');
|
| + this.checkboxElement.style.borderColor = color;
|
| + },
|
|
|
| -/**
|
| - * @constructor
|
| - * @param {!WebInspector.Setting} setting
|
| - */
|
| -WebInspector.ThemeSupport = function(setting)
|
| -{
|
| - this._themeName = setting.get() || "default";
|
| - this._themableProperties = new Set([
|
| - "color", "box-shadow", "text-shadow", "outline-color",
|
| - "background-image", "background-color",
|
| - "border-left-color", "border-right-color", "border-top-color", "border-bottom-color",
|
| - "-webkit-border-image"]);
|
| - /** @type {!Map<string, string>} */
|
| - this._cachedThemePatches = new Map();
|
| - this._setting = setting;
|
| -};
|
| + /**
|
| + * @param {boolean} focus
|
| + * @this {Element}
|
| + */
|
| + set visualizeFocus(focus) {
|
| + this.checkboxElement.classList.toggle('dt-checkbox-visualize-focus', focus);
|
| + },
|
|
|
| -/**
|
| - * @enum {number}
|
| - */
|
| -WebInspector.ThemeSupport.ColorUsage = {
|
| - Unknown: 0,
|
| - Foreground: 1 << 0,
|
| - Background: 1 << 1,
|
| - Selection: 1 << 2,
|
| -};
|
| + __proto__: HTMLLabelElement.prototype
|
| + });
|
|
|
| -WebInspector.ThemeSupport.prototype = {
|
| + registerCustomElement('label', 'dt-icon-label', {
|
| /**
|
| - * @return {boolean}
|
| + * @this {Element}
|
| */
|
| - hasTheme: function()
|
| - {
|
| - return this._themeName !== "default";
|
| + createdCallback: function() {
|
| + var root = WebInspector.createShadowRootWithCoreStyles(this, 'ui/smallIcon.css');
|
| + this._iconElement = root.createChild('div');
|
| + root.createChild('content');
|
| },
|
|
|
| /**
|
| - * @return {string}
|
| + * @param {string} type
|
| + * @this {Element}
|
| */
|
| - themeName: function()
|
| - {
|
| - return this._themeName;
|
| + set type(type) {
|
| + this._iconElement.className = type;
|
| },
|
|
|
| + __proto__: HTMLLabelElement.prototype
|
| + });
|
| +
|
| + registerCustomElement('label', 'dt-slider', {
|
| /**
|
| - * @param {!Element} element
|
| + * @this {Element}
|
| */
|
| - injectHighlightStyleSheets: function(element)
|
| - {
|
| - this._injectingStyleSheet = true;
|
| - WebInspector.appendStyle(element, "ui/inspectorSyntaxHighlight.css");
|
| - if (this._themeName === "dark")
|
| - WebInspector.appendStyle(element, "ui/inspectorSyntaxHighlightDark.css");
|
| - this._injectingStyleSheet = false;
|
| + createdCallback: function() {
|
| + var root = WebInspector.createShadowRootWithCoreStyles(this, 'ui/slider.css');
|
| + this.sliderElement = createElementWithClass('input', 'dt-range-input');
|
| + this.sliderElement.type = 'range';
|
| + root.appendChild(this.sliderElement);
|
| },
|
|
|
| /**
|
| - * @param {!Document} document
|
| + * @param {number} amount
|
| + * @this {Element}
|
| */
|
| - applyTheme: function(document)
|
| - {
|
| - if (!this.hasTheme())
|
| - return;
|
| -
|
| - if (this._themeName === "dark")
|
| - document.body.classList.add("-theme-with-dark-background");
|
| -
|
| - var styleSheets = document.styleSheets;
|
| - var result = [];
|
| - for (var i = 0; i < styleSheets.length; ++i)
|
| - result.push(this._patchForTheme(styleSheets[i].href, styleSheets[i]));
|
| - result.push("/*# sourceURL=inspector.css.theme */");
|
| -
|
| - var styleElement = createElement("style");
|
| - styleElement.type = "text/css";
|
| - styleElement.textContent = result.join("\n");
|
| - document.head.appendChild(styleElement);
|
| + set value(amount) {
|
| + this.sliderElement.value = amount;
|
| },
|
|
|
| /**
|
| - * @param {string} id
|
| - * @param {string} text
|
| - * @return {string}
|
| - * @suppressGlobalPropertiesCheck
|
| + * @this {Element}
|
| */
|
| - themeStyleSheet: function(id, text)
|
| - {
|
| - if (!this.hasTheme() || this._injectingStyleSheet)
|
| - return "";
|
| -
|
| - var patch = this._cachedThemePatches.get(id);
|
| - if (!patch) {
|
| - var styleElement = createElement("style");
|
| - styleElement.type = "text/css";
|
| - styleElement.textContent = text;
|
| - document.body.appendChild(styleElement);
|
| - patch = this._patchForTheme(id, styleElement.sheet);
|
| - document.body.removeChild(styleElement);
|
| - }
|
| - return patch;
|
| + get value() {
|
| + return this.sliderElement.value;
|
| },
|
|
|
| + __proto__: HTMLLabelElement.prototype
|
| + });
|
| +
|
| + registerCustomElement('label', 'dt-small-bubble', {
|
| /**
|
| - * @param {string} id
|
| - * @param {!StyleSheet} styleSheet
|
| - * @return {string}
|
| + * @this {Element}
|
| */
|
| - _patchForTheme: function(id, styleSheet)
|
| - {
|
| - var cached = this._cachedThemePatches.get(id);
|
| - if (cached)
|
| - return cached;
|
| -
|
| - try {
|
| - var rules = styleSheet.cssRules;
|
| - var result = [];
|
| - for (var j = 0; j < rules.length; ++j) {
|
| - if (rules[j] instanceof CSSImportRule) {
|
| - result.push(this._patchForTheme(rules[j].styleSheet.href, rules[j].styleSheet));
|
| - continue;
|
| - }
|
| - var output = [];
|
| - var style = rules[j].style;
|
| - var selectorText = rules[j].selectorText;
|
| - for (var i = 0; style && i < style.length; ++i)
|
| - this._patchProperty(selectorText, style, style[i], output);
|
| - if (output.length)
|
| - result.push(rules[j].selectorText + "{" + output.join("") + "}");
|
| - }
|
| -
|
| - var fullText = result.join("\n");
|
| - this._cachedThemePatches.set(id, fullText);
|
| - return fullText;
|
| - } catch (e) {
|
| - this._setting.set("default");
|
| - return "";
|
| - }
|
| + createdCallback: function() {
|
| + var root = WebInspector.createShadowRootWithCoreStyles(this, 'ui/smallBubble.css');
|
| + this._textElement = root.createChild('div');
|
| + this._textElement.className = 'info';
|
| + this._textElement.createChild('content');
|
| },
|
|
|
| /**
|
| - * @param {string} selectorText
|
| - * @param {!CSSStyleDeclaration} style
|
| - * @param {string} name
|
| - * @param {!Array<string>} output
|
| - *
|
| - * Theming API is primarily targeted at making dark theme look good.
|
| - * - If rule has ".-theme-preserve" in selector, it won't be affected.
|
| - * - If rule has ".selection" or "selected" or "-theme-selection-color" in selector, its hue is rotated 180deg in dark themes.
|
| - * - One can create specializations for dark themes via body.-theme-with-dark-background selector in host context.
|
| + * @param {string} type
|
| + * @this {Element}
|
| */
|
| - _patchProperty: function(selectorText, style, name, output)
|
| - {
|
| - if (!this._themableProperties.has(name))
|
| - return;
|
| -
|
| - var value = style.getPropertyValue(name);
|
| - if (!value || value === "none" || value === "inherit" || value === "initial" || value === "transparent")
|
| - return;
|
| - if (name === "background-image" && value.indexOf("gradient") === -1)
|
| - return;
|
| -
|
| - var isSelection = selectorText.indexOf(".-theme-selection-color") !== -1;
|
| - if (selectorText.indexOf("-theme-") !== -1 && !isSelection)
|
| - return;
|
| -
|
| - if (name === "-webkit-border-image") {
|
| - output.push("-webkit-filter: invert(100%)");
|
| - return;
|
| - }
|
| -
|
| - isSelection = isSelection || selectorText.indexOf("selected") !== -1 || selectorText.indexOf(".selection") !== -1;
|
| - var colorUsage = WebInspector.ThemeSupport.ColorUsage.Unknown;
|
| - if (isSelection)
|
| - colorUsage |= WebInspector.ThemeSupport.ColorUsage.Selection;
|
| - if (name.indexOf("background") === 0 || name.indexOf("border") === 0)
|
| - colorUsage |= WebInspector.ThemeSupport.ColorUsage.Background;
|
| - if (name.indexOf("background") === -1)
|
| - colorUsage |= WebInspector.ThemeSupport.ColorUsage.Foreground;
|
| -
|
| - output.push(name);
|
| - output.push(":");
|
| - var items = value.replace(WebInspector.Color.Regex, "\0$1\0").split("\0");
|
| - for (var i = 0; i < items.length; ++i)
|
| - output.push(this.patchColor(items[i], colorUsage));
|
| - if (style.getPropertyPriority(name))
|
| - output.push(" !important");
|
| - output.push(";");
|
| + set type(type) {
|
| + this._textElement.className = type;
|
| },
|
|
|
| + __proto__: HTMLLabelElement.prototype
|
| + });
|
| +
|
| + registerCustomElement('div', 'dt-close-button', {
|
| /**
|
| - * @param {string} text
|
| - * @param {!WebInspector.ThemeSupport.ColorUsage} colorUsage
|
| - * @return {string}
|
| + * @this {Element}
|
| */
|
| - patchColor: function(text, colorUsage)
|
| - {
|
| - var color = WebInspector.Color.parse(text);
|
| - if (!color)
|
| - return text;
|
| -
|
| - var hsla = color.hsla();
|
| - this._patchHSLA(hsla, colorUsage);
|
| - var rgba = [];
|
| - WebInspector.Color.hsl2rgb(hsla, rgba);
|
| - var outColor = new WebInspector.Color(rgba, color.format());
|
| - var outText = outColor.asString(null);
|
| - if (!outText)
|
| - outText = outColor.asString(outColor.hasAlpha() ? WebInspector.Color.Format.RGBA : WebInspector.Color.Format.RGB);
|
| - return outText || text;
|
| + createdCallback: function() {
|
| + var root = WebInspector.createShadowRootWithCoreStyles(this, 'ui/closeButton.css');
|
| + this._buttonElement = root.createChild('div', 'close-button');
|
| },
|
|
|
| /**
|
| - * @param {!Array<number>} hsla
|
| - * @param {!WebInspector.ThemeSupport.ColorUsage} colorUsage
|
| + * @param {boolean} gray
|
| + * @this {Element}
|
| */
|
| - _patchHSLA: function(hsla, colorUsage)
|
| - {
|
| - var hue = hsla[0];
|
| - var sat = hsla[1];
|
| - var lit = hsla[2];
|
| - var alpha = hsla[3];
|
| -
|
| - switch (this._themeName) {
|
| - case "dark":
|
| - if (colorUsage & WebInspector.ThemeSupport.ColorUsage.Selection)
|
| - hue = (hue + 0.5) % 1;
|
| - var minCap = colorUsage & WebInspector.ThemeSupport.ColorUsage.Background ? 0.14 : 0;
|
| - var maxCap = colorUsage & WebInspector.ThemeSupport.ColorUsage.Foreground ? 0.9 : 1;
|
| - lit = 1 - lit;
|
| - if (lit < minCap * 2)
|
| - lit = minCap + lit / 2;
|
| - else if (lit > 2 * maxCap - 1)
|
| - lit = maxCap - 1 / 2 + lit / 2;
|
| -
|
| - break;
|
| + set gray(gray) {
|
| + this._buttonElement.className = gray ? 'close-button-gray' : 'close-button';
|
| + },
|
| +
|
| + __proto__: HTMLDivElement.prototype
|
| + });
|
| +})();
|
| +
|
| +/**
|
| + * @param {!Element} input
|
| + * @param {function(string)} apply
|
| + * @param {function(string):boolean} validate
|
| + * @param {boolean} numeric
|
| + * @return {function(string)}
|
| + */
|
| +WebInspector.bindInput = function(input, apply, validate, numeric) {
|
| + input.addEventListener('change', onChange, false);
|
| + input.addEventListener('input', onInput, false);
|
| + input.addEventListener('keydown', onKeyDown, false);
|
| + input.addEventListener('focus', input.select.bind(input), false);
|
| +
|
| + function onInput() {
|
| + input.classList.toggle('error-input', !validate(input.value));
|
| + }
|
| +
|
| + function onChange() {
|
| + var valid = validate(input.value);
|
| + input.classList.toggle('error-input', !valid);
|
| + if (valid)
|
| + apply(input.value);
|
| + }
|
| +
|
| + /**
|
| + * @param {!Event} event
|
| + */
|
| + function onKeyDown(event) {
|
| + if (isEnterKey(event)) {
|
| + if (validate(input.value))
|
| + apply(input.value);
|
| + return;
|
| + }
|
| +
|
| + if (!numeric)
|
| + return;
|
| +
|
| + var increment = event.key === 'ArrowUp' ? 1 : event.key === 'ArrowDown' ? -1 : 0;
|
| + if (!increment)
|
| + return;
|
| + if (event.shiftKey)
|
| + increment *= 10;
|
| +
|
| + var value = input.value;
|
| + if (!validate(value) || !value)
|
| + return;
|
| +
|
| + value = (value ? Number(value) : 0) + increment;
|
| + var stringValue = value ? String(value) : '';
|
| + if (!validate(stringValue) || !value)
|
| + return;
|
| +
|
| + input.value = stringValue;
|
| + apply(input.value);
|
| + event.preventDefault();
|
| + }
|
| +
|
| + /**
|
| + * @param {string} value
|
| + */
|
| + function setValue(value) {
|
| + if (value === input.value)
|
| + return;
|
| + var valid = validate(value);
|
| + input.classList.toggle('error-input', !valid);
|
| + input.value = value;
|
| + }
|
| +
|
| + return setValue;
|
| +};
|
| +
|
| +/**
|
| + * @unrestricted
|
| + */
|
| +WebInspector.ThemeSupport = class {
|
| + /**
|
| + * @param {!WebInspector.Setting} setting
|
| + */
|
| + constructor(setting) {
|
| + this._themeName = setting.get() || 'default';
|
| + this._themableProperties = new Set([
|
| + 'color', 'box-shadow', 'text-shadow', 'outline-color', 'background-image', 'background-color',
|
| + 'border-left-color', 'border-right-color', 'border-top-color', 'border-bottom-color', '-webkit-border-image'
|
| + ]);
|
| + /** @type {!Map<string, string>} */
|
| + this._cachedThemePatches = new Map();
|
| + this._setting = setting;
|
| + }
|
| +
|
| + /**
|
| + * @return {boolean}
|
| + */
|
| + hasTheme() {
|
| + return this._themeName !== 'default';
|
| + }
|
| +
|
| + /**
|
| + * @return {string}
|
| + */
|
| + themeName() {
|
| + return this._themeName;
|
| + }
|
| +
|
| + /**
|
| + * @param {!Element} element
|
| + */
|
| + injectHighlightStyleSheets(element) {
|
| + this._injectingStyleSheet = true;
|
| + WebInspector.appendStyle(element, 'ui/inspectorSyntaxHighlight.css');
|
| + if (this._themeName === 'dark')
|
| + WebInspector.appendStyle(element, 'ui/inspectorSyntaxHighlightDark.css');
|
| + this._injectingStyleSheet = false;
|
| + }
|
| +
|
| + /**
|
| + * @param {!Document} document
|
| + */
|
| + applyTheme(document) {
|
| + if (!this.hasTheme())
|
| + return;
|
| +
|
| + if (this._themeName === 'dark')
|
| + document.body.classList.add('-theme-with-dark-background');
|
| +
|
| + var styleSheets = document.styleSheets;
|
| + var result = [];
|
| + for (var i = 0; i < styleSheets.length; ++i)
|
| + result.push(this._patchForTheme(styleSheets[i].href, styleSheets[i]));
|
| + result.push('/*# sourceURL=inspector.css.theme */');
|
| +
|
| + var styleElement = createElement('style');
|
| + styleElement.type = 'text/css';
|
| + styleElement.textContent = result.join('\n');
|
| + document.head.appendChild(styleElement);
|
| + }
|
| +
|
| + /**
|
| + * @param {string} id
|
| + * @param {string} text
|
| + * @return {string}
|
| + * @suppressGlobalPropertiesCheck
|
| + */
|
| + themeStyleSheet(id, text) {
|
| + if (!this.hasTheme() || this._injectingStyleSheet)
|
| + return '';
|
| +
|
| + var patch = this._cachedThemePatches.get(id);
|
| + if (!patch) {
|
| + var styleElement = createElement('style');
|
| + styleElement.type = 'text/css';
|
| + styleElement.textContent = text;
|
| + document.body.appendChild(styleElement);
|
| + patch = this._patchForTheme(id, styleElement.sheet);
|
| + document.body.removeChild(styleElement);
|
| + }
|
| + return patch;
|
| + }
|
| +
|
| + /**
|
| + * @param {string} id
|
| + * @param {!StyleSheet} styleSheet
|
| + * @return {string}
|
| + */
|
| + _patchForTheme(id, styleSheet) {
|
| + var cached = this._cachedThemePatches.get(id);
|
| + if (cached)
|
| + return cached;
|
| +
|
| + try {
|
| + var rules = styleSheet.cssRules;
|
| + var result = [];
|
| + for (var j = 0; j < rules.length; ++j) {
|
| + if (rules[j] instanceof CSSImportRule) {
|
| + result.push(this._patchForTheme(rules[j].styleSheet.href, rules[j].styleSheet));
|
| + continue;
|
| }
|
| - hsla[0] = Number.constrain(hue, 0, 1);
|
| - hsla[1] = Number.constrain(sat, 0, 1);
|
| - hsla[2] = Number.constrain(lit, 0, 1);
|
| - hsla[3] = Number.constrain(alpha, 0, 1);
|
| + var output = [];
|
| + var style = rules[j].style;
|
| + var selectorText = rules[j].selectorText;
|
| + for (var i = 0; style && i < style.length; ++i)
|
| + this._patchProperty(selectorText, style, style[i], output);
|
| + if (output.length)
|
| + result.push(rules[j].selectorText + '{' + output.join('') + '}');
|
| + }
|
| +
|
| + var fullText = result.join('\n');
|
| + this._cachedThemePatches.set(id, fullText);
|
| + return fullText;
|
| + } catch (e) {
|
| + this._setting.set('default');
|
| + return '';
|
| }
|
| + }
|
| +
|
| + /**
|
| + * @param {string} selectorText
|
| + * @param {!CSSStyleDeclaration} style
|
| + * @param {string} name
|
| + * @param {!Array<string>} output
|
| + *
|
| + * Theming API is primarily targeted at making dark theme look good.
|
| + * - If rule has ".-theme-preserve" in selector, it won't be affected.
|
| + * - If rule has ".selection" or "selected" or "-theme-selection-color" in selector, its hue is rotated 180deg in dark themes.
|
| + * - One can create specializations for dark themes via body.-theme-with-dark-background selector in host context.
|
| + */
|
| + _patchProperty(selectorText, style, name, output) {
|
| + if (!this._themableProperties.has(name))
|
| + return;
|
| +
|
| + var value = style.getPropertyValue(name);
|
| + if (!value || value === 'none' || value === 'inherit' || value === 'initial' || value === 'transparent')
|
| + return;
|
| + if (name === 'background-image' && value.indexOf('gradient') === -1)
|
| + return;
|
| +
|
| + var isSelection = selectorText.indexOf('.-theme-selection-color') !== -1;
|
| + if (selectorText.indexOf('-theme-') !== -1 && !isSelection)
|
| + return;
|
| +
|
| + if (name === '-webkit-border-image') {
|
| + output.push('-webkit-filter: invert(100%)');
|
| + return;
|
| + }
|
| +
|
| + isSelection = isSelection || selectorText.indexOf('selected') !== -1 || selectorText.indexOf('.selection') !== -1;
|
| + var colorUsage = WebInspector.ThemeSupport.ColorUsage.Unknown;
|
| + if (isSelection)
|
| + colorUsage |= WebInspector.ThemeSupport.ColorUsage.Selection;
|
| + if (name.indexOf('background') === 0 || name.indexOf('border') === 0)
|
| + colorUsage |= WebInspector.ThemeSupport.ColorUsage.Background;
|
| + if (name.indexOf('background') === -1)
|
| + colorUsage |= WebInspector.ThemeSupport.ColorUsage.Foreground;
|
| +
|
| + output.push(name);
|
| + output.push(':');
|
| + var items = value.replace(WebInspector.Color.Regex, '\0$1\0').split('\0');
|
| + for (var i = 0; i < items.length; ++i)
|
| + output.push(this.patchColor(items[i], colorUsage));
|
| + if (style.getPropertyPriority(name))
|
| + output.push(' !important');
|
| + output.push(';');
|
| + }
|
| +
|
| + /**
|
| + * @param {string} text
|
| + * @param {!WebInspector.ThemeSupport.ColorUsage} colorUsage
|
| + * @return {string}
|
| + */
|
| + patchColor(text, colorUsage) {
|
| + var color = WebInspector.Color.parse(text);
|
| + if (!color)
|
| + return text;
|
| +
|
| + var hsla = color.hsla();
|
| + this._patchHSLA(hsla, colorUsage);
|
| + var rgba = [];
|
| + WebInspector.Color.hsl2rgb(hsla, rgba);
|
| + var outColor = new WebInspector.Color(rgba, color.format());
|
| + var outText = outColor.asString(null);
|
| + if (!outText)
|
| + outText = outColor.asString(outColor.hasAlpha() ? WebInspector.Color.Format.RGBA : WebInspector.Color.Format.RGB);
|
| + return outText || text;
|
| + }
|
| +
|
| + /**
|
| + * @param {!Array<number>} hsla
|
| + * @param {!WebInspector.ThemeSupport.ColorUsage} colorUsage
|
| + */
|
| + _patchHSLA(hsla, colorUsage) {
|
| + var hue = hsla[0];
|
| + var sat = hsla[1];
|
| + var lit = hsla[2];
|
| + var alpha = hsla[3];
|
| +
|
| + switch (this._themeName) {
|
| + case 'dark':
|
| + if (colorUsage & WebInspector.ThemeSupport.ColorUsage.Selection)
|
| + hue = (hue + 0.5) % 1;
|
| + var minCap = colorUsage & WebInspector.ThemeSupport.ColorUsage.Background ? 0.14 : 0;
|
| + var maxCap = colorUsage & WebInspector.ThemeSupport.ColorUsage.Foreground ? 0.9 : 1;
|
| + lit = 1 - lit;
|
| + if (lit < minCap * 2)
|
| + lit = minCap + lit / 2;
|
| + else if (lit > 2 * maxCap - 1)
|
| + lit = maxCap - 1 / 2 + lit / 2;
|
| +
|
| + break;
|
| + }
|
| + hsla[0] = Number.constrain(hue, 0, 1);
|
| + hsla[1] = Number.constrain(sat, 0, 1);
|
| + hsla[2] = Number.constrain(lit, 0, 1);
|
| + hsla[3] = Number.constrain(alpha, 0, 1);
|
| + }
|
| +};
|
| +
|
| +/**
|
| + * @enum {number}
|
| + */
|
| +WebInspector.ThemeSupport.ColorUsage = {
|
| + Unknown: 0,
|
| + Foreground: 1 << 0,
|
| + Background: 1 << 1,
|
| + Selection: 1 << 2,
|
| };
|
|
|
| /**
|
| @@ -1948,30 +1855,29 @@ WebInspector.ThemeSupport.prototype = {
|
| * @param {string=} tooltipText
|
| * @return {!Element}
|
| */
|
| -WebInspector.linkifyURLAsNode = function(url, linkText, classes, isExternal, tooltipText)
|
| -{
|
| - if (!linkText)
|
| - linkText = url;
|
| -
|
| - var a = createElementWithClass("a", classes);
|
| - var href = url;
|
| - if (url.trim().toLowerCase().startsWith("javascript:"))
|
| - href = null;
|
| - if (isExternal && WebInspector.ParsedURL.isRelativeURL(url))
|
| - href = null;
|
| - if (href !== null) {
|
| - a.href = href;
|
| - a.classList.add(isExternal ? "webkit-html-external-link" : "webkit-html-resource-link");
|
| - }
|
| - if (!tooltipText && linkText !== url)
|
| - a.title = url;
|
| - else if (tooltipText)
|
| - a.title = tooltipText;
|
| - a.textContent = linkText.trimMiddle(150);
|
| - if (isExternal)
|
| - a.setAttribute("target", "_blank");
|
| -
|
| - return a;
|
| +WebInspector.linkifyURLAsNode = function(url, linkText, classes, isExternal, tooltipText) {
|
| + if (!linkText)
|
| + linkText = url;
|
| +
|
| + var a = createElementWithClass('a', classes);
|
| + var href = url;
|
| + if (url.trim().toLowerCase().startsWith('javascript:'))
|
| + href = null;
|
| + if (isExternal && WebInspector.ParsedURL.isRelativeURL(url))
|
| + href = null;
|
| + if (href !== null) {
|
| + a.href = href;
|
| + a.classList.add(isExternal ? 'webkit-html-external-link' : 'webkit-html-resource-link');
|
| + }
|
| + if (!tooltipText && linkText !== url)
|
| + a.title = url;
|
| + else if (tooltipText)
|
| + a.title = tooltipText;
|
| + a.textContent = linkText.trimMiddle(150);
|
| + if (isExternal)
|
| + a.setAttribute('target', '_blank');
|
| +
|
| + return a;
|
| };
|
|
|
| /**
|
| @@ -1979,23 +1885,22 @@ WebInspector.linkifyURLAsNode = function(url, linkText, classes, isExternal, too
|
| * @param {string} title
|
| * @return {!Element}
|
| */
|
| -WebInspector.linkifyDocumentationURLAsNode = function(article, title)
|
| -{
|
| - return WebInspector.linkifyURLAsNode("https://developers.google.com/web/tools/chrome-devtools/" + article, title, undefined, true);
|
| +WebInspector.linkifyDocumentationURLAsNode = function(article, title) {
|
| + return WebInspector.linkifyURLAsNode(
|
| + 'https://developers.google.com/web/tools/chrome-devtools/' + article, title, undefined, true);
|
| };
|
|
|
| /**
|
| * @param {string} url
|
| * @return {!Promise<?Image>}
|
| */
|
| -WebInspector.loadImage = function(url)
|
| -{
|
| - return new Promise(fulfill => {
|
| - var image = new Image();
|
| - image.addEventListener("load", () => fulfill(image));
|
| - image.addEventListener("error", () => fulfill(null));
|
| - image.src = url;
|
| - });
|
| +WebInspector.loadImage = function(url) {
|
| + return new Promise(fulfill => {
|
| + var image = new Image();
|
| + image.addEventListener('load', () => fulfill(image));
|
| + image.addEventListener('error', () => fulfill(null));
|
| + image.src = url;
|
| + });
|
| };
|
|
|
| /** @type {!WebInspector.ThemeSupport} */
|
|
|
Chromium Code Reviews
Issue 2466123002:
DevTools: reformat front-end code to match chromium style. (Closed)
