diff --git a/README.md b/README.md index abde6cf3f..8aee3d670 100644 --- 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. diff --git a/static/compiler-service.interfaces.ts b/static/compiler-service.interfaces.ts index 000218e28..c9e75e81a 100644 --- 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, diff --git a/static/compiler-service.ts b/static/compiler-service.ts index ac4bb90ad..514c4d86a 100644 --- 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); diff --git a/static/panes/compiler.ts b/static/panes/compiler.ts index 31218fb9c..de1049f7f 100644 --- a/static/panes/compiler.ts +++ b/static/panes/compiler.ts @@ -1603,7 +1603,6 @@ export class Compiler extends MonacoPane 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 MonacoPaneYou can configure icon animations in Settings>Compilation\n'; this.prependOptions.popover('dispose'); this.prependOptions.popover({ - content: content || 'No options in use', + content: + warnings.map(w => `
${w}
`).join('\n') + + '\n' + + (warnings.length > 0 ? infoLine : '') + + _.escape(content || 'No options in use') + + `\n
`, + html: true, template: '', }); + + // 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) { diff --git a/static/panes/executor.ts b/static/panes/executor.ts index 48c6eacbd..926b220d4 100644 --- a/static/panes/executor.ts +++ b/static/panes/executor.ts @@ -1227,6 +1227,7 @@ export class Executor extends Pane { 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 { .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); diff --git a/static/settings.ts b/static/settings.ts index 6f6dedaf4..bd0ec671c 100644 --- 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], diff --git a/static/styles/explorer.scss b/static/styles/explorer.scss index f52b3bf5c..4a8f3c5c0 100644 --- 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; + } +} diff --git a/static/styles/themes/dark-theme.scss b/static/styles/themes/dark-theme.scss index f81eb0eeb..fa1eaa78d 100644 --- 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); + } + } +} diff --git a/static/styles/themes/default-theme.scss b/static/styles/themes/default-theme.scss index 59e9275f4..34974e22c 100644 --- 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); + } + } +} diff --git a/static/styles/themes/pink-theme.scss b/static/styles/themes/pink-theme.scss index 8b5fd37f2..3417c0711 100644 --- 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); + } + } +} diff --git a/views/popups/settings.pug b/views/popups/settings.pug index ca28e978f..521238d07 100644 --- 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