Backed out changeset 870a4ac0af45 (bug 1583901) for devtools failures at browser_rules_preview-tooltips-sizes.js.
authorBrindusan Cristian <cbrindusan@mozilla.com>
Sun, 24 Jan 2021 01:22:23 +0200
changeset 564409 3837805e531398c01dcc75d0ff93fafe792b8c96
parent 564408 870a4ac0af4539cf1d790922ce8dcf8defe0d972
child 564410 e65982f456435928e5ed52db9a96d12836663e7a
push id134840
push usercbrindusan@mozilla.com
push dateSat, 23 Jan 2021 23:23:14 +0000
treeherderautoland@3837805e5313 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1583901
milestone86.0a1
backs out870a4ac0af4539cf1d790922ce8dcf8defe0d972
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Backed out changeset 870a4ac0af45 (bug 1583901) for devtools failures at browser_rules_preview-tooltips-sizes.js.
devtools/client/locales/en-US/tooltips.ftl
devtools/client/shared/widgets/tooltip/ImageTooltipHelper.js
devtools/server/actors/utils/inactive-property-helper.js
devtools/server/tests/chrome/inactive-property-helper/fill-stroke.js
devtools/server/tests/chrome/test_inspector-inactive-property-helper.html
--- a/devtools/client/locales/en-US/tooltips.ftl
+++ b/devtools/client/locales/en-US/tooltips.ftl
@@ -40,18 +40,16 @@ inactive-css-position-property-on-unpositioned-box = <strong>{ $property }</strong> has no effect on this element since it’s not a positioned element.
 inactive-text-overflow-when-no-overflow = <strong>{ $property }</strong> has no effect on this element since <strong>overflow:hidden</strong> is not set.
 
 inactive-outline-radius-when-outline-style-auto-or-none = <strong>{ $property }</strong> has no effect on this element because its <strong>outline-style</strong> is <strong>auto</strong> or <strong>none</strong>.
 
 inactive-css-not-for-internal-table-elements = <strong>{ $property }</strong> has no effect on internal table elements.
 
 inactive-css-not-for-internal-table-elements-except-table-cells = <strong>{ $property }</strong> has no effect on internal table elements except table cells.
 
-inactive-css-not-svg-shape-or-text = <strong>{ $property }</strong> has no effect on this element since it can only be applied to SVG basic shapes and text elements, though it may have an effect on its descendant elements.
-
 ## In the Rule View when a CSS property cannot be successfully applied we display
 ## an icon. When this icon is hovered this message is displayed to explain how
 ## the problem can be solved.
 
 inactive-css-not-grid-or-flex-container-fix = Try adding <strong>display:grid</strong> or <strong>display:flex</strong>. { learn-more }
 
 inactive-css-not-grid-or-flex-container-or-multicol-container-fix = Try adding either <strong>display:grid</strong>, <strong>display:flex</strong>, or <strong>columns:2</strong>. { learn-more }
 
@@ -78,18 +76,16 @@ inactive-css-position-property-on-unposi
 inactive-text-overflow-when-no-overflow-fix = Try adding <strong>overflow:hidden</strong>. { learn-more }
 
 inactive-css-not-for-internal-table-elements-fix = Try setting its <strong>display</strong> property to something else than <strong>table-cell</strong>, <strong>table-column</strong>, <strong>table-row</strong>, <strong>table-column-group</strong>, <strong>table-row-group</strong>, or <strong>table-footer-group</strong>. { learn-more }
 
 inactive-css-not-for-internal-table-elements-except-table-cells-fix = Try setting its <strong>display</strong> property to something else than <strong>table-column</strong>, <strong>table-row</strong>, <strong>table-column-group</strong>, <strong>table-row-group</strong>, or <strong>table-footer-group</strong>. { learn-more }
 
 inactive-outline-radius-when-outline-style-auto-or-none-fix = Try setting its <strong>outline-style</strong> property to something other than <strong>auto</strong> or <strong>none</strong>. { learn-more }
 
-inactive-css-not-svg-shape-or-text-fix = Ensure you are setting this property on one of the following SVG elements: <strong>&lt;circle&gt;</strong>, <strong>&lt;ellipse&gt;</strong>, <strong>&lt;line&gt;</strong>, <strong>&lt;path&gt;</strong>, <strong>&lt;polygon&gt;</strong>, <strong>&lt;polyline&gt;</strong>, <strong>&lt;rect&gt;</strong>, <strong>&lt;text&gt;</strong>, <strong>&lt;textPath&gt;</strong>, <strong>&lt;tspan&gt;</strong>. { learn-more }
-
 ## In the Rule View when a CSS property may have compatibility issues with other browsers
 ## we display an icon. When this icon is hovered this message is displayed to explain why
 ## the property is incompatible and the platforms it is incompatible on.
 ## Variables:
 ##   $property (string) - A CSS declaration name e.g. "-moz-user-select" that can be a platform specific alias.
 ##   $rootProperty (string) - A raw CSS property name e.g. "user-select" that is not a platform specific alias.
 
 css-compatibility-default-message = <strong>{ $property }</strong> is not supported in the following browsers:
--- a/devtools/client/shared/widgets/tooltip/ImageTooltipHelper.js
+++ b/devtools/client/shared/widgets/tooltip/ImageTooltipHelper.js
@@ -31,18 +31,18 @@ const LABEL_HEIGHT = 20;
  *         - {Number} naturalWidth natural width of the loaded image
  *         - {Number} naturalHeight natural height of the loaded image
  */
 function getImageDimensions(doc, imageUrl) {
   return new Promise(resolve => {
     const imgObj = new doc.defaultView.Image();
     imgObj.onload = () => {
       imgObj.onload = null;
-      const { width, height } = imgObj;
-      resolve({ width, height });
+      const { naturalWidth, naturalHeight } = imgObj;
+      resolve({ naturalWidth, naturalHeight });
     };
     imgObj.src = imageUrl;
   });
 }
 
 /**
  * Set the tooltip content of a provided HTMLTooltip instance to display an
  * image preview matching the provided imageUrl.
--- a/devtools/server/actors/utils/inactive-property-helper.js
+++ b/devtools/server/actors/utils/inactive-property-helper.js
@@ -346,35 +346,16 @@ class InactivePropertyHelper {
           this.internalTableElement &&
           !this.checkComputedStyle("display", ["table-cell"]),
         fixId:
           "inactive-css-not-for-internal-table-elements-except-table-cells-fix",
         msgId:
           "inactive-css-not-for-internal-table-elements-except-table-cells",
         numFixProps: 1,
       },
-      // fill-* or stroke-* properties used on invalid elements
-      {
-        invalidProperties: [
-          "fill",
-          "fill-opacity",
-          "stroke",
-          "stroke-dasharray",
-          "stroke-dashoffset",
-          "stroke-linecap",
-          "stroke-linejoin",
-          "stroke-miterlimit",
-          "stroke-opacity",
-          "stroke-width",
-        ],
-        when: () => !this.isSvgShapeElement && !this.isSvgTextElement,
-        fixId: "inactive-css-not-svg-shape-or-text-fix",
-        msgId: "inactive-css-not-svg-shape-or-text",
-        numFixProps: 11,
-      },
     ];
   }
 
   /**
    * Get a list of unique CSS property names for which there are checks
    * for used/unused state.
    *
    * @return {Set}
@@ -1048,41 +1029,16 @@ class InactivePropertyHelper {
 
     // Once more over unrendered elements above the group.
     while (computedStyle(current).display === "contents") {
       current = current.parentNode;
     }
 
     return computedStyle(current).writingMode;
   }
-
-  /**
-   * Check if the node is an SVG shape element.
-   */
-  get isSvgShapeElement() {
-    return (
-      this.isSvg &&
-      this.nodeNameOneOf([
-        "circle",
-        "ellipse",
-        "line",
-        "path",
-        "polygon",
-        "polyline",
-        "rect",
-      ])
-    );
-  }
-
-  /**
-   * Check if the node is an SVG text element.
-   */
-  get isSvgTextElement() {
-    return this.isSvg && this.nodeNameOneOf(["text", "textpath", "tspan"]);
-  }
 }
 
 exports.inactivePropertyHelper = new InactivePropertyHelper();
 
 /**
  * Returns all CSS property names except given properties.
  *
  * @param {Array} - propertiesToIgnore
deleted file mode 100644
--- a/devtools/server/tests/chrome/inactive-property-helper/fill-stroke.js
+++ /dev/null
@@ -1,126 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-// InactivePropertyHelper `fill-*` and `stroke-*` test cases.
-const PROPERTIES = [
-  "fill",
-  "fill-opacity",
-  "stroke",
-  "stroke-dasharray",
-  "stroke-dashoffset",
-  "stroke-linecap",
-  "stroke-linejoin",
-  "stroke-miterlimit",
-  "stroke-opacity",
-  "stroke-width",
-];
-
-const TEST_DATA = [
-  {
-    isActive: true,
-    element: "circle",
-    elementCode: '<circle cx="50" cy="50" r="50" fill="green" />',
-  },
-  {
-    isActive: true,
-    element: "ellipse",
-    elementCode: '<ellipse cx="50" cy="50" rx="50" ry="20" fill="green" />',
-  },
-  {
-    isActive: true,
-    element: "line",
-    elementCode: '<line x1="0" y1="80" x2="100" y2="20" stroke="black" />',
-  },
-  {
-    isActive: true,
-    element: "path",
-    elementCode: `
-      <path d="M 10,30
-        A 20,20 0,0,1 50,30
-        A 20,20 0,0,1 90,30
-        Q 90,60 50,90
-        Q 10,60 10,30 z"/>
-    `,
-  },
-  {
-    isActive: true,
-    element: "polygon",
-    elementCode: '<polygon points="0,50 25,12.5 25,37.5 50,0" />',
-  },
-  {
-    isActive: true,
-    element: "polyline",
-    elementCode: `
-      <polyline points="50,50 75,12.5 75,37.5 100,0" fill="none" stroke="black" />
-    `,
-  },
-  {
-    isActive: true,
-    element: "rect",
-    elementCode: '<rect width="100" fill="green" />',
-  },
-  {
-    isActive: true,
-    element: "text",
-    elementCode: '<text x="20" y="20">Test</text>',
-  },
-  {
-    isActive: true,
-    element: "textPath",
-    elementCode: `
-      <path id="path" fill="none"
-        d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
-      <textPath href="#path">Quick brown fox jumps over the lazy dog.</textPath>
-    `,
-  },
-  {
-    isActive: true,
-    element: "tspan",
-    elementCode: '<text x="20" y="20">Te<tspan>st</tspan></text>',
-  },
-  {
-    isActive: false,
-    element: "a",
-    elementCode:
-      '<a href="https://mozilla.org"><text x="20" y="20">Test</text></a>',
-  },
-  {
-    isActive: false,
-    element: "div",
-    elementCode: "<div></div>",
-  },
-];
-
-function makeTestCase(property, isActive, element, elementCode) {
-  return {
-    info: `${property} is ${
-      isActive ? "active" : "inactive"
-    } on a <${element}> element`,
-    property,
-    createTestElement: main => {
-      // eslint-disable-next-line no-unsanitized/property
-      main.innerHTML =
-        element === "div"
-          ? elementCode
-          : `
-            <svg width="100" height="100">
-              ${elementCode}
-            </svg>
-          `;
-      return main.querySelector(element);
-    },
-    rules: [],
-    isActive,
-  };
-}
-
-const mainTests = [];
-
-for (const property of PROPERTIES) {
-  for (const { isActive, element, elementCode } of TEST_DATA) {
-    mainTests.push(makeTestCase(property, isActive, element, elementCode));
-  }
-}
-
-export default mainTests;
--- a/devtools/server/tests/chrome/test_inspector-inactive-property-helper.html
+++ b/devtools/server/tests/chrome/test_inspector-inactive-property-helper.html
@@ -43,17 +43,16 @@ SimpleTest.waitForExplicitFinish();
   // - {Boolean} isActive: should the property be active (isPropertyUsed `used` result).
   const testFiles = [
     "align-content.js",
     "flex-grid-item-properties.js",
     "float.js",
     "gap.js",
     "grid-with-absolute-properties.js",
     "margin-padding.js",
-    "fill-stroke.js",
     "max-min-width-height.js",
     "place-items-content.js",
     "positioned.js",
     "vertical-align.js",
     "text-overflow.js",
     "outline-radius.js",
   ].map(file => `${FOLDER}/${file}`);