squash 'resources/unpacked/devtools' changes from fcdd600..ec68137

ec68137 DevTools: iterate and enable logpoints experiment d44d303 DevTools: migrate to the light selection color to achieve 4.5+ contrast ratio. 0d71602 DevTools: highlight relevant box model quads when editing padding/margin/border. 6986e2f DevTools: do not steal focus from the styles sidebar while editing. ff81f07 DevTools: Fix focus when selecting to the left of treeitems git-subtree-dir: resources/unpacked/devtools git-subtree-split: ec68137
dijonkitchen · Dec 26, 2018 · 314bc1d · 314bc1d
1 parent 60dd0c4
commit 314bc1d
Show file tree

Hide file tree

Showing 18 changed files with 101 additions and 157 deletions.
diff --git a/front_end/devtools_compatibility.js b/front_end/devtools_compatibility.js
@@ -320,35 +320,31 @@
    */
   const InspectorFrontendHostImpl = class {
     /**
-     * @override
      * @return {string}
      */
     getSelectionBackgroundColor() {
-      return DevToolsHost.getSelectionBackgroundColor();
+      return '#6e86ff';
     }
 
     /**
-     * @override
      * @return {string}
      */
     getSelectionForegroundColor() {
-      return DevToolsHost.getSelectionForegroundColor();
+      return '#ffffff';
     }
 
     /**
-     * @override
      * @return {string}
      */
     getInactiveSelectionBackgroundColor() {
-      return DevToolsHost.getInactiveSelectionBackgroundColor();
+      return '#c9c8c8';
     }
 
     /**
-     * @override
      * @return {string}
      */
     getInactiveSelectionForegroundColor() {
-      return DevToolsHost.getInactiveSelectionForegroundColor();
+      return '#323232';
     }
 
     /**

diff --git a/front_end/elements/ElementsTreeOutline.js b/front_end/elements/ElementsTreeOutline.js
@@ -290,6 +290,8 @@ Elements.ElementsTreeOutline = class extends UI.TreeOutline {
    * @param {boolean} visible
    */
   setVisible(visible) {
+    if (visible === this._visible)
+      return;
     this._visible = visible;
     if (!this._visible) {
       this._popoverHelper.hidePopover();
@@ -560,6 +562,7 @@ Elements.ElementsTreeOutline = class extends UI.TreeOutline {
       return;
 
     element.select();
+    event.consume(true);
   }
 
   /**

diff --git a/front_end/elements/StylePropertyTreeElement.js b/front_end/elements/StylePropertyTreeElement.js
@@ -604,7 +604,7 @@ Elements.StylePropertyTreeElement = class extends UI.TreeElement {
 
     this._originalPropertyText = this.property.propertyText;
 
-    this._parentPane.setEditingStyle(true);
+    this._parentPane.setEditingStyle(true, this);
     if (selectElement.parentElement)
       selectElement.parentElement.scrollIntoViewIfNeeded(false);
 

diff --git a/front_end/elements/StylesSidebarPane.js b/front_end/elements/StylesSidebarPane.js
@@ -378,12 +378,35 @@ Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane {
 
   /**
    * @param {boolean} editing
+   * @param {!Elements.StylePropertyTreeElement=} treeElement
    */
-  setEditingStyle(editing) {
+  setEditingStyle(editing, treeElement) {
     if (this._isEditingStyle === editing)
       return;
     this.contentElement.classList.toggle('is-editing-style', editing);
     this._isEditingStyle = editing;
+    this._setActiveProperty(editing ? treeElement || null : null);
+  }
+
+  /**
+   * @param {?Elements.StylePropertyTreeElement} treeElement
+   */
+  _setActiveProperty(treeElement) {
+    if (!this.node())
+      return;
+
+    SDK.OverlayModel.hideDOMNodeHighlight();
+    if (!treeElement || treeElement.overloaded() || treeElement.inherited())
+      return;
+
+    const rule = treeElement.property.ownerStyle.parentRule;
+    const selectors = rule ? rule.selectorText() : undefined;
+    for (const mode of ['padding', 'border', 'margin']) {
+      if (!treeElement.name.startsWith(mode))
+        continue;
+      this.node().domModel().overlayModel().highlightDOMNodeWithConfig(this.node().id, {mode, selectors});
+      break;
+    }
   }
 
   /**
@@ -813,6 +836,7 @@ Elements.StylePropertiesSection = class {
     this._selectorElement.textContent = this._headerText();
     selectorContainer.appendChild(this._selectorElement);
     this._selectorElement.addEventListener('mouseenter', this._onMouseEnterSelector.bind(this), false);
+    this._selectorElement.addEventListener('mousemove', event => event.consume(), false);
     this._selectorElement.addEventListener('mouseleave', this._onMouseOutSelector.bind(this), false);
 
     const openBrace = createElement('span');
@@ -830,7 +854,7 @@ Elements.StylePropertiesSection = class {
     this.element.addEventListener('mousedown', this._handleEmptySpaceMouseDown.bind(this), false);
     this.element.addEventListener('click', this._handleEmptySpaceClick.bind(this), false);
     this.element.addEventListener('mousemove', this._onMouseMove.bind(this), false);
-    this.element.addEventListener('mouseleave', this._setSectionHovered.bind(this, false), false);
+    this.element.addEventListener('mouseleave', this._onMouseLeave.bind(this), false);
 
     if (rule) {
       // Prevent editing the user agent and user rules.
@@ -953,12 +977,26 @@ Elements.StylePropertiesSection = class {
     }
   }
 
+  /**
+   * @param {!Event} event
+   */
+  _onMouseLeave(event) {
+    this._setSectionHovered(false);
+    this._parentPane._setActiveProperty(null);
+  }
+
   /**
    * @param {!Event} event
    */
   _onMouseMove(event) {
     const hasCtrlOrMeta = UI.KeyboardShortcut.eventHasCtrlOrMeta(/** @type {!MouseEvent} */ (event));
     this._setSectionHovered(hasCtrlOrMeta);
+
+    const treeElement = this.propertiesTreeOutline.treeElementFromEvent(event);
+    if (treeElement instanceof Elements.StylePropertyTreeElement)
+      this._parentPane._setActiveProperty(/** @type {!Elements.StylePropertyTreeElement} */ (treeElement));
+    else
+      this._parentPane._setActiveProperty(null);
   }
 
   /**
@@ -1054,14 +1092,16 @@ Elements.StylePropertiesSection = class {
     this._hoverTimer = setTimeout(this._highlight.bind(this), 300);
   }
 
-  _highlight() {
+  /**
+   * @param {string=} mode
+   */
+  _highlight(mode = 'all') {
     SDK.OverlayModel.hideDOMNodeHighlight();
     const node = this._parentPane.node();
     if (!node)
       return;
     const selectors = this._style.parentRule ? this._style.parentRule.selectorText() : undefined;
-    node.domModel().overlayModel().highlightDOMNodeWithConfig(
-        node.id, {mode: 'all', showInfo: undefined, selectors: selectors});
+    node.domModel().overlayModel().highlightDOMNodeWithConfig(node.id, {mode, showInfo: undefined, selectors});
   }
 
   /**
@@ -1331,6 +1371,7 @@ Elements.StylePropertiesSection = class {
   }
 
   onpopulate() {
+    this._parentPane._setActiveProperty(null);
     this.propertiesTreeOutline.removeChildren();
     const style = this._style;
     let count = 0;

diff --git a/front_end/elements/elementsTreeOutline.css b/front_end/elements/elementsTreeOutline.css
@@ -36,11 +36,6 @@
 
 .elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) li.selected .selected-hint:before {
     opacity: 0.6;
-    color: var(--selection-inactive-fg-color);
-}
-
-.elements-disclosure li.selected:focus .selected-hint:before {
-    color: var(--selection-fg-color);
 }
 
 .elements-disclosure li.parent::before {
@@ -94,7 +89,7 @@
 }
 
 .elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) .selection {
-    background-color: var(--selection-inactive-bg-color);
+    background-color: var(--editor-selection-inactive-bg-color);
 }
 
 .elements-disclosure .elements-tree-outline.hide-selection-when-blurred .selected:focus[data-keyboard-focus="true"] .highlight > * {
@@ -131,20 +126,8 @@
     padding-left: 2px;
 }
 
-.elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) li.selected:focus {
-    color: var(--selection-fg-color);
-}
-
-.elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) li.parent.selected:focus::before {
-    background-color: var(--selection-fg-color);
-}
-
-.elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) li.selected:focus * {
-    color: inherit;
-}
-
 .elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) li.selected:focus .selection {
-    background-color: var(--selection-bg-color);
+    background-color: var(--editor-selection-bg-color);
 }
 
 .elements-tree-outline ol.shadow-root-depth-4 {
@@ -308,13 +291,6 @@ ol:hover > li > .elements-tree-shortcut-link {
     display: none;
 }
 
-.elements-tree-outline:not(.hide-selection-when-blurred) li.selected:focus .webkit-html-tag-name,
-.elements-tree-outline:not(.hide-selection-when-blurred) li.selected:focus .webkit-html-close-tag-name,
-.elements-tree-outline:not(.hide-selection-when-blurred) li.selected:focus .webkit-html-attribute-value,
-.elements-tree-outline:not(.hide-selection-when-blurred) li.selected:focus .devtools-link {
-    color: var(--selection-fg-color);
-}
-
 .elements-disclosure .gutter-container {
     position: absolute;
     top: 0;

diff --git a/front_end/elements/metricsSidebarPane.css b/front_end/elements/metricsSidebarPane.css
@@ -53,7 +53,7 @@
     display: inline-block;
     text-align: center;
     vertical-align: middle;
-    padding: 3px;
+    padding: 3px 6px;
     margin: 3px;
 }
 
@@ -63,7 +63,7 @@
     display: inline-block;
     text-align: center;
     vertical-align: middle;
-    padding: 3px;
+    padding: 3px 6px;
     margin: 3px;
 }
 
@@ -73,7 +73,7 @@
     display: inline-block;
     text-align: center;
     vertical-align: middle;
-    padding: 3px;
+    padding: 3px 6px;
     margin: 3px;
 }
 

diff --git a/front_end/host/InspectorFrontendHost.js b/front_end/host/InspectorFrontendHost.js
@@ -52,38 +52,6 @@ Host.InspectorFrontendHostStub = class {
     this._urlsBeingSaved = new Map();
   }
 
-  /**
-   * @override
-   * @return {string}
-   */
-  getSelectionBackgroundColor() {
-    return '#6e86ff';
-  }
-
-  /**
-   * @override
-   * @return {string}
-   */
-  getSelectionForegroundColor() {
-    return '#ffffff';
-  }
-
-  /**
-   * @override
-   * @return {string}
-   */
-  getInactiveSelectionBackgroundColor() {
-    return '#c9c8c8';
-  }
-
-  /**
-   * @override
-   * @return {string}
-   */
-  getInactiveSelectionForegroundColor() {
-    return '#323232';
-  }
-
   /**
    * @override
    * @return {string}

diff --git a/front_end/host/InspectorFrontendHostAPI.js b/front_end/host/InspectorFrontendHostAPI.js
@@ -109,26 +109,6 @@ InspectorFrontendHostAPI.prototype = {
    */
   indexPath(requestId, fileSystemPath, excludedFolders) {},
 
-  /**
-   * @return {string}
-   */
-  getSelectionBackgroundColor() {},
-
-  /**
-   * @return {string}
-   */
-  getSelectionForegroundColor() {},
-
-  /**
-   * @return {string}
-   */
-  getInactiveSelectionBackgroundColor() {},
-
-  /**
-   * @return {string}
-   */
-  getInactiveSelectionForegroundColor() {},
-
   /**
    * Requests inspected page to be placed atop of the inspector frontend with specified bounds.
    * @param {{x: number, y: number, width: number, height: number}} bounds

diff --git a/front_end/main/Main.js b/front_end/main/Main.js
@@ -152,7 +152,7 @@ Main.Main = class {
 
     Runtime.experiments.setDefaultExperiments([
       'colorContrastRatio', 'stepIntoAsync', 'oopifInlineDOM', 'consoleBelowPrompt', 'timelineTracingJSProfile',
-      'pinnedExpressions', 'consoleKeyboardNavigation'
+      'pinnedExpressions', 'consoleKeyboardNavigation', 'sourcesLogpoints'
     ]);
   }
 

diff --git a/front_end/sources/BreakpointEditDialog.js b/front_end/sources/BreakpointEditDialog.js
@@ -19,6 +19,7 @@ Sources.BreakpointEditDialog = class extends UI.Widget {
     /** @type {?UI.TextEditor} */
     this._editor = null;
     const isNewBreakpointsEnabled = Runtime.experiments.isEnabled('sourcesLogpoints');
+    this.element.tabIndex = -1;
 
     const logpointPrefix = Sources.BreakpointEditDialog._LogpointPrefix;
     const logpointSuffix = Sources.BreakpointEditDialog._LogpointSuffix;

diff --git a/front_end/sources/breakpointEditDialog.css b/front_end/sources/breakpointEditDialog.css
@@ -38,12 +38,11 @@
   border-radius: 0;
   z-index: 30;
   background-color: var(--toolbar-bg-color);
-  width: 100%;
-  max-width: 600px;
+  width: 555px;
   pointer-events: auto;
-  margin-bottom: 5px;
+  margin: 2px 0 2px -1px;
   padding: 0 10px 10px 5px;
-  border-left: 3px solid var(--divider-color);
+  border: 1px solid var(--divider-color);
 }
 
 :host-context(.sources-edit-breakpoint-dialog) .condition-editor {

diff --git a/front_end/text_editor/CodeMirrorTextEditor.js b/front_end/text_editor/CodeMirrorTextEditor.js
@@ -42,8 +42,6 @@ TextEditor.CodeMirrorTextEditor = class extends UI.VBox {
     this.registerRequiredCSS('cm/codemirror.css');
     this.registerRequiredCSS('text_editor/cmdevtools.css');
 
-    TextEditor.CodeMirrorUtils.appendThemeStyle(this.element);
-
     this._codeMirror = new CodeMirror(this.element, {
       lineNumbers: options.lineNumbers,
       matchBrackets: true,