ヘッダー行の配色を調整し、正常終了時も注記を出す

- ヘッダー行・caption・ボタンがどれも似た薄い灰色で埋没していたため、
  ヘッダー行をコード部分よりひと段暗く(#e6e6e6)し、caption タブは
  コード部分と同じ色(#f2f2f2)で「下とつながったタブ」に、RUN/COPY は
  白背景+枠線(opacity 廃止)でボタンとして浮き上がらせる
- 出力が空のサンプルだと実行が終わったのかわからないため、正常終了時も
  「(正常終了しました)」を出力欄の末尾に追記する(DONE_NOTE)

Author: znz

test/js/test_run.mjs

@@ -8,7 +8,7 @@
 // importing either file here never touches a real DOM/Worker.
 import {
   createOnceLoader, formatRunError, truncateOutput,
-  accumulateOutput, STOPPED_NOTE, timeoutNote, editableText,
+  accumulateOutput, STOPPED_NOTE, DONE_NOTE, timeoutNote, editableText,
 } from '../../theme/default/js/run.js'
 import { PRELUDE, formatRunError as formatWorkerRunError } from '../../theme/default/js/run-worker.js'
 
@@ -115,8 +115,11 @@ assert(accumulateOutput('', 'first') === 'first',
          'accumulateOutput drops further chunks once truncated')
 }
 
-// STOPPED_NOTE / timeoutNote: the notes appended to output on STOP / timeout
+// STOPPED_NOTE / DONE_NOTE / timeoutNote: the notes appended to the output
+// on STOP / normal completion / timeout
 assert(STOPPED_NOTE === '(停止しました)', 'STOPPED_NOTE is the stop notice')
+assert(DONE_NOTE === '(正常終了しました)',
+       'DONE_NOTE marks a normal completion (visible even with empty output)')
 assert(timeoutNote(30) === '(30秒でタイムアウトしました)',
        'timeoutNote formats the configured timeout in seconds')
 

theme/default/js/run.js

@@ -67,6 +67,9 @@ export function accumulateOutput(current, chunk, limit = OUTPUT_LIMIT) {
 }
 
 export const STOPPED_NOTE = '(停止しました)'
+// 出力が空のサンプルでも実行が終わったことがわかるように、
+// 正常終了時も必ずこの注記を出力欄の末尾に付ける
+export const DONE_NOTE = '(正常終了しました)'
 export function timeoutNote(seconds) {
   return `(${seconds}秒でタイムアウトしました)`
 }
@@ -303,6 +306,7 @@ function setupBlock(pre, runner) {
       if (message.type === 'output') {
         setOutputText(accumulateOutput(outputTextNode.data, message.text))
       } else if (message.type === 'done') {
+        appendNote(DONE_NOTE)
         finish(out, 'RUN', false)
       } else if (message.type === 'error') {
         appendNote(message.message)

theme/default/style.css

@@ -138,15 +138,17 @@ pre {
 }
 
 
-/* pre の直前に密着するヘッダー行(script.js が生成)。pre と同じ背景色で
-   コードブロックと一体に見せる(白い帯として浮くと、コードの上の隙間が
-   広く見える)。左端に caption のタブ、右端に RUN/COPY のボタン群を置く */
+/* pre の直前に密着するヘッダー行(script.js が生成)。コード部分より
+   ひと段暗い背景でコードブロックと一体に見せつつ(白い帯として浮くと、
+   コードの上の隙間が広く見える)、コード部分と同色の caption タブや
+   白背景のボタンが埋没しないようにする。左端に caption のタブ、右端に
+   RUN/COPY のボタン群を置く */
 .highlight__toolbar {
   display: flex;
   align-items: flex-end;
   margin: 1em 0 0;
   padding: 0.25em 0.25em 0 0.25em;
-  background-color: #f2f2f2;
+  background-color: #e6e6e6;
 }
 .highlight__toolbar + pre {
   margin-top: 0;
@@ -173,25 +175,24 @@ pre {
   user-select: none;
 }
 
-/* for RUN (js/run.js, statichtml --run-ruby-wasm) */
+/* for RUN (js/run.js, statichtml --run-ruby-wasm)。
+   ヘッダー行の灰色に埋没しないよう、白背景+枠線でボタンらしくする */
 .highlight__run-button {
   margin: 0 0.5em 0.25em 0;
   padding: 0.25em 0.5em;
-  background-color: #DDD;
-  opacity: 0.75;
+  background-color: #fff;
   cursor: pointer;
-  border: 0;
+  border: 1px solid #999;
   border-radius: 4px;
   font: inherit;
 }
 .highlight__run-button:hover {
   background-color: #EE8;
-  opacity: 1;
 }
 .highlight__run-button[disabled] {
   background-color: #070;
+  border-color: #070;
   color: white;
-  opacity: 1;
   cursor: wait;
 }
 .highlight__run-output {
@@ -217,25 +218,25 @@ pre.highlight.ruby[data-editing="true"] > code:focus {
   outline: none;
 }
 
-/* for COPY(highlight__button-group の中に入る) */
+/* for COPY(highlight__button-group の中に入る)。RUN と同じ見た目 */
 .highlight__copy-button {
   display: inline-block;
   margin-bottom: 0.25em;
   padding: 0.25em 0.5em;
-  background: #DDD;
-  opacity: 0.75;
+  background: #fff;
   cursor: pointer;
+  border: 1px solid #999;
   border-radius: 4px;
 }
 .highlight__copy-button:hover {
   background: #EE8;
-  opacity: 1;
 }
 .highlight__copy-button::after {
   content: "COPY"
 }
 .highlight__copy-button.copied {
   background: #070;
+  border-color: #070;
   color: white;
 }
 .highlight__copy-button.copied::after {
@@ -247,11 +248,13 @@ pre.highlight.ruby[data-editing="true"] > code:focus {
 }
 
 /* サンプルコードのキャプション。pre の上に密着したタブとして表示する
-   (上だけ角丸でタブらしく)。script.js がツールバー行の左端に取り込む */
+   (上だけ角丸でタブらしく)。script.js がツールバー行の左端に取り込む。
+   下のコード部分と同じ背景色にして「つながったタブ」に見せる(ヘッダー
+   行のほうがひと段暗いので埋没しない) */
 .caption {
     display: inline-block;
     padding: 0.2em 0.5em;
-    background: #ddd;
+    background: #f2f2f2;
     margin: 1em 0 0;
     border-radius: 6px 6px 0 0;
 }