squash 'resources/unpacked/devtools' changes from 064127e..4150aff

4150aff DevTools: [SASS] start parsing CSS with SCSS parser
51b0ebb DevTools: [SASS] parse SCSS rules and their selectors.
292d4f9 Revert of DevTools: fix focus restoration from command menu (patchset #4 id:60001 of https://codereview.chromium.org/1922303004/ )
d79bed2 DevTools: fix styles in rendering pane
d21c547 DevTools: properly update close icon in search field
dab74b9 DevTools: Reorder timeline checkboxes.
05809f9 DevTools: mute the node highlight & hide devtools while taking screenshots.
a3b8435 Security panel: add listeners only to the added target.
f4f510c [DevTools] 20px default top inset gutter to avoid Ruler overlap in emulation mode
f2b80ce Fix issue causing no cookies to be shown in the Resources > Cookies panel.
78782d0 Revert of Fixed DevTools event-listener breakpoints for PointerEvents. (patchset #3 id:40001 of https://codereview.chromium.org/1915623002/ )
0af8110 Timeline: use RAIL phases to color input events
8939357 DevTools: fix user agent custom behavior
9f84e26 DevTools: fix focus restoration from command menu
68642cb [Devtools] isTrusted in CustomEvents shown twice in console
4a00752 DevTools: brush up command menu looks, render badges.
81dfcdf DevTools: fix visual regressions in full text search
d329629 [Devtools] Fix to XMLView in Network Preview panel broken
42f1d67 DevTools: Move network pane on timeline out of experiment
0e0cd5c Fixed DevTools event-listener breakpoints for PointerEvents.
3a717ab [DevTools] Add base JS Proxy support

git-subtree-dir: resources/unpacked/devtools
git-subtree-split: 4150aff

front_end/console/ConsoleViewMessage.js

@@ -56,6 +56,7 @@ WebInspector.ConsoleViewMessage = function(consoleMessage, linkifier, nestingLev
         "map": this._formatParameterAsObject,
         "node": this._formatParameterAsNode,
         "object": this._formatParameterAsObject,
+        "proxy": this._formatParameterAsObject,
         "set": this._formatParameterAsObject,
         "string": this._formatParameterAsString
     };
@@ -424,7 +425,13 @@ WebInspector.ConsoleViewMessage.prototype = {
                 titleElement.createTextChild(obj.description || "");
             }
         }
-        var note = titleElement.createChild("span", "object-info-state-note");
+        if (obj.subtype === "proxy") {
+            var warning = titleElement.createChild("span", "object-state-note");
+            warning.classList.add("warning-note");
+            warning.title = WebInspector.UIString("Expansion of the Proxy object can lead to JavaScript execution.");
+        }
+        var note = titleElement.createChild("span", "object-state-note");
+        note.classList.add("info-note");
         note.title = WebInspector.UIString("Object value at left was snapshotted when logged, value below was evaluated just now.");
         var section = new WebInspector.ObjectPropertiesSection(obj, titleElement);
         section.enableContextMenu();

front_end/console/consoleView.css

@@ -425,11 +425,10 @@
     white-space: nowrap !important;
 }
 
-.object-info-state-note {
+.object-state-note {
     display: inline-block;
     width: 11px;
     height: 11px;
-    background-color: rgb(179, 203, 247);
     color: white;
     text-align: center;
     border-radius: 3px;
@@ -438,14 +437,30 @@
     font-size: 9px;
 }
 
-.-theme-with-dark-background .object-info-state-note {
+.-theme-with-dark-background .object-state-note {
     background-color: hsl(230, 100%, 80%);
 }
 
-.object-info-state-note::before {
+.info-note {
+    background-color: rgb(179, 203, 247);
+}
+
+.info-note::before {
     content: "i";
 }
 
-.console-view-object-properties-section:not(.expanded) .object-info-state-note {
+.warning-note {
+    background-color: rgb(255, 161, 45);
+}
+
+.warning-note::before {
+    content: "!";
+}
+
+.console-view-object-properties-section:not(.expanded) .info-note {
+    display: none;
+}
+
+.console-view-object-properties-section.expanded .warning-note {
     display: none;
 }

front_end/emulation/AdvancedApp.js

@@ -24,6 +24,7 @@ WebInspector.AdvancedApp.prototype = {
         this._rootSplitWidget.show(rootView.element);
 
         this._rootSplitWidget.setSidebarWidget(WebInspector.inspectorView);
+        WebInspector.inspectorView.setOwnerSplit(this._rootSplitWidget);
 
         this._inspectedPagePlaceholder = new WebInspector.InspectedPagePlaceholder();
         this._inspectedPagePlaceholder.addEventListener(WebInspector.InspectedPagePlaceholder.Events.Update, this._onSetInspectedPageBounds.bind(this), this);

front_end/emulation/DeviceModeModel.js

@@ -434,7 +434,7 @@ WebInspector.DeviceModeModel.prototype = {
 
         if (this._type === WebInspector.DeviceModeModel.Type.Device) {
             var orientation = this._device.orientationByName(this._mode.orientation);
-            var outline = new Insets(0, 0, 0, 0);
+            var outline = new Insets(0, 20, 0, 0);
             if (Runtime.experiments.isEnabled("deviceFrames") && this._deviceOutlineSetting.get())
                 outline = orientation.outlineInsets || outline;
             this._fitScale = this._calculateFitScale(orientation.width, orientation.height);
@@ -448,7 +448,7 @@ WebInspector.DeviceModeModel.prototype = {
         } else if (this._type === WebInspector.DeviceModeModel.Type.None) {
             this._fitScale = this._calculateFitScale(this._availableSize.width, this._availableSize.height);
             this._appliedUserAgentType = WebInspector.DeviceModeModel.UA.Desktop;
-            this._applyDeviceMetrics(this._availableSize, new Insets(0, 0, 0, 0), new Insets(0, 0, 0, 0), 1, 0, false, "", resetPageScaleFactor);
+            this._applyDeviceMetrics(this._availableSize, new Insets(0, 0, 0, 0), new Insets(0, 20, 0, 0), 1, 0, false, "", resetPageScaleFactor);
             this._applyUserAgent("");
             this._applyTouch(false, false);
         } else if (this._type === WebInspector.DeviceModeModel.Type.Responsive) {
@@ -462,7 +462,7 @@ WebInspector.DeviceModeModel.prototype = {
             var defaultDeviceScaleFactor = mobile ? WebInspector.DeviceModeModel.defaultMobileScaleFactor : 0;
             this._fitScale = this._calculateFitScale(this._widthSetting.get(), this._heightSetting.get());
             this._appliedUserAgentType = this._uaSetting.get();
-            this._applyDeviceMetrics(new Size(screenWidth, screenHeight), new Insets(0, 0, 0, 0), new Insets(0, 0, 0, 0), this._scaleSetting.get(), this._deviceScaleFactorSetting.get() || defaultDeviceScaleFactor, mobile, screenHeight >= screenWidth ? "portraitPrimary" : "landscapePrimary", resetPageScaleFactor);
+            this._applyDeviceMetrics(new Size(screenWidth, screenHeight), new Insets(0, 0, 0, 0), new Insets(0, 20, 0, 0), this._scaleSetting.get(), this._deviceScaleFactorSetting.get() || defaultDeviceScaleFactor, mobile, screenHeight >= screenWidth ? "portraitPrimary" : "landscapePrimary", resetPageScaleFactor);
             this._applyUserAgent(mobile ? WebInspector.DeviceModeModel._defaultMobileUserAgent : "");
             this._applyTouch(this._uaSetting.get() === WebInspector.DeviceModeModel.UA.DesktopTouch || this._uaSetting.get() === WebInspector.DeviceModeModel.UA.Mobile, this._uaSetting.get() === WebInspector.DeviceModeModel.UA.Mobile);
         }

front_end/emulation/DeviceModeView.js

@@ -380,6 +380,17 @@ WebInspector.DeviceModeView.prototype = {
         var mainTarget = WebInspector.targetManager.mainTarget();
         if (!mainTarget)
             return;
+        WebInspector.DOMModel.muteHighlight();
+
+        var zoomFactor = WebInspector.zoomManager.zoomFactor();
+        var rect = this._contentArea.getBoundingClientRect();
+        var availableSize = new Size(Math.max(rect.width * zoomFactor, 1), Math.max(rect.height * zoomFactor, 1));
+
+        if (availableSize.width < this._model.screenRect().width ||
+            availableSize.height < this._model.screenRect().height) {
+            WebInspector.inspectorView.minimize();
+        }
+
         mainTarget.pageAgent().captureScreenshot(screenshotCaptured.bind(this));
 
         /**
@@ -389,8 +400,11 @@ WebInspector.DeviceModeView.prototype = {
          */
         function screenshotCaptured(error, content)
         {
-            if (error)
+            if (error) {
+                WebInspector.DOMModel.unmuteHighlight();
+                WebInspector.inspectorView.restore();
                 return;
+            }
 
             // Create a canvas to splice the images together.
             var canvas = createElement("canvas");
@@ -441,6 +455,8 @@ WebInspector.DeviceModeView.prototype = {
                 link.download = fileName + ".png";
                 link.href = canvas.toDataURL("image/png");
                 link.click();
+                WebInspector.DOMModel.unmuteHighlight();
+                WebInspector.inspectorView.restore();
             }
         }
     },

front_end/gonzales/SCSSParser.js

@@ -10,51 +10,67 @@ WebInspector.SCSSParser = function()
 {
 }
 
-/**
- * @constructor
- */
-WebInspector.SCSSParser.Result = function()
-{
-    this.properties = [];
-    this.variables = [];
-    this.mixins = [];
-}
-
 WebInspector.SCSSParser.prototype = {
     /**
      * @override
      * @param {string} content
-     * @return {!WebInspector.SCSSParser.Result}
+     * @return {!Array<!WebInspector.SCSSParser.Rule>}
      */
     parse: function(content)
     {
-        var result = new WebInspector.SCSSParser.Result();
         var ast = null;
         try {
             ast = gonzales.parse(content, {syntax: "scss"});
         } catch (e) {
-            return result;
+            return [];
         }
 
-        var extractedNodes = [];
-        WebInspector.SCSSParser.extractNodes(ast, extractedNodes);
+        /** @type {!{properties: !Array<!Gonzales.Node>, node: !Gonzales.Node}} */
+        var rootBlock = {
+            properties: [],
+            node: ast
+        };
+        /** @type {!Array<!{properties: !Array<!Gonzales.Node>, node: !Gonzales.Node}>} */
+        var blocks = [rootBlock];
+        ast.selectors = [];
+        WebInspector.SCSSParser.extractNodes(ast, blocks, rootBlock);
+
+        var rules = [];
+        for (var block of blocks)
+            this._handleBlock(block, rules);
+        return rules;
+    },
 
-        for (var node of extractedNodes) {
+    /**
+     * @param {!{node: !Gonzales.Node, properties: !Array<!Gonzales.Node>}} block
+     * @param {!Array<!WebInspector.SCSSParser.Rule>} output
+     */
+    _handleBlock: function(block, output)
+    {
+        var selectors = block.node.selectors.map(WebInspector.SCSSParser.rangeFromNode);
+        var properties = [];
+        var styleRange = WebInspector.SCSSParser.rangeFromNode(block.node);
+        styleRange.startColumn += 1;
+        styleRange.endColumn -= 1;
+        for (var node of block.properties) {
             if (node.type === "declaration")
-                this._handleDeclaration(node, result);
+                this._handleDeclaration(node, properties);
             else if (node.type === "include")
-                this._handleInclude(node, result);
+                this._handleInclude(node, properties);
             else if (node.type === "multilineComment" && node.start.line === node.end.line)
-                this._handleComment(node, result);
+                this._handleComment(node, properties);
         }
-        return result;
+        if (!selectors.length && !properties.length)
+            return;
+        var rule = new WebInspector.SCSSParser.Rule(selectors, properties, styleRange);
+        output.push(rule);
     },
 
     /**
      * @param {!Gonzales.Node} node
-     * @param {!WebInspector.SCSSParser.Result} result
+     * @param {!Array<!WebInspector.SCSSParser.Property>} output
      */
-    _handleDeclaration: function(node, result)
+    _handleDeclaration: function(node, output)
     {
         var propertyNode = node.content.find(node => node.type === "property");
         var delimeterNode = node.content.find(node => node.type === "propertyDelimiter");
@@ -67,18 +83,14 @@ WebInspector.SCSSParser.prototype = {
         var range = /** @type {!WebInspector.TextRange} */(node.declarationRange);
 
         var property = new WebInspector.SCSSParser.Property(range, nameRange, valueRange, false);
-        var isVariable = !!propertyNode.content.find(node => node.type === "variable");
-        if (isVariable)
-            result.variables.push(property);
-        else
-            result.properties.push(property);
+        output.push(property);
     },
 
     /**
      * @param {!Gonzales.Node} node
-     * @param {!WebInspector.SCSSParser.Result} result
+     * @param {!Array<!WebInspector.SCSSParser.Property>} output
      */
-    _handleInclude: function(node, result)
+    _handleInclude: function(node, output)
     {
         var mixinName = node.content.find(node => node.type === "ident");
         if (!mixinName)
@@ -92,25 +104,25 @@ WebInspector.SCSSParser.prototype = {
             var range = WebInspector.SCSSParser.rangeFromNode(node);
             var valueRange = WebInspector.SCSSParser.rangeFromNode(parameter);
             var property = new WebInspector.SCSSParser.Property(range, nameRange, valueRange, false);
-            result.mixins.push(property);
+            output.push(property);
         }
     },
 
     /**
      * @param {!Gonzales.Node} node
-     * @param {!WebInspector.SCSSParser.Result} result
+     * @param {!Array<!WebInspector.SCSSParser.Property>} output
      */
-    _handleComment: function(node, result)
+    _handleComment: function(node, output)
     {
         if (node.start.line !== node.end.line)
             return;
         var innerText = /** @type {string} */(node.content);
         var innerResult = this.parse(innerText);
-        if (innerResult.properties.length !== 1 || innerResult.variables.length !== 0 || innerResult.mixins.length !== 0)
+        if (innerResult.length !== 1 || innerResult[0].properties.length !== 1)
             return;
-        var property = innerResult.properties[0];
+        var property = innerResult[0].properties[0];
         var disabledProperty = property.rebaseInsideOneLineComment(node);
-        result.properties.push(disabledProperty);
+        output.push(disabledProperty);
     },
 }
 
@@ -166,29 +178,56 @@ WebInspector.SCSSParser.Property.prototype = {
     }
 }
 
+/**
+ * @constructor
+ * @param {!Array<!WebInspector.TextRange>} selectors
+ * @param {!Array<!WebInspector.SCSSParser.Property>} properties
+ * @param {!WebInspector.TextRange} styleRange
+ */
+WebInspector.SCSSParser.Rule = function(selectors, properties, styleRange)
+{
+    this.selectors = selectors;
+    this.properties = properties;
+    this.styleRange = styleRange;
+}
+
 /**
  * @param {!Gonzales.Node} node
- * @param {!Array<!Gonzales.Node>} output
+ * @param {!Array<{node: !Gonzales.Node, properties: !Array<!Gonzales.Node>}>} blocks
+ * @param {!{node: !Gonzales.Node, properties: !Array<!Gonzales.Node>}} lastBlock
  */
-WebInspector.SCSSParser.extractNodes = function(node, output)
+WebInspector.SCSSParser.extractNodes = function(node, blocks, lastBlock)
 {
     if (!Array.isArray(node.content))
         return;
+    if (node.type === "block") {
+        lastBlock = {
+            node: node,
+            properties: []
+        };
+        blocks.push(lastBlock);
+    }
     var lastDeclaration = null;
+    var selectors = [];
     for (var i = 0; i < node.content.length; ++i) {
         var child = node.content[i];
         if (child.type === "declarationDelimiter" && lastDeclaration) {
             lastDeclaration.declarationRange.endLine = child.end.line - 1;
             lastDeclaration.declarationRange.endColumn = child.end.column;
             lastDeclaration = null;
+        } else if (child.type === "selector") {
+            selectors.push(child);
+        } else if (child.type === "block") {
+            child.selectors = selectors;
+            selectors = [];
         }
         if (child.type === "include" || child.type === "declaration" || child.type === "multilineComment")
-            output.push(child);
+            lastBlock.properties.push(child);
         if (child.type === "declaration") {
             lastDeclaration = child;
             lastDeclaration.declarationRange = WebInspector.TextRange.createFromLocation(child.start.line - 1, child.start.column - 1);
         }
-        WebInspector.SCSSParser.extractNodes(child, output);
+        WebInspector.SCSSParser.extractNodes(child, blocks, lastBlock);
     }
     if (lastDeclaration) {
         lastDeclaration.declarationRange.endLine = node.end.line - 1;

front_end/main/Main.js

@@ -113,7 +113,6 @@ WebInspector.Main.prototype = {
         Runtime.experiments.register("layoutEditor", "Layout editor", true);
         Runtime.experiments.register("inspectTooltip", "Dark inspect element tooltip");
         Runtime.experiments.register("liveSASS", "Live SASS", true);
-        Runtime.experiments.register("networkRequestsOnTimeline", "Network requests on Timeline", true);
         Runtime.experiments.register("privateScriptInspection", "Private script inspection");
         Runtime.experiments.register("reducedIndentation", "Reduced indentation in Elements DOM tree");
         Runtime.experiments.register("requestBlocking", "Request blocking", true);

front_end/main/renderingOptions.css

@@ -22,15 +22,3 @@ label {
     margin-bottom: 10px;
     background: #f0f0f0;
 }
-
-.dt-checkbox-text {
-    color: #262626;
-    font-size: 12px;
-    margin-left: 6px;
-}
-
-.dt-checkbox-subtitle {
-    color: #4a4a4a;
-    font-size: 10px;
-    margin-top: 2px;
-}