Better compiler argument warnings handling (#5076)

The goal of this PR is to display any warnings about compiler arguments, e.g. the warning about -march=native, somewhere else instead of a toast notification every time. Feature requested on discord. ![image](https://github.com/compiler-explorer/compiler-explorer/assets/51220084/40a0c670-b2bb-4fae-b98d-937dbeb7d2e6) ![Animation](https://github.com/compiler-explorer/compiler-explorer/assets/51220084/43575608-daa6-487d-9ef9-ca04bdd38a38) ![image](https://github.com/compiler-explorer/compiler-explorer/assets/51220084/551e26e5-1e4f-4802-a68a-fb63e0e5e415) --------- Co-authored-by: Matt Godbolt <matt@godbolt.org>
2025-12-27 07:04:04 -05:00 · 2023-05-30 22:18:09 -04:00
parent 0bc22f8883
commit edcacc0272
11 changed files with 169 additions and 25 deletions
--- a/README.md
+++ b/README.md
@@ -7,9 +7,9 @@

 **Compiler Explorer** is an interactive compiler exploration website. Edit code in C, C++, C#, F#, Rust, Go, D, Haskell,
 Swift, Pascal, [ispc](https://ispc.github.io/), Python, Java, or any of the other
-[30+ supported languages](https://godbolt.org/api/languages), and see how that code looks after being compiled in
-real time. Multiple compilers are supported for each language, many different tools and visualizations are available,
-and the UI layout is configurable (thanks to [GoldenLayout](https://www.golden-layout.com/)).
+[30+ supported languages](https://godbolt.org/api/languages), and see how that code looks after being compiled in real
+time. Multiple compilers are supported for each language, many different tools and visualizations are available, and the
+UI layout is configurable (thanks to [GoldenLayout](https://www.golden-layout.com/)).

 Try out at [godbolt.org](https://godbolt.org), or [run your own local instance](#running-a-local-instance).

@@ -133,5 +133,5 @@ We would also like to specially thank these people for their contributions to **
 - [Joshua Sheard](https://github.com/jsheard)
 - [Andrew Pardoe](https://github.com/AndrewPardoe)

-Many [amazing sponsors](https://godbolt.org/#sponsors), both individuals and companies, have helped fund and
-promote Compiler Explorer.
+Many [amazing sponsors](https://godbolt.org/#sponsors), both individuals and companies, have helped fund and promote
+Compiler Explorer.
--- a/static/compiler-service.interfaces.ts
+++ b/static/compiler-service.interfaces.ts
@@ -22,6 +22,9 @@
 // ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 // POSSIBILITY OF SUCH DAMAGE.

+// TODO(jeremy-rifkin): Use the enum names rather than underlying values in compiler-service.ts and the
+// compiler/executer panes
+
 export enum CompilationStatusCode {
    NONE = 0,
    OK = 1,
--- a/static/compiler-service.ts
+++ b/static/compiler-service.ts
@@ -423,8 +423,7 @@ export class CompilerService {
                .addClass('status-icon fas')
                .css('color', this.getColor(status))
                .toggle(status.code !== 0)
-                .prop('aria-label', this.getAriaLabel(status))
-                .prop('data-status', status.code)
+                .attr('aria-label', this.getAriaLabel(status))
                .toggleClass('fa-spinner fa-spin', status.code === 4)
                .toggleClass('fa-times-circle', status.code === 3)
                .toggleClass('fa-check-circle', status.code === 1 || status.code === 2);
--- a/static/panes/compiler.ts
+++ b/static/panes/compiler.ts
@@ -1603,7 +1603,6 @@ export class Compiler extends MonacoPane<monaco.editor.IStandaloneCodeEditor, Co
            });
        }

-        this.handleCompilationStatus(CompilerService.calculateStatusIcon(result));
        this.outputTextCount.text(stdout.length);
        this.outputErrorCount.text(stderr.length);
        if (this.isOutputOpened || (stdout.length === 0 && stderr.length === 0)) {
@@ -1682,8 +1681,12 @@ export class Compiler extends MonacoPane<monaco.editor.IStandaloneCodeEditor, Co

        this.updateButtons();

-        this.checkForUnwiseArguments(result.compilationOptions, wasCmake ?? false);
-        this.setCompilationOptionsPopover(result.compilationOptions ? result.compilationOptions.join(' ') : '');
+        this.handleCompilationStatus(CompilerService.calculateStatusIcon(result));
+        const warnings = this.checkForUnwiseArguments(result.compilationOptions, wasCmake ?? false);
+        this.setCompilationOptionsPopover(
+            result.compilationOptions ? result.compilationOptions.join(' ') : '',
+            warnings,
+        );

        this.checkForHints(result);

@@ -2365,7 +2368,7 @@ export class Compiler extends MonacoPane<monaco.editor.IStandaloneCodeEditor, Co
        this.fullCompilerName = this.domRoot.find('.full-compiler-name');
        this.fullTimingInfo = this.domRoot.find('.full-timing-info');
        this.compilerLicenseButton = this.domRoot.find('.compiler-license');
-        this.setCompilationOptionsPopover(this.compiler ? this.compiler.options : null);
+        this.setCompilationOptionsPopover(this.compiler ? this.compiler.options : null, []);

        this.initFilterButtons();

@@ -2946,8 +2949,8 @@ export class Compiler extends MonacoPane<monaco.editor.IStandaloneCodeEditor, Co
        }
    }

-    checkForUnwiseArguments(optionsArray: string[] | undefined, wasCmake: boolean): void {
-        if (!this.compiler) return;
+    checkForUnwiseArguments(optionsArray: string[] | undefined, wasCmake: boolean) {
+        if (!this.compiler) return [];

        if (!optionsArray) optionsArray = [];

@@ -2964,19 +2967,17 @@ export class Compiler extends MonacoPane<monaco.editor.IStandaloneCodeEditor, Co
        const are = unwiseOptions.length === 1 ? ' is ' : ' are ';
        const msg = options + names + are + 'not recommended, as behaviour might change based on server hardware.';

+        const warnings: string[] = [];
+
        if (optionsArray.some(opt => opt === '-flto') && !this.filters.isSet('binary') && !wasCmake) {
-            this.alertSystem.notify('Option -flto is being used without Compile to Binary.', {
-                group: 'unwiseOption',
-                collapseSimilar: true,
-            });
+            warnings.push('Option -flto is being used without Compile to Binary.');
        }

        if (unwiseOptions.length > 0) {
-            this.alertSystem.notify(msg, {
-                group: 'unwiseOption',
-                collapseSimilar: true,
-            });
+            warnings.push(msg);
        }
+
+        return warnings;
    }

    updateCompilerInfo(): void {
@@ -3258,16 +3259,37 @@ export class Compiler extends MonacoPane<monaco.editor.IStandaloneCodeEditor, Co
        }
    }

-    setCompilationOptionsPopover(content: string | null): void {
+    setCompilationOptionsPopover(content: string | null, warnings: string[]): void {
+        const infoLine =
+            '<div class="compiler-arg-warning info">You can configure icon animations in Settings>Compilation</div>\n';
        this.prependOptions.popover('dispose');
        this.prependOptions.popover({
-            content: content || 'No options in use',
+            content:
+                warnings.map(w => `<div class="compiler-arg-warning">${w}</div>`).join('\n') +
+                '\n' +
+                (warnings.length > 0 ? infoLine : '') +
+                _.escape(content || 'No options in use') +
+                `\n<div class="compiler-arg-warning-shake-setting"></div>`,
+            html: true,
            template:
                '<div class="popover' +
                (content ? ' compiler-options-popover' : '') +
                '" role="tooltip"><div class="arrow"></div>' +
                '<h3 class="popover-header"></h3><div class="popover-body"></div></div>',
        });
+
+        // TODO: Kind of redundant with compiler-service's handleCompilationStatus and overriding what that function
+        // does. I hate that the logic is spread out like this. Definitely in need of a refactor.
+        if (warnings.length > 0) {
+            this.statusIcon
+                .removeClass()
+                .addClass(
+                    'status-icon fa-solid fa-triangle-exclamation compiler-arg-warning-icon' +
+                        (this.settings.shakeStatusIconOnWarnings ? ' shake' : ''),
+                )
+                .css('color', '')
+                .attr('aria-label', 'There are warnings about the compiler arguments that have been provided');
+        }
    }

    setCompilerVersionPopover(version?: {version: string; fullVersion?: string}, notification?: string[] | string) {
--- a/static/panes/executor.ts
+++ b/static/panes/executor.ts
@@ -1227,6 +1227,7 @@ export class Executor extends Pane<ExecutorState> {
        return '#FF1212';
    }

+    // TODO: Duplicate with compiler-service.ts?
    handleCompilationStatus(status: CompilationStatus): void {
        // We want to do some custom styles for the icon, so we don't pass it here and instead do it later
        CompilerService.handleCompilationStatus(this.statusLabel, null, {compilerOut: 0, ...status});
@@ -1237,8 +1238,7 @@ export class Executor extends Pane<ExecutorState> {
                .addClass('status-icon fas')
                .css('color', this.color(status))
                .toggle(status.code !== 0)
-                .prop('aria-label', this.ariaLabel(status))
-                .prop('data-status', status.code)
+                .attr('aria-label', this.ariaLabel(status))
                .toggleClass('fa-spinner fa-spin', status.code === 4)
                .toggleClass('fa-times-circle', status.code !== 4 && !status.didExecute)
                .toggleClass('fa-check-circle', status.code !== 4 && status.didExecute);
--- a/static/settings.ts
+++ b/static/settings.ts
@@ -58,6 +58,7 @@ export interface SiteSettings {
    editorsFFont: string;
    editorsFLigatures: boolean;
    executorCompileOnChange: boolean;
+    shakeStatusIconOnWarnings: boolean;
    defaultFontScale?: number; // the font scale widget can check this setting before the default has been populated
    formatBase: FormatBase;
    formatOnCompile: boolean;
@@ -273,6 +274,7 @@ export class Settings {
            ['.enableCtrlStree', 'enableCtrlStree', true],
            ['.enableSharingPopover', 'enableSharingPopover', true],
            ['.executorCompileOnChange', 'executorCompileOnChange', true],
+            ['.shakeStatusIconOnWarnings', 'shakeStatusIconOnWarnings', true],
            ['.formatOnCompile', 'formatOnCompile', false],
            ['.hoverShowAsmDoc', 'hoverShowAsmDoc', true],
            ['.hoverShowSource', 'hoverShowSource', true],
--- a/static/styles/explorer.scss
+++ b/static/styles/explorer.scss
@@ -1302,3 +1302,57 @@ html[data-theme='pink'] {
    overflow: hidden;
    max-height: 100%;
 }
+
+// shamelessly stolen from https://css-tricks.com/snippets/css/shake-css-keyframe-animation/
+@keyframes shake {
+    10%, 90% {
+        transform: translate3d(calc(var(--shake-amount) * -25%), 0, 0);
+    }
+
+    20%, 80% {
+        transform: translate3d(calc(var(--shake-amount) * 50%), 0, 0);
+    }
+
+    30%, 50%, 70% {
+        transform: translate3d(calc(var(--shake-amount) * -1), 0, 0);
+    }
+
+    40%, 60% {
+        transform: translate3d(var(--shake-amount), 0, 0);
+    }
+}
+
+.shake {
+    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
+    transform: translate3d(0, 0, 0);
+}
+
+.compiler-arg-warning-icon {
+    --shake-amount: 2px;
+}
+
+.compiler-arg-warning {
+    $sidebar-width: 20px;
+    $border-width: 2px;
+    margin-left: $sidebar-width;
+    position: relative;
+    border: $border-width solid;
+    padding: 0 5px;
+    margin-bottom: 5px;
+    &:before {
+        position: absolute;
+        top: -$border-width;
+        left: -$sidebar-width;
+        width: $sidebar-width;
+        height: calc(100% + 2 * $border-width);
+        border: $border-width solid;
+        content: "\f071";
+        color: #292726;
+        font-family: "Font Awesome 6 Free";
+        font-weight: 900;
+        text-align: center;
+    }
+    &:first-child {
+        margin-top: 5px;
+    }
+}
--- a/static/styles/themes/dark-theme.scss
+++ b/static/styles/themes/dark-theme.scss
@@ -663,3 +663,24 @@ textarea.form-control {
        }
    }
 }
+
+.compiler-arg-warning-icon {
+    color: #ffbf3f !important;
+}
+
+.compiler-arg-warning {
+    border-color: #ffbf3f;
+    &:before {
+        border-color: #ffbf3f;
+        background: #ffbf3f;
+    }
+    &.info {
+        border-color: #3f92ff;
+        &:before {
+            border-color: #3f92ff;
+            background: #3f92ff;
+            content: "\f05a";
+            color: rgb(20, 21, 22);
+        }
+    }
+}
--- a/static/styles/themes/default-theme.scss
+++ b/static/styles/themes/default-theme.scss
@@ -447,3 +447,24 @@ div.argmenuitem span.argdescription {
        }
    }
 }
+
+.compiler-arg-warning-icon {
+    color: #ff6a10 !important;
+}
+
+.compiler-arg-warning {
+    border-color: #ff6a10;
+    &:before {
+        border-color: #ff6a10;
+        background: #ff6a10;
+    }
+    &.info {
+        border-color: #3f92ff;
+        &:before {
+            border-color: #3f92ff;
+            background: #3f92ff;
+            content: "\f05a";
+            color: rgb(20, 21, 22);
+        }
+    }
+}
--- a/static/styles/themes/pink-theme.scss
+++ b/static/styles/themes/pink-theme.scss
@@ -688,3 +688,24 @@ textarea.form-control {
        }
    }
 }
+
+.compiler-arg-warning-icon {
+    color: #f22 !important;
+}
+
+.compiler-arg-warning {
+    border-color: #f22;
+    &:before {
+        border-color: #f22;
+        background: #f22;
+    }
+    &.info {
+        border-color: #3f92ff;
+        &:before {
+            border-color: #3f92ff;
+            background: #3f92ff;
+            content: "\f05a";
+            color: rgb(20, 21, 22);
+        }
+    }
+}
--- a/views/popups/settings.pug
+++ b/views/popups/settings.pug
@@ -109,5 +109,6 @@ mixin input(cls, type, text, style)
                    b 3s
                +checkbox("formatOnCompile", "Enable formatting on compilation (for supported languages)")
                +checkbox("executorCompileOnChange", "Compile executor automatically when arguments change")
+                +checkbox("shakeStatusIconOnWarnings", "Shake the status icon on argument warnings")
      .modal-footer
        button.btn.btn-outline-primary(type="button" data-dismiss="modal") Close