Web Inspector: Audit: add supports key to test/group for compatibility

https://bugs.webkit.org/show_bug.cgi?id=193686 <rdar://problem/47460872> Reviewed by Joseph Pecoraro. Source/WebInspectorUI: * UserInterface/Models/AuditTestBase.js: (WI.AuditTestBase): (WI.AuditTestBase.prototype.get supported): Added. (WI.AuditTestBase.prototype.set supported): Added. (WI.AuditTestBase.prototype.set disabled): (WI.AuditTestBase.prototype.async start): (WI.AuditTestBase.prototype.stop): (WI.AuditTestBase.toJSON): * UserInterface/Models/AuditTestCase.js: (WI.AuditTestCase.async fromPayload): * UserInterface/Models/AuditTestGroup.js: (WI.AuditTestGroup): (WI.AuditTestGroup.async fromPayload): (WI.AuditTestGroup.prototype.get supported): Added. (WI.AuditTestGroup.prototype.set supported): Added. Add support for a "supports" key in the test JSON that prevents the test from being run if it's value is lower than the frontend/backend version. * UserInterface/Views/AuditTreeElement.js: (WI.AuditTreeElement.prototype.onattach): (WI.AuditTreeElement.prototype.ondelete): (WI.AuditTreeElement.prototype.populateContextMenu): (WI.AuditTreeElement.prototype._updateStatus): Added. (WI.AuditTreeElement.prototype._showRunningSpinner): (WI.AuditTreeElement.prototype._showRunningProgress): (WI.AuditTreeElement.prototype._updateTestGroupDisabled): (WI.AuditTreeElement.prototype._handleTestCaseCompleted): (WI.AuditTreeElement.prototype._handleTestResultCleared): (WI.AuditTreeElement.prototype._handleTestGroupCompleted): (WI.AuditTreeElement.prototype._handleManagerEditingChanged): (WI.AuditTreeElement.prototype.canSelectOnMouseDown): Deleted. (WI.AuditTreeElement.prototype._updateLevel): Deleted. * UserInterface/Views/AuditTreeElement.css: (.tree-outline .item.audit:matches(.test-case, .test-group):not(.unsupported, .manager-active) > .status:hover > img): Added. (.tree-outline .item.audit > .status:not(:hover) > img.show-on-hover, .tree-outline .item.audit.test-group.expanded:not(.unsupported, .editing-audits) > .status:not(:hover)): Added. (.tree-outline .item.audit.manager-active > .status > img.show-on-hover, .tree-outline .item.audit.test-group.expanded:not(.editing-audits) > .status:hover > :not(img), .tree-outline .item.audit.test-group-result.expanded > .status, .tree-outline .item.audit.unsupported + .children .item.audit.unsupported > .status > img): Added. (.tree-outline .item.audit.unsupported:not(.selected) > :matches(.icon, .titles)): Added. (.tree-outline .item.audit.unsupported > .status > img): Added. (.tree-outline .item.audit:matches(.test-case, .test-group):not(.manager-active) > .status:hover > img): Deleted. (.tree-outline .item.audit > .status:not(:hover) > img.show-on-hover, .tree-outline .item.audit.test-group.expanded:not(.editing-audits) > .status:not(:hover)): Deleted. (.tree-outline .item.audit.manager-active > .status > img.show-on-hover, .tree-outline .item.audit.test-group.expanded:not(.editing-audits) > .status:hover > :not(img), .tree-outline .item.audit.test-group-result.expanded > .status): Deleted. Hide unsupported tests unless in edit mode, where they are greyed out and cannot be enabled. Drive-by: only allow tests to be deleted when in edit mode. * UserInterface/Views/AuditNavigationSidebarPanel.js: (WI.AuditNavigationSidebarPanel.prototype._treeSelectionDidChange): * Localizations/en.lproj/localizedStrings.js: LayoutTests: * inspector/audit/version.html: Canonical link: https://commits.webkit.org/208309@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@240469 268f45cc-cd09-0410-ab3c-d52691b4dbfc
WebKit · Jan 25, 2019 · 5277ab1 · 5277ab1
1 parent c2f291b
commit 5277ab1
Show file tree

Hide file tree

Showing 10 changed files with 193 additions and 44 deletions.
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
@@ -1,3 +1,13 @@
+2019-01-24  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Audit: add supports key to test/group for compatibility
+        https://bugs.webkit.org/show_bug.cgi?id=193686
+        <rdar://problem/47460872>
+
+        Reviewed by Joseph Pecoraro.
+
+        * inspector/audit/version.html:
+
 2019-01-24  Joseph Pecoraro  <pecoraro@apple.com>
 
         Web Inspector: CPU Usage Timeline

diff --git a/LayoutTests/inspector/audit/version.html b/LayoutTests/inspector/audit/version.html
@@ -11,7 +11,7 @@
         name: "Audit.VERSION.MatchesFrontend",
         description: "Check that the audit system version is in sync with the frontend version.",
         test() {
-            InspectorTest.expectEqual(AuditAgent.VERSION, WI.AuditTestCase.Version, "The audit system version should match the frontend version.");
+            InspectorTest.expectEqual(AuditAgent.VERSION, WI.AuditTestBase.Version, "The audit system version should match the frontend version.");
             return true;
         },
     });

diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
@@ -1,3 +1,60 @@
+2019-01-24  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Audit: add supports key to test/group for compatibility
+        https://bugs.webkit.org/show_bug.cgi?id=193686
+        <rdar://problem/47460872>
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Models/AuditTestBase.js:
+        (WI.AuditTestBase):
+        (WI.AuditTestBase.prototype.get supported): Added.
+        (WI.AuditTestBase.prototype.set supported): Added.
+        (WI.AuditTestBase.prototype.set disabled):
+        (WI.AuditTestBase.prototype.async start):
+        (WI.AuditTestBase.prototype.stop):
+        (WI.AuditTestBase.toJSON):
+        * UserInterface/Models/AuditTestCase.js:
+        (WI.AuditTestCase.async fromPayload):
+        * UserInterface/Models/AuditTestGroup.js:
+        (WI.AuditTestGroup):
+        (WI.AuditTestGroup.async fromPayload):
+        (WI.AuditTestGroup.prototype.get supported): Added.
+        (WI.AuditTestGroup.prototype.set supported): Added.
+        Add support for a "supports" key in the test JSON that prevents the test from being run if
+        it's value is lower than the frontend/backend version.
+
+        * UserInterface/Views/AuditTreeElement.js:
+        (WI.AuditTreeElement.prototype.onattach):
+        (WI.AuditTreeElement.prototype.ondelete):
+        (WI.AuditTreeElement.prototype.populateContextMenu):
+        (WI.AuditTreeElement.prototype._updateStatus): Added.
+        (WI.AuditTreeElement.prototype._showRunningSpinner):
+        (WI.AuditTreeElement.prototype._showRunningProgress):
+        (WI.AuditTreeElement.prototype._updateTestGroupDisabled):
+        (WI.AuditTreeElement.prototype._handleTestCaseCompleted):
+        (WI.AuditTreeElement.prototype._handleTestResultCleared):
+        (WI.AuditTreeElement.prototype._handleTestGroupCompleted):
+        (WI.AuditTreeElement.prototype._handleManagerEditingChanged):
+        (WI.AuditTreeElement.prototype.canSelectOnMouseDown): Deleted.
+        (WI.AuditTreeElement.prototype._updateLevel): Deleted.
+        * UserInterface/Views/AuditTreeElement.css:
+        (.tree-outline .item.audit:matches(.test-case, .test-group):not(.unsupported, .manager-active) > .status:hover > img): Added.
+        (.tree-outline .item.audit > .status:not(:hover) > img.show-on-hover, .tree-outline .item.audit.test-group.expanded:not(.unsupported, .editing-audits) > .status:not(:hover)): Added.
+        (.tree-outline .item.audit.manager-active > .status > img.show-on-hover, .tree-outline .item.audit.test-group.expanded:not(.editing-audits) > .status:hover > :not(img), .tree-outline .item.audit.test-group-result.expanded > .status, .tree-outline .item.audit.unsupported + .children .item.audit.unsupported  > .status > img): Added.
+        (.tree-outline .item.audit.unsupported:not(.selected) > :matches(.icon, .titles)): Added.
+        (.tree-outline .item.audit.unsupported > .status > img): Added.
+        (.tree-outline .item.audit:matches(.test-case, .test-group):not(.manager-active) > .status:hover > img): Deleted.
+        (.tree-outline .item.audit > .status:not(:hover) > img.show-on-hover, .tree-outline .item.audit.test-group.expanded:not(.editing-audits) > .status:not(:hover)): Deleted.
+        (.tree-outline .item.audit.manager-active > .status > img.show-on-hover, .tree-outline .item.audit.test-group.expanded:not(.editing-audits) > .status:hover > :not(img), .tree-outline .item.audit.test-group-result.expanded > .status): Deleted.
+        Hide unsupported tests unless in edit mode, where they are greyed out and cannot be enabled.
+        Drive-by: only allow tests to be deleted when in edit mode.
+
+        * UserInterface/Views/AuditNavigationSidebarPanel.js:
+        (WI.AuditNavigationSidebarPanel.prototype._treeSelectionDidChange):
+
+        * Localizations/en.lproj/localizedStrings.js:
+
 2019-01-24  Joseph Pecoraro  <pecoraro@apple.com>
 
         Web Inspector: CPU Usage Timeline

diff --git a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
@@ -954,6 +954,7 @@ localizedStrings["These are all of the different types of data that can be retur
 localizedStrings["These tests serve as a demonstration of the functionality and structure of audits."] = "These tests serve as a demonstration of the functionality and structure of audits.";
 localizedStrings["This action causes no visual change"] = "This action causes no visual change";
 localizedStrings["This action moves the path outside the visible area"] = "This action moves the path outside the visible area";
+localizedStrings["This audit is not supported"] = "This audit is not supported";
 localizedStrings["This is an example of how errors are shown. The error was thrown manually, but execution errors will appear in the same way."] = "This is an example of how errors are shown. The error was thrown manually, but execution errors will appear in the same way.";
 localizedStrings["This is an example of how result DOM nodes are shown. It will pass with all elements with an id attribute."] = "This is an example of how result DOM nodes are shown. It will pass with all elements with an id attribute.";
 localizedStrings["This is an example of how result DOM nodes are shown. It will pass with the <body> element."] = "This is an example of how result DOM nodes are shown. It will pass with the <body> element.";

diff --git a/Source/WebInspectorUI/UserInterface/Models/AuditTestBase.js b/Source/WebInspectorUI/UserInterface/Models/AuditTestBase.js
@@ -25,10 +25,11 @@
 
 WI.AuditTestBase = class AuditTestBase extends WI.Object
 {
-    constructor(name, {description, disabled} = {})
+    constructor(name, {description, supports, disabled} = {})
     {
         console.assert(typeof name === "string");
         console.assert(!description || typeof description === "string");
+        console.assert(supports === undefined || typeof supports === "number");
         console.assert(disabled === undefined || typeof disabled === "boolean");
 
         super();
@@ -38,6 +39,18 @@ WI.AuditTestBase = class AuditTestBase extends WI.Object
 
         this._name = name;
         this._description = description || null;
+        this._supports = supports;
+
+        this._supported = true;
+        if (typeof this._supports === "number") {
+            if (this._supports > WI.AuditTestBase.Version)
+                this._supported = false;
+            else if (InspectorBackend.domains.Audit && this._supports > InspectorBackend.domains.Audit.VERSION)
+                this._supported = false;
+        }
+
+        if (!this.supported)
+            disabled = true;
 
         this._runningState = disabled ? WI.AuditManager.RunningState.Disabled : WI.AuditManager.RunningState.Inactive;
         this._result = null;
@@ -50,6 +63,18 @@ WI.AuditTestBase = class AuditTestBase extends WI.Object
     get runningState() { return this._runningState; }
     get result() { return this._result; }
 
+    get supported()
+    {
+        return this._supported;
+    }
+
+    set supported(supported)
+    {
+        this._supported = supported;
+        if (!this._supported)
+            this.disabled = true;
+    }
+
     get disabled()
     {
         return this._runningState === WI.AuditManager.RunningState.Disabled;
@@ -61,6 +86,9 @@ WI.AuditTestBase = class AuditTestBase extends WI.Object
         if (this._runningState !== WI.AuditManager.RunningState.Disabled && this._runningState !== WI.AuditManager.RunningState.Inactive)
             return;
 
+        if (!this.supported)
+            disabled = true;
+
         let runningState = disabled ? WI.AuditManager.RunningState.Disabled : WI.AuditManager.RunningState.Inactive;
         if (runningState === this._runningState)
             return;
@@ -77,6 +105,8 @@ WI.AuditTestBase = class AuditTestBase extends WI.Object
         if (this.disabled)
             return;
 
+        console.assert(this.supported);
+
         console.assert(WI.auditManager.runningState === WI.AuditManager.RunningState.Active);
 
         console.assert(this._runningState === WI.AuditManager.RunningState.Inactive);
@@ -99,6 +129,8 @@ WI.AuditTestBase = class AuditTestBase extends WI.Object
         if (this.disabled)
             return;
 
+        console.assert(this.supported);
+
         console.assert(WI.auditManager.runningState === WI.AuditManager.RunningState.Stopping);
 
         if (this._runningState !== WI.AuditManager.RunningState.Active)
@@ -134,6 +166,8 @@ WI.AuditTestBase = class AuditTestBase extends WI.Object
         };
         if (this._description)
             json.description = this._description;
+        if (typeof this._supports === "number")
+            json.supports = this._supports;
         if (key === WI.ObjectStore.toJSONSymbol)
             json.disabled = this.disabled;
         return json;
@@ -147,6 +181,9 @@ WI.AuditTestBase = class AuditTestBase extends WI.Object
     }
 };
 
+// Keep this in sync with Inspector::Protocol::Audit::VERSION.
+WI.AuditTestBase.Version = 1;
+
 WI.AuditTestBase.Event = {
     Completed: "audit-test-base-completed",
     DisabledChanged: "audit-test-base-disabled-changed",

diff --git a/Source/WebInspectorUI/UserInterface/Models/AuditTestCase.js b/Source/WebInspectorUI/UserInterface/Models/AuditTestCase.js
@@ -41,7 +41,7 @@ WI.AuditTestCase = class AuditTestCase extends WI.AuditTestBase
         if (typeof payload !== "object" || payload === null)
             return null;
 
-        let {type, name, test, description, disabled} = payload;
+        let {type, name, test, description, supports, disabled} = payload;
 
         if (type !== WI.AuditTestCase.TypeIdentifier)
             return null;
@@ -55,6 +55,8 @@ WI.AuditTestCase = class AuditTestCase extends WI.AuditTestBase
         let options = {};
         if (typeof description === "string")
             options.description = description;
+        if (typeof supports === "number")
+            options.supports = supports;
         if (typeof disabled === "boolean")
             options.disabled = disabled;
 
@@ -279,7 +281,4 @@ WI.AuditTestCase = class AuditTestCase extends WI.AuditTestBase
     }
 };
 
-// Keep this in sync with Inspector::Protocol::Audit::VERSION.
-WI.AuditTestCase.Version = 1;
-
 WI.AuditTestCase.TypeIdentifier = "test-case";
diff --git a/Source/WebInspectorUI/UserInterface/Models/AuditTestGroup.js b/Source/WebInspectorUI/UserInterface/Models/AuditTestGroup.js
@@ -38,14 +38,25 @@ WI.AuditTestGroup = class AuditTestGroup extends WI.AuditTestBase
         this._tests = tests;
         this._preventDisabledPropagation = false;
 
-        if (disabled)
-            this.disabled = disabled;
+        if (disabled || !this.supported)
+            this.disabled = true;
+
+        let hasSupportedTest = false;
 
         for (let test of this._tests) {
+            if (!this.supported)
+                test.supported = false;
+            else if (test.supported)
+                hasSupportedTest = true;
+
             test.addEventListener(WI.AuditTestBase.Event.Completed, this._handleTestCompleted, this);
             test.addEventListener(WI.AuditTestBase.Event.DisabledChanged, this._handleTestDisabledChanged, this);
             test.addEventListener(WI.AuditTestBase.Event.Progress, this._handleTestProgress, this);
+
         }
+
+        if (!hasSupportedTest)
+            this.supported = false;
     }
 
     // Static
@@ -55,7 +66,7 @@ WI.AuditTestGroup = class AuditTestGroup extends WI.AuditTestBase
         if (typeof payload !== "object" || payload === null)
             return null;
 
-        let {type, name, tests, description, disabled} = payload;
+        let {type, name, tests, description, supports, disabled} = payload;
 
         if (type !== WI.AuditTestGroup.TypeIdentifier)
             return null;
@@ -84,6 +95,8 @@ WI.AuditTestGroup = class AuditTestGroup extends WI.AuditTestBase
         let options = {};
         if (typeof description === "string")
             options.description = description;
+        if (typeof supports === "number")
+            options.supports = supports;
         if (typeof disabled === "boolean")
             options.disabled = disabled;
 
@@ -94,6 +107,19 @@ WI.AuditTestGroup = class AuditTestGroup extends WI.AuditTestBase
 
     get tests() { return this._tests; }
 
+    get supported()
+    {
+        return super.supported;
+    }
+
+    set supported(supported)
+    {
+        for (let test of this._tests)
+            test.supported = supported;
+
+        super.supported = supported;
+    }
+
     get disabled()
     {
         return super.disabled;

diff --git a/Source/WebInspectorUI/UserInterface/Views/AuditNavigationSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/AuditNavigationSidebarPanel.js
@@ -294,7 +294,6 @@ WI.AuditNavigationSidebarPanel = class AuditNavigationSidebarPanel extends WI.Na
             return;
         }
 
-        console.assert(!WI.auditManager.editing);
         if (WI.auditManager.editing)
             return;
 

diff --git a/Source/WebInspectorUI/UserInterface/Views/AuditTreeElement.css b/Source/WebInspectorUI/UserInterface/Views/AuditTreeElement.css
@@ -35,24 +35,36 @@
     height: 100%;
 }
 
-.tree-outline .item.audit:matches(.test-case, .test-group):not(.manager-active) > .status:hover > img {
+.tree-outline .item.audit:matches(.test-case, .test-group):not(.unsupported, .manager-active) > .status:hover > img {
     width: 75%;
     height: 75%;
     margin: 0 auto;
     content: url(../Images/AuditStart.svg) !important;
 }
 
 .tree-outline .item.audit > .status:not(:hover) > img.show-on-hover,
-.tree-outline .item.audit.test-group.expanded:not(.editing-audits) > .status:not(:hover) {
+.tree-outline .item.audit.test-group.expanded:not(.unsupported, .editing-audits) > .status:not(:hover) {
     opacity: 0;
 }
 
 .tree-outline .item.audit.manager-active > .status > img.show-on-hover,
 .tree-outline .item.audit.test-group.expanded:not(.editing-audits) > .status:hover > :not(img),
-.tree-outline .item.audit.test-group-result.expanded > .status {
+.tree-outline .item.audit.test-group-result.expanded > .status,
+.tree-outline .item.audit.unsupported + .children .item.audit.unsupported  > .status > img {
     display: none;
 }
 
+.tree-outline .item.audit.unsupported:not(.selected) > :matches(.icon, .titles) {
+    opacity: 0.5;
+}
+
+.tree-outline .item.audit.unsupported > .status > img {
+    width: 75%;
+    height: 75%;
+    margin: 0 auto;
+    content: url(../Images/Warning.svg);
+}
+
 .tree-outline .item.audit > .status > img.pass {
     content: url(../Images/AuditTestPass.svg);
 }